欢迎光临散文网 会员登陆 & 注册

JavaScript 基础知识总结:继承

2023-09-14 09:41 作者:蓝桥云课  | 我要投稿

JavaScript 的继承是通过原型链实现的,要实现继承需要理解原型和原型链的概念。


原型和原型链

1、仅函数上存在 prototype 属性(这是一个显式原型属性),其指向原型对象,原型对象上存在两个属性:constructor 和 [[prototype]] (无法访问,部分浏览器可通过 __proto__ 访问,这是一个隐式的原型属性)

  • constructor :指向构造函数,即是函数自身

  • [[prototype]](__proto__):指向构造函数的原型对象,即 Object ,Object.__proto__ = null

2、当通过 new 调用这个函数时,得到的对象会存在 [[prototype]](__proto__),指向的是函数的 prototype 属性

3、所有的对象上都存在 [[prototype]](__proto__)属性

4、这种通过 __proto__ 在各对象间建立链接的工具就是原型链,通过原型链可以访问到其他对象的属性和方法

继承的实现方式

继承指一个对象直接使用另一对象的属性和方法。JavaScript 的继承是通过原型链实现的。


实现属性继承的核心代码是:

SuperFn.call(this)

实现方法继承的核心代码是:

 SubFn.prototype.__proto__ = SuperFn.prototype


具体实现方式有以下6种:


1、ES6 class类 extends 继承

通过ES6 新增的语法糖实现继承


2、基于原型继承

原型赋值SubFn.prototype = new SuperFn();

问题点:

  • 原型对象的 constructor 属性值变为 Object

  • 原型对象中包含引用值,值操作会同时反应到所有继承对象上

  • 子类型在实例化时不能给父类型的构造函数传参

3、借用构造函数

构造函数内部执行 SuperFn.call(this),只能继承属性,不能继承原型链上的方法

问题点:

  • 只能继承父类的实例属性和方法,不能继承原型属性/方法

  • 字类构造函数无法实现复用,每个子类都有父类实例函数的副本


4、组合继承

构造函数内部执行 SuperFn.call(this),原型赋值 SubFn.prototype.__proto__ = SuperFn.prototype;


5、原型式继承

此种方式和 subObj = Object.create(superObj)实现的功能相同


6、寄生式组合继承

构造函数内部执行 SuperFn.call(this),原型赋值 SubFn.prototype = Object.create(SuperFn.prototype);

作者及图片来源:单线程

版权声明:蓝桥云课仅做分享使用,如有侵权,联系删除!


看完作者“单线程”的分享,想必大家对于JavaScript 的继承已经有所了解。同时,为了帮助大家更好实战,学姐给大家找来了该作者在“蓝桥云课”的实战课——《JavaScript 从零构建音乐播放器



本实验采用原生 JavaScript 搭建类似网易云的音乐播放器。


应用到的技术包括 :ES6 新增的语法糖如解构赋值、箭头函数、展开运算符模板字符串 ,异步处理 Promise,ES6 模块化,异步网络请求 Ajax,单页面应用思想,数据响应式思想。


通过上述技术最终完成页面切换,轮播图,音乐播放器等功能。


如果你是“蓝桥云课”的学习会员,那么你可以免费学习该课程。


课程免费学习方式:

  • 复制下方链接到浏览器→进行学生认证→点击确认购买

https://www.lanqiao.cn/vip?member_type=premium/?from=wechat


现在添加会员

还送独家定制算法模板鼠标垫
数量有限,先到先得

↓↓↓


最后,如果你对你的编程能力有信心,那么来做一下《每日一题》测试下程度吧→蓝桥杯真题——信号覆盖

JavaScript 基础知识总结:继承的评论 (共 条)

分享到微博请遵守国家法律