继承

继承

一个对象直接使用另外一个对象的属性和方法

JS 并不提供原生的继承机制，但实现方法有很多，下面介绍一种最为通用的

实现继承需要实现的两个点：

1. 得到了一个类的属性
2. 得到了一个类的方法

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

Person,prototype.printName = function() {
    console.log(this.name)
}

function Male(age) {
    this.age = age 
}

Male.prototype.printAge = function() {
    console.log(this.age)
}

属性获取

对象属性的获取是通过构造函数的执行，在一个类中执行另外一个类的构造函数，就可以把属性赋值道自身内部，但是需要把环境改到本身的作用域，借助函数 call

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

Male.prototype.printAge = function() {
    console.log(this.age)
}

实例化

var man = new Male('Bryant', 'male', 40)
console.log(man.sex) // "male"

方法获取

类的方法都定义在了 prototype 里面，只要把子类的 prototype 改为 父类的 prototype 的备份就可以了

Male.prototype = Object.create(Person.prototype)

通过 object.create clone 一个新的 prototype 而不是直接把 Person.prototype 直接赋值，如果直接赋值会因为引用关系，导致后续修改子类的 prototype 时也会修改父类的 prototype，因为修改的是同一个值

同时需要注意的是 对子类添加方法 和 修改子类 prototype 的顺序，必须在修改其 prototype 之后，再对子类添加方法，否则方法的添加会被覆盖

此外还存在一个问题是，prototype 对象有一个属性 constructor 指向其类型，因为复制父类的 prototype，所以这个时候的 constructor 属性指向是不对的，会导致判断类型时出错

ES5正确完整的继承方式

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

Male.prototype = Object.create(Person.prototype) // 修改 prototype 在先

Male.prototype.constructor = Male  // 重新指定一下 constructor 属性到子类的类型

Male.prototype.printAge = function() { // 添加方法在后
    console.log(this.age)
}

继承三步走：

• 属性获取
• 修改 prototype
• 重定 constructor

最终方案

使用一个函数实现上述继承内容

function inherit(superType, subType) {
    var _prototype = Object.create(superType.prototype)
    _prototype.constructor = subType
    subType.prototype = _prototype
}

使用方法

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

Person.prototype.printName = function() {
    console.log(this.name)
}

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

inherit(Person, Male)

Male.prototype.printAge = function() {
    console.log(this.age)
}

var man = new Male('Bryant', 'male', 40)
man.printName() // "Bryant"

继承.png

以上是ES5的实现方法，下面的代码是不用ES5实现的类似继承效果

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

Person.prototype.printName = function() {
    console.log(this.name)
}

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

Male.prototype = new Person()

Male.prototype.constructor = Male

Male.prototype.printAge = function() {
    console.log(this.age)
}

var man = new Male('Bryant', 'male', 40)
man.printName() // "Bryant"

hasOwnProperty

继承之后，子类的实例有了符父类的方法，如何判断某个方法是自身的还是父类的呢？

hasOwnProperty 是 Object.prototype 的一个方法，可以判断一个对象是否包含自定义属性而不是原型链上的属性，hasOwnProperty是JS中唯一一个处理属性但是不查找原型链的函数。

man.hasOwnProperty('name') // true
man.hasOwnProperty('printName') // false
man.hasOwnProperty('printAge') // true