Class和普通構造函數有何區別 JS構造函數 function MathHandle(x, y){this.x = x;this.y = y; } MathHandle.prototype.add = function () {return this.x + this.y; } var m = new MathHandle(1,2); console.log(m.add());

第一塊是構造函數，第二塊是構造函數的一個拓展，下面是將構造函數實例化，最后調用add方法，因為這個原型擴展之后，每個實例都會有這個方法。

typeof MathHandle // true MathHandle.prototype.constructor === MathHandle // true 每個構造函數都有一個prototype，顯示原型，prototype默認都有constructor屬性，這個屬性指的就是這個構造函數本身 m.__proto__ === MathHandle.prototype // true 所有實例都有一個隱式原型，這個隱式原型等于構造函數的顯示原型。這個是寫js構造函數的必備基礎

?

Class基礎語法 class MathHandle{constructor(x,y){this.x = x;this.y = y;}add() {return this.x + this.y;} } const m = new MathHandle(1,2); console.log(m.add());

constructor是一個構造器，每個class都有一個constructor。es6中，用class來專門做構造函數的語法其實是有點模擬java，c#的語法，讓初學者或后臺熟悉一點。下面的add相當于在原型中定義add方法。這里定義class的方法跟js構造函數相比，更加簡單。constructor在new的時候立馬會執行。

?

typeof MathHandle // "function"

本質上是個函數，明明沒有寫function，所以js中本身是沒有class的，所以這個class的本質是函數

MathHandle === MathHandle.prototype.constructor // true

跟js構造函數本質是一樣的，這是語法糖。

m.__proto__ === MathHandle.prototype // true

m的實例也是等雨構造函數的顯示原型

js的原理知識，能對上class的原理知識，一摸一樣

?

語法糖 這兩種寫法本質是一樣的，這種語法糖形式，和實際原理看起來不一樣了，形式上模擬java c#，這樣卻失去了他的本性。所以不繼續學習就不知道本質是什么東西。class可以提高初學者，后端的學習成本。但是前端需要知道本質

?

繼承

?

// 動物 function Animal() {this.eat = function(){console.log('animal eat')} } // 狗 function Dog() {this.bark = function () {console.log('dog bark');} } // 綁定原型，實現繼承 Dog.prototype = new Animal(); // 哈士奇 var hashiqi = new Dog();

繼承就是抽象到具象的過程，從高級到低級的一個關系，首先有一個animal，動物是抽象的，然后是狗，再往下是哈士奇，哈士奇是一種狗。每個animal都有eat，動物都要吃。dog有個bark，叫。這兩個構造函數比較簡單，就是兩個函數，里面有個屬性。重點是我們把Dog的顯示原型賦值成new Animal()。new Animal是出實話一個animal的實例。這樣就實現了繼承。再去new Dog()，肯定有bark的方法，執行了賦值之后，也有了eat的方法。

hashiqi.bark(); hashiqi.eat(); 這是js的繼承

class Animal{constructor(name){this.name = name;}eat() {console.log(this.name + ' eat')} } class Dog extends Animal {constructor(name) {super(name);this.name = name;}bark() {console.log(this.name + ' bark');} } const dog = new Dog('哈士奇'); dog.bark(); dog.eat();

Dog.prototype = new Animal() 相當于 class Dog extends Animal。后面跟java非常相似。這樣已經繼承了原型方法，不用再寫.prototype這種。。super(name)，也就是說在執行Dog的構造器的時候，我先把Animal的構造器執行一遍。Animal這個構造函數對應 class Animal。Dog這個構造函數，對應 class Dog。

?

轉載于:https://www.cnblogs.com/wzndkj/p/10958451.html

總結

以上是生活随笔為你收集整理的es6 class extends的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。