JS 原型原型链

1. 对原型、原型链的理解

js 的对象是由构造函数构造的, 每个构造函数内部都有 Prototype 属性, 这个属性的值就是一个对象, 这个对象包含了构造函数所有实例共享的属性和方法.
当用构造函数新建对象后, 对象的内部会包含一个指针, 这个指针指向构造函数 prototype 对应的值, 这个指针被称为对象的原型. 浏览器中可以用 proto 来访问这个属性, ES5 也可以用 Object.getPrototypeOf 来获取对象的原型.
如果访问一个对象时, 对象内部不存在这个属性, 就会去它的原型对象里找这个属性, 这个原型对象也有自己的原型, 这样找下去就是原型链的概念
1
2
3

详细资料可以参考：
《JavaScript 深入理解之原型与原型链》

![image][image-7]

1.1. 原型修改、重写

function Person(name) {
    this.name = name
}
// 修改原型
Person.prototype.getName = function() {}
var p = new Person('hello')
console.log(p.__proto__ === Person.prototype) // true
console.log(p.__proto__ === p.constructor.prototype) // true
// 重写原型
Person.prototype = {
    getName: function() {}
}
var p = new Person('hello')
console.log(p.__proto__ === Person.prototype)        // true
console.log(p.__proto__ === p.constructor.prototype) // false
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

可以看到重写原型的时候p的构造函数不是指向Person了，因为直接给Person的原型对象直接用对象赋值时，它的构造函数指向的了根构造函数Object，所以这时候p.constructor === Object ，而不是p.constructor === Person。要想成立，就要用constructor指回来：

Person.prototype = {
    getName: function() {}
}
var p = new Person('hello')
p.constructor = Person
console.log(p.__proto__ === Person.prototype)        // true
console.log(p.__proto__ === p.constructor.prototype) // true
1
2
3
4
5
6
7

1.2. 原型链指向

function Person() {}
let p = new Person()
p.__proto__  // Person.prototype
Person.prototype.__proto__  // Object.prototype
p.__proto__.__proto__ //Object.prototype
p.__proto__.constructor // Person
Person.prototype.constructor  // Person
p.__proto__.constructor.prototype.__proto__ // Object.prototype
Person.prototype.constructor.prototype.__proto__ // Object.prototype
1
2
3
4
5
6
7
8
9

1.3. 原型链的终点是什么？如何打印出原型链的终点？

由于Object是构造函数，原型链终点是Object.prototype.__proto__，而Object.prototype.__proto__=== null // true，所以，原型链的终点是null。原型链上的所有原型都是对象，所有的对象最终都是由Object构造的，而Object.prototype的下一级是Object.prototype.__proto__。

![image][image-8]

1.4. 如何获得对象非原型链上的属性？

所有继承了 Object 的对象都会继承到 hasOwnProperty 方法。这个方法可以用来检测一个对象是否含有特定的自身属性，和
in 运算符不同，该方法会忽略掉那些从原型链上继承到的属性。

使用后hasOwnProperty()方法来判断属性是否属于原型链的属性：

function iterate(obj){
   var res=[];
   for(var key in obj){
        if(obj.hasOwnProperty(key))
           res.push(key+': '+obj[key]);
   }
   return res;
} 
1
2
3
4
5
6
7
8

详细资料可以参考：
《Object.prototype.hasOwnProperty()》

1.5. js 获取原型的方法？

• p.__proto__
• p.constructor.prototype
• Object.getPrototypeOf§