html5

Javascript原型链与继承

2016-10-12  本文已影响5827人  居客侠

原型链的设计是js的精髓所在,比较抽象。需要从内部设计原理去理解这种设计思想,在纸上画画其中的关系会帮助理解。

prototype对象

prototype对象的引入:所有实例对象需要共享的属性和方法,都放在这个对象中,那些不需要共享的属性和方法,就放在构造函数中。以此来模拟类。

function Animal(name) {
    this.name = name
}

Animal.prototype.getName = function() {
    console.log(this.name)
}

var animal1 = new Animal('Kate')
var animal2 = new Animal('Lucy')

//对象animal1 和 animal2共享方法getName
animal1.getName()
animal2.getName()

原型链

在javascript中,每个对象都有一个指向它的原型(prototype)对象的内部链接。每个原型对象又有自己的原型,直到某个对象的原型为null为止,组成这条链的最后一环。

*proto写入es6标准

当一个对象被创建时,它的__protp__属性和内部属性[[prototype]]指向相同的对象(也就是它的构造函数的prototype属性)。改变__proto__属性的值同时也会改变内部属性[[prototype]]的值,除非该对象是不可扩展的。
在ES5中,所有构造函数的__proto__都指向Function.prototype
在ES6中,构造函数的__proto__指向它的父类构造函数

obj.__proto__ === obj.[[prototype]]
// ES5
Cat.__proto__ === Function.prototype
// ES6
Cat.__proto__ === Animal

构造函数继承

有四种方式可以实现构造函数的继承
1.调用apply方法

function Animal() {
    this.species = '动物'
}
Animal.prototype.getName = function() {
    console.log('我是动物')
}

function Cat() {
    Animal.apply(this, arguments)
}
var cat = new Cat()
cat.species    // 动物
cat.getName()  // undefined

这种方法可以继承父类构造函数的属性,但是无法继承prototype属性,即父类中共享的方法和属性

2.改写prototype对象

Cat.prototype = new Animal()
Cat.prototype.constructor = Cat

这是最常用的方法来模拟单继承,缺点是始终要保留Animal的对象,如果Animal对象比较大时,会消耗部分内存(其实很少),并且没有实现多继承

3.直接继承prototype

Cat.prototype = Animal.prototype
Cat.prototype.constructor = Cat

缺点是当修改了Cat.prototype上的方法时会影响Animal.prototype

4.利用空对象作中介

var F = function(){}
F.prototype = Animal.prototype
Cat.prototype = new F()
Cat.prototype.constructor = Cat

缺点是无法继承父类封装的属性

若要实现封装属性和共享同时继承到子类中,就需要同时结合上面的1和4,请使用jqury的extend方法或者其他深拷贝方法。

ES6语法糖 —— class

ES6提供了简单的定义类的语法糖class

// ES6
class Cat {
    constructor(name){
        this.name = name
    }

    getName() {
        console.log(this.name)
    }
}
// 等价于 ES5
function Cat(name) {
    this.name = name
}
Cat.prototype.getName = function() {
    console.log(this.name)
}

继承

关于继承, ES5和ES6的区别
ES5:先构造子类的实例对象this,然后再将父类的方法添加到this上面
ES6:先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this

// ES6
class Cat extends Animal {
    constructor() {
        super(this)
    }
    ...
}
// ES5
function Cat() {
    ...
}
Cat.prototype = new Animal()
Cat.prototype.constructor = Cat

手绘原型链图

手绘原型链图
ES6的区别是子类构造函数的proto指向父类构造函数。

参考文档

  1. 阮一峰 ECMAScript 6入门
    2.Javascript面向对象编程(二):构造函数的继承
上一篇下一篇

猜你喜欢

热点阅读