Detailed prototype prototype chain

Prototype chain

• Creating (statement) objects There are several ways
• Prototype constructor example, prototype chain
• instanceof The principle
• new operator

A. There are several ways to create objects

1. literal

var test2 = {x:123,y:345};
console.log(test2);//{x:123,y:345};
console.log(test2.x);//123
console.log(test2.__proto__.x);//undefined
console.log(test2.__proto__.x === test2.x);//false

2. constructor new

// 方法1 #通过new Object声明的一个对象
var test1 = new Object({x:123,y:345});
console.log(test1);//{x:123,y:345}
console.log(test1.x);//123
console.log(test1.__proto__.x);//undefined
console.log(test1.__proto__.x === test1.x);//false

// 方法2  #使用显式构造函数创建对象
var M = function(name){ this.name = name;};
var o3 = new M('o3');  //M {name: "o3"}

New role: 1. create a new object; 2.this point constructor; 3. constructor has returned, it will replace the new object, that is, if no new objects out

3. built-in method

Obejct.create(obj,descriptor), It is the object obj, DESCRIBE descriptor attributes (optional), create an object with the specified prototype and selectively contains the specified attributes.

let p = {x:123,y:345};
let test = Object.create(p);
console.log(test);//{}
console.log(test.x);//123
console.log(test.__proto__.x);//3
console.log(test.__proto__.x === test.x);//true
console.log(test.__proto__ === p)  // true

Object.createThis parameter is the object as a new object prototype object is assigned testis, testitself does not have this property, are connected by the prototype object prototype chain. (So testthe object itself does not name the attribute name attribute can only come through the prototype chain.

Advantages and disadvantages of the three methods

1. Function: can achieve the object of a declaration, and the ability to assign and value
2. Inherited: Object built-in methods to create a successor to the property __proto__
3. Hidden attributes: Three methods will declare a default for each member of the internal (properties or methods) to generate some hidden attribute, these attributes can be read and hide configurable, property classification, see the following:
4. Property to read:Object.getOwnPropertyDescriptor()或getOwnPropertyDescriptors()
5. Property settings:Object.definePropertype或Object.defineProperties

II. Relationship of the prototype chain

FIG carefully observe the relationship between the prototype, constructors, object instances, prototype chain.

1. object instance

As long as the object is an instance; reviewing the above several ways to create an object, any instance of the object has an implicit prototype __proto__object.

2. Constructor

Any keyword newto function behind the operation, this function is the constructor; accurate to say that any of these functions as long as the new use of this latter function can be called a constructor.

Constructors can newoperator to generate an instance;

3. The prototype object

Any function has a prototypeproperty, he is a unique function, this prototyperefers to the explicit prototype object;

Any instance of the object has an __proto__object. He is a unique object, this __proto__refers to the implicit prototype object;

__proto__Prototype chain is actually used in the query, it always points prototype;

prototypeIs a function of unique, automatically created when you define a constructor, it is always __proto__referred to.

4. prototype chain

Each object can have a prototype _proto_, this prototype can also have its own prototype, and so on, forming a prototype chain. Find a specific property, we go to find this object, and if not, then went inside to its prototype object, or if not, then go looking for the end to know the prototype object prototype object go null...... this operation was commissioned on the whole prototype chain, this is what we call the prototype chain

What prototype chain to achieve this is by looking up the process of it?
Find the prototype chain to accomplish this through prototype and prototype __proto__ properties;

let obj1 = {name:'lucas'};   
obj1.__proto__ === Object.prototype  // true
obj1.__proto__.__proto__            // null  #这是原型链顶端了
Object.prototype.__proto__          // null #这是原型链顶端了

function Person(){}
Person.prototype.__proto__.__proto__  // null #这是原型链顶端了

let person = new Person();
person.__proto__.__proto__.__proto__  // null #这是原型链顶端了
person.__proto__  === Person.prototype  // true

function M (name) { 
    this.name = name; 
}//person是构造函数

var o3 = new M('o3') // personTwo是实例

Prototype object attribute has a default constructor point constructor

Three. Instanceof principle

instanceofMainly used determine if an instance of a certain type can also be used to determine if an instance is an instance of type ancestor or parent type.

instanceofThe main principle is to achieve as long as the right of the prototype variables can be left on the prototype chain variable. Therefore, instanceofin the search process will traverse the prototype chain variable on the left until you find the right prototype variables, If that fails, it returns false.

实例对象上有__proto__这个属性，实例对象的这个属性引用是它构造函数的原型对象（也就是找到的这个构造函数）；
构造函数有prototype这个属性，这个属性引用的原型对象，在往下走，实例对象的__proto__这个属性，其实是引用这个原型对象。

Analog instanceof Development

function instanceof(left, right) {
    const rightVal = right.prototype
    const leftVal = left.__proto__
    // 若找不到就到一直循环到父类型或祖类型
    while(true) {
        if (leftVal === null) {
            return false
        }
        if (leftVal === rightVal) {
            return true
        }
        leftVal = leftVal.__proto__ // 获取祖类型的__proto__
    }
}

Four. New operator

var new2 = function(func){

    //1.创建一个空对象，这个对象要继承这个构造函数的原型对象（空对象要关联构造函数的原型对象；）
    let o = Object.create(func.prototype);
    
    //2.执行构造函数
    let k = func.call(o);//call用来转移上下文（this），把这个上下文转成o对象
    
    //3.判断构造函数的运行结果是不是对象类型
    if(typeof k ==='object'){
        return k;
    }else{
        return o;
    }
 };