More articles

preface

See a picture on the Internet, said to understand also know the prototype, prototype chain, I also according to the process of the picture looked at, or can be the name of this sentence, I also want to explain the prototype and prototype chain according to this picture

Prototype, prototype chain

In javascript, a function has a prototype property called constructor. This property is called “prototype”. This property is called “constructor”

In js, the object has a ___proto__ attribute, which refers to the prototype. prototype is itself an object, which also has ___proto__. If you look up, you’ll find Obj. Follow this search to form the chain is the prototype chain, with the following demo to explain this sentence

function Test() { }
Test.prototype.age = 18
Object.prototype.name = 'Lao wang'
const test = new Test()
console.log('test', test, test.age, test.name, test.sex)

// Print the result: test test {} 18
// 错 误 : test.__proto__ refers to test.prototype, test.prototype.__ptoto refers to object.prototype
// When querying the age or name attribute of test, we first query whether the instance test itself exists. If it does not exist, we query the prototype object of test
// 若还是没有则向Obj.prototype查找，若还是找不到则为undefined
// This search chain forms the prototype chain
Copy the code

Solutions of the figure

With the prototype in mind, let’s explain the prologue picture in code

  • Constructor Foo
function Foo() {}
// We already implemented the new function in the last section
const f1 = new Foo()

// Foo as a function has the prototype property
// F1 as an object, the constructor is Foo, so f1 has a __proto__ pointing to foo.prototype
console.log(f1.__proto__ === Foo.prototype) // true

// Foo. Prototype as an Object, __proto__ refers to object.prototype
console.log(Foo.prototype.__proto__ === Object.prototype) // true

// Foo. Prototype has a hidden property called constructor, which points to the associated constructor, i.e., Foo
console.log(Foo.prototype.constructor === Foo) // true

// Foo is a Function as well as an object, so Foo also has a __proto__ attribute, pointing to function.prototype
console.log(Foo.__proto__ === Function.prototype) // true

// Function is itself an object and has __proto__, pointing to function.prototype
console.log(Function.__proto__ === Function.prototype) // true

// Function.prototype's constructor property points to Function
console.log(Function.prototype.constructor === Function) // true

// function. prototype () ¶
console.log(Function.prototype.__proto__ === Object.prototype) // true

// proto__ refers to function.prototype
console.log(Object.__proto__ === Function.prototype) // true

// constructor (); // constructor ();
console.log(Object.prototype.constructor === Object) // true

// The final point is null
console.log(Object.prototype.__proto__) // null

// At this point, the link of constructor Foo is basically analyzed
Copy the code
  • Common object O1
const o1 = new Object(a)console.log(o1.__proto__ === Object.prototype) // true
Copy the code
  • conclusion
  1. __proto__Point to theprototype
  2. Function objects (functions)__ptotoPoint to theFunction.prototype.Function,ObjectAll is function
  3. The prototype chain will eventually be foundObject.prototype, and finally null

Object and Function reincarnation

If the prototype of Object and Function is to be used as prototype, the prototype is to be used as prototype.

  1. The world started out in chaos, which isnull
  2. Object.prototypeBorn as the first of God’s creation
  3. Function.prototypeinheritanceObject.prototypeborn
  4. Object,Function,StringSuch as inheritance,Function.prototypeborn

Look at the code:

// Step 1 and Step 2
// Object. Prototype has no prototype Object
console.log(Object.prototype.__proto__) // null
/ / the third step
console.log(Function.prototype.__proto__ === Object.prototype) // true
/ / step 4
console.log(Object.__proto__ === Function.prototype) // true
console.log(Function.__proto__ === Function.prototype) // true
console.log(String.__proto__ === Function.prototype) // true
console.log(Array.__proto__ === Function.prototype) // true

Copy the code

It’s not enough to explain everything, but it’s one of the easier answers to understand

Everything is an object

Use the following code to prove this statement

const str1 = 'a';
const str2 = new String('a')
console.log('str1', str1.__proto__ === String.prototype) //true
console.log('str2', str2.__proto__ === String.prototype) //true
console.log(String.prototype.__proto__ === Object.prototype) //true

const num1 = 1;
const num2 = new Number(1)
console.log('num1', num1.__proto__ === Number.prototype) //true
console.log('num2', num2.__proto__ === Number.prototype) //true
console.log(Number.prototype.__proto__ === Object.prototype) //true

const bool1 = true;
const bool2 = new Boolean(true)
console.log('bool1', bool1.__proto__ === Boolean.prototype) //true
console.log('bool2', bool2.__proto__ === Boolean.prototype) //true
console.log(Boolean.prototype.__proto__ === Object.prototype) //true

const reg1 = new RegExp(a);const reg2 = / 1 /;
console.log('reg1', reg1.__proto__ == RegExp.prototype) //true
console.log('reg2', reg2.__proto__ == RegExp.prototype) //true
console.log(RegExp.prototype.__proto__ === Object.prototype) //true

const arr = [];
console.log(arr.__proto__ === Array.prototype); //true       
console.log(Array.prototype.__proto__ === Object.prototype); //true

const date = new Date(a);console.log(date.__proto__ === Date.prototype); //true
console.log(Date.prototype.__proto__ === Object.prototype); //true

// The arrow function has no prototype, but it is still an object
const fn = () = >{}console.log(fn.prototype) // undefined
console.log(fn.__proto__ == Function.prototype) // true
Copy the code

conclusion

Here is not to do too much summary, hope that everyone has their own understanding