JavaScript prototype and prototype chain

JavaScript, each instance object (object) has a private attribute (called proto ) pointing to its prototype object constructor function (prototype).
The prototype object has its own prototype object ( proto ), layers up until the prototype for an object is null. By definition, no null prototype and the prototype as the last link in the chain.
Almost all the objects are located in JavaScript Object instance of the top strand of the prototype.

Examples Constructor

// 构造函数 Person()
function Person(name) {
    this.name = name; // 这里 name 是实例属性
}

Person.prototype.name = 'cedric'; // 这里 name 是原型属性
Person.prototype.age = '18';  // 这里 age 是原型属性


Object.prototype.address = 'shanghai';

// 创建一个Person的实例
var person1 = new Person('tom');

person1.name; // tom,  获取实例对象的属性时，如果在实例属性上存在，就直接读取，此时不管原型属性上是否还有相同的属性，这就是属性屏蔽

person1.age; // 18, 没有age的实例属性，所以就去实例的原型上找到age

person1.address; // shanghai, person1的原型Person上也没有找到 address, 所以就去Person的原型Object上面去找到address

person1.sex; // undefined, person1的原型Person上也没有找到 sex, 所以就去Person的原型Object上面去, 也没找到sex

person1.hasOwnProperty('name'); // true

Prototype chain

JavaScript, each instance object (object) has a private attribute (called proto) pointing to its prototype object constructor function (prototype). The prototype object has its own prototype object (proto), layers up until the prototype for an object is null. By definition, no null prototype and the prototype as the last link in the chain.

Almost all the objects are located in JavaScript Object instance of the top strand of the prototype.

person1 ----> Person.prototype ----> Object.prototype ----> null

person1.__proto__ === Person.prototype;  // true, person1 的原型是：Person.prototype 对象
Person.prototype.__proto__ === Object.prototype;  // true, Person.prototype 的原型是： Object.prototype 对象

constructor

An object created with new Person () also received a prototype from the Person constructorattribute, which points to the function itself Person

Person.prototype.constructor === Person; // true

person1.constructor  === Person; // true

person1.constructor === Person.prototype.constructor; // true

Object.getPrototypeOf()

This method returns Object.getPrototypeOf proto value, you can obtain a prototype object

Object.getPrototypeOf(person1) === person1.__proto__; // true
Object.getPrototypeOf(person1) === Person.prototype; // true

hasOwnProperty

The method hasOwnProperty, determines whether an attribute instance Properties

person1.hasOwnProperty('name'); // true
person1.hasOwnProperty('age'); // fasle

instanceof

instanceof instance based on whether a particular constructor

person1 instanceof Person;  // true

isPrototypeOf

isPrototypeOf () method can determine whether an object is another object prototype

Person.prototype.isPrototypeOf(person1); // true

ES6 class

class Person {
    constructor(name) {
        this.name = name;
    }

    hello() {
        alert('Hello, ' + this.name + '!');
    }
}


// Student 需要name和grade两个参数，需要通过super(name)来调用父类的构造函数，否则父类的name属性无法正常初始化。
// Student 已经自动获得了父类 Student 的 hello 方法，我们又在子类中定义了新的 myGrade 方法。
class Student extends Person {
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }

    myGrade() {
        console.log('Grade is ', this.grade);
    }
}