prototype effect

We can new The created instance object dynamically adds member variables , Instead of defining all the properties and methods in the function object . The following code ：

function animal(){
    
}
 
animal.prototype.name = "animal";
animal.prototype.move = function(){
    alert("i can move");
}
 
var animalObj = new animal();
alert(animalObj.name);
animalObj.move();

new In the process of the prototype Operations on objects

A function object is new When instantiation becomes an instance object , It can be broken down into three steps （ With the above animal Object as an example ）：

First step ： Definition animalObj = {};
The second step ：animalObj .__proto__ = animal.prototype;
The third step ：animal.call(animalObj );

There's a little bit of explanation here __proto__： Each object initializes a property inside it , Namely __proto__, When accessing an object property , If there is no such thing inside , Will go __proto__ Look inside ,__proto__ I'll have my own __proto__, So I kept looking , This is the concept of prototype chain .

When accessing animalObj Of name and move Attribute ,animalObj No such attributes , Will go __proto__ In looking for , In the second step ,__proto__ Yes animal.prototype, therefore animal.prototype Defined name and move attribute , So you can access these properties . So how to verify our understanding of __proto__ The conclusion of ？

According to the standard __proto__ Not open to the public , Is a private property , but chrome The engine exposes it as a common property , External access and settings are available ,IE No direct access , as follows ：

alert(animalObj.__proto__ === animal.prototype);

summary ： When a function object is called new For an instance object , Function object's prototype The properties in the object do not directly become member properties of the instance object , Instead, it becomes an instance object __proto__ Properties in objects , And the members in the function object （ Need to use this keyword ） The changed reference directly becomes the member attribute of the instance object .

prototype Expand ： Realization JavaScript Inheritance of objects

The above said , When accessing the member properties of an object , If the object itself does not have this attribute , I'll go to it __proto__ Look for , If you can't find it , Keep looking __proto__ Of __proto__ Properties in objects , Keep looking down . You can take advantage of this feature , The implementation is similar to java Inheritance in , The following code ：

//  animal " class "（ Constructors ）
function animal(){
 
}
 
animal.prototype.name = "animal";
animal.prototype.move = function(){
 
   alert("i can move");
}
 
//  Define a cat object , Inherit animal Members of the 
function cat(){
 
}
 
//prototype Implementation inheritance 
cat.prototype = new animal();
 
//  by cat.prototype Add members 
cat.prototype.detail = "I am a cat , I am also an animal";
 
// cat Instance object of , Access member properties 
var c = new cat();
alert(c.detail);
alert(c.name);
c.move();

The code analysis is as follows ：

1、var a = new animal(); obtain a.__proto__ = animal.prototype
2、cat.prototype = a,cat.prototype.__proto__ = a.__proto__
3、var c = new cat(); obtain c.__proto__ = cat.prototype, therefore c.__proto__.__proto__ = animal.prototype;

therefore , When accessing c Of detail when , The attribute itself cannot be found , Will be looking for __proto__( namely cat.prototype) Whether there is this attribute in , Found the property , Empathy , visit name and move Attribute , Will continue to traverse down __proto__ Whether there is this attribute in .

This is the implementation principle of prototype chain . Essentially prototype It's just an illusion , It only plays an auxiliary role in the implementation of prototype chain , It's just new It's worth it , The essence of prototype chain , In fact, it is __proto__