prototype (原型) 属性

转自：https://www.jianshu.com/p/4f87d28923ce

这篇文章是基于 <<JavaScript 高级程序设计>>第六章面向对象的程序设计 6.2.3原型模式

我们每创建一个函数, 都有一个 prototype (原型)属性, 这个属性是一个指针, 指向一个对象,这个对象的 用途: 包含可以由指定类型的所有实例共享的属性和方法
所以 prototype 就是通过调用构造函数而创建的哪个对象实例的原型对象

function Person() {};
Person.prototype.name = 'TonNi';
Person.prototype.age = 19;
Person.prototype.sayName = function () {
    alert ( this. name );
}

var person1 = new Person();
person1.sayName() // TonNi;

// prototype.isPrototypeOf 判断 person1 实例的原型是不是 Person
console.log (Person.prototype.isPrototypeOf(person1))  // true

//  Object.getPrototypeOf 该方法获取一个对象的原型
console.log(Object.getPrototypeOf(person1) === Person.prototype) // true 
console.log(Object.getPrototypeOf(person1).name) //TonNi

// hasOwnProperty 检测一个实例属性是不是存在与实例中 , 存在返回true
person1.sing = 'i can sing';
console.log(person1.hasOwnProperty('name')) // false 
console.log(person1.hasOwnProperty('sing')) // true 

1: 什么是实例, 什么是原型 ?

以上面的代码为例,
原型: 就是 大写的 Person 函数
实例: 就是以 Person为原型 从新 new 出来的person; 上例中的 person1就是实例

这里我们将 name, age, sayName() 等属性和方法 直接添加到了 Person 的 prototype 中, 这样所有 new 出来的实例 都拥有同样的 属性和方法, 可以被访问或调用. var person2 = new Person() person2 和 person1 一样拥有同样的属性和方法

2: constructor

只要创建一个新的函数, 就会根据特定规则为该函数创建一个 prototype 属性, 此属性指向函数的原型对象
而在默认情况下, 所有的原型对象都会自动获得一个 constructor (构造函数) 属性, 这个属性是一个指向 prototype 属性所在函数的指针.
可以看下图, Person.prototype.constructor 指向的就是 Person

结构

作用:
通过这个构造函数, 我们还可以继续为原型对象添加其他属性和方法

3: 如果实例中和原型都有同名的属性或者方法, 调用哪个呢?

当代码读取某个属性或者方法时, 都会经行一次搜索, 搜索目标是给定的属性或方法的名字. 搜索顺序是, 先从实例查找 , 如果实例中有, 则返回属性值或者调用方法, 如果没有, 则搜索指针指向原型对象, 如果有同上, 如果没有, 属性就返回 undefind, 方法则报错, xxx is not a function

function Person() {};
Person.prototype.name = 'TonNi';
Person.prototype.age = 19;
Person.prototype.sayName = function () {
    alert ( this. name );
}

var person1 = new Person();
console.log(person1.name) //  'TonNi'   实例中没有则去原型中找, 找到后返回属性值,

person1.name = 'Mike'
console.log(person1.name) // Mike 实例中有了name 就直接拿来用了

//在实例化一个person2
var person2 = new Person()
console.log(person2 .name) //  'TonNi'   实例中没有则去原型中找, 找到后返回属性值, 不会因为 person1添加了name收到影响

// 删除person1中的name
delete person1.name;
console.log(person1.name) //  'TonNi'  删除后 实例中没有则去原型中找, 找到后返回属性值,

故当我们为实例添加一个属性时,此属性会屏蔽掉原型中对象中的同名属性, 但是只会阻止我们访问对象原型属性, 并不会修改

4: 关于判断属性或方法是存在实例还是原型中

• hasOwnProperty() 只有属性或方法 在实例中才为 true

...上面的例子
person1.hasOwnproperty('name');  //  false  不在实例中

person1.name = 'Mike';
person1.hasOwnProperty('name'); // true 在实例中, 返回true

• in操作符
  无论该属性在实例中还是原型中, 只要能访问到就返回 true

...上上面的例子
'name' in person1 // true;
person1.hasOwnproperty('name');  //  false  不在实例中

person1.name = 'Mike';
'name' in person1 // true;
person1.hasOwnProperty('name'); // true 在实例中, 返回true

'run' in person1; // false 实例和原型都没有 

所以呢, 同时使用 hasOwnProperty() 和 in 就可以确定该属性到底存在对象还是原型中了

function hasPrototypeProperty (object, name) {
  return !object.hasOwnProperty(name) && (name in object);
}

由于 in 操作符只要通过对象能够访问到属性就能返回 true, hasOwnProperty() 只要属性存在实例中才能返回 true, 所以只要 in 返回 true 而 hasOwnProperty() 返回 false 就说明属性在原型中

5: 更简单的原型语法

由于上面例子每添加一个属性就敲一次 Person.prototype 很麻烦, 为了减少不必要的输入, 如下:

function Person () {}
Person.prototype = {
    name: 'Toni',
    age: 19,
    sayName: function () {
        console.log(this.name);
    }
}

缺点1:
按照上面的对象字面量来重写整个原型对象, 最终结果相同, 但是, constructor 属性不在指向 Person, 这里重写了后, constructor 指向了新对象 Object构造函数 不在指向 Person, 尽管 instanceof 还能返回正确的结果, 但是 constructor 已经无法确定对象类型了
如:

//上例
var friend = new Person();
console.log(friend  instanceof Object)// true
console.log(friend  instanceof Person)// true

console.log(friend.constructor == Person) // false  正常的此处应为true
console.log(friend.constructor == Object) // true

改进:
如果你的确需要 constructor属性的话, 可以这样:

function Person () {}
Person.prototype = {
    constructor: Person,     //这里 
    name: 'Toni',
    age: 19,
    sayName: function () {
        console.log(this.name);
    }
}

或者 使用 Object.defineProperty()

function Person () {}
Person.prototype = {
    name: 'Toni',
    age: 19,
    sayName: function () {
        console.log(this.name);
    }
}

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

• 第一种方法: 有个问题就是, 把原本 constructor 属性的 Enumerable 设置成了 true 成了可枚举的属性, 原生的是 false 不可枚举
• 第二中方法, 则是重构构造函数, 直接设置了 enumerable: false, 但是 只适应于 ECMAScript 5 兼容的浏览器

缺点2或者是需注意:
看例子:
例子1

var friend = new Person();    // 先实例化一个Person原型
Person.prototype.sayHi = function () { 
    console.log('Hi')
};                                        // 添加方法

friend.sayHi();  // Hi     没什么问题

例子2:

function Person () {};    //原型

var friend = new Person(); //  紧接着实例化  (注意这里实例的顺序)

Person.prototype = {
    constructor: Person,    
    name: 'Toni',
    age: 19,
    sayName: function () {
        console.log(this.name);
    }
}                                             // 然后在添加属性方法

friend.sayName()              // 报错 friend.sayName is not a function

例子2正确的顺序是:

function Person () {};    //原型

Person.prototype = {
    constructor: Person,   
    name: 'Toni',
    age: 19,
    sayName: function () {
        console.log(this.name);
    }
}                                             // 然后在添加属性方法

var friend = new Person();    //  实例化

friend.sayName()              //  'Toni';

例子错误原因

例子1中, 因为实例与原型中链接的是一个指针, 而非一个副本, 所以不论实例化原型与添加属性方法的顺序如何, 都是可以在原型中获取到

例子2中, 我们先创建一个Person 的一个实例, 然后又重写了其原型对象,
但是, 重写原型对象就切断了现有原型与任何之前已经存在的对象实例之间的联系

6: 原型对象的问题

原型对象的缺点 , 所有的实例都在默认情况下获取相同的属性值, 即共享本性, 虽然这也是其优点, 但是这中共享对于函数非常适合, 对于包含基本值(即 name: 'tom',)的属性还算可以, 但是对于引用类型(Object, Array,String, ...)的属性问题就比较突出了
如:

function Person () {};    

Person.prototype = {
    constructor: Person,   
    name: 'Toni',
    age: 19,
    friends: ['Tom', 'mike', 'Anny'],
    sayName: function () {
        console.log(this.name);
    }
}                                             

var friend1 = new Person();   
var friend2 = new Person();   

console.log (friend2 .friends) //'Tom', 'mike', 'Anny'   正常显示

friend1 .friends.push('Masa');   // 使用实例1 在数组中添加一个人名 

console.log (friend2 .friends) //'Tom', 'mike', 'Anny' ,'Masa'  , person2受到了影响

当然了如果你要的结果就是这样, 那倒无所谓, 如果不是, 都需要单独的属性的话, 就有很大问题,

问题原因自然是由于实例与原型中链接的是一个指针, 指向同一个数组, friend1 对原型的修改, friend2 也会反映出来

7: 所以最好组合是

组合使用 构造函数模式 和原型模式,
构造函数模式用于定义实例属性,
原型模式用于定义方法和共享属性,

// 构造函数, 定义实例属性,  this将作用域指向新对象
function Person (name,age) {
    this.name = name;
    this.age = age;
    this.friends = ['Tom', 'Mike'];
}

//原型模式用于定义方法和共享属性,
Person.prototype = {
    constructor: Person,
    sayName: function () {
        console.log(this.name)
    }
}

var person1 = new Person ('Toni', 19) ;
var person2 = new Person ('Anny', 18);

person1.friends.push('An');
console.log(person1.friends);  // 'Tom', 'Mike','An'
console.log(person2.friends) ; //  'Tom', 'Mike', 

例子中, 实例属性都是在构造函数中定义的, 而由所有实例共享的属性 construction 和 方法 sayName 都是在原型中定义的, 因而, 修改 person1.friends 数组, 只是修改实例中的数组, 没有修改共有属性,, 所以其他实例不会受到影响

作者：有情怀的程序猿
链接：https://www.jianshu.com/p/4f87d28923ce
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。