Front

The prototype is JavaScript Clever design , It's very easy to understand . all 2020 Years old , After reading this, I hope you don't need to learn again JavaScript
It's a prototype . If there is anything wrong , Please give me some advice !

word

Here are the Related words and Their Translation , Keep them in mind and you 're halfway there .

* constructor constructor
* proto & prototype prototype ; embryonic form ; Initial form
constructor
function Drink() {} const a = new Drink() console.log(a.constructor) // ƒ
Drink() {}
a By function Drink Constructed .

prototype

Write simple code , All over the back console.log.
function f() { this.a = 1 this.b = 2 } const o = new f() f.prototype.b = 3
f.prototype.c = 4
o yes new f() Results returned , Let's go back to when it was implemented new f() Time , new Operator to function f What did you do .

* Create an empty object ( Namely {}): var obj = Object.create(null).
* Link the object ( That is, set the constructor of the object ) To another object ( This function ), This empty object inherits its prototype : obj.__proto__ = f.prototype.
* Call function with specified parameters f,new Foo Equivalent to new Foo(), that is f Call without any parameters ; Step 1 Objects created as this
Context of ( take this Bind to newly created object | f In function this Replace the pointer of with obj) ,f.call(obj).
* If the function does not write explicitly in the function return, Then return this.
For a function , If not used new Operate it , It's just a normal function ; use new The operator just changes its this
Points to and implicitly creates an object within a function , And then call it “ Constructor ”. That's it .

If you are confused about the operation in step 3 , Let's take a few simple examples :
Set constructor function f() { this.a = 1 this.b = 2 } f() console.log(f.constructor)
//ƒ Function() { [native code] } function f() { this.a = 1 this.b = 2 } const o
= new f() console.log(o.constructor) // ƒ f() { // this.a = 1 // this.b = 2 // }
this Pointer replacement function f() { console.log(this) // window this.a = 1 this.b = 2 } f()
function f() { console.log(this) // f {} this.a = 1 this.b = 2
console.log(this) // f {a: 1, b: 2} } new f() What is? call? const drink = { name:
'Coca Cola', color: 'black', price: '3.5', intro: function () {
console.log(` name :${this.name}, colour :${this.color}, Price :${this.price}`) }, } const
computer = { name: 'Orange Juice', color: 'orange', price: '4', }
drink.intro.call(computer) // name :Orange Juice, colour :orange, Price :4
Make sure that the above is clear to you , Otherwise, do not proceed with the following .
console.log(o.b) // 2
o The value of is passed new f() Object obtained ,this Point to this object , Function to this Added properties b Assign it as 2, And return him . therefore Printed here 2.
f.prototype Is inaccessible , This is also known as property shadowing --- Attribute masking .
console.log(o.c) // 4 console.log(o.__proto__.c) // 4 console.log(o.__proto__
=== f.prototype) // true
Function does not give this add to c Property and assign it a value 4, But printing o.c return 4. You already know from the above constructor What is it :
console.log(o.constructor.prototype.b) // 3
o By function f Constructed ,o.constructor Return function f, therefore o.constructor.prototype === f.prototype,
f.prototype What are you going back to ? Written directly in the above initial code , Now we can turn it up f.prototype, therefore
o.constructor.prototype.b return 3. To find an attribute on an object is to find itself before passing __proto__ It's up one layer at a time :

* If you have this property, get its value directly ;
* If it has its own and its constructor's prototype There are also , Attribute masking will not forget ;
* If you keep following __proto__ I found it, but I didn't find it , Will return undefined; Why? ? console.log({}.constructor) // ƒ
Object() { [native code] } console.log({}.__proto__ === Object.prototype) //
true console.log(Object.prototype.__proto__) // null
See here , It should be very clear . That's why in the end undefind Why :Object.prototype.__proto__ point null.

Small exercises

Do a simple exercise without explaining it to you !
console.log(o.b) console.log(o.__proto__.b) console.log(o.d) answer // 2 // 3 //
undefined
Important tips

about Object.prototype.__proto__:

Test code

If you still don't understand , Let's try ! I'll put the code snippets used in this article here for you to quickly copy .
function f() { this.a = 1 this.b = 2 } const o = new f() f.prototype.b = 3
f.prototype.c = 4 console.log(o.b) // 2 console.log(o.c) // 4
console.log(o.__proto__.c) // 4 console.log(o.__proto__ === f.prototype) //
true console.log(o.constructor.prototype.b) // 3 console.log(o.b) // 2
console.log(o.__proto__.b) // 3 console.log(o.d) // undefined
console.log({}.constructor) // ƒ Object() { [native code] }
console.log({}.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__) // null // --------- other --------
console.log(o.__proto__) // {b: 3, c: 4, constructor: ƒ}
console.log(o.__proto__.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__) // null
console.log(o.__proto__.__proto__.__proto__) // null
console.log(f.prototype.__proto__ === Object.prototype) // true

Technology
©2019-2020 Toolsou All rights reserved,
Python Basic knowledge and notes Programmer Tanabata Valentine's Day confession code NOI2019 travels China's longest high speed rail officially opened ! The fastest way to finish the race 30.5 hour C Language programming to find a student's grade Software testing BUG describe ESP8266/ESP32 System : Optimize system startup time Unity Scene loading asynchronously ( Implementation of loading interface ) Baidu , Ali , Tencent's internal position level and salary structure , With job suggestions !PYTHON Summary of final review