前端js复习 7-继承

孩儿们，来继承为父的遗产吧，咳咳咳咳。开个玩笑。继承理解为取存在对象已有属性和方法的一种方式.，那么我们有几种方式可以实现呢。接下来请开始个人showtime。

  • 1.原型链继承

原理：我们都知道在实例中查找该属性，如果找到了，返回该值，否则，通过__proto__找到原型对象，在原型对象中进行搜索，如果找到，返回该值，否则，继续向上进行搜索，直到找到该属性，或者在原型链中没有找到，返回undefined。

function Parent() {
    this.name = '爸爸';
    this.family = ['妈妈','哥哥'] //验证引用类型的属性会被所有实例共享
}
Parent.prototype.getName = function() {
   console.log(this.name)
   console.log(this.family )
}
function Child() {}
Child.prototype = new Parent();

var child = new Child();
child.getName() // '爸爸'  ["妈妈", "哥哥"]
child.family.push('姐姐')
var child2 = new Child();
child2.getName() // '爸爸' ["妈妈", "哥哥", "姐姐"]

给你们画个灵魂图你们就知道了为啥是这样的结果 --。--


image.png

缺点： 引用类型的属性会被所有实例共享,在创建Child实例时不能想Parent传参

  • 2 借用构造函数（经典 经典 经典 重要的事情说三遍）
function Parent (name) {
  this.name = name;
  this.family = ['妈妈','哥哥']
  this.getName = function() {
      console.log(this.name)
      console.log(this.family)
  }
}
function Child(name) {
   Parent.call(this,name) //重点是这个哦
}
var child = new Child(爸爸)
child.getName() // '爸爸'  ["妈妈", "哥哥"]
child.family.push('姐姐')
var child2 = new Child('我');
child2.getName()  // '我'  ["妈妈", "哥哥"]

我们明显的可以看到了与上一个相比避免了引用类型的属性被所有实例共享，而且我们还可以从Child中向Parent传参哦

  • 3 组合继承（双剑合并来了）
function Parent(name) {
     this.name = name;
     this.family = ['妈妈','哥哥']
}
Parent.prototype.getName = function () {
      console.log(this.name)
      console.log(this.family)
}
function Child(name) {
   Parent.call(this,name)
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('我');
child1.family.push('爸爸');
child1.getName(); // 我 ["妈妈", "哥哥", "爸爸"]
var child2 = new Child('你')
child2.getName(); // 你 ["妈妈", "哥哥"]
console.log(Child.prototype.constructor)

优点怎么说，集两家之长吧，是JavaScript中最常用的继承模式（ps:你觉得到这就可以了吧，呵呵，你还太年轻了往下看）。

  • 4原型式继承 （不是原型链继承哦）
function createObj(o) {
  function F(){};
  F.prototype= o;
  return  new F();
}

var parent = {
   name : '我',
   family : ['妈妈','哥哥']
}
var child1 = createObj(parent);
var child2 = createObj(parent);
console.log(child1.name); // 我
child1.name = "你";
console.log(child2.name);  // 我 
// 注意这里并不是因为child1和child2有独立的name值，而是因为child1.name直接给
// child1添加了属性，并没有去影响原型上的name值

console.log(child1.family ); //["妈妈", "哥哥"]
child1.family.push('爸爸');
console.log(child2.family ); //  ["妈妈", "哥哥", "爸爸"]

简单理解就是把传入的对象变成了创建对象的原型，然后返回这个对象，就类似与我把对象的prototype写成了一个参数。

  • 5 寄生组合式继承 -------------------------快疯了--------------------------
    创建一个仅用于封装继承过程的函数，该函数在内部以某种方式增强对象（给对象添加属性和方法）, 然后返回该对象
function createObj(o) {
    var clone = Object.create(o);
    clone.say = function () {
        console.log('我是新增的方法咯')
    }
    return clone;
}

有木有感觉和原型式继承差不多，不过上一个是修改创建对象的原型，这个是直接修改对象的属性和方法。
缺点： 每次创建对象都会创建一遍方法

  • 6 寄生组合式继承
    我们重顾一下
    孩儿们，来继承为父的遗产吧，咳咳咳咳。开个玩笑。继承理解为取存在对象已有属性和方法的一种方式.，那么我们有几种方式可以实现呢。接下来请开始个人showtime。

  • 1.原型链继承

原理：我们都知道在实例中查找该属性，如果找到了，返回该值，否则，通过__proto__找到原型对象，在原型对象中进行搜索，如果找到，返回该值，否则，继续向上进行搜索，直到找到该属性，或者在原型链中没有找到，返回undefined。

function Parent() {
    this.name = '爸爸';
    this.family = ['妈妈','哥哥'] //验证引用类型的属性会被所有实例共享
}
Parent.prototype.getName = function() {
   console.log(this.name)
   console.log(this.family )
}
function Child() {}
Child.prototype = new Parent();

var child = new Child();
child.getName() // '爸爸'  ["妈妈", "哥哥"]
child.family.push('姐姐')
var child2 = new Child();
child2.getName() // '爸爸' ["妈妈", "哥哥", "姐姐"]

给你们画个灵魂图你们就知道了为啥是这样的结果 --。--


image.png

缺点： 引用类型的属性会被所有实例共享,在创建Child实例时不能想Parent传参

  • 2 借用构造函数（经典 经典 经典 重要的事情说三遍）
function Parent (name) {
  this.name = name;
  this.family = ['妈妈','哥哥']
  this.getName = function() {
      console.log(this.name)
      console.log(this.family)
  }
}
function Child(name) {
   Parent.call(this,name) //重点是这个哦
}
var child = new Child(爸爸)
child.getName() // '爸爸'  ["妈妈", "哥哥"]
child.family.push('姐姐')
var child2 = new Child('我');
child2.getName()  // '我'  ["妈妈", "哥哥"]

我们明显的可以看到了与上一个相比避免了引用类型的属性被所有实例共享，而且我们还可以从Child中向Parent传参哦

  • 3 组合继承（双剑合并来了）
function Parent(name) {
     this.name = name;
     this.family = ['妈妈','哥哥']
}
Parent.prototype.getName = function () {
      console.log(this.name)
      console.log(this.family)
}
function Child(name) {
   Parent.call(this,name)
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('我');
child1.family.push('爸爸');
child1.getName(); // 我 ["妈妈", "哥哥", "爸爸"]
var child2 = new Child('你')
child2.getName(); // 你 ["妈妈", "哥哥"]
console.log(Child.prototype.constructor)

优点怎么说，集两家之长吧，是JavaScript中最常用的继承模式（ps:你觉得到这就可以了吧，呵呵，你还太年轻了往下看）。

  • 4原型式继承 （不是原型链继承哦）
function createObj(o) {
  function F(){};
  F.prototype= o;
  return  new F();
}

var parent = {
   name : '我',
   family : ['妈妈','哥哥']
}
var child1 = createObj(parent);
var child2 = createObj(parent);
console.log(child1.name); // 我
child1.name = "你";
console.log(child2.name);  // 我 
// 注意这里并不是因为child1和child2有独立的name值，而是因为child1.name直接给
// child1添加了属性，并没有去影响原型上的name值

console.log(child1.family ); //["妈妈", "哥哥"]
child1.family.push('爸爸');
console.log(child2.family ); //  ["妈妈", "哥哥", "爸爸"]

简单理解就是把传入的对象变成了创建对象的原型，然后返回这个对象，就类似与我把对象的prototype写成了一个参数。

  • 5 寄生组合式继承 -------------------------快疯了--------------------------
    创建一个仅用于封装继承过程的函数，该函数在内部以某种方式增强对象（给对象添加属性和方法）, 然后返回该对象
function createObj(o) {
    var clone = Object.create(o);
    clone.say = function () {
        console.log('我是新增的方法咯')
    }
    return clone;
}

有木有感觉和原型式继承差不多，不过上一个是修改创建对象的原型，这个是直接修改对象的属性和方法。
缺点： 每次创建对象都会创建一遍方法

  • 6 寄生组合式继承
    我们重顾一下
function Parent(name) {
     this.name = name;
     this.family = ['妈妈','哥哥']
}
Parent.prototype.getName = function () {
      console.log(this.name)
      console.log(this.family)
}
function Child(name) {
   Parent.call(this,name)
}
Child.prototype = new Parent();
Child.prototype.constructor = Child;

var child1 = new Child('我');
child1.family.push('爸爸');
child1.getName(); // 我 ["妈妈", "哥哥", "爸爸"]
var child2 = new Child('你')
child2.getName(); // 你 ["妈妈", "哥哥"]
console.log(Child.prototype.constructor)

发现我们会调用两次父构造函数。
一次是设置子类型实例原型的时候
Child.prototype = new Parent();
一次是创建子类型实例的时候
var child1 = new Child('我');
而其在这里我们也会调用一次Parent构造含糊
Parent.call(this,name)

那么我们怎么避免重复调用呢？加入我们是间接的让Child.prototype 访问到Parent.prototype呢

function Parent(name) {
     this.name = name;
     this.family = ['妈妈','哥哥']
}
Parent.prototype.getName = function () {
      console.log(this.name)
      console.log(this.family)
}
function Child(name) {
   Parent.call(this,name)
}
// 关键在这
var F = function() {}
F.prototype = Parent.prototype;
child.protype = new F();

var child1 = nwe Child('我')
console.log(child)

这样是不是减少了一次调用父构造函数new Parent()

来我们封装一下这个继承方法

function object(o) {
    function F() {};
    F.prototype = o;
    return new F();
}
function prototype(child,parent) {
    var prototype = object(parent.prototype);
    prototype.constructor = child;
    child.prototype = prototype;
}
prototype(Child,Parent);

而其还避免了在Parent.prototype上面创建不必要的多余的属性，于此同时，原型链还能保持不变。开发人员普遍认为寄生式组合式继承是引用类型最理想的继承范式。

有没有搞的头昏，最后一个，多看几遍 哈哈哈哈

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

推荐阅读更多精彩内容

  • 07-继承
    继承 Javascript中继承都基于两种方式：1.通过原型链继承，通过修改子类原型的指向，使得子类实例通过原型链...
    LeoCong阅读 291评论 0赞 0
  • JS CORE
    第一章 错误处理: 错误: 程序运行过程中，导致程序无法正常执行的现象(即bug) 现象: 程序一旦出错，默认会报...
    fastwe阅读 1,091评论 0赞 1
  • JS高程笔记 —— 面向对象
    面向对象的语言有一个标志，那就是它们都有类的概念，而通过类可以创建任意多个具有相同属性和方法的对象。ECMAScr...
    DHFE阅读 960评论 0赞 4
  • JS 继承
    原文链接：zhuanlan.zhihu.com (一) 原型链继承： function Parent(name) ...
    越努力越幸运_952c阅读 293评论 0赞 2
  • 诗·羊
    有人 把披着羊皮的狼 叫做-羊 我 把简单的分行文字 叫做-诗 2020.3.16.
    开心点金石阅读 100评论 0赞 2