该例子是否体现了继承？

Question

这个例子关于何处体现了继承我也有些疑问，看问答里也有些同学提问
稍微理了下思路，大概是这样的：

首先，实例化出来的对象div1中的elem属性值是一个HTMLDivElement对象(姑且认为拿到的嗾使div)
在浏览器中对div1.ele一层层地调用__proto__属性，可得出div1.elem的原型链

例子中使用到的innerHtml和AddEventListener方法分别挂载在HTMLDiv和EventTarget的原型中（HTMLElement和Element中也有innerHTML方法，不作赘述）

这应该是例子中使用到原型链的地方，而Elem的构造函数中，只是新建了一个属性elem，然后添加了对document.getElementById(id)返回对象的引用，然后在Elem.prototype中封装了对this.element原型链中不同层级的方法的调用

所以我觉得例子中更像是做了一个语法糖：

div1.html('<p>hello imooc</p>')   
//div1.elem.innerHTML = '<p>hello imooc </p>'
div1.on('clic',()=>{aleart('clicked')})
//div1.elem.addEventListenr('clic',()=>{aleart('clicked')})

再简化一些的话，可以理解为Elem方法只是做了document.getElementById返回值的储存工作，无异于var div1 = getElementById(‘id’)

所以我觉得这个例子更多的体现了如何组合使用构造函数模式和原型模式创建一个对象，构造函数定义实例的属性（this.elem），原型中定义共享的方法和属性(prototype.on，prototype.html)，而利用原型链这一特性来实现继承，例子中并没有体现出来

以上是我的理解，有不对的地方还请不吝指正，谢谢

Answer 1

双越 2019-03-20 18:17:46

我先反问一句，抛开本课程和 js 原型，你理解的“继承”应该是什么样子的呢？

• 提问者 max62 #1

  js中的继承为实现继承  简单理解应该是子类可以调用父类的方法，并且能投拓展自身的方法  
  老师这样一问，仔细想想Elem确实实现了继承，并拓展出了自己的html和on方法
  所以我的问题准确的说是“有没有依靠原型链来实现继承”，因为这个例子跟普通的原型链继承例子不一样，有点不太理解

• 双越 回复 提问者 max62 #2

  我觉得你写的这个例子就很能体现继承啊，例如 div1.addEventListener 这个函数，就是从最上层的父类继承下来的。

• 提问者 max62 回复 双越 #3

  回复 双越：回复 双越：那这样的我感觉应该是我对问题理解的偏差了，我的理解是要写一个单独使用原型链继承的例子（类似animal，dog那种），但实际项目中基本不会单独使用原型链来实现继承。我刚翻了下 js高级程序设计 中的继承方式，没找到跟例子中的方式对应的上的（emm..感觉死磕哪种继承方式有点钻牛角尖了，毕竟实际生产中场景太多了，但还是想知道例子中的这种继承方式会不会是书中提到的方式的变形呢 ？这种继承方式又有哪些不足呢？）

点开查看后面3条评论