JS精髓原型链继承及构造函数继承问题纠正


Posted in Javascript onJune 16, 2022

前言

先从面向对象讲起,本瓜认为:面向对象编程,它的最大能力就是:复用!

咱常说,面向对象三大特点,封装、继承、多态。

这三个特点,以“继承”为核心。封装成类,是为了继承,继承之后再各自发展(重写),可理解为多态。所以,根本目的是为了继承,即“复用“!

如果你用 JavaScript 面向对象的能力来编程的话,能想到的,也只供使用的就是:基于原型

因为这门语言设计就是这样,我们之前也提过:JavaScript的语言设计主要受到了Self(一种基于原型的编程语言)和 Scheme(一门函数式编程语言)的影响;

它复用的能力就是来自原型!

好了,有这个认知基础,我们再看原型继承。

原型链继承

原型继承最直接的一种实现就是:原型链继承

ECMA-262 把原型链定义为 ECMAScript 的主要继承方式。其基本思想就是通过原型继承多个引用类型的属性和方法。

我们来看看原型链继承的代码实现:

function SuperType() {
	 this.property = true;
}
function SubType() {
	 this.subproperty = false;
}
SuperType.prototype.getSuperValue = function() {
 return this.property;
};
SubType.prototype.getSubValue = function () {
 return this.subproperty;
};
SubType.prototype = new SuperType(); // 对 SubType 得原型链重新指定,是原型链继承
let instance = new SubType();
console.log(instance.getSuperValue()); // true

还需要再额外说明查找关系吗??不懂得工友可见这篇 《歪理解?原型链中的函数和对象》

这里还是用代码展示下它们的指向关系吧:

上面例子中有 1 个对象 instance , 两个函数,SuperType 和 SubType 。函数是上帝,对象是基本物质。

继承来自两方面:

  • 1. 继承自祖先(遗产);
  • 2. 继承自上帝(天赋);
//  继承自祖先(遗产)
instance.__proto__ === SubType.prototype // true
SubType.prototype.__proto__ === SuperType.prototype // true
// 继承自上帝(天赋)
SuperType.__proto__  === Function.prototype // true
SubType.__proto__  === Function.prototype // true
SuperType.prototype.__proto__ === Object.prototype // true
Object.prototype.__proto__ === null // true

当然,我们并不是来讲原型链的。重点是:点出原型链继承的“问题”!!

它的主要问题出现在:原型中包含引用值的时候,原型中包含的引用值会在所有实例间共享。

function SuperType() {
 this.colors = ["red", "blue", "green"];
}
function SubType() {}
SubType.prototype = new SuperType() // 原型链继承
let s1 = new SubType()
let s2 = new SubType()
s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green', 'yellow']

colors 是个数组,引用值,当它共享给 SubType 的时候,用的是引用值,当我们实例化的时候,如果其中一个实力对它做出了修改,将会影响到其它实例的引用。

其实,我们也知道,很少在业务代码中这样去写继承:SubType.prototype = new SuperType() ,原型链继承会造成复用的混乱,所以它基本不会被单独使用。

构造函数继承

构造函数继承,也叫做:“盗用构造函数”,“对象伪装”或“经典继承”。

基本思路:在子类构造函数中用 apply()和 call()方法调用父类构造函数。

上一小节的例子改造为:

function SuperType() {
 this.colors = ["red", "blue", "green"];
}
function SubType() {
	SuperType.call(this) // 构造函数继承
}
let s1 = new SubType()
let s2 = new SubType()
s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green']

完美解决原型链继承的问题,但是它也有它的问题,也是使用构造函数模式自定义类型的问题,

即:必须在构造函数中定义方法(在原型上定义方法,子类是访问不到的),函数不能重用

function SuperType() {
}
function SubType() {
	SuperType.call(this) // 构造函数继承
}
SuperType.prototype.fn = ()=>{}
let s1 = new SubType()
console.log(s1.fn) // undefined
function SuperType() {
	 this.fn=()=>{}
}
function SubType() {
	SuperType.call(this) // 构造函数继承
}
let s1 = new SubType()
let s2 = new SubType()
console.log(s1.fn === s2.fn) // false

而这一点,在原型链继承中,又是可以的。。。

function SuperType() {}
function SubType() {}
SuperType.prototype.fn = ()=>{}
SubType.prototype = new SuperType() // 原型链继承
let s1 = new SubType()
console.log(s1.fn) // ()=>{}
function SuperType() {
	 this.fn=()=>{}
}
function SubType() {}
SubType.prototype = new SuperType() // 原型链继承
let s1 = new SubType()
let s2 = new SubType()
console.log(s1.fn === s2.fn) // true

所以,综上,原型链继承和构造函数继承的 “毛病” 分别是:

  • 原型链继承:所有继承的属性和方法都会在对象实例间共享,无法做到实例私有。
  • 构造函数继承:子类不能访问父类原型上的方法。

咱就是说,这东西怎么这么拧巴呢。。。

于是乎一个规避二者“毛病”的继承方式出现了:组合继承~~

组合继承

目前最流行的继承模式是组合继承!

思路是:使用原型链继承原型上的属性和方法,而通过构造函数继承实例属性。

function SuperType(name){
	 this.name = name;
	 this.colors = ["red", "blue", "green"];
}
function SubType(name, age){
	 SuperType.call(this, name) // 构造函数继承
	 this.age = age;
}
SuperType.prototype.sayName = function() {
	 console.log(this.name);
}
SubType.prototype = new SuperType() // 原型链继承
SubType.prototype.sayAge = function() {
	 console.log(this.age);
}
let s1 = new SubType("Nicholas", 29)
let s2= new SubType("Greg", 27)
s1.colors.push("yellow")
console.log(s1.colors) // ['red', 'blue', 'green', 'yellow']
console.log(s2.colors) // ['red', 'blue', 'green']
s1.sayName() // Nicholas
s2.sayName() // Greg
s1.sayAge() // 29
s2.sayAge() // 27

组合继承,总结起来就是,属性(特别是引用值)通过构造函数去继承,而公用的、需要复用的方法用原型链去继承!!

说实话,JS 继承真的很奇怪。。。并不是面向对象语言,又要通过原型链去模拟面向对象,真的很多小坑的点需要去注意。(哈哈哈,想想还是函数式好,清晰)

以上就是JS精髓原型链继承及构造函数继承问题纠正的详细内容,更多关于JS原型链继承构造函数继承的资料请关注三水点靠木其它相关文章!


Tags in this post...

Javascript 相关文章推荐
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
JavaScript创建一个object对象并操作对象属性的用法
Mar 23 Javascript
js父页面中使用子页面的方法
Jan 09 Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 Javascript
详解RequireJS按需加载样式文件
Apr 12 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
简单介绍react redux的中间件的使用
Apr 06 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
Nov 02 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
解决vscode进行vue格式化,会自动补分号和双引号的问题
Oct 26 Javascript
5个实用的JavaScript新特性
Jun 16 #Javascript
字节飞书面试promise.all实现示例
Jun 16 #Javascript
JS轻量级函数式编程实现XDM三
Jun 16 #Javascript
JS轻量级函数式编程实现XDM二
Jun 16 #Javascript
JS函数式编程实现XDM一
Jun 16 #Javascript
正则表达式基础与常用验证表达式
Jun 16 #Javascript
使用compose函数优化代码提高可读性及扩展性
You might like
php 三元运算符实例详细介绍
2016/12/15 PHP
PHP三种方式实现链式操作详解
2017/01/21 PHP
2017年最好用的9个php开发工具推荐(超好用)
2017/10/23 PHP
重定向实现代码
2006/11/20 Javascript
JavaScript 闭包在封装函数时的简单分析
2009/11/28 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
JavaScript操作选择对象的简单实例
2016/05/16 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
javaScript 事件绑定、事件冒泡、事件捕获和事件执行顺序整理总结
2016/10/10 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
JavaScript中的遍历详解(多种遍历)
2017/04/07 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
vue2.0与bootstrap3实现列表分页效果
2017/11/28 Javascript
jQuery实现动态加载select下拉列表项功能示例
2018/05/31 jQuery
vue实现移动端悬浮窗效果
2018/12/01 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
js实现旋转的星空效果
2019/11/01 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
[39:21]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.24
2019/09/10 DOTA
python生成IP段的方法
2015/07/07 Python
Python编程实现数学运算求一元二次方程的实根算法示例
2017/04/02 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
Python的高阶函数用法实例分析
2019/04/11 Python
Python变量访问权限控制详解
2019/06/29 Python
解决redis与Python交互取出来的是bytes类型的问题
2020/07/16 Python
python爬虫如何解决图片验证码
2021/02/14 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
ProForm英国站点:健身房和健身器材网上商店
2019/06/05 全球购物
Ego Shoes官网:英国时髦鞋类品牌
2020/10/19 全球购物
销售经理工作职责范文
2013/12/03 职场文书
2014教师年度工作总结
2014/11/10 职场文书
2015年度物流工作总结
2015/04/30 职场文书