6种JavaScript继承方式及优缺点(小结)


Posted in Javascript onFebruary 06, 2020

温馨提示:想要更好的理解JS继承方式,须了解构造函数、原型对象、实例化对象、原型链等概念

第一种:原型链继承

利用原型链的特点进行继承

function Parent(){
  this.name = 'web前端';
  this.type = ['JS','HTML','CSS'];
}
Parent.prototype.Say=function(){
  console.log(this.name);
}
function Son(){};
Son.prototype = new Parent();
son1 = new Son();
son1.Say();

以上例子解释:

①创建一个叫做Parent的构造函数,暂且称为父构造函数,里面有两个属性name、type
②通过Parent构造函数的属性(即原型对象)设置Say方法,此时,Parent有2个属性和1个方法
③创建一个叫做Son的构造函数,暂且称为子构造函数
④设置Son的属性(即原型对象)值为父构造函数Parent的实例对象,即子构造函数Son继承了父构造函数Parent,此时Son也有2个属性和1个方法
⑤对Son构造函数进行实例化,结果赋值给变量son1,即son1为实例化对象,同样拥有2个属性和1个方法
⑥输出son1的Say方法,结果为"web前端"

优点:可以实现继承

缺点:
①因为Son.prototype(即原型对象)继承了Parent实例化对象,这就导致了所有Son实例化对象都一样,都共享有原型对象的属性及方法。代码如下:

son1 = new Son();
son2 = new Son();
son1.type.push('VUE');
console.log(son1.type);//['JS','HTML','CSS','VUE']
console.log(son2.type);//['JS','HTML','CSS','VUE']

结果son1、son2都是['JS','HTML','CSS','VUE']
②Son构造函数实例化对象无法进行参数的传递

第二种:构造函数继承

通过构造函数call方法进行继承,直接来看代码:

function Parent(){
  this.name = 'web前端';
  this.type = ['JS','HTML','CSS'];
}
function Son(){
  Parent.call(this);
}
son1 = new Son();
son1.type.push('VUE');
console.log(son1.type);//['JS','HTML','CSS','VUE']
son2 = new Son();
console.log(son2.type);//['JS','HTML','CSS']

以上例子解释:
①创建父级构造函数Parent,有name、type两个属性
②创建子级构造函数Son,函数内部通过call方法调用父级构造函数Parent,实现继承
③分别创建构造函数Son的两个实例化对象son1、son2,对son1的type属性新增元素,son2没有新增,结果不一样,说明实现了独立

优点:
①实现实例化对象的独立性;
②还可以给实例化对象添加参数

function Parent(name){
  this.name = name;
}
function Son(name){
  Parent.call(this,name);
}
son1 = new Son('JS');
console.log(son1);//JS
son2 = new Son('HTML');
console.log(son2);//HTML

缺点:
①方法都在构造函数中定义,每次实例化对象都得创建一遍方法,基本无法实现函数复用
②call方法仅仅调用了父级构造函数的属性及方法,没有办法调用父级构造函数原型对象的方法

第三种:组合继承

利用原型链继承和构造函数继承的各自优势进行组合使用,还是看代码:

function Parent(name){
  this.name = name;
  this.type = ['JS','HTML','CSS'];
}
Parent.prototype.Say=function(){
  console.log(this.name);
}
function Son(name){
  Parent.call(this,name);
}
Son.prototype = new Parent();
son1 = new Son('张三');
son2 = new Son('李四');
son1.type.push('VUE');
son2.type.push('PHP');
console.log(son1.type);//['JS','HTML','CSS','VUE']
console.log(son2.type);//['JS','HTML','CSS','PHP']
son1.Say();//张三
son2.Say();//李四

以上例子解释:
①创建一个叫做Parent的构造函数,里面有两个属性name、type
②通过Parent构造函数的属性(即原型对象)设置Say方法,此时,Parent有2个属性和1个方法
③创建子级构造函数Son,函数内部通过call方法调用父级构造函数Parent,实现继承
④子构造函数Son继承了父构造函数Parent,此时Son也有2个属性和1个方法
⑤分别创建构造函数Son的两个实例化对象son1、son2,传不同参数、给type属性新增不同元素、调用原型对象Say方法

优点:
①利用原型链继承,实现原型对象方法的继承
②利用构造函数继承,实现属性的继承,而且可以参数
组合函数基本满足了JS的继承,比较常用

缺点:
无论什么情况下,都会调用两次父级构造函数:一次是在创建子级原型的时候,另一次是在子级构造函数内部

第四种:原型式继承

创建一个函数,将参数作为一个对象的原型对象

function fun(obj) {
  function Son(){};
  Son.prototype = obj;
  return new Son();
}    
var parent = {
  name:'张三'
}
var son1 = fun(parent);
var son2 = fun(parent);
console.log(son1.name);//张三
console.log(son2.name);//张三

以上例子解释:
①创建一个函数fun,内部定义一个构造函数Son
②将Son的原型对象设置为参数,参数是一个对象,完成继承
③将Son实例化后返回,即返回的是一个实例化对象
优缺点:跟原型链类似

第五种:寄生继承

在原型式继承的基础上,在函数内部丰富对象

function fun(obj) {
  function Son() { };
  Son.prototype = obj;
  return new Son();
}
function JiSheng(obj) {
  var clone = fun(obj);
  clone.Say = function () {
    console.log('我是新增的方法');
  }
  return clone;
}
var parent = {
  name: '张三'
}
var parent1 = JiSheng(parent);
var parent2 = JiSheng(parent);
console.log(parent2.Say==parent1.Say);// false

以上例子解释:
①再原型式继承的基础上,封装一个JiSheng函数
②将fun函数返回的对象进行增强,新增Say方法,最后返回
③调用JiSheng函数两次,分别赋值给变量parent1、parent2
④对比parent1、parent2,结果为false,实现独立
优缺点:跟构造函数继承类似,调用一次函数就得创建一遍方法,无法实现函数复用,效率较低

这里补充一个知识点,ES5有一个新的方法Object.create(),这个方法相当于封装了原型式继承。这个方法可以接收两个参数:第一个是新对象的原型对象(可选的),第二个是新对象新增属性,所以上面代码还可以这样:

function JiSheng(obj) {
  var clone = Object.create(obj);
  clone.Say = function () {
    console.log('我是新增的方法');
  }
  return clone;
}
var parent = {
  name: '张三'
}
var parent1 = JiSheng(parent);
var parent2 = JiSheng(parent);
console.log(parent2.Say==parent1.Say);// false

第六种:寄生组合继承

利用组合继承和寄生继承各自优势
组合继承方法我们已经说了,它的缺点是两次调用父级构造函数,一次是在创建子级原型的时候,另一次是在子级构造函数内部,那么我们只需要优化这个问题就行了,即减少一次调用父级构造函数,正好利用寄生继承的特性,继承父级构造函数的原型来创建子级原型。

function JiSheng(son,parent) {
  var clone = Object.create(parent.prototype);//创建对象
  son.prototype = clone;   //指定对象
  clone.constructor = son;   //增强对象
}
function Parent(name){
  this.name = name;
  this.type = ['JS','HTML','CSS'];
}
Parent.prototype.Say=function(){
  console.log(this.name);
}
function Son(name){
  Parent.call(this,name);
}
JiSheng(Son,Parent);
son1 = new Son('张三');
son2 = new Son('李四');
son1.type.push('VUE');
son2.type.push('PHP');
console.log(son1.type);//['JS','HTML','CSS','VUE']
console.log(son2.type);//['JS','HTML','CSS','PHP']
son1.Say();//张三
son2.Say();//李四

以上例子解释:
①封装一个函数JiSheng,两个参数,参数1为子级构造函数,参数2为父级构造函数
②利用Object.create(),将父级构造函数原型克隆为副本clone
③将该副本作为子级构造函数的原型
④给该副本添加constructor属性,因为③中修改原型导致副本失去默认的属性

优缺点:
组合继承优点、寄生继承的有点,目前JS继承中使用的都是这个继承方法

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
脚本收藏iframe
Jul 21 Javascript
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
JavaScript中用toString()方法返回时间为字符串
Jun 12 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
JS DOM实现鼠标滑动图片效果
Sep 17 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
javascript滚轮事件基础实例讲解(37)
Feb 14 Javascript
80%应聘者都不及格的JS面试题
Mar 21 Javascript
初探Vue3.0 中的一大亮点Proxy的使用
Dec 06 Javascript
vue路由拦截器和请求拦截器知识点总结
Nov 08 Javascript
JavaScript鼠标悬停事件用法解析
May 15 Javascript
使用node.JS中的url模块解析URL信息
Feb 06 #Javascript
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 #Javascript
node.JS事件机制与events事件模块的使用方法详解
Feb 06 #Javascript
如何通过javaScript去除字符串两端的空白字符
Feb 06 #Javascript
ckeditor一键排版功能实现方法分析
Feb 06 #Javascript
JavaScript如何判断input数据类型
Feb 06 #Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 #jQuery
You might like
合作指挥官:孟斯克
2020/03/16 星际争霸
PHP与javascript对多项选择的处理
2006/10/09 PHP
主流PHP框架的优缺点对比分析
2014/12/25 PHP
通过chrome浏览器控制台(Console)进行PHP Debug的方法
2016/10/19 PHP
Yii框架参数配置文件params用法实例分析
2019/09/11 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
跨浏览器通用、可重用的选项卡tab切换js代码
2011/09/20 Javascript
Javascript中引用示例介绍
2014/02/21 Javascript
json传值以及ajax接收详解
2016/05/24 Javascript
浅谈Javascript中的函数、this以及原型
2016/10/09 Javascript
js 实现获取name 相同的页面元素并循环遍历的方法
2017/02/14 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
ES6新特性之数组、Math和扩展操作符用法示例
2017/04/01 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
2018/03/21 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
JS实现简单的文字无缝上下滚动功能示例
2019/06/22 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python import自定义模块方法
2015/02/12 Python
详解Python中的多线程编程
2015/04/09 Python
利用python爬取软考试题之ip自动代理
2017/03/28 Python
python 时间信息“2018-02-04 18:23:35“ 解析成字典形式的结果代码详解
2018/04/19 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
python 读取dicom文件,生成info.txt和raw文件的方法
2019/01/24 Python
使用python读取.text文件特定行的数据方法
2019/01/28 Python
详解pandas库pd.read_excel操作读取excel文件参数整理与实例
2019/02/17 Python
详解Python_shutil模块
2019/03/15 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
python生成随机红包的实例写法
2019/09/02 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
韩国江南富人区高端时尚百货商场:Galleria(格乐丽雅)
2018/03/27 全球购物
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
linux面试题参考答案(1)
2016/01/22 面试题