Javascript中的继承

很多语言中都有继承的概念，继承这种东西为什么会出现？

简而言之，继承之所以出现，就是为了减少重复无用功。
好比爸爸有10万块，并且还有一项技能：用各种理财手段把10万变成100万，儿子们都想手里有钱并精通理财，那么只需要从爸爸那儿继承钱和理财的方法，不用再自己苦哈哈得挣钱学理财了。

第一种：原型链继承

原型链继承非常的简单粗暴，就是让子类的prototype指向父类的一个实例，如下：

function Parent(name){
  this.name = name;
  this.friends = ['a','b','c','d'];
}
function Child() {
}
// 子类的原型是父类的一个实例
Child.prototype = new Parent('father');
let child1 = new Child();
let child2 = new Child();

console.log(child1.friends, child2.friends);  // [ 'a', 'b', 'c', 'd' ] [ 'a', 'b', 'c', 'd' ]

可以看到，孩子轻轻松松就认识了父亲的朋友～
如果孩子把friends改掉会怎样？

// child1.friends = ['a', 'b']; 
console.log(child1.friends, child2.friends); // [ 'a', 'b' ] [ 'a', 'b', 'c', 'd' ]

为什么 child1.friends = ['a', 'b']; 对 child2 没有影响？ 因为这种操作相当于给子类自己加了个自己的属性而已。

child1.friends.push('e');
console.log(child1.friends, child2.friends); // [ 'a', 'b' ] [ 'a', 'b', 'c', 'd' ]
[ 'a', 'b', 'c', 'd', 'e' ] [ 'a', 'b', 'c', 'd', 'e' ]

这样写结果就不一样了，因为这相当于修改了父亲属性，所有实例都会共享。
这就是原型链继承的一个缺点：一个变了其余都会变。
原型链的另一个缺点就是子类无法向父类构造函数传递参数，如果我想用new Children('name')就行不通了。

基于以上缺点，出现了借助构造函数的继承方式。

第二种：借助构造函数的继承

这种继承方式其实是在子类的构造函数里调用父类的构造函数，如下：

function Parent(name){
   this.name = name;
   this.friends =  ['a','b','c'];
   this.sayName = function(){
      console.log('I am '+this.name);
   }
}
function Child(name){
   Parent.call(this, name);
}
const child1 = new Child('kid1'); //向父亲构造函数传参
const child2 = new Child('kid2');
console.log(child1, child2);
child1.sayName(); // 用到了父亲的方法
child1.friends.push('d');
console.log(child2.friends);//  ['a','b','c'] 没被受影响

借助构造函数，完美解决的以上两个问题，但是仔细想想，sayName方法没必要为每个实例都带一个，完全可以放在父类的prototype中。

第三种：组合继承

其实这种方法就是将上面两种结合起来，取长补短，相得益彰。把需要共享的方法，属性用原型链继承，不需要共享的就用构造函数。

function Parent(name){
   this.name = name;
   this.friends =  ['a','b','c'];
}
Parent.prototype.sayName = function(){
      console.log('I am '+this.name);
}
function Child(name){
   Parent.call(this, name);
}
Child.prototype = new Parent();

有时我只是仅仅想让子类把父类的属性复制粘贴到自己身上，也要写各种构造函数，各种原型链指向么？不需要！

第四种：原型继承

你只需要一行代码：
const child = Object.create({name: 'parent', friends: ['a', 'b', 'c']});


image.png

那么Object.create方法做了什么？

function create(parent){
   let o = function(){};
   o.prototype = parent;
   return new o();
}

就是这么的简单粗暴！创建->原型指向->new一个返回去，一套步骤封装好，用的时候就只要一行代码就OK了。

引申：

  1. Object.create() 和 new有什么不同？
    new的过程实际上是：
  • new一个空的Object
  • 让this指向刚new出来的object
  • 完成构造函数里的赋值操作
  • 返回这个Object
    以上是我比较粗糙的理解，在网上搜索了一番之后，发现我的理解还是有些偏差；
    首先，新建的空对象的[[prototype]]指向构造函数的prototype对象；
    其次，绑定this实际上是通过constructor.call(obj)来实现的；
    学术一点儿的步骤：
  • 创建一个新的对象，这个对象的类型是object；
  • 设置这个新的对象的内部、可访问性和[[prototype]]属性为构造函数（指prototype.construtor所指向的构造函数）中设置的；
  • 执行构造函数，当this关键字被提及的时候，使用新创建的对象的属性；
  • 返回新创建的对象（除非构造方法中返回的是‘无原型’）。
    可以得知，new 并不涉及“继承”，只是单纯的按模版（构造函数）创建对象。
  1. instanceOf 和 isPrototype有什么不同？
    都是只要是出现在原型链中的构造函数就会判true
console.log(child1 instanceof Child); // true
console.log(child1 instanceof Parent); // true
console.log(child1 instanceof Object); // true

console.log(Parent.prototype.isPrototypeOf(child1)); // true
console.log(Child.prototype.isPrototypeOf(child1)); // true
console.log(Object.prototype.isPrototypeOf(child1)); // true

A.isPrototypeOf(B) 判断的是A对象是否存在于B对象的原型链之中
A instanceof B 判断的是B.prototype是否存在与A的原型链之中

  1. ES6中Class继承如何实现？
    ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。
    ES6 的继承机制完全不同，实质是先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。
class Component{
    constructor(componentName){
        // console.log(this); // Input {}
        this.componentName = componentName;
    }
    getName(){
        console.log('componentName:', this.componentName);
    }
}

class Input extends Component{
    constructor(name, model){
        // Component.prototype.constructor.call(this, name);
        super(name);
        // 如果不调super报错：
        // ReferenceError: 
        // Must call super constructor in derived class before accessing 'this' or returning from derived constructor
        this.model = model;
    }
    static myMethod(msg) {
        super.myMethod(msg);
    }
    getModel(){
        console.log('model:', this.model);
        // super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。
        console.log(super.getName); // [Function: getName]
    }
}

const input = new Input('input', 'inputModel');
input.getName(); // componentName: input
input.getModel(); // model: inputModel

参考内容

[JavaScript中的new关键词]https://www.w3cplus.com/javascript/javascript-new-keyword.html
[instanceOf 和 isPrototype]http://www.cnblogs.com/ArthurXml/p/6555509.html
[ES6继承]http://es6.ruanyifeng.com/#docs/class-extends

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,222评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,455评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,720评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,568评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,696评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,879评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,028评论 3赞 409
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,773评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,220评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,550评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,697评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,360评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,002评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,782评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,010评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,433评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,587评论 2赞 350