Prototype and prototype chain javascript--

A, prototype

In JavaScript, each prototype function has a property that points to the function prototype object.

E.g:

Copy the code
function Person(age) {
    this.age = age       
}
Person.prototype.name = 'kavin'
was PERSON1 = new Person ()
was person2 = new Person ()
console.log(person1.name) //kavin
console.log(person2.name)  //kavin
Copy the code

The above example, prototype function points to an object, and create prototype instances when it is calling the constructor of this object, which is the prototype of person1 and person2.

Prototype concept: every javascript object creation (except null) and they will associated with another object, which is what we call prototype, each object will "inherit" the attributes from the prototype.

Let us express the relationship between the constructor and the instance with a prototype map:

Two, __ proto__

It is for each object (except null) would have for the property, called __proto__, this property will point to the object's prototype.

function Person() {

}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

The diagram:

Additional information:

The vast majority of browsers support this non-standard way to access a prototype, but it does not exist in Person.prototype in fact, it comes from Object.prototype, not so much a property, as it is a getter / setter when using obj .__ proto__, it can be understood as the return Object.getPrototypeOf (obj).

三、constructor

Each prototype has a constructor property, associated with the point to the constructor.

function Person() {

}
console.log(Person===Person.prototype.constructor)  //true

So then the next update graph:

Copy the code
function Person() {

}

var person = new Person();

console.log(person.__proto__ == Person.prototype) // true
console.log(Person.prototype.constructor == Person) // true
// way to learn a ES5 can be obtained object's prototype
console.log(Object.getPrototypeOf(person) === Person.prototype) // true
Copy the code

Additional information:

function Person() {

}
var person = new Person();
console.log(person.constructor === Person); // true

When acquiring person.constructor, in fact person and not the constructor property, when the property can not be read to the constructor, which is Person.prototype will be read from the person of the prototype, the prototype has just this property, so:

person.constructor === Person.prototype.constructor

 

Fourth, examples and prototypes

 When reading the properties instance, if found, will look for the prototype associated with the object's attributes, if still finding out, went to prototype prototype, it has been found so far top level.

Copy the code
function Person() {

}

Person.prototype.name = 'Kevin';

var person = new Person();

person.name = 'Daisy';
console.log(person.name) // Daisy

delete person.name;
console.log(person.name) // Kevin
Copy the code

在这个例子中,我们给实例对象 person 添加了 name 属性,当我们打印 person.name 的时候,结果自然为 Daisy。

但是当我们删除了 person 的 name 属性时,读取 person.name,从 person 对象中找不到 name 属性就会从 person 的原型也就是 person.__proto__ ,也就是 Person.prototype中查找,幸运的是我们找到了 name 属性,结果为 Kevin。

但是万一还没有找到呢?原型的原型又是什么呢?

五、原型的原型

 在前面,我们已经讲了原型也是一个对象,既然是对象,我们就可以用最原始的方式创建它,那就是:

var obj = new Object();
obj.name = 'Kevin'
console.log(obj.name) // Kevin

其实原型对象就是通过 Object 构造函数生成的,结合之前所讲,实例的 __proto__ 指向构造函数的 prototype ,所以我们再更新下关系图:

 

六、原型链

 简单的回顾一下构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么假如我们让原型对象等于另一个类型的实例,结果会怎样?显然,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,那么上述关系依然成立。如此层层递进,就构成了实例与原型的链条。这就是所谓的原型链的基本概念。——摘自《javascript高级程序设计》

其实简单来说,就是上述四-五的过程。

继上述五中所说,那 Object.prototype 的原型呢?

console.log(Object.prototype.__proto__ === null) // true

Ruan Yifeng cited teachers  "undefined and null difference"  is:

null means "no object", that is, there should not have value.

So Object.prototype .__ proto__ is null Object.prototype with no prototype, actually expresses a meaning.

So look for a property when found Object.prototype can stop searched.

Finally, a graph can also be updated to:

FIG chain structure by the prototype is interrelated prototype chain, which is the blue line.

https://www.cnblogs.com/junjun-001/p/12033377.html

Guess you like

Origin www.cnblogs.com/junjun-001/p/12033399.html