JavaScript中的几种继承方法示例


Posted in Javascript onDecember 06, 2020

1.原型链继承

原理: 子类原型指向父类实例对象实现原型共享,即Son.prototype = new Father()。

这里先简单介绍下原型

js中每个对象都有一个__proto__属性,这个属性指向的就是该对象的原型。js中每个函数都有一个prototype属性,这个属性指向该函数作为构造函数调用时创建的实例的原型。原型对象上有一个constructor属性,指向创建该对象的构造函数,该属性不可枚举。

var obj = {};
obj.__proto__ === Object.prototype; //true
console.log(Object.prototype.constructor) // ƒ Object

当我们访问一个对象的属性或者方法时,如果找不到,则会通过原型向上寻找,若原型上也未找到,则会去原型的原型上面去找。比如我要调用obj.toString方法时,在自身并未找到toString方法,则会去原型上去寻找,即在Object.prototype上去寻找,找到后运行该方法。

var obj = {};
obj.toString();
obj.__proto__.toString(); //obj.__proto__和Object.prototype指向的是一个对象,自然就能访问Object.prototype上的toString方法啦

注意:原型链的终点是null,使用bind方法返回的函数没有prototype属性。

var obj = {};
function fn(){};
fn.bind(obj).prototype; // undefined
Object.prototype.__proto__; // null

原型链接继承

function Father(age){
 this.age = age;
 this.color = ['red','pink']
}
Father.prototype.sayHello = function(){
 console.log('hello')
} 
function Son(sex){
 this.sex = sex
}
console.log(Son.prototype.constructor) // ƒ Son
Son.prototype = new Father(15) // 原型链继承关键
var son = new Son('男')
son.color.push('black')
var son2 = new Son('女')
son.sayHello() // hello
son.sayHello === son2.sayHello //true
console.log(son2.color) // ['red','pink','black']
console.log(Son.prototype.constructor) // ƒ Father

可以看到通过原型链实现继承,原型上引用类型的值会被所有实例共享。子类的constructor指向会发生改变,而且在创建子类实例时不可以向父类构造函数传递参数。可以手动把子类constructor属性指回其构造函数。

//写法一
Son.prototype.constructor = Son // 这种写法有点缺点,它会让constructor属性变的可以枚举。

//写法二
Object.defineProperty(Son.prototype,'constructor',{
 enumerable:false, // 设置不可枚举
 value:Son
})

2.构造函数继承

原理:在子类构造函数中通过apply或者call调用父类构造函数来继承属性或方法。

function Father(name){
 this.color = ['red']
 this.sayHello = function(){
  console.log('hello')
 }
}
Father.prototype.sayName = function(){
 console.log('zs')
}
function Son(num,name){
 Father.call(this,name) //实现继承的关键代码
 this.num = num
}
var son = new Son(10,'zs')
var son2 = new Son(15,'ls')
son.color.push('pink')
console.log(son2.color) // ['red']
son.sayName() //报错 son.sayName is not a function
console.log(son.sayHello === son2.sayHello) //false

可以看出通过构造函数实现继承,解决了原型链继承不能向父类传参以及引用类型值共享的问题。但这种继承方法却不能访问父类构造函数原型上的方法和属性,而且定义在父类构造函数中的方法也不能复用。

3.组合式继承

组合继承,有时候也叫伪经典继承,它是将原型链继承和构造函数继承结合到一起的一种继承模式。实现思路是通过原型链实现对原型属性和方法的继承,通过借用构造函数实现对实例属性的继承。

function Father(name){
 this.color = ['red']
}
Father.prototype.sayName = function(){
 console.log('zs')
}
function Son(num,name){
 Father.call(this,name) //继承实例属性
 this.num = num
}
Son.prototype = new Father() //继承原型上属性
Son.prototype.constructor = Son
var son = new Son(10,'zs')
var son2 = new Son(15,'ls')
son.color.push('pink')
console.log(son.color,son2.color) //['red','pink'] ['red']
son.sayName() // zs

组合式继承避免了原型链继承和构造函数继承的缺点,融合了它们的优点,成为JavaScript中常用的一种继承模式。

4.寄生式继承

寄生式继承与工厂模式类似,一般用来继承对象。即创建一个封装继承的函数,在函数内部复制一份该对象,对复制的对象进行处理,返回复制的对象。

function createAnother(obj){
  var clone = Object.create(obj)
  clone.name = 'zs'
  clone.sayHello = function(){
   console.log('hello')
  }
  return clone
}
var obj = {age:15}
var newObj = createAnother(obj) // 15
console.log(newObj.name) // zs
newObj.sayHello() // hello

5.寄生组合式继承

前面说到过组合式继承是Javascript中最常用的继承模式,不过这种模式也有自己的不足,它会调用两次父类构造函数。第一次是在将子类原型指向父类实例的时候,第二次是在子类构造函数中调用的。

function Father(name){
  this.name = name
 }
 function Son(num,name){
  Father.call(this,name) // 第二次调用
 }
 Son.prototype = new Father('ls') // 第一次调用
 var son = new Son(10,'zs')
 console.log(son)

在第一次调用的时候,Son.prototype会继承name这个属性,第二次调用时,实例对象会继承name。当我们获取实例对象的name属性时因为实例对象上有该属性,所以是不会去原型上去寻找的,相当于实例对象上的name属性把原型上的name属性给屏蔽掉了,所以原型上的这个属性是多余的。

JavaScript中的几种继承方法示例

为了解决这个问题,就有了寄生组合式继承。主要思路就是创建一个函数完成原型链继承和constructor的指向问题,然后通过构造函数继承属性。

// 复制一个父类的原型指向,将子类的原型指向复制的父类原型,达到不用调用父类构造函数就能继承其原型上的方法的效果。
 function inherit(Sup,Sub){
  var prototype = Object.create(Sup.prototype)
  Sub.prototype = prototype
  prototype.constructor = Sub
 }
 function Father(name){
  this.name = name
 }
 function Son(name){
 Father.call(this,name)
 }
 inherit(Father,Son)
 var son = new Son('zs')
 console.log(son)

JavaScript中的几种继承方法示例

以上就是JavaScript中常用的几种继承方式啦。

到此这篇关于JavaScript中的几种继承方法的文章就介绍到这了,更多相关JavaScript继承方法内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery Ajax之load()方法
Oct 12 Javascript
yepnope.js 异步加载资源文件
Sep 08 Javascript
一个js导致的jquery失效问题的解决方法
Nov 27 Javascript
javascript操作html控件实例(javascript添加html)
Dec 02 Javascript
原生JS实现-星级评分系统的简单实例
Aug 21 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
JS克隆,属性,数组,对象,函数实例分析
Nov 26 Javascript
AngularJS指令与控制器之间的交互功能示例
Dec 14 Javascript
JavaScript函数基础详解
Feb 03 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
微信小程序文章详情功能完整实例
Jun 03 Javascript
js调用网络摄像头的方法
Dec 05 #Javascript
浅谈Vue使用Elementui修改默认的最快方法
Dec 05 #Vue.js
vue+element_ui上传文件,并传递额外参数操作
Dec 05 #Vue.js
JavaScript实现浏览器网页自动滚动并点击的示例代码
Dec 05 #Javascript
解决vue下载后台传过来的乱码流的问题
Dec 05 #Vue.js
js获取图片的base64编码并压缩
Dec 05 #Javascript
js重写alert事件(避免alert弹框标题出现网址)
Dec 04 #Javascript
You might like
用php来改写404错误页让你的页面更友好
2013/01/24 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
使用openssl实现rsa非对称加密算法示例
2014/01/24 PHP
PHP伪造来源HTTP_REFERER的方法实例详解
2015/07/06 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
Javascript中的变量使用说明
2010/05/18 Javascript
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
2013/05/24 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
JavaScript中pop()方法的使用教程
2015/06/09 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
Node.js中文件操作模块File System的详细介绍
2017/01/05 Javascript
Javascript 实现计算器时间功能详解及实例(二)
2017/01/08 Javascript
浅谈Vuex@2.3.0 中的 state 支持函数申明
2017/11/22 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
JS实现的3des+base64加密解密算法完整示例
2018/05/18 Javascript
JS中通过url动态获取图片大小的方法小结(两种方法)
2018/10/31 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
在antd Table中插入可编辑的单元格实例
2020/10/28 Javascript
python实现保存网页到本地示例
2014/03/16 Python
python通过opencv实现批量剪切图片
2017/11/13 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
ALDO加拿大官网:加拿大女鞋品牌
2018/12/22 全球购物
Linux如何为某个操作添加别名
2013/03/01 面试题
学前教育毕业生自荐信范文
2013/12/24 职场文书
七一党建活动方案
2014/01/28 职场文书
小学数学教学反思
2014/02/02 职场文书
网络技术专业求职信
2014/05/02 职场文书
作风建设年活动总结
2014/08/27 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
运动会闭幕式主持词
2015/07/01 职场文书
总结一些Java常用的加密算法
2021/06/11 Java/Android
Nginx图片服务器配置之后图片访问404的问题解决
2022/03/21 Servers