es6的class是不是函數(shù)

本篇內(nèi)容介紹了“es6的class是不是函數(shù)”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

es6 class是函數(shù)。在es6中，class（類）作為對象的模板被引入，可以通過class關鍵字定義類，語法為“class 類名{...}；class的本質就是function（函數(shù)），它是一個語法糖，其底層是通過“構造函數(shù)”去創(chuàng)建的。

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

es6 class是函數(shù)。

在ES6中，class (類)作為對象的模板被引入，可以通過 class 關鍵字定義類。

class 的本質是 function。

它可以看作一個語法糖，其底層還是通過 構造函數(shù) 去創(chuàng)建的，讓對象原型的寫法更加清晰、更像面向對象編程的語法。

function Person(name, age) {
    this.name = name;
    this.age = age;
}
Person.prototype.sayName = function() {
    return this.name;
}

const xiaoming = new Person('小明', 18);
console.log(xiaoming);

上面代碼用ES6的class實現(xiàn)，就是下面這樣

class Person {
    constructor(name, age) {
      this.name = name;
      this.age = age;
    }
  
    sayName() {
      return this.name;
    }
}
const xiaoming = new Person('小明', 18)
console.log(xiaoming);
// { name: '小明', age: 18 }

console.log((typeof Person));
// function
console.log(Person === Person.prototype.constructor);
// true

constructor方法，這就是構造方法，this關鍵字代表實例對象。 類的數(shù)據(jù)類型就是函數(shù)，類本身就指向構造函數(shù)。

定義類的時候，前面不需要加 function, 而且方法之間不需要逗號分隔，加了會報錯。

類的所有方法都定義在類的prototype屬性上面。

class A {
    constructor() {}
    toString() {}
    toValue() {}
}
// 等同于
function A () {
    // constructor
};
A.prototype.toString = function() {};
A.prototype.toValue = function() {};

在類的實例上面調(diào)用方法，其實就是調(diào)用原型上的方法。

let a = new A();
a.constructor === A.prototype.constructor // true

類的實例

實例的屬性除非顯式定義在其本身（即定義在this對象上），否則都是定義在原型上（即定義在class上）。

注意：

1、class不存在變量提升

new A(); // ReferenceError
class A {}

因為 ES6 不會把類的聲明提升到代碼頭部。這種規(guī)定的原因與繼承有關，必須保證子類在父類之后定義。

{
  let A = class {};
  class B extends A {}
}

上面的代碼不會報錯，因為 B繼承 A的時候，A已經(jīng)有了定義。但是，如果存在 class提升，上面代碼就會報錯，因為 class 會被提升到代碼頭部，而let命令是不提升的，所以導致 B 繼承 A 的時候，F(xiàn)oo還沒有定義。

2、this的指向 類的方法內(nèi)部如果含有this，它默認指向類的實例。但是，必須非常小心，一旦單獨使用該方法，很可能報錯。

繼承

Class 可以通過extends關鍵字實現(xiàn)繼承

class Animal {}
class Cat extends Animal { };

上面代碼中 定義了一個 Cat 類，該類通過 extends關鍵字，繼承了 Animal 類中所有的屬性和方法。 但是由于沒有部署任何代碼，所以這兩個類完全一樣，等于復制了一個Animal類。 下面，我們在Cat內(nèi)部加上代碼。

class Cat extends Animal {
    constructor(name, age, color) {
        // 調(diào)用父類的constructor(name, age)
        super(name, age);
        this.color = color;
    }
    toString() {
        return this.color + ' ' + super.toString(); // 調(diào)用父類的toString()
    }
}

constructor方法和toString方法之中，都出現(xiàn)了super關鍵字，它在這里表示父類的構造函數(shù)，用來新建父類的this對象。

子類必須在 constructor 方法中調(diào)用 super 方法，否則新建實例就會報錯。 這是因為子類自己的this對象，必須先通過 父類的構造函數(shù)完成塑造，得到與父類同樣的實例屬性和方法，然后再對其進行加工，加上子類自己的實例屬性和方法。如果不調(diào)用super方法，子類就得不到this對象。

class Animal { /* ... */ }

class Cat extends Animal {
  constructor() {
  }
}

let cp = new Cat();
// ReferenceError

Cat 繼承了父類 Animal，但是它的構造函數(shù)沒有調(diào)用super方法，導致新建實例報錯。

如果子類沒有定義constructor方法，這個方法會被默認添加，代碼如下。也就是說，不管有沒有顯式定義，任何一個子類都有constructor方法。

class Cat extends Animal {

}
// 等同于

class Cat extends Animal {
    constructor(...args) {
        super(...args);
    }
}

另一個需要注意的地方是，es5 的構造函數(shù)在調(diào)用父構造函數(shù)前可以訪問 this, 但 es6 的構造函數(shù)在調(diào)用父構造函數(shù)(即 super)前不能訪問 this。

class A {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class B extends A {
  constructor(x, y, name) {
    this.name = name; // ReferenceError
    super(x, y);
    this.name = name; // 正確
  }
}

上面代碼中，子類的constructor方法沒有調(diào)用super之前，就使用this關鍵字，結果報錯，而放在super方法之后就是正確的。

父類的靜態(tài)方法，也會被子類繼承。

class A {
  static hello() {
    console.log('hello world');
  }
}

class B extends A {
}

B.hello()  // hello world

“es6的class是不是函數(shù)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識可以關注億速云網(wǎng)站，小編將為大家輸出更多高質量的實用文章！