原型
每个函数都会创建一个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