ES6 class和import

S6的變量聲明方式

保留了var和function。新增加了let、const、class和import。
而且,let、const、class聲明的全局變量再也不會和全局對象的屬性掛鉤了。

import import導(dǎo)入 通過export導(dǎo)出

-----------
    import
  -----------
  1、ES6引入了自己的模塊系統(tǒng)。通過export導(dǎo)出,import導(dǎo)入。
  2、與CommonJS不同的是,它是獲取模塊的引用,到用的時候才會真正的去取值。

  3、例如student.js中:
  let student = [
    {
      name: 'xiaoming',
      age: 21,
    },
    {
      name: 'xiaohong',
      age: 18
    }
  ]
  export default student; // 這種導(dǎo)出方式,你可以在import時指定它的名稱。  

  4、在app.js中我們就可以這樣用:
  import StudentList from './student.js'; //指定名稱
  console.log(StudentList[0].name); //xiaoming

class

---------
   class
 ---------
 1、class作為es6的語法糖,實際上es5也可以實現(xiàn)的。
 class Point {
   constructor (x, y) {
     this.x = x;
     this.y = y;
   }
   toString () {
     return this.x + ',' + this.y;
   }
 }
 Object.assign(Point.prototype, {
   getX () {
     return this.x;
   },
   getY () {
     return this.y;
   }
 })
 let p1 = new Point(1,2);
 console.log(p1.toString()); //1,2
 console.log(p1.getX()); //1
 console.log(p1.getY()); //2
 console.log(Object.keys(Point.prototype)); // ["getX", "getY"]  

 (1)、方法之間不需要逗號分隔
 (2)、toString () {} 等價于 toString: function () {}
 (3)、你仍然可以使用Point.prototype
 (4)、你可以用Object.assign()一次性擴(kuò)展很多方法
 (5)、類內(nèi)部定義方法多是不可以枚舉的
 (6)、constructor(){}是一個默認(rèn)方法,如果沒有添加,會自動添加一個空的。
 (7)、constructor默認(rèn)返回實例對象(this),完全可以指定返回其他的對象。
 (8)、必須用new調(diào)用
 (9)、不存在變量提升
 (10)、當(dāng)用一個變量去接受class時,可以省略classname
 (11)、es6不提供私有方法。

 2、使用extends繼承
 class ThreeDPoint extends Point {
   constructor (x, y, z) {
     console.log(new.target); //ThreeDPoint
     super(x, y);
     this.z = z;
   }

   toString () {
     return super.toString() + ',' + this.z;
   }

   static getInfo() {
     console.log('static method');
   }

   get z() {
     return 4;
   }
   set z(value) {
     console.log(value);
   }
 }
 ThreeDPoint.getInfo(); // "static method"
 let ta = new ThreeDPoint(2,3,4);
 console.log(ta.toString()); //2,3,4
 console.log(ta.z); // 4
 ta.z = 200; // 200
 console.log(Object.getPrototypeOf(ThreeDPoint)); //Point

 (1)、constructor中必須調(diào)用super,因為子類中沒有this,必須從父類中繼承。
 (2)、子類的__proto__屬性總是指向父類
 (3)、子類的prototype屬性的__proto__總是指向父類的prototype
 (4)、Object.getPrototypeOf()獲取父類
 (5)、super作為方法只能在constructor中
 (6)、super作為屬性指向父類的prototype.
 (7)、在constructor中使用super.x = 2,實際上this.x = 2;但是讀取super.x時,又變成了父類.prototype.x。
 (8)、原生構(gòu)造函數(shù)是無法繼承的。
 (9)、get set 方法可以對屬性的賦值和讀取進(jìn)行攔截
 (10)、靜態(tài)方法不能被實例繼承。通過static聲明
 (11)、靜態(tài)屬性只能 ThreeDPoint.name = "123" 聲明 (與static沒什么關(guān)系)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容