我们知道ECMAScript 6实现了class,class是一个语法糖,使得js的编码更清晰、更人性化、风格更接近面向对象的感觉,也使 IDE 、编译器类型检查器、代码风格检查器等工具更方便地检测代码语法,做静态分析。




如何把class转化为list python class转js_ES6


ES6 class 的 ES5 代码实现

JavaScript语言的传统方法是通过构造函数定义并生成新对象,这种写法和传统的面向对象语言差异较大。所以,ES6引入了Class这个概念作为对象的模板。

constructor

效果:ES6创建一个class会默认添加constructor方法,并在new调用时自动调用该方法。

ES5:

function Person(name, age) {  this.name = name;  this.age = age;}Person.prototype.toString = function () {return '(' + this.name + ',' + this.age + ')';}var p = new Person('Mia', 18);console.log(p);// Person { name: 'Mia', age: 18 }

ES6:

class Person {    constructor(name, age) {        this.name = name;        this.age = age;    }    toString() {        return '(' + this.name + ',' + this.age + ')';    }}var p = new Person('Mia', 18);console.log(p);// Person { name: 'Mia', age: 18 }

ES6的class中constructor是构造方法,对应的是ES5中的构造函数Person,this关键字则代表实例对象。

里面的class类可以看做是构造函数的另一种写法,由typeof Person === 'function'为true;Person === Person.prototype.constructor为true可以得出,类的数据类型就是函数,类本身指向构造函数。也可以说class的底层依然是function构造函数

类的公共方法都定义在类的prototype属性上。可以使用Object.assign一次向类添加多个方法。

ES5:

Object.keys(Person.prototype); // ['toString']

ES6:

Object.keys(Person.prototype); // Person {}

不可枚举的代码实现会在后面将ES6代码用Babel转码之后解析。

new调用

效果:class类必须使用new调用,否则会报错。

ES5:

Person()// undefined

ES6:

Person() // TypeError: Class constructor Person cannot be invoked without 'new'

实例的属性

效果:实例的属性是显式定义在this对象上,否则都是定义在原型上。类的所有实例共享一个原型对象,与ES5行为一致。

ES5:

function Person() {    this.grade = {        count: 0    };}

ES6:

class Person {    constructor() {        this.grade = {            count: 0        };    }}

静态方法

类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。

注意:如果静态方法包含this关键字,指的是类。

ES5:

function Person() { }Person.toSay = function () {    return 'I love JavaScript.';};Person.toSay(); // I love JavaScript.

ES6:

class Person {    static toSay() {        return 'I love JavaScript.';    }}Person.toSay(); // I love JavaScript.

getter 和 setter

ES6提供 get 和 set 关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为,和ES5行为一致。

ES5:

function Person(name) {}Person.prototype = {    get name() {        return 'mia';    },    set name(newName) {        console.log('new name:' + newName);    }}

ES6:

class Person {    get name() {        return 'mia';    }    set name(newName) {        console.log('new name:' + newName);    }}

其他class特性:

  • 不存在变量提升(必须先声明,才能new,否则报undefined)
  • 不能覆盖声明