溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了ES6中Babel是如何編譯Class的，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
在了解 Babel 是如何編譯 class 前，我們先看看 ES6 的 class 和 ES5 的構造函數是如何對應的。畢竟，ES6 的 class 可以看作一個語法糖，它的絕大部分功能，ES5 都可以做到，新的 class 寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。
ES6 中：
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
return 'hello, I am ' + this.name;
}
}
var kevin = new Person('Kevin');
kevin.sayHello(); // hello, I am Kevin對應到 ES5 中就是:
function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function () {
return 'hello, I am ' + this.name;
};
var kevin = new Person('Kevin');
kevin.sayHello(); // hello, I am Kevin我們可以看到 ES5 的構造函數 Person，對應 ES6 的 Person 類的 constructor 方法。
值得注意的是：類的內部所有定義的方法，都是不可枚舉的（non-enumerable）
以上面的例子為例，在 ES6 中：
Object.keys(Person.prototype); // [] Object.getOwnPropertyNames(Person.prototype); // ["constructor", "sayHello"]
然而在 ES5 中：
Object.keys(Person.prototype); // ['sayHello'] Object.getOwnPropertyNames(Person.prototype); // ["constructor", "sayHello"]
以前，我們定義實例屬性，只能寫在類的 constructor 方法里面。比如：
class Person {
constructor() {
this.state = {
count: 0
};
}
}然而現在有一個提案，對實例屬性和靜態屬性都規定了新的寫法，而且 Babel 已經支持。現在我們可以寫成：
class Person {
state = {
count: 0
};
}對應到 ES5 都是：
function Person() {
this.state = {
count: 0
};
}所有在類中定義的方法，都會被實例繼承。如果在一個方法前，加上 static 關鍵字，就表示該方法不會被實例繼承，而是直接通過類來調用，這就稱為“靜態方法”。
ES6 中：
class Person {
static sayHello() {
return 'hello';
}
}
Person.sayHello() // 'hello'
var kevin = new Person();
kevin.sayHello(); // TypeError: kevin.sayHello is not a function對應 ES5：
function Person() {}
Person.sayHello = function() {
return 'hello';
};
Person.sayHello(); // 'hello'
var kevin = new Person();
kevin.sayHello(); // TypeError: kevin.sayHello is not a function靜態屬性指的是 Class 本身的屬性，即 Class.propName，而不是定義在實例對象（this）上的屬性。以前，我們添加靜態屬性只可以這樣：
class Person {}
Person.name = 'kevin';因為上面提到的提案，現在可以寫成：
class Person {
static name = 'kevin';
}對應到 ES5 都是：
function Person() {};
Person.name = 'kevin';值得注意的是：類必須使用 new 調用，否則會報錯。這是它跟普通構造函數的一個主要區別，后者不用 new 也可以執行。
class Person {}
Person(); // TypeError: Class constructor Foo cannot be invoked without 'new'與 ES5 一樣，在“類”的內部可以使用 get 和 set 關鍵字，對某個屬性設置存值函數和取值函數，攔截該屬性的存取行為。
class Person {
get name() {
return 'kevin';
}
set name(newName) {
console.log('new name 為：' + newName)
}
}
let person = new Person();
person.name = 'daisy';
// new name 為：daisy
console.log(person.name);
// kevin對應到 ES5 中：
function Person(name) {}
Person.prototype = {
get name() {
return 'kevin';
},
set name(newName) {
console.log('new name 為：' + newName)
}
}
let person = new Person();
person.name = 'daisy';
// new name 為：daisy
console.log(person.name);
// kevin至此，我們已經知道了有關“類”的方法中，ES6 與 ES5 是如何對應的，實際上 Babel 在編譯時并不會直接就轉成這種形式，Babel 會自己生成一些輔助函數，幫助實現 ES6 的特性。
我們可以在 Babel 官網的 Try it out 頁面查看 ES6 的代碼編譯成什么樣子。
ES6 代碼為：
class Person {
constructor(name) {
this.name = name;
}
}Babel 編譯為：
"use strict";
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Person = function Person(name) {
_classCallCheck(this, Person);
this.name = name;
};_classCallCheck 的作用是檢查 Person 是否是通過 new 的方式調用，在上面，我們也說過，類必須使用 new 調用，否則會報錯。
當我們使用 var person = Person() 的形式調用的時候，this 指向 window，所以 instance instanceof Constructor 就會為 false，與 ES6 的要求一致。
ES6 代碼為：
class Person {
// 實例屬性
foo = 'foo';
// 靜態屬性
static bar = 'bar';
constructor(name) {
this.name = name;
}
}Babel 編譯為：
'use strict';
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Person = function Person(name) {
_classCallCheck(this, Person);
this.foo = 'foo';
this.name = name;
};
Person.bar = 'bar';ES6 代碼為：
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
return 'hello, I am ' + this.name;
}
static onlySayHello() {
return 'hello'
}
get name() {
return 'kevin';
}
set name(newName) {
console.log('new name 為：' + newName)
}
}對應到 ES5 的代碼應該是：
function Person(name) {
this.name = name;
}
Person.prototype = {
sayHello: function () {
return 'hello, I am ' + this.name;
},
get name() {
return 'kevin';
},
set name(newName) {
console.log('new name 為：' + newName)
}
}
Person.onlySayHello = function () {
return 'hello'
};Babel 編譯后為：
'use strict';
var _createClass = function() {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function(Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Person = function() {
function Person(name) {
_classCallCheck(this, Person);
this.name = name;
}
_createClass(Person, [{
key: 'sayHello',
value: function sayHello() {
return 'hello, I am ' + this.name;
}
}, {
key: 'name',
get: function get() {
return 'kevin';
},
set: function set(newName) {
console.log('new name 為：' + newName);
}
}], [{
key: 'onlySayHello',
value: function onlySayHello() {
return 'hello';
}
}]);
return Person;
}();我們可以看到 Babel 生成了一個 _createClass 輔助函數，該函數傳入三個參數，第一個是構造函數，在這個例子中也就是 Person，第二個是要添加到原型上的函數數組，第三個是要添加到構造函數本身的函數數組，也就是所有添加 static 關鍵字的函數。該函數的作用就是將函數數組中的方法添加到構造函數或者構造函數的原型中，最后返回這個構造函數。
在其中，又生成了一個 defineProperties 輔助函數，使用 Object.defineProperty 方法添加屬性。
默認 enumerable 為 false，configurable 為 true，這個在上面也有強調過，是為了防止 Object.keys() 之類的方法遍歷到。然后通過判斷 value 是否存在，來判斷是否是 getter 和 setter。如果存在 value，就為 descriptor 添加 value 和 writable 屬性，如果不存在，就直接使用 get 和 set 屬性。
上述內容就是ES6中Babel是如何編譯Class的，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
