【JavaScript基础】js中的继承(上)

1. 构造函数

在聊JavaScript的继承方式之前,我们还需要做一点准备工作,首先来聊一聊构造函数。

在js中,构造函数其实和函数时一样的,写法都是函数的定义方式

function A(){
  // 定义其他操作
}

上面这个函数A我们既可以看成是普通函数,也可以看成是一个对象的构造函数。普通函数就直接用A()进行调用,而作为构造函数创建对象的时候,我们则是用new关键字

var obj = new A()

现在我们知道了,一个函数可以作为创建对象实例的构造函数,也可以当做普通函数使用,区别就是在于是否使用了new关键字。

构造函数在创建对象的时候,会执行如下的操作

  1. 在内存中创建一个对象

  2. 在新对象内部的[[Prototype]]属性指向构造函数的prototype属性

    function A(){}
    let instance = new A()
    instance.__proto__ === A.prototype
    
  3. 构造函数内部的this指向这个创建的新对象

  4. 执行构造函数内部的代码,比如添加一些属性、方法等

  5. 如果构造函数有返回值,该返回值为非空对象,则返回该对象,否则返回创建的新对象。

2. 原型链继承

我们知道在调用构造函数的时候,创建了一个新对象,这个对象有一个[[Prototype]]属性是指向构造函数原型对象prototype的,根据原型链查找方式,如果寻找一个实例对象的属性和方法,在实例对象上没找到,则会沿着[[Prototype]]属性在原型对象中查找,如果还未找到则继续往上,直到到达Object.prototype为止,因为该原型对象的原型为null

Object.prototype.__proto__ == null  // true

借助这个原型链,我们就有了原型链的继承方式。原型链继承就是创建一个子类,指定它的原型对象为父类的原型对象,这样父类中添加的属性和方法就可以由子类实例共享。

/**
 * 原型链继承可以继承原型对象的属性、方法,这些都是共享的
 * 如果一个实例修改了原型对象的属性方法,另一个实例也会跟着修改
 */

function SuperType() {
    this.colors = ['red', 'green', 'orange']
    this.say = function () {
        console.log('SuperType saying')
    }
}

function SubType() {}

// 原型链方式继承,共享原型对象上的所有属性和方法
SubType.prototype = new SuperType()

let instance = new SubType()

console.log(instance.colors) // [ 'red', 'green', 'orange' ]
instance.colors.push('black')
instance.say() // SuperType saying

let anotherInstance = new SubType()
console.log(anotherInstance.colors) // [ 'red', 'green', 'orange', 'black' ]

console.log(instance instanceof SuperType) // true
console.log(instance instanceof SubType) // true

原型链继承的缺点也很明显,所有子类实例都是共享原型对象的属性方法,如果其中一个对原型属性进行修改,也会反映到其他实例上。为了弥补这个缺点,便引出了盗用构造函数的方式。

3. 盗用构造函数

盗用构造函数的出现是为了使得子类实例对象有着自己独立的属性和方法,我们可以认为这些子类实例都是相互独立的,不共享属性方法的,另一方面盗用构造函数还可以实现子类向父类构造函数传参,具体代码参考如下:

/**
 * 盗用继承是利用父类的构造函数在子类中进行调用,创建专属于子类实例的属性
 * 这样在修改实例属性的时候,实例之间相互独立,还可以实现向父类传参
 * 缺点是它断开了与原型的关系,不能继承原型的方法,函数都要在子类中重写
 */

function SuperType(name) {
    this.name = name
    this.colors = ['red', 'green', 'orange']
}

function SubType(name, age) {
    // 调用父类构造函数,传入当前的this对象和参数
    SuperType.call(this, name)

    // 实例自己的属性
    this.age = age
}

let obj1 = new SubType('tom', 20)
obj1.colors.push('black')
console.log(obj1.colors) // [ 'red', 'green', 'orange', 'black' ]
console.log(obj1.name, obj1.age) // tom 20

let obj2 = new SubType('lucy', 19)
console.log(obj2.colors) // [ 'red', 'green', 'orange' ]
console.log(obj2.name, obj2.age) // lucy 19

// 盗用继承得到的实例,原型对象已经丢失
console.log(obj1.prototype) // undefined

我们可以看到关键的一步代码就是

SuperType.call(this)

这里是用父类构造函数作为普通函数,调用call()方法,改变this指向为当前创建的实例对象,从而使得当前创建的实例对象有了父类的属性和方法,因为在调用父类函数的过程中,属性和方法都保存到了this里,并且也可以实现传参,利用call()方法的第二到第n个参数,传递了1~n-1个参数给父类。

另一方面,由于调用call()方法,子类实例对象的原型并没有指向父类的原型,因此断开了与父类原型的联系,这也是盗用构造函数的一个缺点,多个实例之间有了自己的属性方法空间,却不能有共享的原型对象的属性和方法,因此一些属性和方法在原型链中能够很好继承的模式,在这里就不适用了,只能重复造轮子。

由于这个缺点,便又引出了组合继承的方式。

4. 组合继承

组合继承方式结合了原型链的属性共享的优点以及盗用构造函数子类实例拥有独立属性空间的优点,因此也非常值得学习和借鉴。

/**
 * 组合继承结合了原型链继承和盗用继承的优点,
 * 既可以实现实例之间属性方法相互独立,又可以继承原型对象的属性方法
 */

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

// 父类原型对象上的方法
SuperType.prototype.sayName = function () {
    console.log(this.name)
}

function SubType(name, age) {
    SuperType.call(this, name)
    this.age = age
}

// 原型链继承
SubType.prototype = new SuperType()

// 子类实例的原型上的方法
SubType.prototype.sayAge = function () {
    console.log(this.age)
}

let obj1 = new SubType('tom', 20)
let obj2 = new SubType('lucy', 19)

obj1.sayName() // tom
obj2.sayName() // lucy

obj1.sayAge() // 20
obj2.sayAge() // 19

从代码我们可以看到,组合继承中在子类构造函数里调用了父类构造函数,创建了属于子类实例的独立属性空间,由于盗用构造函数的实例断开了与父类原型的联系,因此通过手动方式指定原型对象,从而连接了子类实例和父类原型对象,从而实现父类原型对象的属性方法被子类实例共享的效果。

// 原型链继承
SubType.prototype = new SuperType()

组合继承方式几乎完美的实现了js的继承,但是也还是差了一点,比如调用了两次父类构造函数,真正完美解决的继承方案,即寄生式组合继承,我们将在下一期进行分析。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,362评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,330评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,247评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,560评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,580评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,569评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,929评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,587评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,840评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,366评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,945评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2 342

推荐阅读更多精彩内容