JavaScript prototype Inheritance principle

For object-oriented basic syntax I'm not going to repeat this, for a friend who is not familiar with object-oriented can see the article "Creating Advanced Web applications using object-oriented technology."

Prototype and [[prototype]]

In the premise of having a face-like object, consider a piece of code:

?

12345678910111213141516

//Animal构造函数function Animal(name){    this.name = name;}//Animal原型对象Animal.prototype = {    id:"Animal",    sleep:function(){        alert("sleep");    }}var dog = new Animal("旺才");alert(dog.name);//旺才alert(dog.id);//Animaldog.sleep()//sleep

Its corresponding simple memory allocation structure diagram:

Now let's explain the ins and outs of this memory graph:

First make it clear that [[prototype]] is not the same thing as prototype.

Let's take a look at prototype, each function object has a display prototype property, which represents the object's prototype, and more specifically represents the prototype of the object created by the function object (constructor). In conjunction with this example, Animal.prototype is the prototype of dog, and the object referenced by dog inherits properties and methods from the object referenced by Animal.prototype.

Each object has an internal property named [[Prototype]] that points to the prototype object it corresponds to. In this case, dog's [[prototype]] points to animal.prototype, and as you know, Animal.prototype is also an object, which is an object, and it must also have a [[prototype]] property pointing to the prototype object it corresponds to. , which makes up the structure of a linked list, which is the concept of the prototype chain. What's more: Different JS engine implementations can name the internal [[Prototype]] property as any name, and set its visibility, before it is used only inside the JS engine. Although it is not possible to access internal [[[Prototype]] in the JS code (Firefox can, the name is __proto__ because Mozilla makes it public), but you can use the object's isPrototypeOf () method to test, Note that this method will be judged on the entire prototype chain.

Note: The specific contents of the function object will be explained in the subsequent blog post.

Attribute Access principles

When using Obj.propname to access the properties of an object, follow the steps below (assuming that the internal [[Prototype]] property of obj is named __proto__): 1. If obj has a propname attribute, the value of the property is returned, otherwise 2. If obj.__proto__ is null, returns undefined, otherwise 3. The method that returns the Obj.__proto__.propname call object is the same as accessing the property search process, because the function object of the method is a property value of the object. Tip: A recursive procedure is implied in the previous step, and obj.__proto__ is another object in step 3, which will also use steps 1, 2, 3 to search for propname properties.

This is the inheritance and sharing based on prototype. One of the Object1 methods fn2 from Object2, conceptually Object2 overrides Object3 's method fn2. JavaScript objects should all be associated through the prototype chain, the topmost being object, that is, objects are derived from the object type.

The combination is the theory above, let's look at a more complicated example, he clearly explains the key points of prototype, [[prototype], prototype chains, and property access:

?

1234567891011121314151617181920212223242526272829303132

//Animal构造函数function Animal(name){    this.name = name;}//Animal原型对象Animal.prototype = {    id:"Animal",    sleep:function(){        alert("sleep");    }} function Human(name,age){    Animal.call(this,name);    this.age = age;}Human.prototype = new Animal();Human.prototype.id = "Human";Human.prototype.say = function(){    alert("hello everyone,My name is "+this.name +",I‘m "+this.age+" and I‘m a "+this.id);}//Human相关调用var jxl = new Human(‘笨蛋‘,25);alert(jxl.name);//笨蛋alert(jxl.id);//Humanjxl.say();//hello everyone,My name is 笨蛋,I‘m 25 and I‘m a Humanalert(Animal.prototype.isPrototypeOf(jxl));//truealert(Object.prototype.isPrototypeOf(jxl));//true

According to the above code, can you draw the corresponding memory diagram? OK, let's take a look:

Note: The prototype root is Object.prototype, and the internal [[prototype]] property of the object Object.prototype is null.

In fact, there are a lot of things to say, but in the principle of this map, you can try to adjust the order of the Code, such as the Human.prototype.id = "Human", placed in Human.prototype = new Animal (), the front, Take a look at the running results and explain why you can learn a lot.

JavaScript prototype Inheritance principle