JavaScript重难点之原型

原型

每个函数都会创建一个prototype属性，这个属性是一个对象，这个对象包含由特定应用类型创建的实例共享的属性和方法。这个对象就是通过调用构造函数创建的实例对象的原型。

原型模式和构造函数模式创建实例的区别

// 构造函数模式
function Dog(name,age) {
    this.name = name;
    this.age = age;
    this.sayname = function() {
        console.log(this.name);
    };
}

let dog1 = new Dog('Bob',2);
let dog2 = new Dog('Bob',2);
console.log(dog1.sayname === dog2.sayname);
// false
// 因为使用构造函数模式，每个实例上都会创建一遍新的方法

想要解决每个实例创建一遍构造函数里面的方法问题，可以在全局作用域中定义sayName函数，然后在构造函数内部this.sayname = sayname;。不过这样就污染全局作用域，且若实例需要多个方法，那么就要在全局作用域中创建多个函数，无法很好的聚集。

原型模式解决了这一问题，与构造函数模式创建的函数不同，原型模式里面的属性和方法都是所有实例共享。

// 原型模式
function Person() {}

Person.prototype.name = 'Isaac';
Person.prototype.age = 22;
Person.prototype.gender = '男';
Person.prototype.sayname = function () {
    console.log(this.name);
}

let person1 = new Person();
let person2 = new Person();

console.log(person1.sayname === person2.sayname);
// true
// 因为使用原型模式定义的属性和方法由实例共享

理解原型

关键在于理解这一点：实例和构造函数原型之间有直接联系，但是实例和构造函数之间没有。
构造函数、原型对象和实例 是三个不同的对象！（函数也是对象）

实例的__proto__指向其原型对象的prototype
person1.__proto__ → Person.prototype
例如：

console.log(person1.__proto__ === Person.prototype);
// true

那么构造函数的__proto__指向什么？
指向的是原生Function的prototype

console.log(Person.__proto__ === Function.prototype);
// true

原生Function.prototype原型对象的__proto__指向原生Object的prototype

console.log(Function.prototype.__proto__ === Object.prototype);
// true

原生Object.prototype原型对象的__proto__指向null

这，就是原型链

继承

// 创建构造函数
function SuperType(){
    // 定义一个属性property，属性值为true
    this.property = true;
}
// 为实例对象定义一个方法
SuperType.prototype.getSuperValue = function(){
    return this.property;
}


// 创建第二个构造函数
function SubType(){
    this.subProperty = false;
}

// 继承SuperType
SubType.prototype = new SuperType();

SubType.prototype.getSubValue = function(){
    return this.subProperty;
}

let test = new SubType();
console.log(test.getSuperValue());
// true