JavaScript中继承的几种实现方式

本篇文章将为你介绍javascript继承的几种实现方式,希望在看完本篇文章后,各位对javascript的继承有一定的了解!

JavaScript中继承的几种实现方式

JavaScript中继承的几种实现方式

继承

想要实现继承,首先就得有个父类(构造函数)来提供属性和方法。

function Father(name){    this.name=name   //父类构造函数中的属性}Father.prototype.age='40'   //父类原型中的属性

登录后复制

1、借用构造函数继承

立即学习“Java免费学习笔记(深入)”;

var Son=function(){    Father.call(this,...arguments)    this.age=10}var son=new Son('小明')console.log(son)   //{name: "小明", age: 10}

登录后复制

此时Son函数只是通过call方法在子级构造函数中调用父级构造函数

也就是说只继承了父类构造函数的属性,没有继承父类原型的属性。

此时可以通过instanceof方法进行判断

console.log(son instanceof Father) //false

登录后复制

2、通过原型链继承

var Son=function(name){    this.sonName=name}Son.prototype=new Father()var xiaoming=new Son('小明')console.log(xiaoming)    //{sonName:'小明'}console.log(xiaoming.__proto__==Son.prototype)   //trueconsole.log(xiaoming.__proto__.__proto__==Father.prototype) //trueconsole.log(xiaoming.age)  //40  通过原型链查找

登录后复制

Son继承了Father构造函数中的name属性以及原型中的age属性,

Son的原型对象小明继承了Son构造函数中的sonName属性、Father构造函数中的name属性以及原型中的age属性,但是只能传值给Son,不能传值给Father。

3、组合继承(组合原型链继承和借用构造函数继承)

var Son=function(){    Father.call(this,...arguments)}Son.prototype=new Father()var son=new Son('小明')console.log(son)  //{name:'小明'}console.log(son.age) //40

登录后复制

结合1、2两种继承方法,解决了无法继承原型属性、方法以及不能传参的问题。实际上子类上会拥有父类的两份属性,只是子类的属性覆盖了父类的属性(Father.call(),new Father())

4、拷贝继承

通过for…in,把父类对象和原型对象上可枚举的属性和方法循环赋值到Son的原型上

function Son(name){  var father=new Father()  for(let i in father){    console.log(father[i])    Son.prototype[i]=father[i]  }  Son.prototype.name=name}var son=new Son('leo')console.log(son)

登录后复制

这种方法无法获取父类不可枚举的方法,同时因为要拷贝父类的属性和方法,内存占用比较高,效率较低。

5、原型式继承

采用原型式继承并不需要定义一个类,传入参数obj,生成一个继承obj对象的对象。类似于复制一个对象,用函数进行包装。但是它不是类式继承,而是原型式基础,缺少了类的概念。

function ObjectCreate(obj){ //这个方法的原理就是Object.create()  function F(){}  F.prototype=obj  return new F()}var Son=new Father('son');var son=ObjectCreate(Son)var objson=Object.create(Son);console.log(son.name)   //sonconsole.log(objson.name)  //sonconsole.log(son.__proto__==Son)  //true

登录后复制

6、寄生式继承

创建一个仅仅用于封装继承过程的函数,然后在内部以某种方式增强对象,最后返回对象

function ObjectCreate(obj){  function F(){}  F.prototype=obj  return new F()}var Son=new Father();function subObject(obj){  var sub=ObjectCreate(obj)  sub.name='son'  return sub}var son=subObject(Son)console.log(son.name)  //son

登录后复制

7、寄生组合式继承

结合寄生式继承和组合式继承,完美实现不带两份超类属性的继承方式,但是太过繁杂,感觉还不如组合式继承。

function ObjectCreate(obj){  function F(){}  F.prototype=obj  return new F()  }var middle=ObjectCreate(Father.prototype) //middle的原型继承了父类函数的原型function Son(){  Father.call(this,...arguments)}Son.prototype=middle; middle.construtor=Son;   //修复实例 var son=new Son('son');console.log(son)   //{name:'son'}

登录后复制

本文来自 js教程 栏目,欢迎学习!

以上就是JavaScript中继承的几种实现方式的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2761886.html

(0)
上一篇 2025年3月8日 09:40:23
下一篇 2025年3月1日 19:23:50

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 解析Json字符串方法总结

    这次给大家带来解析Json字符串方法总结,解析Json字符串的注意事项有哪些,下面就是实战案例,一起来看一下。 下面将介绍日常中使用的三种解析json字符串的方法  1.首先,我们先看一下什么是 json 格式字符串数据,很简单,就是 js…

    编程技术 2025年3月8日
    200
  • redis在nodejs中应用案例详解

    这次给大家带来redis在nodejs中应用案例详解,redis在nodejs中应用的注意事项有哪些,下面就是实战案例,一起来看一下。 redis是一个性能非常好的内存数据库,部署在应用程序和mysql数据中间做注意事项库,可以极大的提升应…

    编程技术 2025年3月8日
    200
  • vue中模态对话框组件实现步骤详解

    这次给大家带来vue中模态对话框组件实现步骤详解,vue中模态对话框组件实现的注意事项有哪些,下面就是实战案例,一起来看一下。 写在前面 对话框是很常用的组件 , 在很多地方都会用到,一般我们可以使用自带的alert来弹出对话框,但是假如是…

    2025年3月8日
    200
  • 不用JS做出菜单打开与关闭

    这次给大家带来不用JS做出菜单打开与关闭,不用JS做出菜单打开与关闭的注意事项有哪些,下面就是实战案例,一起来看一下。 我在写有菜单栏的网页时,基本都会用响应式设计来适配移动端,例如把不重要的菜单选项隐藏,或者创建一个菜单按钮来控制的菜单的…

    2025年3月8日
    200
  • Vue项目中使用d3.js案例详解

    这次给大家带来Vue项目中使用d3.js案例详解,Vue项目中使用d3.js的注意事项有哪些,下面就是实战案例,一起来看一下。 之前写一个 Demo里面 有些东西要使用d3实现一些效果 但是在很多论坛找资源都找不到可以在Vue里面使用D3.…

    2025年3月8日
    200
  • 调用缓存实现JS方法步骤详解

    这次给大家带来调用缓存实现JS方法步骤详解,调用缓存实现JS方法的注意事项有哪些,下面就是实战案例,一起来看一下。 1.什么是方法重载 方法重载是指在一个类中定义多个同名的方法,但要求每个方法具有不同的参数的类型或参数的个数。简而言之就是:…

    编程技术 2025年3月8日
    200
  • JS实现缓冲运动作用详解

    这次给大家带来JS实现缓冲运动作用详解,JS实现缓冲运动的注意事项有哪些,下面就是实战案例,一起来看一下。 缓冲需要用到数值取整,向上取整:Math.ceil()  向下取整Math.floor() 移动的速度慢慢减慢的效果,移动速度=(终…

    编程技术 2025年3月8日
    200
  • 操作JS中DOM节点有哪些方法

    这次给大家带来操作JS中DOM节点有哪些方法,操作JS中DOM节点的注意事项有哪些,下面就是实战案例,一起来看一下。 DOM操作在JS中可以说是非常常见了吧,很多网页的小功能的实现,比如一些元素的增删操作等都可以用JS来实现。那么在DOM中…

    2025年3月8日
    200
  • jQuery遍历XML节点与属性实现步骤

    这次给大家带来jQuery遍历XML节点与属性实现步骤,jQuery遍历XML节点与属性的注意事项有哪些,下面就是实战案例,一起来看一下。 研究了一下, 好像jquery没有attributes. 还是要借助于原生态的JS 以下是JS代码 …

    编程技术 2025年3月8日
    200
  • JS实现透明度渐变功能

    这次给大家带来JS实现透明度渐变功能,JS实现透明度渐变功能的注意事项有哪些,下面就是实战案例,一起来看一下。 JS透明度变化效果 body{ margin: 0px; padding: 0px; } .redb{ width:200px;…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论