ES6中的中的class是如何实现的是如何实现的(附附Babel编译的编译的ES5代码详解代码详解)
序言序言
这篇文章主要讲解面试中的一个问题 – ES6中的class语法的实现?
ECMAScript 6 实现了class,class是一个语法糖,使得js的编码更清晰、更人性化、风格更接近面向对象的感觉;也使 IDE 、
编译期类型检查器、代码风格检查器等工具更方便地检测代码语法,做静态分析。同样的,这给没有类就缺点什么的软件开发
工程师一个更低的门槛去接触js。
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一次向类添加多个方法。
特别的:class的内部定义的方法都是不可枚举的(non-enumerable),这一点与ES5的行为不一致。
ES5:
Object.keys(Person.prototype); // ['toString']
ES6:
Object.keys(Person.prototype); // Person {}
不可枚举的代码实现会在后面将ES6代码用Babel转码之后解析。
new调用调用
效果:class类必须使用new调用,否则会报错。
评论0