preface

If your understanding of prototypes and prototype chains is still at a very shallow and ambiguous stage, you may want to take a look at my article, it should be helpful to you, if you have a bit of help, please like, comment and retweet. If you have any questions or doubts, please leave a message in the comment section, and I will reply to you as soon as possible. If you think there is any knowledge point wrong in my article, PLEASE kindly inform me. It is fatal for our industry to understand the wrong things in pairs.

Although often brush before prototype of interview questions, but always stay in a very shallow, stage of knowledge ambiguity, and often forget (this believe that everyone in the same way, ha, ha, ha), while the last day of the New Year’s day holiday (finally touched the keyboard), followed by b standing under a video over the relevant knowledge, finally have a whole understanding on the issue. Here is an arrangement and induction.

Purr purr, the ape here swear, the next week, no matter how busy, all need to review this article, otherwise nuggets forever smoke bug 😣😣😣.

So let’s see what the correspondence is

Prototype: __proto__

  1. affiliation
    • prototype: a property of the function -> Do not think too complicated, in fact, is a normal object {}
    • __proto__: a property on an object -> Don’t get too complicated, just a normal object {}
  2. The object’s__proto__Holds the constructor of the objectprototype
  3. Functions are special objects so__proto__It also exists on the function, and it’s afunction

Object is a method (constructor) and New Object is an instance Object!!

console.log(Object) //typeof Object ==='function'
console.log(new Object) //typeof new Object ==='object'
Copy the code

constructor

Constructor is the constructor that instantiates an object

Constructor -> instantiate the test object's constructor, test
console.log(test.constructor===Test) //true

// There is no end to calling itself.
console.log(test.constructor.prototype.constructor===Test) //true
console.log(test.constructor.prototype.constructor.prototype.constructor===Test) //true
//constructor allows changes
function Test2() {
    this.a=123
}
test.constructor=Test2
console.log(test)
Copy the code

The prototype

function Test(){}
let test=new Test() // Test is an instance object after new
console.log(test.__proto__===Test.prototype) // The result is true
//Test. Prototype is also an object, so it must also have __proto__
// prototype.__proto__ has reached its destination, and the destination is the Object constructor
console.log(Test.prototype.__proto__.constructor===Object)
// The following result is also true according to the above rules and the above result
console.log(Test.prototype.__proto__===Object.prototype) // 
// The destination is null
console.log(Object.prototype.__proto__) //null 
Copy the code

Can you describe the prototype chain

__proto__ holds the constructor’s prototype, which in turn is an Object, has its own __proto__, and so returns to object.__proto__. This forms a chain of prototype objects with __proto__ as the link point (key) and __proto__ as the constructor.

//__proto__
test{
      b:333.a:1.__proto__:Test.prototype={
          c:222.b:2.__proto__:Object.prototype={
              c:3.__proto__:null}}}Copy the code

A special function object

Key: JS, function is a special object!!

Remember the correspondence table at the beginning of the article

// Functions are special objects so __proto__ exists and is a function
console.log(Test.__proto__) //function
console.log(Test.prototype) //object
Copy the code

Test is a Function, so it must be implemented by new Function

// The object's __proto__ holds the prototype of its constructor
console.log(Test.__proto__===Function.prototype) //true

const obj={}
const obj2=new Object(a)console.log(Object) //function
console.log(typeof Object) //'function'
Copy the code

Function is a constructor, so it should also have __proto__ and prototype, yes, but there is a special point to remember here.

Function.__proto__=== function. prototype =Function.

// Function test. prototype should be an object.
// prototype is a Function
typeof Test.prototype==='object' //true

console.log(Function.__proto__) / / a function
console.log(Function.prototype) / / a function
//Function _proto__ refers to the prototype of its constructor
//Function.__proto__===Function. Prototype
console.log(Function.__proto__===Function.prototype) //true

//Object is a new Function
console.log(Object.__proto__===Function.prototype) //true

Function.__proto__=== function. prototype The following code works
(Object.__proto__===Function.__proto__)===true
Copy the code

HasOwnProperty and in

hasOwnProperty

HasOwnProperty is used to determine if it is a property of the object itself (not inherited from the prototype chain)

let test={
    a:1.b:2
}
Object.prototype.c=3
console.log(test.hasOwnProperty('a')) //true
console.log(test.hasOwnProperty('b')) //true
console.log(test.hasOwnProperty('c')) //false
Copy the code

in

In is used to check whether an object contains a property (including properties on the stereotype chain)

console.log('a' in test) //true
console.log('b' in test) //true
console.log('c' in test) //true
console.log('toString' in test) //true
console.log('d' in test) //false
Copy the code

reference

Quick understanding of “prototype, prototype chain” MDN started with ISTAO