原型、原型链和原型继承

来源：https://zhuanlan.zhihu.com/p/35790971

一、原型 prototype 和 __proto__

• 每个对象都有一个__proto__属性，并且指向它的prototype原型对象
• 每个构造函数都有一个prototype原型对象
• prototype原型对象里的constructor指向构造函数本身

代码：

function Person(nick, age){
    this.nick = nick;
    this.age = age;
}
Person.prototype.sayName = function(){
    console.log(this.nick);
}
var p1 = new Person('Byron', 20);
var p2 = new Person('Casper', 25);
p1.sayName()  // Byron
p2.sayName()  // Casper
p1.__proto__ === Person.prototype       //true
p2.__proto__ === Person.prototype   //true
p1.__proto__ === p2.__proto__           //true
Person.prototype.constructor === Person  //true

二、原型链

上图关系：

arr.__proto__ === Array.prototype
true
Array.prototype.__proto__ === Object.prototype
true
arr.__proto__.__proto__ === Object.prototype
true
// 原型链的终点
Object.prototype.__proto__ === null
true

原型链如下：

arr ---> Array.prototype ---> Object.prototype ---> null

这就是传说中的原型链，层层向上查找，最后还没有就返回undefined

三、JavaScript 中的继承

• 属性继承

function Person (name, age) {
    this.name = name
    this.age = age
}

// 方法定义在构造函数的原型上
Person.prototype.getName = function () { console.log(this.name)}

function Teacher (name, age, subject) {
    Person.call(this, name, age)
    this.subject = subject
}

• 方法继承

Teacher.prototype = Object.create(Person.prototype)
Teacher.prototype.constructor = Teacher

3.4 hasOwnProperty

在原型链上查询属性比较耗时，对性能有影响，试图访问不存在的属性时会遍历整个原型链。

遍历对象属性时，每个可枚举的属性都会被枚举出来。 要检查是否具有自己定义的属性，而不是原型链上的属性，必须使用hasOwnProperty方法。

hasOwnProperty 是 JavaScript 中唯一处理属性并且不会遍历原型链的方法。

instanceof原理

instanceof是判断实例对象的proto和生成该实例的构造函数的prototype是不是引用的同一个地址。

是返回true，否返回false。

需要注意的地方

function foo() {

    }
    let obj = new foo()
    foo.prototype.k = 1
    obj.__proto__.kk = 2
    foo.prototype = {k:1,x:2}
    console.log(obj.__proto__)
    console.log(foo.prototype)

输出的是：

这里的原因是： foo.prototype = {k:1,x:2}相当于又重新创建了一个地址。它指向的地址和obj.proto指向的不同了。

function foo() {

   }
   foo.prototype = {a:1}
   let obj = new foo()
   console.log(obj.__proto__)
   console.log(foo.prototype)
   console.log(obj instanceof foo)
   foo.prototype = {a:1}    //换成{a:2}则是右边那张图        //可以追加属性但是不可以替换属性里的内容，替换就会创建新的地址
   console.log(obj.__proto__)
   console.log(foo.prototype)
   console.log(obj instanceof foo)

)