Article directory
1. Prototype
The prototype property of the function
- Each function has a prototype attribute, which defaults to an Object empty object (ie: prototype object).
- There is an attribute constructor in the prototype object, which points to the function object.
The prototype of Person points to its Person Prototype, and the constructor of Person Prototype points to Person.
// 用户对象
function Person() {
};
console.log(Person.prototype);
Person.prototype.getMoney = function() {
return 5000000;
console.log("身价500w");
}
console.log((new Person()).getMoney());
Add properties (usually methods) to prototype objects
- Function: All instance objects of the function automatically have the properties (methods) in the prototype
2. Explicit and implicit prototypes
Each function function has a prototype, that is, an explicit prototype (property)
Every instance object has a __proto__ called an implicit prototype (property).
The value of an object's implicit prototype is the value of the explicit prototype of its corresponding constructor.
memory structure
// 第1步，内部语句：this.prototype = {}
function Fn() {
};
console.log(Fn.prototype);
// 第2步，内部语句：this.__proto__ = Fn.prototype
let fn = new Fn();
console.log(fn.__proto__);
console.log(fn.__proto__ === Fn.prototype);
// 在原型上添加方法
Fn.prototype.test = function () {
console.log("invoke test...");
}
fn.test();
The corresponding memory structure of the above code is as follows:
Summarize:
- The prototype attribute of the function: it is automatically added when the function is defined, and the default value is an empty Object object.
- The __proto__ attribute of the object: it is automatically added when the object is created, and the default value is the value of the prototype attribute of the constructor.
- Explicit prototypes can be directly manipulated in the program, but implicit prototypes cannot be directly manipulated (before ES6)
3. Prototype chain
3.1 Access sequence
The prototype chain (implicit prototype chain), mainly used to find the properties (methods) of the object; when accessing the properties of an object,
- First search in its own attributes, and return if found
- If not, look up along the __proto__ chain, find and return
- If it is not found in the end, it returns undefined
console.log(Object.prototype.__proto__)
function Fn() {
this.test1 = function() {
console.log("test1()")
}
}
Fn.prototype.test2 = function() {
console.log("test2()")
}
let fn = new Fn();
fn.test1();
fn.test2();
console.log(fn.toString);
fn.test3();
The output is as follows:
Constructor/prototype/entity object relationship
The object pointed to by the explicit prototype of the function is an empty Object instance object by default (but Object is not satisfied)
All functions are instances of Function (including Function)
Object's prototype object is the end of the prototype chain.
The property problem of the prototype chain
When reading the property value of the object: it will automatically find it in the prototype chain
When setting the property value of the object: it will not search the prototype chain. If there is no such property in the current object, directly add this property and set its value
method Generally defined in the prototype, attributes are generally defined on the object itself through the constructor.
function Fn() {
}
Fn.prototype.a = 'xxx';
let fn1 = new Fn();
console.log(fn1.a, fn1);
let fn2 = new Fn();
fn2.a = 'yyy';
console.log(fn1.a, fn2.a, fn1)
The output is as follows:
4. instanceof
4.1 How to judge
Expression: A instanceof B
If the explicit prototype object of the B function is on the prototype chain of the A object, return true, otherwise return false
Function is an instance generated by itself through new
function Foo() {
}
let f1 = new Foo()
console.log(f1 instanceof Foo) // true
console.log(f1 instanceof Object) // true
The complete prototype relationship diagram:
