JavaScript ES6的新特性使用新方法定義Class

更新時間：2016年06月28日 10:01:00 作者：http://www.cnblogs.com/diligenceday/p/5500097.html

這篇文章主要介紹了JavaScript ES6的新特性使用新方法定義Class 的相關資料,需要的朋友可以參考下

ES6（ECMAScript 6）是即將到來的新版本JavaScript語言的標準，代號harmony(和諧之意，顯然沒有跟上我國的步伐，我們已經(jīng)進入中國夢版本了)。上一次標準的制訂還是2009年出臺的ES5。目前ES6的標準化工作正在進行中，預計會在14年12月份放出正式敲定的版本。但大部分標準已經(jīng)就緒，且各瀏覽器對ES6的支持也正在實現(xiàn)中。

ES6中定義類的方式，就是ES3和ES5中定義類的語法糖，雖然也有些區(qū)別，但是整體定義類的方式更加簡潔，類的繼承更加方便，如果想對ES6中的繼承更加熟悉，最好了解ES5中原型繼承的方式，博客園中說JS繼承的文章很多，想要深入了解的同學自己去搜；

　　定義一個class：

　　每一個使用class方式定義的類默認都有一個constructor函數(shù)，這個函數(shù)是構(gòu)造函數(shù)的主函數(shù)，該函數(shù)體內(nèi)部的this指向生成的實例, say() {}為原型上的方法，我們定義一個簡單的類：

運行下面代碼

"use strict";
class Person {
 constructor(name) {
  this.name = name;
 }
 say () {
  console.log("say hi");
 }
};
new Person().say(); //控制臺會輸出say hi

　　注意： ES6中聲明的類不存在函數(shù)聲明提前的問題，類必須先聲明再使用，否則會出現(xiàn)異常，我們只是把上面Demo中的代碼位置一改，立馬報錯， (如果用ES5中的思維去理解的話，聲明的類沒有聲明提前，有關聲明提前的知識點，通過class 類名{} 聲明的類，就是var 類名 = function(){})；

運行下面代碼

 "use strict";
new Person().say();
class Person {
 constructor(name) {
  this.name = name;
 }
 say () {
  console.log("say hi");
 }
};

　　定義函數(shù)的靜態(tài)方法：

　　如果定義函數(shù)的時候，大括號內(nèi)部，函數(shù)名前聲明了static，那么這個函數(shù)就為靜態(tài)函數(shù)，就為靜態(tài)方法，和原型沒啥關系：

運行下面代碼

 "use strict";
class Person {
 constructor(name) {
  this.name = name;
 }
 static say () {
  console.log("say hi");
 }
};
Person.say();

　　定義原型方法：

　　定義原型方法，直接這樣聲明：函數(shù)名 () {} 即可，小括號內(nèi)部為參數(shù)列表，大括號內(nèi)部為代碼塊, ES5中要定義原型方法是通過：構(gòu)造函數(shù).prototype.原型方法名() {} , 這種書寫形式很繁瑣，使用ES6定義原型的方式有點像java和C#了，這些都是比較高級語言的特征：

運行下面代碼

 "use strict";
class Person {
 constructor(name) {
  this.name = name;
 }
 say () {
  console.log("say hi");
 }
 sing () {
  console.log("lalalalala");
 }
};
new Person().say(); //輸出 ：say hi
new Person().sing(); //輸出 ：lalalalala

　　靜態(tài)屬性和原型屬性：

　　只能在類定義完畢以后再定義靜態(tài)屬性，有點坑爹，語言作者實現(xiàn)這種方式可能是為了避免代碼的混亂，所有的靜態(tài)屬性在同一個地方定義，代碼回更加規(guī)范？

運行下面代碼

 "use strict";
class Person {
 constructor(name) {
  this.name = name;
 }
};
Person.hands = 2;
console.log(Person.hands);

　　原型上面也不能定義屬性了，我們只能在原型上定義set和get，取值和設值器，要注意取值器和設值器是在原型上....：

運行下面代碼

class Person {
 constructor(_name) {
  this._name = _name;
 }
 get name() {
  return this._name;
 }
 set name(_name) {
  this._name = _name;
 }
}
var p = new Person();
p.name = "heheda";
console.log(p.name); //輸出：heheda
console.log(p._name); //輸出：heheda

　　如果要定義原型屬性的話，直接把屬性定義在constructor內(nèi)部即可，如果是繼承的話，子類也會繼承父類的這個屬性：

運行下面代碼

 class Person {
 constructor() {
  this.name = "default";
 }
}
class Man extends Person{
 constructor() {
  super();
 }
}
console.log( new Man().name );

　　類的繼承extends：

　　ES5已經(jīng)有繼承，但是這種繼承經(jīng)常繞來繞去的， ES6的繼承也只是基于原型繼承的封裝(語法糖)，雖然的確簡潔了不少，還是java的繼承比較好學啊，下面Demo的例子中的SMan是超人的意思，別想歪了；

運行下面代碼

 "use strict";
class Person {
 constructor(name) {
  this.name = name;
 }
 say () {
  console.log("say hi");
  return this;
 }
};
class SMan extends Person {
 constructor (name, power) {
  super(name);
  this.superPower = power;
 }
 show () {
  console.log(this.superPower);
  return this;
 }
}
console.log( new SMan("Clark", "pee").show().say().name ); //輸出： pee say hi Clark

　　如果要使用繼承的話，在子類中必須執(zhí)行super()調(diào)用父類，否者編譯器會拋錯，在子類中的super有三種作用，第一是作為構(gòu)造函數(shù)直接調(diào)用，第二種是作為父類實例，第三種是在子類中的靜態(tài)方法中調(diào)用父類的靜態(tài)方法；

　　ES6繼承的和ES5繼承的主要區(qū)別， ES5中常用的繼承是把子類的原型設置為父類的實例，子類自然就有了父類的所有方法和屬性：

運行下面代碼

 var Sup = function() {
 this.sub = true;
};
Sup.prototype.protoSup = {sup:"sup"};
var Sub = function() {
 this.sub = true;
};
Sub.prototype = new Sup(); //繼承原型;
Sub.prototype.constructor = Sub; //修正constructor;

　　而在ES6中實現(xiàn)的繼承更加精巧，不會有受到父類的干擾，這種繼承是結(jié)合了apply繼承和原型繼承實現(xiàn)的組合繼承：

運行下面代碼

 var Sup = function() {
 this.sub = true;
};
var Sub = function() {
 this.sup = true;
 Sup.apply(this); //繼承this的屬性和方法;
};
Sub.__proto__ = Sup; //繼承Sup靜態(tài)屬性;
Sub.prototype = Object.create( Sup.prototype, {constructor : { value: Sub, enumerable: false, writable: true, configurable: true }}); //繼承原型屬性，并覆寫constructor;

　　用圖片可以比較容易看出兩者區(qū)別，圖示ES5和ES6繼承的區(qū)別：http://keenwon.com/1524.html ；

　　ES5模擬ES6的繼承：

　　因為有了轉(zhuǎn)碼器babel ，我們能通過ES5的代碼，去窺探ES6的繼承到底是怎么實現(xiàn)， ES6的繼承：

運行下面代碼

"use strict";
class Person {
 constructor(name) {
  this.name = name;
 }
 say () {
  console.log("say hi");
  return this;
 }
};
class SMan extends Person {
 constructor (name, power) {
  super(name);
  this.superPower = power;
 }
 show () {
  console.log(this.superPower);
  return this;
 }
}
console.log( new SMan("Clark", "pee").show().say().name );

　　使用babel轉(zhuǎn)化為ES5以后，代碼變成這樣了, 我自己加了一點注釋，原諒我放蕩不羈愛自由..：

運行下面代碼

 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");
  }
 }
 function _possibleConstructorReturn(self, call) {
  if (!self) {
   throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }
  return call && (typeof call === "object" || typeof call === "function") ? call : self;
 }
 //下面是ES6繼承使用ES5表達出來的代碼，_inherits實現(xiàn)的是原型的繼承和父類狀態(tài)屬性的繼承：
 function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
   throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
  }
  //繼承父類的原型，并修正constructor為子類;
  subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } });
  //又給子類這個對象定義__proto__ 為父類， 這樣能夠?qū)崿F(xiàn)靜態(tài)屬性繼承；
  if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
  //最后的如果開發(fā)者：new 子類， 實際的狀態(tài)為： 對象{__proto__:父類,constuctor:子類}
 };
 /*
 var Sup = function() {};
 var Sub = function() {};
 _inherits(Sub, Sup);
 //這個繼承實現(xiàn)的意思; 作為對象的子類繼承父類， 作為構(gòu)造函數(shù)的話，子類繼承
 Sub.prototype.__proto__ === Sup.prototype //true
 Sub.prototype.constructor === Sub;//true
 Sub.__proto__ === Sup;//true
 */
 var Person = function () {
  function Person(name) {
   _classCallCheck(this, Person);
   this.name = name;
  }
  _createClass(Person, [{
   key: "say",
   value: function say() {
    console.log("say hi");
    return this;
   }
  }]);
  return Person;
 }();
 ;
 var SMan = function (_Person) {
  _inherits(SMan, _Person);
  function SMan(name, power) {
   //此時的this.__proto__已經(jīng)指向 構(gòu)造函數(shù)的prototyp了
   _classCallCheck(this, SMan);
   //這句話相當于是ES6中的super()， 把父類的屬性通過call， 執(zhí)行繼承;
   var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(SMan).call(this, name));
   _this.superPower = power;
   //動態(tài)返回_this;
   return _this;
  }
  _createClass(SMan, [{
   key: "show",
   value: function show() {
    console.log(this.superPower);
    return this;
   }
  }]);
  return SMan;
 }(Person);
 console.log(new SMan("Clark", "pee").show().say().name);

　　多重繼承：

　　　　使用mix-in，實現(xiàn)多重繼承，書寫方式為：class Sub extends mix(obj0, obj1, obj2) , mix只是一個方法，這個方法我們要自己去定義：

運行下面代碼

 <html>
<head>
 <meta charset="utf-8">
</head>
<body>
<script>
 "use strict";
 function mix(...mixins) {
  class Mix {}
  for (let mixin of mixins) {
   copyProperties(Mix, mixin);
   copyProperties(Mix.prototype, mixin.prototype);
  }
  return Mix;
 }
 function copyProperties(target, source) {
  for (let key of Reflect.ownKeys(source)) {
   if ( key !== "constructor"
     && key !== "prototype"
     && key !== "name"
     ) {
    let desc = Object.getOwnPropertyDescriptor(source, key);
    Object.defineProperty(target, key, desc);
   }
  }
 }
 class Man{
  work () {
   console.log("working");
  }
 }
 class Woman{
  say () {
   console.log("saying");
  }
 }
 class SuperMan extends mix(Man, Woman) {
  constructor () {
   super();
  }
 }
 var sm = new SuperMan();
 sm.work();
 sm.say();
 //實際上它們不存在繼承關系， 只是把屬性復制到子類上;
 console.log(sm instanceof Man);
 console.log(sm instanceof Woman);
</script>
</body>
</html>

以上所述是小編給大家介紹的JavaScript ES6的新特性使用新方法定義Class的相關知識，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

JavaScript事件監(jiān)聽器addEventListener()方法和一些基本事件詳解
這篇文章主要介紹了JavaScript事件監(jiān)聽器addEventListener()方法和一些基本事件,這篇文章主要介紹了JavaScript事件監(jiān)聽器addEventListener()方法和一些基本事件的相關資料,需要的朋友可以參考下
2024-10-10
js將html頁面轉(zhuǎn)為pdf兩種方法
最近遇到的需求,把html轉(zhuǎn)成pdf文件下載導出,下面這篇文章主要給大家介紹了關于js將html頁面轉(zhuǎn)為pdf的兩種方法,文中給出了詳細的代碼示例,需要的朋友可以參考下
2023-08-08
js獲得參數(shù)的getParameter使用示例
這篇文章主要介紹了js獲得參數(shù)的getParameter使用示例,需要的朋友可以參考下
2014-02-02
Three.js渲染模型卡頓問題的一些優(yōu)化辦法
用ThreeJS加載大模型總要遇到性能問題,性能優(yōu)化一般包括加載性能優(yōu)化、渲染幀率優(yōu)化、內(nèi)存優(yōu)化等,下面這篇文章主要給大家介紹了關于Three.js渲染模型卡頓問題的一些優(yōu)化辦法,需要的朋友可以參考下
2024-02-02
微信公眾號支付H5調(diào)用支付解析
這篇文章主要為大家詳細介紹了微信公眾號支付H5調(diào)用支付,具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-11-11
詳解如何在微信小程序開發(fā)中正確的使用vant ui組件
這篇文章主要介紹了詳解如何在微信小程序開發(fā)中正確的使用vant ui組件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-09-09
webpack如何自動生成網(wǎng)站圖標詳解
這篇文章主要給大家介紹了關于webpack如何自動生成網(wǎng)站圖標的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
2022-01-01
一些手寫JavaScript常用的函數(shù)匯總
這篇文章主要給大家介紹了一些手寫的JavaScript常用的函數(shù)，文中通過示例代碼介紹的非常詳細，對大家學習或者使用JavaScript具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-04-04
純js實現(xiàn)畫一棵樹的示例
下面小編就為大家?guī)硪黄僯s實現(xiàn)畫一棵樹的示例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
js 設置選中行的樣式的實現(xiàn)代碼
設置選中的行樣式的js代碼，需要的朋友可以參考下，這里只給出了函數(shù)，具體的自己發(fā)揮。
2010-05-05