ES6学习笔记(九)【class】

最新推荐文章于 2022-05-24 17:55:14 发布
最新推荐文章于 2022-05-24 17:55:14 发布
阅读量224 收藏 1
点赞数
分类专栏： Html+Javascript

主要知识点：类声明、类表达式、类的重要要点以及类继承

在这里插入图片描述

1. 类的声明

基本的类声明

类声明以class关键字开始，其后是类的名称；类中的方法就像是对象字面量中的方法简写，并且方法之间不需要使用逗号：

	class PersonClass{
	
	
		constructor(name){
			this.name = name;
		}
		sayName(){
			console.log(this.name);
		}
	}
	
	let person = new PersonClass("hello class");
	person.sayName();

类声明语法允许使用constructor直接定义一个构造器，而不需要先定义一个函数，再把它当做构造器来使用。类中的方法使用的函数简写语法，省略了关键字function。

使用class关键字来定义一个类型，有这样几个要点：

  1. 类声明不会被提升，这与ES6之前通过函数定义不同。类声明与使用let定义一样，因此也存在暂时性死区；
  2. 类声明中的所有代码会自动运行在严格模式下，并且无法退出严格模式；
  3. 类的所有方法都是不可枚举的；
  4. 类的所有内部方法都没有[[Constructor]]，因此使用new来调用他们会抛出错误；
  5. 调用类构造器时不使用new，会抛出错误；
  6. 试图在类的内部方法中重写类名，会抛出错误；

2. 类表达式

类与函数有相似之处，都有两种形式：声明与表达式。函数声明与类声明都以关键词开始（分别是function和class），之后就是标识符（即函数名或者类名）。如果需要定义匿名函数，则function后面就无需有函数名，类似的，如果采用类表达式，关键是class后也无需有类名；

基本的类表达式

使用类表达式，将上例改成如下形式：

	let PersonClass = class {
	
	
		constructor(name){
			this.name = name;
		}
		sayName(){
			console.log(this.name);
		}
		
	}
	
	let person = new PersonClass("hello class");
	person.sayName(); //hello  class

示例代码中就定义了一个匿名的类表达式，如果需要定义一个具名的类表达式，只需要像定义具名函数一样，在class关键字后面写上类名即可。

3. 类的重要要点

作为一级公民的类

在编程中，能够被当作值来使用的就成为一级公民（first-class citizen）。既然都当作值使用，就说明它能够作为参数传递给函数、能作为函数的返回值也能用来给变量赋值。JS中的函数是一等公民，类也是一等公民。

例如，将类作为参数传递给函数：

	function createObj(classDef){
		return new classDef();
	}
	
	let obj = createObj(class{
		sayName(){
			console.log('hello'); //hello
		}
	})
	
	obj.sayName();

**类表达式另一个重要用途是实现立即调用类构造器以创建单例。**语法是使用new来配合类表达式使用，并在表达式后面添加括号()：

	//立即调用构造器
	
	let person = new class{
		constructor(name){
			this.name = name;
		}
		sayName(){
			console.log(this.name);
		}
	}('hello world');
	
	person.sayName(); //hello world

访问器属性

自有属性需要在类构造器中创建，而类还允许创建访问器属性。为了创建一个getter，要使用get关键字，并要与后面的标识符之间留出空格；创建setter使用相同的方式，只需要将关键字换成set即可：


	class PersonClass{
		constructor(name){
			this.name = name;
		}
		get name(){
			return name; //不要使用this.name会导致无限递归
		}
	
		set name(value){
			name=value; //不要使用this.value会导致无限递归
		}
	}
	let person = new PersonClass('hello');
	console.log(person.name); // hello
	person.name = 'world';
	console.log(person.name); //world
	let descriptor = Object.getOwnPropertyDescriptor(PersonClass.prototype,'name');
	console.log('get' in descriptor); //true

需计算属性名

对象字面量和类之间的相似点有很多，类方法与类访问器属性都能使用需计算属性名的方式，语法与对象字面量中需计算属性名一样，都是使用方括号[]来包裹表达式：

	//需计算属性名
	let methodName ='sayName';
	let propertyName = 'name';
	
	class PersonClass{
		constructor(name){
			this.name = name;
		}
		get [propertyName](){
			return name;
		}
		set [propertyName](value){
			name = value;
		}
		[methodName](){
			return console.log(this.name);
		}
	}
	let person = new PersonClass('hello world');
	person.sayName(); //hello world
	console.log(person.name); //hello world

生成器方法

在对象字面量中定义一个生成器：只需要在方法名前附加一个星号*即可，这一语法对类同样有效，允许将类的任意内部方法编程生成器方法：


	//生成器方法：
	
	class GeneClass{
	
		*generator(){
			yield 1;
			yield 2;				
		}
	}
	
	let obj = new GeneClass();
	let iterator = obj.generator();
	console.log(iterator.next().value); //1
	console.log(iterator.next().value); //2
	console.log(iterator.next().value); //undefined

可迭代对象用于Symbol.iterator属性，并且该属性指向生成器函数。因此，在类定义中同样可以使用Symbol.iterator属性来定义生成器方法，从而定义出类的默认迭代器。同时也可以通过生成器委托的方式，将数组、Set、Map等迭代器委托给自定义类的迭代器：

	class Collection {
		constructor() {
			this.items = [];
		} 
		*[Symbol.iterator]() {
			for(let item of this.items){
				yield item;
			}				
		}
	} 
	let collection = new Collection();
	collection.items.push(1);
	collection.items.push(2);
	collection.items.push(3);
	for (let x of collection) {
		console.log(x);
	}
	输出：1 2 3

静态成员

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

	class PersonClass {
		// 等价于 PersonType 构造器
		constructor(name) {
			this.name = name;
		}
		static create(name) {
			return new PersonClass(name);
		}
	}
	
	let person = PersonClass.create("Nicholas");

通过在方法前加上static关键字，使其转换成静态方法。能在类中的任何方法与访问器属性上使用 static 关键字，唯一限制是不能将它用于 constructor 方法的定义。静态成员不能用实例来进行访问，始终需要用类自身才能访问它们。

类继承

使用关键字extends可以完成类继承，同时使用super关键字可以在派生类上访问到基类上的方法，包括构造器方法：

	//类继承
	
	class Rec{
		constructor(width,height){
			this.width = width;
			this.height = height;
		}
	
		getArea(){
			return this.width*this.height;
		}
	
	}
	
	class Square extends Rec{
		constructor(width,height){
			super(width,height);
		}
	
	}
	
	let square = new Square(100,100);
	console.log(square.getArea()); //10000

关于类继承，还有这样几个要点：

  1. **在派生类中方法会覆盖掉基类中的同名方法，**例如在派生类Square中有getArea()方法的话就会覆盖掉基类Rec中的getArea()方法；
  2. 如果基类中包含了静态成员，那么这些静态成员在派生类中也是可以使用的。注意：静态成员只能通过类名进行访问，而不是使用对象实例进行访问；

从表达式中派生类

在ES6中派生类最大的能力就是能够从表达式中派生类，只要一个表达式能够返回的对象具有[[Constructor]]属性以及原型，你就可以对该表达式使用extends进行继承。由于extends后面能够接收任意类型的表达式，这就带来了巨大的可能性，可以动态决定基类，因此一种对象混入的方式：

	//从表达式中派生类
	
	let SerializableMixin = {
		serialize() {
			return JSON.stringify(this);
	}
	};
	let AreaMixin = {
		getArea() {
			return this.length * this.width;
		}
	};
	function mixin(...mixins) {
		var base = function() {};
		Object.assign(base.prototype, ...mixins);
		return base;
	} 
	class Square extends mixin(AreaMixin, SerializableMixin) {
		constructor(length) {
		super();
		this.length = length;
		this.width = length;
		}
	} 
	let x = new Square(3);
	console.log(x.getArea()); // 9
	console.log(x.serialize()); // "{"length":3,"width":3}"

mixin()函数接受代表混入对象的任意数量的参数，它创建了一个名为 base 的函数，并将每个混入对象的属性都赋值到新函数的原型上。此函数随后被返回，于是 Square 就能够对其使用 extends 关键字了。注意由于仍然使用了 extends ，你就必须在构造器内调用 super()。若多个混入对象拥有相同的属性，则只有最后添加
的属性会被保留。

4. 继承内置对象

在E6中能够通过extends继承JS中内置对象，例如：

	class MyArray extends Array {
	// 空代码块
	} 
	let colors = new MyArray();
	colors[0] = "red";
	console.log(colors.length); // 1
	colors.length = 0;
	console.log(colors[0]); // undefined

Symbol.species

属性Symbol.species被用于定义静态访问器属性，该属性值用来指定类的构造器。当创建一个新的对象实例时，就需要通过Symbol.species属性获取到构造器，从而新建对象实例。

下面内置对象都定义了Symbol.species属性：

  • Array;
  • ArrayBuffer;
  • Map;
  • Promise;
  • RegExp;
  • Set;
  • 类型化数组

例如在自定义类型中，使用Symbol.species:

	class MyClass {
		static get [Symbol.species]() {
			return this;
		} 
		constructor(value) {
			this.value = value;
		} 
		clone() {
			return new this.constructor[Symbol.species](this.value);
		}
	} 
	class MyDerivedClass1 extends MyClass {
		// 空代码块
	} 
	class MyDerivedClass2 extends MyClass {
		static get [Symbol.species]() {
			return MyClass;
		}
	} 
	let instance1 = new MyDerivedClass1("foo"),
	clone1 = instance1.clone(),
	instance2 = new MyDerivedClass2("bar"),
	clone2 = instance2.clone();
	console.log(clone1 instanceof MyClass); // true
	console.log(clone1 instanceof MyDerivedClass1); // true
	console.log(clone2 instanceof MyClass); // true
	console.log(clone2 instanceof MyDerivedClass2); // false

此处, MyDerivedClass1 继承了 MyClass ，并且未修改 Symbol.species 属性。由于
this.constructor[Symbol.species] 会返回 MyDerivedClass1 ，当 clone() 被调用时，它就
返回了 MyDerivedClass1 的一个实例。 MyDerivedClass2 类也继承了 MyClass ，但重写了
Symbol.species，让其返回 MyClass 。当 clone() 在 MyDerivedClass2 的一个实例上被调
用时，返回值就变成 MyClass 的一个实例。使用 Symbol.species，任意派生类在调用应当
返回实例的方法时，都可以判断出需要返回什么类型的值。

在类构造器中使用new.target

使用new.target属性能够判断当前实例对象是由哪个类构造器进行创建的，简单的情况下，new.target属性就等于该类的构造器函数，同时new.target属性也只能在构造器内被定义。

	class Rec{
		constructor(){
			console.log(new.target===Rec);
		}
	}
	
	class Square extends Rec{
	
	}
	
	let rec = new Rec();
	let square = new Square();
	
	输出：true false

当创建Rec对象实例时，new.target指代的是Rec自身的构造器，因此new.target===Rec会返回true，而Rec的派生类Square的new.target会指向它自身的构造器，因此new.target===Rec会返回false;

可以使用new.target来创建一个抽象基类：

	class Rec{
		constructor(){
			if(new.target===Rec){
				throw new Error('abstract class');
			}
		}
	}
	
	class Square extends Rec{
	
	}
	
	let rec = new Rec(); //Uncaught Error: abstract class
	let square = new Square(); //不会报错

当试图创建一个Rec实例对象时，会抛出错误，因此Rec可以当做一个抽象基类。

5. 总结

  1. ES6中的类使用关键字class进行定义，即可以采用类声明的方式也可以采用类表达式进行定义。 此外，类构造器被调用时不能缺少 new ，确保了不能意外地将类作为函数来调用用。

  2. 基于类的继承允许你从另一个类、函数或表达式上派生新的类。这种能力意味着你可以调用一个函数来判断需要继承的正确基类，也允许你使用混入或其他不同的组合模式来创建一个新类。新的继承方式让继承内置对象（例如数组） 也变为可能，并且其工作符合预期。

  3. 可以使用new.target来判断创建实例对象时所用的类构造器。利用new.target可以用来创建一个抽象基类；

总之，类是 JS 的一项新特性，它提供了更简洁的语法与更好的功能，通过安全一致的方式来自定义一个对象类型。

.NET跨平台
关注
专栏目录
常用Es6-9整理
代码青春
05-13 117
--------------------------es6 ------------------------------ *1，Let（块作用域）与Const（常量），let 只能声明一次 var 可以声明多次: *2，模板字符串 *3，es6中class类 *4，箭头函数 => *5，模块化 import && export *6，js 之generator（ES6提供的） *7，解构赋值 let { a, b } = { a: 1, b: 2 } *8，延展操作符
深入理解ES6--9.JS的类
weixin_33896726的博客
05-02 161
主要知识点：类声明、类表达式、类的重要要点以及类继承 1. 类的声明 基本的类声明 类声明以class关键字开始，其后是类的名称；类中的方法就像是对象字面量中的方法简写，并且方法之间不需要使用逗号： class PersonClass{ constructor(name){ this.name = name; } sayName(){ console.log(this...
深入理解ES6之类
吴蕴强的博客
03-09 875
深入理解ES6之var,let,const区别 深入理解ES6之函数 深入理解ES6之对象 深入理解ES6之解构 深入理解ES6之Promise与异步编程 深入理解ES6之模块 一：类与自定义类型的区别： 1：类生命不会被提升，这与函数定义不同。类声明的行为与let相似，因此在程序的执行到达声明之前，类会存在暂时性死区。 2：类声明的所有代码会自动运行在严格模式下 3：类的所有方...
es6-9集结
weixin_34234829的博客
09-27 111
// 箭头函数 let f = a => a + 1; // 等价于 var f = function(a) { return a + 1; } // 模版字符串 let a = 'react' let s = `hello ${a}`; // hello react // 解构赋值 let [lang, ...other] = ['js', 'java', 'react']...
ES6学习笔记(八)【class】
极客神殿
04-06 140
Class 的继承 简介 Object.getPrototypeOf() super 关键字 类的 prototype 属性和__proto__属性 原生构造函数的继承 Mixin 模式的实现 简介 Class 可以通过 extends 关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。 class Point{} class ColorPoint extends Po...
ES6 学习笔记.pdf
07-05
本次学习笔记中涉及的知识点主要涵盖了ES6的关键特性，包括变量声明、字符串和正则表达式、函数、对象、异步处理、数组、模块化等。 1. 块级作用域 在ES6之前，JavaScript只有一种作用域，即函数作用域。这使得变量...
超详细ES6变动，ES6学习笔记，JavaScriptES6学习笔记
09-16
本学习笔记将聚焦于与ES5的区别，帮助初学者快速掌握ES6的核心概念。** 1. **变量声明：let和const** - `let`替代了`var`进行块级作用域的变量声明，解决了`var`的变量提升和函数作用域问题。 - `const`用于声明...
es6学习笔记
08-12
本学习笔记将深入探讨ES6中的核心概念，帮助你全面掌握这一现代JavaScript语法。 1. **let 和 const 声明** 在ES6之前，我们主要使用`var`进行变量声明，但`let`和`const`的引入解决了作用域和提升（hoisting）的...
我的ES6学习笔记整理
01-12
### ES6 学习笔记整理 #### ES6 简介 ES6，即 ECMAScript 2015，是 JavaScript 的一个版本，引入了许多新的语法特性来简化开发过程并增强语言的功能性。这些特性包括但不限于：块级作用域变量、箭头函数、模板字符...
TypeScript进阶篇 --- 类
qq_41914181的博客
10-30 485
类 传统方法中，JavaScript通过构造函数实现类的概念，通过原型链实现集成。而在ES6中，我们终于迎来了class。 TypeScript 除了实现了所有ES6的类的功能以外，还添加了一些新的用法。 类的概念 虽然 JavaScript中有类的概念，但是可能大多数 JavaScript程序员并不是非常熟悉类，这里对类相关的概念做一个简单的介绍。 类（Class）:定义了一件事物的抽象特点，包含它的属性和方法 对象（Object）:类的实例，通过new生成 面向对象（OPP）的三大特性：封装、继承、多
理解 es6 --- 类 class
凝视深渊
03-28 501
英文电子书点此阅读《understanding es6》 目录 class in javascript (类) class 的特点 在类中定义generator static 关键词 扩展类 derived classes 从built-in的类型中继承 Symbol.species 在 class constructor 中使用 new.target summary ...
完整详细的es6 class
xiaohesong
09-11 470
原文es6 class class基本声明 在说class之前，想必大家肯定会想到constructor function. 看下面代码： function Foo(name) { this.name = name } class Bar { constructor(name){ this.name = name } } f = new Foo('xhs')...
ES6-Class类的基本语法
爱代码的小海的博客
09-21 334
Class类的简介 使用Class类的注意点 setter和getter函数 静态方法 new.target属性 Class类的简介 ES6引入了Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。可以当做一个语法糖，绝大多数功能，ES5都可以做到。 ES5通过构造函数生成示例对象 function Phone (brand, price) { this.brand = brand; this.price = price; } Phone.prototy..
ES6抽象、封装简单demo
Day by day的博客
10-11 1798
class Dog{ constructor(hairColor, breed, age){ this.hairColor = hairColor; this._breed = breed; this.age = age; this.runSpeed = null; Dog.instanceNumber++; } shout(){ console.log('汪汪汪,
2.ES6-解构赋值及其原理-解构看完这篇足够了
热门推荐
2024路在何方
08-08 1万+
所谓的解构赋值其实就是分解出一个对象的解构，分成两个步骤： 1. 变量的声明 2. 变量的赋值 一、 数组的解构赋值 /* 对于数组的解构赋值，其实就是获得数组的元素，而我们一般情况下获取数组元素的方法是通过下标获取，例如： let arr = [1,2,3]; let a = arr[0]; ...
ES6中 import、 export default 和 export 的用法和区别
qq_32614411的博客
07-03 3076
ES6实现了模块功能export和import 在ES6出现之前，已经出现了解决js模块加载的方案，最主要的是CommonJS和AMD规范。CommonJS主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs，为异步加载。同时还有CMD规范，为同步加载方案如seaJS。 ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的Co...
es6+不得不掌握的基础部分
啊哈前端的专栏
07-15 779
一、变量声明1、leta、let不允许重复声明同一个变量var a = 0; let a = 2; // 报错;Identifier 'a' has already been declaredfunction demo (num) { let num; //这里使用let声明，同样属于重复声明变量 }{ var b = 0; } let b = 2;b、let没有变量提升console...
TypeScript学习笔记2----es6类与ts类
weixin_39895436的博客
07-04 537
ES6 中类的用法 1.属性和方法：使用 class 定义类，使用 constructor 定义构造函数。 通过 new 生成新实例的时候，会自动调用构造函数。、 class Animal { constructor(name) { this.name = name; } sayHi() { return `My name is ${this.name}`; } } let a = new Animal('Jack'); console.log(a.sayHi()); // My n
ES6之Symbol内置属性详解
张媛的博客
05-24 1069
1. Symbol.hasInstance Symbol.hasInstance用于判断某对象是否为某构造器的实例。因此你可以用它自定义instanceof操作符在某个类上的行为。 class Array1 { static [Symbol.hasInstance](instance) { return Array.isArray(instance); } } console.log([] instanceof Array1); Symbol.hasInstance属性的属性...
JavaScript ES6 学习笔记：块级作用域、Promise、Class 等核心知识点
ES6 学习笔记 **块级绑定** 在 ES6 中，引入了块级绑定（Block Scope），解决了 var 声明变量的问题。块级绑定使得变量的作用域限定在当前块中，不会污染全局对象。 **变量声明** 在 ES6 中，引入了 let 和 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值