This is the 16th day of my participation in the August Text Challenge.More challenges in August

👉 Prime not heavy, once a day in the morning. When encouraged in time, time waits for no man. – tao yuanming

preface

Prototype side knowledge occasionally see a single proposition, but more is combined with other JS core knowledge proposition. In this way, the distinction of the topic can be raised as a whole and the basic skills of the candidates can be comprehensively investigated. To deal with such a topic, we should first keep a calm mind, screen out the knowledge points involved in the topic, answer the process of sorting out a clear correct prototype chain, as long as you can calm down to catch the prototype chain, the whole context of the answer is also clear

Let’s look at an example

Prototype foundation + constructor foundation

var A = function() {}; 
A.prototype.n = 1;
var b = new A();
A.prototype = {
    n: 2.m: 3
}

var c = new A();
console.log(b.n);
console.log(b.m);
console.log(c.n);
console.log(c.m);
Copy the code

If you think about it, this is probably the answer that a lot of people would give

2
3
2
3
Copy the code

Drop it into the console and you’ll find the answer:

Why is that? Let’s look at the relationships between several objects in this example:

1. Define archetypal relationships:

The relationship between instance B and A:

The relationship between instance C and A:

2. How constructors work

Why does instance B and instance C behave differently when they inherit from the same prototype

When we use new to create an instance, what does new do? It does these four things:

  • Create a memory space for the new object
  • Refer this inside the function to the memory space created by 1
  • Associate the instance with the prototype object by pointing the _ proto_ attribute of the new object to the prototype attribute of the corresponding constructor
  • Execute the logic inside the function, and eventually the constructor will return the new object for you, even if you don’t return it manually

Constructor of the prototype function when the instance b is created

The prototype of A has been modified. If b had saved A reference, it would have sensed the change.

However, the form of modifying A’s Prototype is not modification in the strict sense, but A re-assignment operation. The essence of this action is to point A’s Prototype to A new JS object. A unilaterally cuts off the relationship with the old prototype, while B still retains the reference to the old prototype. That’s why there’s a difference between B and C.

What if we rewrite b.prototype?

var A = function() {}; 
A.prototype.n = 1;
var b = new A();
b.prototype = {
    n: 2.m: 3
}
console.log(b.prototype.__proto__)

Copy the code

It will point to Object.prototype

Own attributes and stereotype inherited attributes

function A() {
    this.name = 'a'
    this.color = ['green'.'yellow']}function B() {
    
}

B.prototype = new A()

var b1 = new B()
var b2 = new B()

b1.name = 'change'
b1.color.push('black')

console.log(b2.name) // a
console.log(b2.color) // ['green', 'yellow', 'black']
Copy the code

1. Prototype chain diagram

B1.color. push It doesn’t actually change the reference to the object, but merely changes its contents based on the original object. Such as this does not penalize reference-to-change operations, it goes through the prototype chain query + modify process.

Constructor synthesis

function A() {}
function B() {
    this.a = a;
}
function C() {
    if(a) {
        this.a = a
    }
}
A.prototype.a = 1
B.prototype.a = 1
C.prototype.a = 1

console.log(new A().a) // a
console.log(new B().a) // undefined
console.log(new C(2).a) / / 2
Copy the code

  • New A(). A: The constructor logic fears that the __proto__ strength object returned contains A = 1 attribute. When new A().a, the instance object itself does not have A, so it finds A in the prototype along the prototype chain, and outputs 1

  • New B(). A: The constructor creates a property of its own for the instance object unconditionally. The value of this property is based on the value of the object. Here our input parameter is undefined, so a is undefined

  • New C(2). A: The constructor will conditionally create a property of its own for the instance object —– if there is an input parameter a that Boolean determines is not false, then create the corresponding value of a for the instance object; Otherwise, don’t do anything. Here we pass in a 2, so the example outputs a value of 2.