Recommended tutorials:
paste : http://www.notescloud.top/goods/detail/138
Elasticsearch authoritative guide (Chinese version). pdf:http://www.notescloud.top/goods/detail/146
Deep learning algorithm practice pdf : http://www.notescloud.top/goods/detail/145
The most detailed explanation of JS prototype and prototype chain, there is no "may be". (I)
The second article has been updated. Click to enter
The third article has been updated. Click to enter
The three articles have been updated and have completely analyzed the JS prototype and prototype chain. I hope these tutorials can make you understand Javascript more thoroughly!
I Ordinary objects and function objects
In JavaScript, everything is an object! But the objects are also different. It is divided into ordinary objects and Function objects. Object and Function are the Function objects of JS. The following is an example
var o1 = {};
var o2 =new Object();
var o3 = new f1();
function f1(){};
var f2 = function(){};
var f3 = new Function('str','console.log(str)');
console.log(typeof Object); //function
console.log(typeof Function); //function
console.log(typeof f1); //function
console.log(typeof f2); //function
console.log(typeof f3); //function
console.log(typeof o1); //object
console.log(typeof o2); //object
console.log(typeof o3); //object
In the above example, O1, O2, O3 are ordinary objects, f1,f2 and F3 are function objects. How to distinguish is actually very simple. All objects created through new Function() are function objects, and others are ordinary objects. In the final analysis, F1 and F2 are created through new Function(). Function objects are also created through new Function().
Be sure to distinguish between ordinary objects and function objects. We will often use it below.
II Constructor
Let's review the knowledge of constructors first:
function Person(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.sayName = function() { alert(this.name) }
}
var person1 = new Person('Zaxlct', 28, 'Software Engineer');
var person2 = new Person('Mick', 23, 'Doctor');
In the above example, person1 and person2 are both instances of Person. Both instances have a constructor (constructor) property, which (is a pointer) points to Person. That is:
console.log(person1.constructor == Person); //true console.log(person2.constructor == Person); //true
We need to remember two concepts (constructor, instance):
person1 and person2 are both instances of the constructor person
A formula:
The constructor property (constructor) of the instance points to the constructor.
III Prototype object
In JavaScript, whenever an object (function is also an object) is defined, the object will contain some predefined attributes. Each function object has a prototype attribute, which points to the prototype object of the function. (no matter what it is, it will be analyzed in detail in the second section)
function Person() {}
Person.prototype.name = 'Zaxlct';
Person.prototype.age = 28;
Person.prototype.job = 'Software Engineer';
Person.prototype.sayName = function() {
alert(this.name);
}
var person1 = new Person();
person1.sayName(); // 'Zaxlct'
var person2 = new Person();
person2.sayName(); // 'Zaxlct'
console.log(person1.sayName == person2.sayName); //true
We get the first "law" in this paper:
Every object has __proto__ Property, but only function objects have prototype attribute
So what is a prototype object?
If we change the above example, you will understand:
Person.prototype = {
name: 'Zaxlct',
age: 28,
job: 'Software Engineer',
sayName: function() {
alert(this.name);
}
}
Prototype object, as its name implies, is an ordinary object (nonsense = =!). From now on, you should firmly remember that the prototype object is Person.prototype. If you are still afraid of it, think of it as a letter A: var A = Person.prototype
Above, we added four attributes to A: name, age, job and sayName. In fact, it also has A default attribute: constructor
By default, all prototype objects will automatically get a constructor (constructor) attribute, which (is a pointer) points to the function (Person) where the prototype attribute is located
A has a default constructor attribute, which is a pointer to Person. Namely:
Person.prototype.constructor == Person
In the second section constructor above, we know that the constructor attribute of the instance points to the constructor: person1.constructor == Person
The two "formulas" seem to be related:
person1.constructor == Person Person.prototype.constructor == Person
Why does person1 have a constructor attribute? That's because person1 is an instance of Person.
That Person Why does prototype have constructor attribute?? Similarly, Person Prototype (you think of it as A) is also an example of Person.
That is, when Person is created, an instance object is created and assigned to its prototype. The basic process is as follows:
var A = new Person(); Person.prototype = A; // Note: the above two lines of code are only for understanding and cannot work normally
Conclusion: the prototype object (Person.prototype) is an instance of the constructor (Person).
The prototype object is actually an ordinary object (except Function.prototype, which is a function object, but it is very special. It does not have a prototype attribute (as mentioned earlier, all function objects have a prototype attribute). See the following example:
function Person(){};
console.log(Person.prototype) //Person{}
console.log(typeof Person.prototype) //Object
console.log(typeof Function.prototype) // Function, this special
console.log(typeof Object.prototype) // Object
console.log(typeof Function.prototype.prototype) //undefined
Function. Why is prototype a function object?
var A = new Function (); Function.prototype = A;
As mentioned above, all objects generated through new Function() are function objects. Because A is A function object, function Prototype is A function object.
What is the prototype object used for? The main function is for inheritance. for instance:
var Person = function(name){
this.name = name; // tip: who does this refer to when the function is executed?
};
Person.prototype.getName = function(){
return this.name; // tip: who does this refer to when the function is executed?
}
var person1 = new person('Mick');
person1.getName(); //Mick
As can be seen from this example, by giving Person Prototype sets the property of a function object, which is inherited by ordinary objects from the instance of Person (person1). The specific implementation of inheritance is described in the following prototype chain.
Little question, who are the above two this points to?
var person1 = new person('Mick');
person1.name = 'Mick'; // At this time, person1 already has the name attribute
person1.getName(); //Mick
Therefore, both this points to person1 when the function is executed.
Updated on October 27, 2017:
In the following comments, a "person" asked, "null does not have _proto", Here is an explanation:
Null is an independent data type. Why is the value of typeof(null) object?
- null is not an empty reference, but an original value, reference ECMAScript5.1 Chinese version** 4.3. Section 11; It just expects that an object will be referenced here. Note that it is "expected", reference null - JavaScript**.
- typeof null results in object, which is a bug left over from history. Please refer to typeof - JavaScript**
- In ECMA 6, there was a proposal to correct the value of type null to null, but in the end, the proposal was rejected The reason is that there are too many codes left over from history. I don't want to offend people. It's better to continue to make mistakes as peacekeepers and reference harmony:typeof_null [ES Wiki]
Author: kehollin link: https://www.zhihu.com/question/21691758/answer/987822
Updated on April 15, 2019:
If you want to learn the front end, you can contact me at Q: 10581290
Don't hurry. There's a second and third chapter on prototype and prototype chain~
The second article has been updated. Click to enter
The third article has been updated. Click to enter
This article partially refers to JS prototype and prototype chain ultimate explanation (thanks to the original author) (invasion and deletion)
And JavaScript advanced programming, Third Edition
I hope that this series of courses can help you thoroughly understand the prototype and prototype chain of JavaScript:)
Recommended tutorials:
paste : http://www.notescloud.top/goods/detail/138
Elasticsearch authoritative guide (Chinese version). pdf:http://www.notescloud.top/goods/detail/146
Deep learning algorithm practice pdf : http://www.notescloud.top/goods/detail/145