0

0

JavaScript中继承的几种实现方式

php中世界最好的语言

php中世界最好的语言

发布时间:2018-05-14 14:03:56

|

2987人浏览过

|

来源于博客园

转载

本篇文章将为你介绍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)   //true
console.log(xiaoming.__proto__.__proto__==Father.prototype) //true
console.log(xiaoming.age)  //40  通过原型链查找

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

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

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

科威旅游管理系统
科威旅游管理系统

该软件是以php+MySQL进行开发的旅游管理网站系统。系统前端采用可视化布局,能自动适应不同尺寸屏幕,一起建站,不同设备使用,免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式,让用户以最快的速度找到所需行程,大幅提高效率。系统可设置推荐、优惠行程,可将相应行程高亮显示,对重点行程有效推广,可实现网站盈利。系统支持中文、英文,您还可以在后台添加新的语言,关键字单独列出,在后台即可快速翻译。

下载
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)   //son
console.log(objson.name)  //son
console.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教程 栏目,欢迎学习!

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
excel制作动态图表教程
excel制作动态图表教程

本专题整合了excel制作动态图表相关教程,阅读专题下面的文章了解更多详细教程。

20

2025.12.29

freeok看剧入口合集
freeok看剧入口合集

本专题整合了freeok看剧入口网址,阅读下面的文章了解更多网址。

65

2025.12.29

俄罗斯搜索引擎Yandex最新官方入口网址
俄罗斯搜索引擎Yandex最新官方入口网址

Yandex官方入口网址是https://yandex.com;用户可通过网页端直连或移动端浏览器直接访问,无需登录即可使用搜索、图片、新闻、地图等全部基础功能,并支持多语种检索与静态资源精准筛选。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

197

2025.12.29

python中def的用法大全
python中def的用法大全

def关键字用于在Python中定义函数。其基本语法包括函数名、参数列表、文档字符串和返回值。使用def可以定义无参数、单参数、多参数、默认参数和可变参数的函数。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

16

2025.12.29

python改成中文版教程大全
python改成中文版教程大全

Python界面可通过以下方法改为中文版:修改系统语言环境:更改系统语言为“中文(简体)”。使用 IDE 修改:在 PyCharm 等 IDE 中更改语言设置为“中文”。使用 IDLE 修改:在 IDLE 中修改语言为“Chinese”。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

16

2025.12.29

C++的Top K问题怎么解决
C++的Top K问题怎么解决

TopK问题可通过优先队列、partial_sort和nth_element解决:优先队列维护大小为K的堆,适合流式数据;partial_sort对前K个元素排序,适用于需有序结果且K较小的场景;nth_element基于快速选择,平均时间复杂度O(n),效率最高但不保证前K内部有序。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

12

2025.12.29

php8.4实现接口限流的教程
php8.4实现接口限流的教程

PHP8.4本身不内置限流功能,需借助Redis(令牌桶)或Swoole(漏桶)实现;文件锁因I/O瓶颈、无跨机共享、秒级精度等缺陷不适用高并发场景。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

134

2025.12.29

抖音网页版入口在哪(最新版)
抖音网页版入口在哪(最新版)

抖音网页版可通过官网https://www.douyin.com进入,打开浏览器输入网址后,可选择扫码或账号登录,登录后同步移动端数据,未登录仅可浏览部分推荐内容。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

63

2025.12.29

快手直播回放在哪看教程
快手直播回放在哪看教程

快手直播回放需主播开启功能才可观看,主要通过三种路径查看:一是从“我”主页进入“关注”标签再进主播主页的“直播”分类;二是通过“历史记录”中的“直播”标签页找回;三是进入“个人信息查阅与下载”里的“直播回放”选项。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

18

2025.12.29

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
React 教程
React 教程

共58课时 | 3.1万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 1.9万人学习

Bootstrap 5教程
Bootstrap 5教程

共46课时 | 2.7万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号