JavaScript中常见的几种继承方式

 更新时间:2022年06月24日 08:50:31   作者:​ 远方的小草   ​  
这篇文章主要介绍了JavaScript中常见的几种继承方式,继承可以访问父类原型上的方法或属性,实现了方法复用,但是创建子类实例时,不能传父类的参数,子类实例共享了父类构造函数的属性值

原型继承

function Parent(name) {
  this.name = name
}
Parent.prototype.getName = function(){
  return 'parentPrototype' + ' ' + this.name;
}
function Son() {
}
Son.prototype = new Parent();
console.log(new Son())

内存图

分析

原型继承的原理就是把子类的prototype指向父类的实例身上,这样做,子类就可以使用父类的属性和方法了,但是,无法初始化父类的属性,这个时候,盗用构造函数继承就出现了

盗用构造函数继承

function Parent(name) {
  this.name = name
}
Parent.prototype.getName = function(){
  return 'parentPrototype' + ' ' + this.name;
}
function Son(name) {
  Parent.call(this, name)
}

console.log(new Son('jack'))

分析

盗用构造函数的原理简单理解就是吧父类函数的代码 copy 到子类里面,在上述代码中相当于把父类的this.name = name 在子类里执行了一次,这样的话,就可以在子类实例化的时候初始化父类的一些属性

如果这样的话就取不到父类原型身上的方法了,为了解决这个问题,组合继承就出现了

组合继承

function Parent(name) {
  this.name = name
}
Parent.prototype.getName = function(){
  return 'parentPrototype' + ' ' + this.name;
}
function Son(name) {
  Parent.call(this, name) // 第二次调用
}
Son.prototype = new Parent() // 第一次调用
console.log(new Son('jack'))

组合继承,也称为伪经典继承,结合了原型继承和盗用构造函数继承,既可以初始化父类的方法,又可以取到父类的原型身上的方法

可以看到这种继承方式name会被多次创建,虽然在使用上没什么区别,但是会多开辟一些无用内存,而且还会多调用一次函数

原型链继承

const parent = {
  name: 'jack',
  getName() {
    return this.name
  }
}
const son = Object.create(parent)
console.log(son)

这种继承适用于想在一个对象的基础上添加一个新的对象,这个新的对象可以有自己独立的属性

还可以有自己的属性:

const parent = {
  name: 'jack',
  getName() {
    return this.name
  }
}
const son = Object.create(parent, {
  age: {
    value: 18,
    enumerable: true,
    writable: true,
    configurable: true
  }
})
console.log(son)

寄生式继承

const parent = {
  name: 'jack',
  getName() {
    return this.name
  }
}
function createObj(origin){
  const res = Object(origin);
  res.age = 18;
  res.getAge = function() {
    return this.age
  };
  return res
}
const son = createObj(parent)
console.log(son)

寄生式继承就是类似于工厂模式,经过它创建的函数,会有一些自带的值

寄生组合式继承

function Parent(name) {
  this.name = name;
}
Parent.prototype.getName = function () {
  return this.name;
}
function Son(name) {
  Parent.call(this, name)
};
function inhertPrototype(Son, Parent) {
  const res = Object(Parent.prototype); // 创建目标对象的原型对象
  // 可以理解为复制父类对象prototype的属性,这样做可以少调用一次父类的实例化操作
  res.constructor = Son // 将构造函数指向son
  Son.prototype = res //将子类的prototype 指向父类创建的原型对象,这样子类既可以使用父类的方法,又不用实例化父类
}
inhertPrototype(Son, Parent)
console.log(new Son('jack'))

寄生组合式继承 被称为最佳继承模式 他解决了组合继承父类函数被调用两次的问题,同时又不会给子类的prototype 加上父类的无用的属性

 可以对比组合继承的图看一下,prototype 上少了 name ,最佳的继承方式

到此这篇关于JavaScript中常见的几种继承方式的文章就介绍到这了,更多相关js继承方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • js无痛刷新Token的实现

    js无痛刷新Token的实现

    本文主要介绍了js无痛刷新Token的实现,文中根据实例编码详细介绍的十分详尽,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • layui(1.0.9)文件上传upload,前后端的实例代码

    layui(1.0.9)文件上传upload,前后端的实例代码

    今天小编就为大家分享一篇layui(1.0.9)文件上传upload,前后端的实例代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript解决跨域的三种方法小结

    JavaScript解决跨域的三种方法小结

    在Web应用中,当一个网页的脚本试图去请求另一个域名下的资源时,就会遇到跨域问题,跨域问题是由浏览器的同源策略所引起的,本文给大家介绍了JavaScript解决跨域的三种方法,需要的朋友可以参考下
    2024-03-03
  • 详解tween.js 中文使用指南

    详解tween.js 中文使用指南

    本篇文章主要介绍了详解tween.js 中文使用指南,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01
  • D3.js实现直方图的方法详解

    D3.js实现直方图的方法详解

    直方图在我们平常的时候经常见到,那么这篇文章给大家介绍了下如何使用D3.js实现直方图,文中通过实例介绍的很详细,有需要的朋友们可以参考借鉴。
    2016-09-09
  • uniapp中使用videojs构建H5直播播放器

    uniapp中使用videojs构建H5直播播放器

    这篇文章主要为大家介绍了uniapp中使用videojs构建H5直播播放器实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • JavaScript装饰者模式原理与用法实例详解

    JavaScript装饰者模式原理与用法实例详解

    这篇文章主要介绍了JavaScript装饰者模式原理与用法,结合实例形式总结分析了JavaScript装饰者模式相关概念、功能、原理、用法及操作注意事项,需要的朋友可以参考下
    2020-03-03
  • JS实现的不规则TAB选项卡效果代码

    JS实现的不规则TAB选项卡效果代码

    这篇文章主要介绍了JS实现的不规则TAB选项卡效果代码,基于鼠标事件动态设置页面元素样式实现该效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09
  • uniapp实现人脸识别功能的具体实现代码

    uniapp实现人脸识别功能的具体实现代码

    最近在使用uniapp开发项目,有刷脸实名认证的需求,下面这篇文章主要给大家介绍了关于uniapp实现人脸识别功能的具体实现,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • js实现数组冒泡排序、快速排序原理

    js实现数组冒泡排序、快速排序原理

    这篇文章主要为大家详细介绍了js实现数组冒泡排序、快速排序的原理,感兴趣的小伙伴们可以参考一下
    2016-03-03

最新评论