1. Three ways to create an object

There are three ways to create objects in JavaScript:

(1) Literal

const obj = {};
Copy the code

(2) New keyword

const obj = new Object(a);Copy the code

(3) Constructor mode

function Person(name, age) {
    this.name = name;
    this.age = age;
}
const obj = new Person('Jack'.18);
Copy the code

The process of new

Freshmen became an object
Linking to prototypes
The bindingthis
Return new object

Four things happen during the call to new. You can implement a new yourself:

function create() {
	// Create an empty object
	let obj = new Object(a)// Get the constructor
	let Con = [].shift.call(arguments)
	// Link to the prototype
	obj.__proto__ = Con.prototype
	// Bind this to execute the constructor
	let result = Con.apply(obj, arguments)
	// Make sure new comes out as an object
	return typeof result === 'object' ? result : obj
}
Copy the code

2. Static and instance members

2.1 Static Members

A static member is a member added to the constructor itself. For example, in the following code, sex is a static member that can only be accessed through the constructor

function Obj(uname, age) {
    this.uname = uname;
    this.age = age;
    this.like = function () {
        console.log('I like sports');
    };
}
Obj.sex = 'male';
const usr = new Obj('Jack'.18);
console.log(Obj.sex); // Static members are only accessible through constructors
Copy the code

2.2 Instance Members

Instance members are the members that are added to the constructor through this. For example, in the following code, uname, age, and sing are instance members that can only be accessed through the instantiated object.

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
    this.do = function () {
        console.log('1234');
    };
}
const usr = new Star('Jack'.18);
console.log(usr.uname); // An instance member can only be accessed through the instantiated object
Copy the code

3. The constructor problem

The constructor method is useful, but it wastes memory.

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
    this.do = function () {
        console.log('I can play basketball');
    };
}
const usr1 = new Star('Jack'.18);
const usr2 = new Star('Tom'.19);
Copy the code

4. The constructor prototype`prototype`

The function that the constructor allocates through the prototype is shared by all objects.

JavaScript specifies that each constructor has a Prototype property that points to another object. Note that this prototype is an object whose properties and methods are owned by the constructor.

let fun = Function.prototype.bind()
Copy the code

If you create a function as described above, you can see that the function does not have the Prototype property. {% endnote %}

We can define those immutable methods directly on the Prototype object so that all instances of the object can share them.

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
}
Star.prototype.do = function () {
    console.log('I can play basketball');
};
const usr1 = new Star('Jack'.18);
const usr2 = new Star('Tom'.19);
usr1.do(); // I can play basketball
usr2.do(); // I can play basketball
Copy the code

5. Object prototypes

Objects have a property __proto__ that refers to the constructor’s prototype object. The reason an object can use the properties and methods of the constructor’s prototype object is because the object has a __proto__ prototype.

The __proto__ object is equivalent to the prototype object.

The purpose of the __proto__ object is to provide a direction, or a route, for the object’s lookup mechanism, but it is a nonstandard property. Therefore, it should not be used in actual development.

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
}
Star.prototype.do = function () {
    console.log('I can play basketball');
};
const usr1 = new Star('Jack'.18);
usr1.do(); // I can play basketball
console.log(usr1.__proto__ == Star.prototype); // true
Copy the code

6. Constructor`constructor`

Both object prototypes (__proto__) and constructor objects (prototypes) have a constructor property called constructor because it refers to the constructor itself.

Constructor is primarily used to record which constructor the object refers to, and it can redirect the prototype object to the original constructor.

Note: In general, the methods of an object are set in the prototype object of the constructor. If we have multiple object methods, we can assign values to the prototype object as objects, but this overwrites the original contents of the constructor prototype object, so that the modified prototype object constructor no longer points to the current constructor. At this point, we can add constructor to our modified prototype object to point to the original constructor.

If we modify the original prototype object and assign an object to the prototype object, we must manually use constructor to refer back to the original constructor. For example:

function Star(uname, age) {
    this.uname = uname;
    this.age = age;
}
// In many cases, we need to manually refer back to the original constructor using the constructor attribute
Star.prototype = {
    // If we modify the original stereotype object and assign an object to the stereotype object, we must manually use constructor to refer back to the original constructor
    constructor: Star, // Manual setting refers back to the original constructor
    do: function () {
        console.log('I can play basketball');
    },
    movie: function () {
        console.log('I like going to the movies'); }};const usr1 = new Star('Jack'.18);
console.log(usr1);
Copy the code

If the constructor property is not set, look like this:

7. Triangle relationship between constructor, instance and prototype object

The constructortheprototypeProperty points to the constructorA prototype object
An instance object is created by a constructor__proto__Property points to the constructor’sA prototype object
Constructor of the prototype objectconstructorProperty points toThe constructor.Instance objectstheThe prototypetheconstructorProperties (usr1. __proto__.constructor) also pointed toThe constructor

8. The prototype chain

Each instance object has a __proto__ attribute, which points to the constructor’s prototype object, which is also an object that also has a __proto__ attribute, creating a chain of prototypes.

Prototype chain lookup mechanism:

When you access an object’s properties (including methods), you first look for the object itself.
If not, thenLook for its prototype(i.e.__proto__Point to theprototypePrototype objects).
If not alreadyFinds the prototype of the prototype object(Object).
And so onObjectSo far,null).
__proto__That’s the point of the object prototypeProvides a direction for the object member lookup mechanism“Or a route.

Conclusion:

ObjectIs the father of all objects, all objects can pass__proto__To find it
FunctionIt’s the father of all functions, and all functions can pass__proto__To find it
Function.prototype 和 Object.prototypeAre two special objects that are created by the engine
Except for the above two special objects, all objects pass through the constructornewOut of the
Function of theprototypeIt’s an object, the prototype
The object’s__proto__Pointing to the prototype,__proto__Connecting objects and stereotypes forms a prototype chain

9. In prototype objects`this`Point to the

This in the constructor, and this in the prototype object, both point to the instance object that comes out of new.

function Stu(uname, age) {
    this.uname = uname;
    this.age = age;
    this.sing = function () {
        console.log('This: inside the constructor'.this);
    };
}
Stu.prototype.dance = function () {
    console.log('This: inside the prototype object'.this);
};
const usr1 = new Stu('Jack'.18);
usr1.dance();
usr1.sing();
Copy the code

10. Extend built-in methods for arrays through prototypes

You can add your own method to the prototype object of the array, so that every instance of the array can call that method. In the following example, write an array summation function and add it to the array prototype object. Each array instance can be summed using the sum() method.

Array.prototype.sum = function () {
    let sum = 0;
    for (var i = 0; i < this.length; i++) {
        sum += this[i];
    }
    return sum;
};
// If the array object already has the sum() method, we can use the array.sum () method to sum the data
const arr = [1.2.3.4.5.6.7.8.9.10];
console.log(arr.sum()); / / 55
Copy the code

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

JavaScript constructors and prototype chain parsing | More challenging in August

1. Three ways to create an object

(1) Literal

(2) New keyword

(3) Constructor mode

The process of new

2. Static and instance members

2.1 Static Members

2.2 Instance Members

3. The constructor problem

4. The constructor prototype`prototype`

5. Object prototypes

6. Constructor`constructor`

7. Triangle relationship between constructor, instance and prototype object

8. The prototype chain

9. In prototype objects`this`Point to the

10. Extend built-in methods for arrays through prototypes

JavaScript constructors and prototype chain parsing | More challenging in August

1. Three ways to create an object

(1) Literal

(2) New keyword

(3) Constructor mode

The process of new

2. Static and instance members

2.1 Static Members

2.2 Instance Members

3. The constructor problem

4. The constructor prototypeprototype

5. Object prototypes

6. Constructorconstructor

7. Triangle relationship between constructor, instance and prototype object

8. The prototype chain

9. In prototype objectsthisPoint to the

10. Extend built-in methods for arrays through prototypes

Related Posts

Interview high-frequency topic – written Promise (enclose the complete code) | netease little practice

ECharts Data Visualization: Getting Started, Getting Started and Sharing Advanced Products (GitHub 44.5K)

Ts Indicates the unknown type that does not give up detection

4. The constructor prototype`prototype`

6. Constructor`constructor`

9. In prototype objects`this`Point to the