视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
解读ES6中class关键字
2020-11-27 22:25:13 责编:小采
文档


class是es6引入的最重要特性之一。在没有class之前,我们只能通过原型链来模拟类。

1 、介绍 

 //定义类
 class Point {
 constructor(x, y) {
 this.x = x;
 this.y = y;
 }
 toString() {
 return '(' + this.x + ', ' + this.y + ')';
 }
 }

  Point类除了构造方法,还定义了一个toString方法。注意,定义“类”的方法的时候,前面不需要加上function这个关键字,直接把函数定义放进去了就可以了。另外,方法之间不需要逗号分隔,加了会报错。  

 //类的数据类型就是函数,类本身就指向构造函数。用的时候,也是直接对类使用new命令,跟构造函数的用法完全一致。
 class Bar {
 doStuff() {
 console.log('stuff');
 }
 }
 var b = new Bar();
 b.doStuff() // "stuff"

2、严格模式

  类和模块的内部,默认就是严格模式,所以不需要使用use strict指定运行模式。只要你的代码写在类或模块之中,就只有严格模式可用

3、constructor 方法

  constructor方法是类的默认方法,通过new命令生成对象实例时,自动调用该方法。一个类必须有constructor方法,如果没有显式定义,一个空的constructor方法会被默认添加。    

class Point {
 }
 // 等同于
 class Point {
 constructor() {}//constructor方法默认返回实例对象(即this),完全可以指定返回另外一个对象。
 }
 //注意:类必须使用new调用,否则会报错。这是它跟普通构造函数的一个主要区别,后者不用new也可以执行。

4、类的实例对象

  生成类的实例对象的写法,使用new命令。

  实例的属性除非显式定义在其本身(即定义在this对象上),否则都是定义在原型上(即定义在class上)。    

 class Point {
 // ...
 }
 // 报错
 var point = Point(2, 3);
 // 正确
 var point = new Point(2, 3);

5、Class 表达式

  下面代码使用表达式定义了一个类。需要注意的是,这个类的名字是MyClass而不是Me,Me只在 Class 的内部代码可用,指代当前类。      

 const MyClass = class Me {
 getClassName() {
 return Me.name;
 }
 };
 //采用 Class 表达式,可以写出立即执行的 Class。
 var person = new class {
 constructor(name) {
 this.name = name;
 }
 sayName() {
 console.log(this.name);
 }
 }('张三');
 person.sayName(); // "张三"

6、不存在变量提升

  类不存在变量提升(hoist)

  下面代码中,Foo类使用在前,定义在后,这样会报错,因为 ES6 不会把类的声明提升到代码头部。这种规定的原因与下文要提到的继承有关,必须保证子类在父类之后定义。

 new Foo(); // ReferenceError
 class Foo {} 

7、私有方法

  私有方法是常见需求,但 ES6 不提供,只能通过变通方法模拟实现。

  添加私有方法办法  

    ①在命名上加以区别。

    ②利用Symbol值的唯一性,将私有方法的名字命名为一个Symbol值。      

 /*命名上加以区别*/
 class Widget {
 // 公有方法
 foo (baz) {
 this._bar(baz);
 }
 // 私有方法
 _bar(baz) {
 return this.snaf = baz;
 }
 // ...
 }
 /*利用Symbol*/
 const bar = Symbol('bar');
 const snaf = Symbol('snaf');
 
 export default class myClass{
 // 公有方法
 foo(baz) {
 this[bar](baz);
 }
 // 私有方法
 [bar](baz) {
 return this[snaf] = baz;
 }
 // ...
 };

8、私有属性

  与私有方法一样,ES6 不支持私有属性。目前,有一个提案,为class加了私有属性。方法是在属性名之前,使用#表示。   

 class Point {
 #x;
 constructor(x = 0) {
 #x = +x; // 写成 this.#x 亦可
 }
 get x() { return #x }
 set x(value) { #x = +value }
 }

9、this 的指向

  类的方法内部如果含有this,它默认指向类的实例。
  一旦单独使用该方法,很可能报错。     

 class Logger {
 printName(name = 'there') {
 this.print(`Hello ${name}`);
 }
 
 print(text) {
 console.log(text);
 }
 } 
 const logger = new Logger();
 const { printName } = logger;
 printName();
 //上面代码中,printName方法中的this,默认指向Logger类的实例。但是,如果将这个方法提取出来单独使用,this会指向该方法运行时所在的环境,因为找不到print方法而导致报错。
 /*解决方法是,在构造方法中绑定this,这样就不会找不到print方法了。*/
 class Logger {
 constructor() {
 this.printName = this.printName.bind(this);
 } 
 // ...
 }

10、name 属性

   由于本质上,ES6 的类只是 ES5 的构造函数的一层包装,所以函数的许多特性都被Class继承,包括name属性。
  name属性总是返回紧跟在class关键字后面的类名。    

 class Point {}
 Point.name // "Point"

总结

以上所述是小编给大家介绍的ES6中class关键字,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

下载本文
显示全文
专题