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"
时间: 2024-11-01 23:09:51

ES6中class关键字的相关文章

ES6中 const 关键字

const声明一个只读的常量.一旦声明,常量的值就不能改变. 定义后可以使用但不能修改 但是,const 定义的对象可能与我们想象的不太一样 定义了对象b ,我们可以在b上添加修改属性,再看一个列子 现在又不让修改了 如果想让对象变成不可变数据,可以使用Object.freeze 方法 原文地址:https://www.cnblogs.com/zhangtao1990/p/8283330.html

理解 ES6 语法中 yield 关键字的返回值

在 ES6 中新增了生成器函数的语法,本文解释了生成器函数内 yield 关键字的返回值. 描述 根据语法规范,yield 关键字用来暂停和继续执行一个生成器函数.当外部调用生成器的 next() 方法时,yield 关键字右侧的表达式才会执行. 执行结果会转化为一个对象(包含两个属性, value 和 done),作为 next() 方法的返回值. 对于  var foo = yield expression 语句,yield 左侧变量 foo 的值将在下一次调用 next() 方法时获得,并

ES6中的let和const关键字

  ES5中只有var能够定义变量,作用域是在function中. ES6中可以用let来定义变量,定义是块级作用域变量. { let a = 10; var b = 20; } console.log(a); //报错 console.log(b); //20 let的声明范围就是{}内部. 比如循环语句中定义函数,此时var: var arr = []; for(let i = 0 ; i < 10 ; i++){ arr[i] = function(){ console.log(i); }

ES6中的迭代器(Iterator)和生成器(Generator)

前面的话 用循环语句迭代数据时,必须要初始化一个变量来记录每一次迭代在数据集合中的位置,而在许多编程语言中,已经开始通过程序化的方式用迭代器对象返回迭代过程中集合的每一个元素 迭代器的使用可以极大地简化数据操作,于是ES6也向JS中添加了这个迭代器特性.新的数组方法和新的集合类型(如Set集合与Map集合)都依赖迭代器的实现,这个新特性对于高效的数据处理而言是不可或缺的,在语言的其他特性中也都有迭代器的身影:新的for-of循环.展开运算符(...),甚至连异步编程都可以使用迭代器 本文将详细介

ES6中的Symbol类型

前面的话 ES5中包含5种原始类型:字符串.数字.布尔值.null和undefined.ES6引入了第6种原始类型--Symbol ES5的对象属性名都是字符串,很容易造成属性名冲突.比如,使用了一个他人提供的对象,想为这个对象添加新的方法,新方法的名字就有可能与现有方法产生冲突.如果有一种机制,保证每个属性的名字都是独一无二的,这样就从根本上防止了属性名冲突.这就是ES6引入Symbol的原因,本文将详细介绍ES6中的Symbol类型 创建 Symbol 值通过Symbol函数生成.这就是说,

ES6中的类

前面的话 大多数面向对象的编程语言都支持类和类继承的特性,而JS却不支持这些特性,只能通过其他方法定义并关联多个相似的对象,这种状态一直延续到了ES5.由于类似的库层出不穷,最终还是在ECMAScript 6中引入了类的特性.本文将详细介绍ES6中的类 ES5近似结构 在ES5中没有类的概念,最相近的思路是创建一个自定义类型:首先创建一个构造函数,然后定义另一个方法并赋值给构造函数的原型 function PersonType(name) { this.name = name; } Person

ES5和ES6中对于继承的实现方法

在ES5继承的实现非常有趣的,由于没有传统面向对象类的概念,Javascript利用原型链的特性来实现继承,这其中有很多的属性指向和需要注意的地方. 原型链的特点和实现已经在之前的一篇整理说过了,就是通过将子类构造函数的原型作为父类构造函数的实例,这样就连通了子类-子类原型-父类,原型链的特点就是逐层查找,从子类开始一直往上直到所有对象的原型Object.prototype,找到属性方法之后就会停止查找,所以下层的属性方法会覆盖上层. 一个基本的基于原型链的继承过程大概是这样的: //先来个父类

es6中let,const区别与其用法

ECMAScript 是什么? 首先,我们都知道JavaScript由三部分组成:ECMAScript,DOM,BOM: 其中的ECMAScript是Javascript的语法规范. ECMAScript定义了很多东西,如: 语法-----解析规则,关键字,语句,声明,操作等 类型-----布尔型,数字,字符串,对象等 原型和继承 内置对象,函数的标准库----------JSON, Math, 数组方法,对象方法等 浏览器兼容: 目前Google和Firefox浏览器对ES6新特性的兼容最友好

ES6中的模块化

JS用"共享一切"的方法加载代码,这是该语言中最易出错且容易令人感到困惑的地方.在ES6以前,在应用程序的每一个JS中定义的一切都共享一个全局作用域.随着web应用程序变得更加复杂,JS代码的使用量也开始增长,这一做法会引起问题,如命名冲突和安全问题.ES6的一个目标是解决作用域问题,也为了使JS应用程序显得有序,于是引进了模块. 一.概述 模块是自动运行在严格模式下并且没有办法退出运行的JS代码.与共享一切架构相反的是,在模块顶部创建的变量不会自动被添加到全局共享作用域,这个变量仅在