《深入理解ES6》第九章 JS的类

最新推荐文章于 2024-09-13 19:36:42 发布
最新推荐文章于 2024-09-13 19:36:42 发布
阅读量319 收藏 1
点赞数 1
分类专栏： # 深入理解ES6 文章标签： javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wuqinfei_cs/article/details/118229347
版权

第九章 JS的类

《深入理解ES6》—— Nicholas C. Zakas

JS从创建之初就不支持类，
也没有把类继承作为定义相似对象以及关联对象的主要方式。

很多库都创建了一些工具，让JS显得貌似能支持类，导致ES6最终引入了类。

ES6的类并不与其他语言的类完全相同，
所具备的独特性正配合了JS的动态本质。

1. ES5中的仿类结构

ES6之前不存在类，但与类最接近的是：
创建一个构造器，然后将方法指派到该构造器的原型上。

这种方式通常被称为创建一个自定义类型，如：

function PersonType( name ) {
    this.name = name;
}
PersonType.prototype.sayName = function () {
    console.info( this.name );
}
let person = new PersonType( "吴钦飞" );
person.sayName(); //=> 吴钦飞

person instanceof PersonType; //=> true
person instanceof Object; //=> true

使用 new 运算符创建了 PersonType 的一个新实例 person，
此对象会被认为是一个通过原型继承了 PersonType 与 Object 的实例。

这种基本模式在许多对类进行模拟的JS库中都存在，而这也是ES6类的出发点。

2. 类的声明

2.1. 基本的类声明

格式：class 类名 对象字面量的简写形式。

class PersonClass {
    // <==> PersonType的构造器
    constructor( name ) {
        this.name = name;
    }

    // <==> PersonType.prototype.sayName
    sayName() {
        console.info( this.name );
    }
}
let person = new PersonClass( "吴钦飞" );
person.sayName();

typeof PersonClass; //=> "function"

PersonClass 实际上创建了一个拥有 constructor 方法及其行为的函数。

自有属性：own properties，该属性出现在实例上而不是原型上，
只能在类的构造器或方法内部进行创建。
建议在构造器函数内创建所有可能出现的自有属性，
这样在类中声明变量就会被限制在单一位置（有助于代码检查）。

相对于已有的自定义类型声明方式来说，
类声明仅仅是以它为基础的一个语法糖。

2.2. 为何要使用类的语法

类与自定义类型的区别：

  • 类声明不会被提升。在程序的执行到达声明处之前，类都存在暂时性死区。
  • 类声明中的所有代码都自动运行在严格模式下
  • 类的所有方法都不可枚举
  • 类的所有方法内部都没有[[Construct]]，因此使用new调用会报错
  • 调用类构造器时不使用new，会抛异常。
  • 视图在类的方法内部重写类名，会抛出错误.

等价于一下未使用类语法的代码:

let PersonType = (function() {
    "use strict";

    const PersonType = function( name ) {
        if ( typeof new.target === "undefined" ) {
            throw new Error( "Constructor must be called with new." );
        }
        this.name = name;
    };

    Object.defineProperty( PersonType.prototype, "sayName", {
        value: function () {
            if ( typeof new.target !== "undefined" ) {
                throw new Error("Method cannot be called with new.");
            }
            console.info( this.name );
        },
        enumerable: false,
        writable: true,
        configurable: true
    } );

    return PersonType;
})();

上例说明了尽管不使用新语法也能实现类的任何特性，但类语法显著简化了所有功能的代码。

3. 类表达式

类和函数都有两种形式：声明和表达式。

类表达式被设计用于变量声明、或可作为参数传递给函数。

3.1. 基本的类表达式

let Person = class {
    constructor( name ) {
        this.name = name;
    }
    sayName() {
        console.info( this.name );
    }
};

3.2. 具名类表达式

let Person = class Person2 {
    constructor( name ) {
        this.name = name;
    }
    sayName() {
        console.info( this.name );
    }
};
typeof Person2; //=> "undefined"

Person2 只能在类的内部使用，在外部使用会报语法错误。

4. 作为一级公民的类

在编程中，能被当做值来使用的就称为** 一级公民（first-class citizen）**。

它能 作为参数传递给函数、作为函数的返回值、能给变量赋值。

JS的函数就是一级公民（又称为一级函数）。
ES6的类也是一级公民。

类作为参数传入函数：

function createObject( ClassDef ) {
    return new ClassDef();
}

let obj = createObject( class {
    sayHi() {
        console.info( "Hi" );
    }
} );

obj.sayHi();

创建单例：

let person = new class{
    constructor( name ) {
        this.name = name;
    }
    sayName() {
        console.info( this.name );
    }
}( "吴钦飞" );

person.sayName();

5. 访问器属性

在类构造器中可以创建 自有属性，
可以使用关键字set/get在原型上定义 访问器属性。

class CustomHTMLElement {
    constructor( element ) {
        this.element = element;
    }
    get html() {
        return this.element.innerHTML;
    }
    set html(content) {
        this.element.innerHTML = content;
    }
}

const div = document.createElement('div');
const customDiv = new CustomHTMLElement(div);

customDiv.html = 123;
customDiv.html; //=> "123"

CustomHTMLElement类用于包装DOM元素，
它的html属性拥有getter与setter，委托了元素自身的 innerHTML 方法，
它创建在原型上，并且不可枚举。

等价非类代码实现 需要写大量代码：

let CustomHTMLElement = ( function() {
    "use strict";
    const CustomHTMLElement = function( element ) {
        if ( typeof new.target === "undefined" ) {
            throw new Error( "构造器必须通过 new 来调用" );
        }
        this.element = element;
    };

    Object.defineProperty( CustomHTMLElement.prototype, "html", {
        enumerable: false,
        configurable: true,
        get: function() {
            return this.element.innerHTML;
        },
        set: function( value ) {
            this.element.innerHTML = value;
        }
    } );

    return CustomHTMLElement;
} )();

6. 需计算的成员名

类方法、类访问器的名称可通过 [表达式] 计算获得。

let methodName = "sayName";
let propertyName = "html";

class PersonClass {
    constructor( name ) {
        this.name = name;
    }
    [methodName]() {
        console.info( this.name );
    }

    get [propertyName]() {}
    set [propertyName]() {}
}
new PersonClass( "吴钦飞" ).sayName();

7. 生成器方法

在表示集合的自定义类中定义一个默认迭代器。

class Collection {
    constructor() {
        this.items = [];
    }
    *[Symbol.iterator]() {
        // 委托到该数组的values()迭代器
        yield *this.items.values();
    }
}
var collection = new Collection();
collection.items.push( 1 );
collection.items.push( 2 );
collection.items.push( 3 );

for ( let x of collection ) {
    console.info( x );
}

8. 静态成员

ES6之前，直接在构造器上添加额外的方法来模拟静态成员。

ES6的类简化了静态成员的创建，
只要在方法与访问器属性的名称前加上 static 关键字即可。

class PersonClass {
    constructor( name ) {
        this.name = name;
    }
    sayName() {
        console.info( this.name );
    }

    static create( name ) {
        return new PersonClass( name );
    }
}
PersonClass.create( "吴钦飞" ).sayName();

9. 继承

9.1. 基础

ES6之前的继承：

function Rectangle( width, height ) {
    this.width = width;
    this.height = height;
}
Rectangle.prototype.getArea = function () {
    return this.width * this.height;
};

function Square( width ) {
    Rectangle.call( this, width, width );
}
Square.prototype = Object.create( Rectangle.prototype, {
    constructor: {
        value: Square,
        enumerable: true,
        writable: true,
        configurable: true
    }
} );
var square = new Square( 3 );
console.info( square.getArea() );   //=> 9
console.info( square instanceof Square );   //=> true
console.info( square instanceof Rectangle );//=> true

Square 继承 Rectangle：

  • 重写 Square.prototype，等于 Rectangle.prototype 创建的对象
  • 在构造函数里先调用 Rectangle 的构造函数进行初始化 this

ES6类的继承：

class Rectangle {
    constructor( width, height ) {
        this.width = width;
        this.height = height;
    }
    getArea() {
        return this.width * this.height;
    }
}

class Square extends Rectangle {
    constructor(width) {
        super( width, width );
    }
}

var square = new Square( 3 );
console.info( square.getArea() );   //=> 9
console.info( square instanceof Square );   //=> true
console.info( square instanceof Rectangle );//=> true

Square 继承 Rectangle：

  • 使用 extends 关键字

  • 使用 super() 初始化this

  • 必须在访问 this 之前调用 super()

    • 如果派生类指定了构造器，则需要显式使用 super()
    • 如果派生类未指定构造器，super() 会自动调用
    class Square extends Rectangle {
    // 未指定构造器
}
// 等价于：（添加默认构造器）
class Square extends Rectangle {
    constructor( ...args ) {
        super( ...args );
    }
}

9.2. 屏蔽类方法

派生类中方法会屏蔽掉基类的同名方法，
可使用 super.methodA() 访问基类的方法。

9.3. 继承静态成员

派生类可继承基类的静态成员。

9.4. 从表达式中派生类

class ClassName extends 表达式 {

}

该表达式返回一个具有 [[Construct]] 属性的函数。

9.5. 继承内置对象

ES6中的类，允许从内置对象上进行继承。

class MyArray extends Array {

}

ES5中传统的继承，this 值先被派生类（MyArray）创建，
随后调用基类构造器（Array.apply()）。
这意味着 this 一开始就是 MyArray 的实例，
之后才使用了 Array 的附加属性对其进行了装饰。

ES6基于类的继承中，this 的值会先被基类（Array）创建，
随后才被派生类的构造器（MyArray）所修改。
结果是this初始就拥有作为基类的内置对象的所有功能，
并能正确接收与之关联的所有功能。

9.6. Symbol.species 属性

继承内置对象的特点：任意能返回内置对象实例的方法，在派生类上却自动返回派生类的实例。

如，调用 MyArray 实例的 slice() 方法会返回 MyArray 的实例。

是 Symbol.species 属性在后台造成了这种变化。

10. 在类构造器中使用 new.target

当被派生类调用构造器时，new.target 不等于基类。

这可以创建不可实例化的基类。

class Shape {
    constructor() {
        if ( new.target === Shape ) {
            throw new Error( "基类不能实例化" );
        }
    }
}
forwardNow
关注
专栏目录
es6标准入门_阮一峰最新版_第三版pdf
01-16
在阮一峰的《ES6标准入门（第三版）》中，读者不仅能深入理解以上这些核心特性，还能了解到ES7及后续版本的一些新功能，如Async函数的完整实现、尾调用优化、异步迭代器等。这本书对于想要提升JavaScript技能的...
56个JavaScript 实用工具函数助你提升开发效率(JS函数大全）
PUBGA的博客
10-26 290
1. 数字操作 （1）生成指定范围随机数 export const randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; （2）数字千分位分隔 export const format = (n) => { let num = n.toString(); let len = num.length; if (len <= 3) { return num;
ES6深入了解
yjnlovepy的博客
01-27 278
深入了解ES6
一篇文章带你走进ES6
最新发布
weixin_74883980的博客
09-13 898
ECMAScript 6（简称 ES6）是 JavaScript 语言的下一代标准，于 2015 年 6 月正式发布，也被称为 ECMAScript 2015。ES6 引入了许多新特性，旨在使 JavaScript 编程更加简洁、强大和灵活。总的来说ES6是为了当我们写JS的时候写的更少做的事情更多。允许从数组或对象中提取数据并赋值给新的变量。1.使用解构赋值实现将两个变量的值交换let x = 1;let y = 2;// 期望结果：x = 2, y = 1。
ES6详细介绍及使用
小仙儿
02-22 8145
ES6中的export和import介绍 一、ES6概念及发展史 1、ES6概念 WSC中：ECMAScript 6.0（以下简称ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了（所以也被叫作ES2015）。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。 2、ES6发展史 版本 时间 描述 ECMA-262/ ...
ES6及JS基础总结
weixin_38984030的博客
08-18 1157
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。它有三种状态，pending（进行中）、fulfilled（已成功）、reject（已失败）。注：resolved是指完成状态，结果可能包含fulfilled和rejected。...
深入理解ES6
HL031125的博客
05-25 847
ECMAScript 6，简称ES6，是JavaScript语言的一次重大更新。它于2015年发布，是原来的ECMAScript标准的第六个版本。ES6带来了大量的新特性，包括箭头函数、模板字符串、let和const关键字、解构、默认参数值、模块系统等等，大大提升了JavaScript的开发体验。由于VUE3中大量使用了ES6的语法,所以ES6成为了学习VUE3的门槛之一 ES6对JavaScript的改进在以下几个方面：
ES6 从入门到精通 第二部分
08-22
本文将深入探讨ES6的第二部分核心概念，适合初学者逐步掌握这门现代JavaScript的基石。** ### 1. 常量与let命令 在ES5中，我们只有`var`关键字来声明变量，但其存在作用域混乱和提升等问题。ES6引入了`let`和`...
ES6标准入门（第三版）
09-19
这本书《ES6标准入门（第三版）》详细介绍了这些更新，对于想要深入理解和掌握现代JavaScript开发的程序员来说，是一份非常有价值的参考资料。 1. **箭头函数**：箭头函数是ES6中一种简洁的函数定义方式，它的语法...
JS类的定义与使用方法深入探索
10-21
在JavaScript中，类（Class）是ES6引入的一种新的语法糖，它提供了一种更加面向对象的代码组织方式。在ES5之前，我们通常通过构造函数和原型链来实现类的功能。下面我们将深入探讨JS类的定义与使用方法。 1. **构造...
JavaScript ES6函数式编程入门经典_javascript_
10-01
以上就是JavaScript ES6函数式编程的一些核心知识点，理解并熟练运用这些特性，将使你的JavaScript编程更加高效和优雅。通过阅读《JavaScript ES6函数式编程入门经典》这本书，你将能深入学习这些概念，并逐步成为一...
ES6(JS)
热门推荐
Yes_You_Can 的博客
12-20 1万+
ES6(JS)笔记
ECMAScript6
m0_46337171的博客
01-06 223
目录前言1.ECMAScript6 简介1.1 ECMAScript 和 JavaScript 的关系1.2 ES6 与 ECMAScript 2015 的关系2.搭建前端环境2.1 Node 环境2.1.1 什么是Node.js2.2 NPM环境2.2.1 什么是NPM3. ES6基本语法3.1 let声明变量3.2 const声明常量3.3 解构赋值3.3.1 数组解构3.3.2 对象解构3.4 模板字符串3.4.1 定义多行字符串3.4.2 字符串插入变量和表达式3.4.3 字符串中调用函数3.5 声
【JavaScript】ES6 中的类和模块
好久不见的流星
02-19 752
ES6 中引入的类和模块为 JavaScript 提供了现代化的编程方式，使得面向对象和模块化编程更加直观和易用。类提供了更简洁的语法和更灵活的继承方式，而模块则使得代码更易于组织和复用。在实际项目中，使用 ES6 的类和模块有助于提高代码的可读性、可维护性和可扩展性。希望通过本篇博客，你对 ES6 中的类和模块有了更深入的了解。
深入理解ES6笔记
m0_37962105的博客
01-12 795
目录 var let const const和let的异同点 临时死区(Temporary Dead Zone) 循环中块级作用域的绑定 在全局作用域声明 最佳实践 二，字符串和正则表达式 更好的Unicode支持 UTF-16码位： codePointAt()： String.fromCodePoiont()： normalize()： 正则表达式 其他字符串变更 正则表达式的其他更新 模板字面量 三，函数 函数的默认参数 无命名参数 展开运算符（...） 块
ES6详细讲解
qq_51986661的博客
11-25 3127
ES61995年的美国，有一家名为netscape(网景)的公司打造了一款主要用于check验证的脚本语言，而恰在此时，Sun公司的java语言火的一塌糊涂，netscape公司为蹭其热度，便将该脚本语言命名为JavaScript。不料JavaScript居然被越来越多的人使用，后效仿大秦的货币统一政策将其提交给国际标准组织ECMA。该组织发布的标准被称做ECMAScript。2015年6月发布的版本称为，简称ES6。从ES6开始，该组织每年会发布一个版本，版本号比年份最后一位大1，至今最新版本为。
【深入理解es6——js中的类】
weixin_42936434的博客
05-08 582
深入理解es6——js中的类 文章目录深入理解es6——js中的类一、类由来、es5的类二、类声明三、类表达式四、作为一等公民的类五、访问器属性六、可计算成员名称、生成器方法七、静态成员八、继承与派生类extend和super类方法遮蔽静态成员继承派生自表达式的类内建对象的继承Symbol.species属性九、在类的构造函数中使用new.target总结 一、类由来、es5的类 java、c++等面向对象的语言支持类和类继承，但是js（基于对象）不支持，只能关联多个对象。直到es5出现近类结构，但写法或
ECMAScript 6-promise学习与使用【es6含真实接口】
前端开发工程师
12-19 5577
es6-promise学习与使用 es6-promise介绍与基本使用 promise是ES6引入的异步编程的新解决方案，语法上市promise是一个构造函数，用来封装异步操作并可以获取奇成功或失败的结果【解决回调地狱问题】 Promise构造函数 ：Promise {excutor}{ } Promise.prototype.then方法 Promise.prototype.catch方法 ...
深入理解ES6：JavaScript的新飞跃
ES6，全称ECMAScript 2015，是JavaScript语言的一个重要更新版本，于2015年6月正式发布。它致力于使JavaScript更加适合编写大型复杂应用，提升其在企业级开发中的地位。ECMAScript是一种由ECMA国际标准化的脚本语言...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值