JS高级程序设计之class继承重点详解


Posted in Javascript onJuly 07, 2022

引言

前文已提过:在 class 出现之前,JavaScript 实现继承是件麻烦事,构造函数继承有加上原型上的函数不能复用的问题;原型链继承又存在引用值属性的修改不独立的问题;组合继承又存在两次调用构造函数的问题,寄生组合继承,写起来又太麻烦了,总之,在 class 出现前,JavaScipt 实现继承真是件麻烦事儿。

然而,class 的出现真的改变这一现状了吗?

不如往下看。

写法

与函数类型相似,定义类也有两种主要方式:类声明和类表达式。

// 类声明 class Person {}

// 类表达式 const Animal = class {};

不过,与函数定义不同的是,虽然函数声明可以提升,但类定义不能。

与函数构造函数一样,多数编程风格都建议类名的首字母要大写,以区别于通过它创建的实例。

类可以包含:

  • 构造函数方法
  • 实例方法
  • 获取函数
  • 设置函数
  • 静态类方法

这些项都是可选的

constructor

class Person { 
    constructor(name) {
        this.name = name
        console.log('person ctor');
    }
}
let p1 = new Person("p1")

constructor 会告诉解释器 在使用 new 操作符创建类的新实例时,应该调用这个函数。

等同于

function Person(name){
    this.name = name
    console.log('person ctor')
}
let p1 = new Person("p1")

类构造函数与构造函数的主要区别是,这样写会报错:

class Animal {}
let a = Animal(); // TypeError: class constructor Animal cannot be invoked without 'new'

所以,new 操作符是强制要写的;

使用 new 时,原理与 new 一个对象也是一样的,因为太重要了,再强调一遍:

(1) 在内存中创建一个新对象。

(2) 这个新对象内部的[[Prototype]]指针被赋值为构造函数的 prototype 属性。

(3) 构造函数内部的 this 被赋值为这个新对象(即 this 指向新对象)。

(4) 执行构造函数内部的代码(给新对象添加属性)。

(5) 如果构造函数返回非空对象,则返回该对象;否则,返回刚创建的新对象。

特性

从各方面来看,ECMAScript 类就是一种特殊函数。

我们可以用 typeof 打印试试:

class Person {} 
console.log(typeof Person); // function

也可以用 instanceof 检查它的原型链

class Person {} 
let p = new Person()
console.log(p instanceof Person); // true

通过 class 构造的每个实例都对应一个唯一的成员对象,这意味着所有成员都不会在原型上共享;

class Person {
 constructor() {
 this.name = new String('Jack');
 this.sayName = () => console.log(this.name);
 }
}
let p1 = new Person();
let p2 = new Person();
console.log(p1.name === p2.name) // false
console.log(p1.sayName === p2.sayName) // false

如果想要共享,就改写成方法,写在 constructor 外面:

class Person {
 constructor() {
 this.name = new String('Jack');
 }
 sayName(){
      console.log(this.name);
 }
}
let p1 = new Person();
let p2 = new Person();
console.log(p1.sayName === p2.sayName) // true

我们可以在方法前面加 static 关键字,实现:静态类成员。我们不能在类的实例上调用静态方法,只能通过类本身调用。不做赘述。

继承

ECMAScript 6 新增特性中最出色的一个就是原生支持了类继承机制。虽然类继承使用的是新语法,但背后依旧使用的是原型链

让我们再回顾构造函数继承和原型链继承 2 个经典的问题:

① 构造函数继承的问题:构造函数外在原型上定义方法,不能重用

function SuperType(){}
SuperType.prototype.sayName = ()=>{console.log("bob")}
function SubType(){
    SuperType.call(this) // 构造函数继承
}
let p1 = new SubType()
console.log(p1.sayName()) // Uncaught TypeError: p1.sayName is not a function

而原型链继承可以解决这一点:

function SuperType(){}
SuperType.prototype.sayName = ()=>{console.log("bob")}
function SubType(){}
SubType.prototype = new SuperType()  // 原型链继承
let p1 = new SubType()
console.log(p1.sayName()) // bob

② 原型链继承的问题:原型中包含的引用值会在所有实例间共享。

function SuperType(){
    this.name = ["bob","tom"];
}
function SubType(){}
SubType.prototype = new SuperType()  // 原型链继承
let p1 = new SubType()
p1.name.push("jerry")
let p2 = new SubType()
console.log(p2.name) //  ['bob', 'tom', 'jerry']

而构造函数继承可以解决这一点:

function SuperType(){
    this.name = ["bob","tom"];
}
function SubType(){
    SuperType.call(this) // 构造函数继承
}
let p1 = new SubType()
p1.name.push("jerry")
let p2 = new SubType()
console.log(p2.name) //  ['bob', 'tom']

class 继承有这两个问题吗??

代码一试便知:

class SuperType{}
SuperType.prototype.sayName = ()=>{console.log("bob")}
class SubType extends SuperType{
}
let p1 = new SubType()
p1.sayName() // bob

问题①,没有问题,在构造函数外写的原型继承,公共方法还是能访问的!!

class SuperType{
    constructor(){
        this.name=["bob","tom"]
    }
}
class SubType extends SuperType{
}
let p1 = new SubType()
let p2 = new SubType()
p1.name.push("Jerry")
console.log(p2.name) //  ['bob', 'tom']

问题②,没有问题,在 constructor 的引用值属性,修改不会产生干涉!!

class 继承完美的解决了构造函数继承的问题,和原型链继承的问题,写起来也没有组合继承、寄生继承那么麻烦,如果非得用 JS 模拟面向对象编程,class 必不可少!!

题外话

其实写 Class C 和 C.prototype 一起写是很危险的:明明都在操作面向对象的类了,还要操作原型链。类操作和原型操作是两种不同的设计思路,有兴趣可见本瓜一年前的一篇文章:“类”设计模式和“原型”设计模式——“复制”和“委托”的差异

以上就是JS高级程序设计之class继承重点详解的详细内容,更多关于JS高级程序设计class继承的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
js图片闪动特效可以控制间隔时间如几分钟闪动一下
Aug 12 Javascript
jQuery实现鼠标滑向当前图片高亮显示并且其它图片变灰的方法
Jul 27 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
jQuery实现上传图片前预览效果功能
Aug 03 jQuery
如何从零开始利用js手写一个Promise库详解
Apr 19 Javascript
Vue中的v-for指令不起效果的解决方法
Sep 27 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
vue+web端仿微信网页版聊天室功能
Apr 30 Javascript
Vue v-for循环之@click点击事件获取元素示例
Nov 09 Javascript
JavaScript创建表格的方法
Apr 13 Javascript
JS class语法糖的深入剖析
Jul 07 #Javascript
MutationObserver在页面水印实现起到的作用详解
Jul 07 #Javascript
js作用域及作用域链工作引擎
Promise静态四兄弟实现示例详解
Jul 07 #Javascript
Three.js实现雪糕地球的使用示例详解
二维码条形码生成的JavaScript脚本库
Jul 07 #Javascript
JS实现简单的九宫格抽奖
You might like
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
php中函数的形参与实参的问题说明
2010/09/01 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
非常实用的php弹出错误警告函数扩展性强
2014/01/17 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
PHP之header函数详解
2021/03/02 PHP
可实现多表单提交的javascript函数
2007/08/01 Javascript
JavaScript DOM 添加事件
2009/02/14 Javascript
Javascript 读书笔记索引贴
2010/01/11 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
javascript中怎么做对象的类型判断
2013/11/11 Javascript
nodejs下打包模块archiver详解
2014/12/03 NodeJs
在其他地方你学不到的jQuery小贴士和技巧(欢迎收藏)
2016/01/20 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
jQuery实现文字自动横移
2017/01/08 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
Vue2递归组件实现树形菜单
2017/04/10 Javascript
JavaScript实现QQ列表展开收缩扩展功能
2017/10/30 Javascript
javascript中toFixed()四舍五入使用方法详解
2018/09/28 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
javascript实现移动端上传图片功能
2020/08/18 Javascript
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
详解Django 中是否使用时区的区别
2018/06/14 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Django扫码抽奖平台的配置过程详解
2021/01/14 Python
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
优秀求职信
2014/05/29 职场文书
2014年国庆标语
2014/06/30 职场文书
党员教师个人对照检查材料范文
2014/09/25 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
动画「进击的巨人」第86话播出感谢绘公开
2022/03/21 日漫
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
2022/08/05 Vue.js