ES6——Class基本语法

作者: 流眸Tel | 来源:发表于2019-07-29 17:58 被阅读0次

一、 简介

  JavaScript语言传统方法是通过构造函数定义并生成新对象。例:

function Add (a, b) {
    this.a = a;
    this.b = b;
}

Add.prototype.toString = function () {
    return this.a + this.b;
}

var add = new Add(5, 8)

  而在ES6中,引入了Class这个概念来作为对象的模板。而class只是一个语法糖写法,还是基于ES5封装而来的。上面的例子用class来改写如下:

// 定义类
class Add {
    constructor (a, b) {
        this.a = a;
        this.b = b;
    }

    toString () {
        return this.a + this.b;
    }
}

注:方法之间不需要加逗号,否则会报错。

  从中可见一个constructor方法,这便是构造方法。另外,关键字this则代表实例对象


二、基本准则

  • ES6的类完全可以看作是构造函数的另一种写法
  • 类的数据类型就是函数,类本身就只想构造函数
  • 构造函数的prototype属性在ES6的类上继续存在
  • 类的所有方法都定义在类的prototype上
  • 在类的实例上调用方法,其实就是调用原型上的方法
  • Object.assign可以一次向类添加多个方法
  • 类的内部定义的所有方法都是不可枚举的
  • 类的属性名可以采用表达式

1. 一次向类添加多个方法

// Object.assign(类原型,{方法列表})
Object.assign(Add.prototype, {
    toString () {},
    toValue () {}
})

2. 不可枚举

class Add {
    constructor (a, b) {
        // ...
    }

    toString () {
        // ...
    }
}

Object.keys(Add.prototype); // []
Object.getOwnPropertyNames(Add.prototype);  // ["constructor", "toString"]

3. 属性名表达式

const methodName = 'getValue';

class Add {
    constructor (a, b) {
        // ...
    }

    [methodName] () {
        // ...
    }
}

三、 拓展

1. 严格模式

  类和模版的内部默认使用严格模式,所以无需使用use strict指定运行模式。只要将代码卸载类或者模块之中,就只有严格模式可用。ES6已经把整个语言都升级到了严格模式下。

2. constructor方法

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

class Add {

}

// 等同于
class Add {
    constructor () {}
}

  上面代码中定义了一个空的类Add,JavaScript引擎会自动给它添加一个空的constructor方法。除此之外,还需注意的是:

  • constructor方法默认返回this,不过也可以指定返回另一个对象
  • 类必须使用new来调用,否则会报错

3. 类的实例对象

  实例的属性除非是显式定义在this对象上,否则都是定义在了Class上。

class Add {
    constructor (a, b) {
        this.a = a;
        this.b = b;
    }

    toString () {
        return this.a + this.b;
    }
}

var add = new Add(5, 8);
add.toString(); // 13

add.hasOwnProperty('a');    // true
add.hasOwnProperty('b');    // true
add.hasOwnProperty('toString');     // false
add.__proto__.hasOwnProperty('toString');   // true

  从上面代码中,a和b都是实例对象Add自身的属性,因为定义在this变量上,所以执行hasOwnProperty方法返回true;而toString是原型对象的属性,因为定义在Add上,所以hasOwnProperty方法返回的事false。另外,类的所有实例共享一个原型对象;可以通过实例的proto属性为类来添加方法。

4. 其他

  除上述所说之外,类同样有很多有意思的属性或者方法,此处放上一些,以供参考。

  • Class表达式
  • 不存在变量提升
  • 私有方法
  • 私有属性
  • this的指向
  • name属性
  • Class的存取值函数(setter/getter)
  • Class的Generator方法
  • Class的静态方法
  • 静态属性和实例属性
  • new.target属性

参考:ECMAScript 6 入门 - 阮一峰

相关文章

  • ES6中的Class

    ES6的class语法 不是一种新的“类”机制,class基本上只是现有 [[prototype]]链(委托)机制...

  • ES6——Class基本语法

    一、 简介   JavaScript语言传统方法是通过构造函数定义并生成新对象。例:   而在ES6中,引入了Cl...

  • ES6之Class

    基本写法 ES6的class语法基本上就是基于以前ES5构造函数的包装函数,也可以叫做语法糖,所有的功能都能用ES...

  • Class的基本语法[ES6]

    Class 的基本语法 简介 JavaScript 语言中,生成实例对象的传统方法是通过构造函数。下面是一个例子。...

  • class-基本语法(es6)

    js构造函数 Class 语法 语法糖 这种语法糖形式,看起来和实际原理不一样的东西,我个人不太赞同形式上强行模仿...

  • [转]ES6 Class基本语法

    [转]ES6 Class基本语法 注:本文为转载文章但是我又在此基础上进行修改的添加 简介 严格模式 constr...

  • js继承 es6和es5

    es6 class是个语法糖,本质上是原型链 es6之前

  • ES6入门之class基本用法

    基本概念 基本上,ES6 的class可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的class...

  • 2JavaScript设计模式--class/extends

    ES6语法 类 class ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对象的模板...

  • ES6学习-类(Class)的原理2

    1.基本语法 JavaScript 语言中,生成实例对象的传统方法是通过构造函数。 ES6引入了Class(类)的...

网友评论

    本文标题:ES6——Class基本语法

    本文链接:https://www.haomeiwen.com/subject/xdrirctx.html