Object-Oriented（二）原型对象

自用备忘笔记

 

1. 理解原型对象

只要创建函数，函数上就会创建一个 prototype 属性指向函数的原型对象。

function Person() {}
Person.prototype  //指向该函数的原型对象

所有原型对象会自动获得一个 constructor 属性指向 prototype 属性所在的函数。

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

每个通过构造函数生成的实例对象，都包含一个 [[Prototype]] 属性指向其构造函数的原型对象，在 Firefox、Safari 和 Chrome 中可以通过 __proto__ 来访问。

var Daryl = new Person();
Daryl.__proto__ === Person.prototype;  //true

虽然无法通过标准的方法访问 [[Prototype]] 方法，但可以通过 isPrototypeOf() 方法来确实关系。

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

ES5新增了一个方法：Object.getPrototypeOf()，该方法可以返回 [[Prototype]] 的值。

Object.getPrototypeOf(Daryl) === Person.prototype;  //true

虽然通过实例对象可以访问原型中的属性，但无法通过实例对象重写原型中的属性。

function Person() {}
Person.prototype.name = 'Daryl';

var person1 = new Person(),
    person2 = new Person();

person1.name = 'Nicholas';
person1.name;  //Nicholas
person2.name;  //Daryl

对对象属性的访问，是先检索实例上有无该属性，再检索原型对象上有无该属性。若删除实例上的属性，则会恢复对原型对象属性的访问。

person1.name = 'Nicholas';
delete person1.name;
person1.name;  //Daryl

通过 hasOwnProperty 方法可以检测某个属性究竟来自实例还是原型。

person1.name = 'Nicholas';
person1.hasOwnProperty('name');  //true
person2.hasOwnProperty('name');  //false

 

2. 原型与 in 操作符

in 操作符用来检测某个对象中是否有某个属性，可以单独使用，也可以搭配 for 使用。

person1.name = 'Nicholas';
'name' in person1;  //true
'name' in person2;  //true 

使用 for-in 遍历对象的属性时会将原型上的属性一起遍历，如果需要滤掉这部分，可以搭配 hasOwnProperty 方法一起使用。

function Person() {}
Person.prototype.name = 'Nicholas';
var person = new Person();
person.age = 29;
person.gender = 'male';

for (var o in person) {
    if (person.hasOwnProperty(o)) {
        console.log(o);  //age, gender
    }
}

ES5新增了 Object.keys 方法，用来返回一个所有可枚举的实例属性的集合。

Object.keys(person);  //['age', 'gender']

如果想要得到所有的属性，无论是否可枚举，可以使用 Object.getOwnPropertyNames。

Object.getOwnPropertyNames(Person.prototype);  //['constructor', 'name'] 

以上两种方法都可以用来代替 for-in 循环。

 

3. 更简单的原型语法

为了避免重复书写，可以通过对象字面量的方式重写原型对象。 

function Person() {}
Person.prototype = {
    name: 'Nicholas',
    age: 29,
    sayName: function() {
        alert(this.name);
    }
};

这种方式会导致原型对象上的 constructor 属性丢失，可以手动指定 constructor 属性。

function Person() {}
Person.prototype = {
    constructor: Person,
    name: 'Nicholas',
    age: 29,
    sayName: function() {
        alert(this.name);
    }
};

但 constructor 本身是不可枚举的，可以通过 ES5 新增的 Object.defineProperty() 方法设置。

Object.defineProperty(Person.prototype, 'constructor', {
    enumerable: false,
    value: Person
});

 

4. 原型的动态性

由于在原型中查找值的过程是一次搜索，因此在任何时候对原型对象的修改都会立即反映在实例上。

var Daryl = new Person();
Person.prototype.sayHi = function() {
    alert('Hi');
};
Daryl.sayHi();  //Hi

但是重写原型对象会导致构造函数与原型之间的联系被切断。

var Daryl = new Person();
Person.prototype = {
    sayHi: function() {
        alert('Hi');
    }
};
Daryl.sayHi();  //出错

 

5. 原生对象的原型

原型模式不仅应用在自定义类型方面，就连所有原生的引用类型，都是采用这种模式创建的。它们都在其构造函数的原型上定义了方法。

Array.prototype.sort;  //function
String.prototype.substring;  //function

还可以在原生对象上定义新方法，如下，定义一个反转字符串的方法。

String.prototype.reverseString = function() {
    return this.split('').reverse().join('');
};

'Hello World!'.reverseString();  //!dlroW olleH

 

6. 原型的问题

由于原型上所有属性均是共享的，若某个实例对原型中的引用类型属性进行修改，则这一个修改会反映在所有实例上。

function Person() {}
Person.prototype.friends = ['Shelby', 'Court'];

var person1 = new Person(),
    person2 = new Person();

person1.friends.push('Van');
person2.friends;  //['Shelby', 'Court', 'Van'];