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 相关文章推荐
js中几种去掉字串左右空格的方法
Dec 25 Javascript
悄悄用脚本检查你访问过哪些网站的代码
Dec 04 Javascript
使用JS或jQuery模拟鼠标点击a标签事件代码
Mar 10 Javascript
web前端开发upload上传头像js示例代码
Oct 22 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
JS实现无缝循环marquee滚动效果
May 22 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
Node.js如何使用Diffie-Hellman密钥交换算法详解
Sep 05 Javascript
微信小程序实现多选功能
Nov 04 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
ES6 Set结构的应用实例分析
Jun 26 Javascript
Vue 使用beforeEach实现登录状态检查功能
Oct 31 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
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
php实现过滤UBB代码的类
2015/03/12 PHP
php二维码生成
2015/10/19 PHP
php+flash+jQuery多图片上传源码分享
2020/07/27 PHP
php获取客户端IP及URL的方法示例
2017/02/03 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
php使用curl_init()和curl_multi_init()多线程的速度比较详解
2018/08/15 PHP
php设计模式之适配器模式实例分析【星际争霸游戏案例】
2020/04/07 PHP
js 延迟加载 改变JS的位置加快网页加载速度
2012/12/11 Javascript
以JSON形式将JS中Array对象数组传至后台的方法
2014/01/06 Javascript
在Node.js中实现文件复制的方法和实例
2014/06/05 Javascript
js过滤HTML标签完整实例
2015/11/26 Javascript
js改变html的原有内容实现方法
2016/10/05 Javascript
JS实现的数字格式化功能示例
2017/02/10 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
js表达式与运算符简单操作示例
2020/02/15 Javascript
Python获取远程文件大小的函数代码分享
2014/05/13 Python
利用python程序生成word和PDF文档的方法
2017/02/14 Python
利用Python3分析sitemap.xml并抓取导出全站链接详解
2017/07/04 Python
详解python中的文件与目录操作
2017/07/11 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
django 使用 PIL 压缩图片的例子
2019/08/16 Python
Django xadmin开启搜索功能的实现
2019/11/15 Python
在Python中通过threshold创建mask方式
2020/02/19 Python
python 实现客户端与服务端的通信
2020/12/23 Python
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
公司领导推荐信
2013/11/12 职场文书
大一军训感言
2014/01/09 职场文书
大学生涯自我鉴定
2014/01/16 职场文书
销售行政专员岗位职责
2014/06/10 职场文书
解除劳动合同协议书范本2014
2014/09/25 职场文书
学生违反校规检讨书
2014/10/28 职场文书
晚自修旷课检讨书怎么写
2014/11/17 职场文书
工伤调解协议书
2016/03/21 职场文书
求职自荐信该如何书写?
2019/06/24 职场文书