ES6基礎學習

ECMAScript 6是JavaScript語言的下一代標準

ES6就是ES2015。根據MCMA-262標準,實現的通用腳本語言規範javascript

與js的關係:es是標準,而js是它的實現和擴展java

js的組成:jquery

ECMAScript,由ECMA-262定義,提供核心語言功能;es6

文檔對象模型(DOM),提供訪問和操做網頁內容的方法和接口;文檔對象模型DOM是針對XML但通過擴展用於HTML的應用程序編程接口(API)。DOM把整個頁面映射爲一個多層次節點結構。HTML或者XML頁面中的每一個組成部分都是某種類型的節點,這些節點又包含着不一樣類型的數據:因此也通常被看做兩個部分domview和domevent,一個針對節點的操做和事件的操做ajax

瀏覽器對象模型(BOM),提供與瀏覽器交互的方法和接口;BOM處理瀏覽器窗口和框架,人們習慣上把全部針對瀏覽器的JavaScript擴展算做是BOM的一部分:正則表達式

1 彈出新瀏覽器窗口的功能。spring

2 移動、縮放和關閉瀏覽器窗口的功能。sql

3 提供瀏覽器所加載頁面的詳細信息的navigator對象。編程

4 提供瀏覽器所加載頁面的詳細信息的location對象。數組

5 提供用戶分辨率詳細信息的screen對象。

6 對cookies的支持。

7 像XMLHttpRequest和IE的ActionXobject這樣的自定義對象。

ECMA規定了

語法:弱語言,區分大小寫,註釋與java同樣,{}表明代碼塊

變量:var定義,後續es6新增let  const

關鍵字:break  case  catch  continue  default  delete  do  else  finally  for  function  if  in  instanceof  new  return  switch  this  throw  try  typeof  var  void  while  with

保留字:abstract  boolean  byte  char  class  const  debugger  double  enum  export  extends  final  float  goto  implements  import  int  interface  long  native  package  private  protected  public
short  static  super  synchronized  throws  transient  volatile

值類型:原始類型:Undefined、Null、Boolean、Number 和 String 型,es6新增Symbol

             引用類型:對象

typeof 運算符:值或對象的類型

  • undefined - 若是變量是 Undefined 類型的
  • boolean - 若是變量是 Boolean 類型的
  • number - 若是變量是 Number 類型的
  • string - 若是變量是 String 類型的
  • object - 若是變量是一種引用類型或 Null 類型的

強制轉換:

  • Boolean(value) - 把給定的值轉換成 Boolean 型;轉換的值是至少有一個字符的字符串、非 0 數字或對象時,Boolean() 函數將返回 true。若是該值是空字符串、數字 0、undefined 或 null,它將返回 false。
  • Number(value) - 把給定的值轉換成數字(能夠是整數或浮點數);強制類型轉換與 parseInt() 和 parseFloat() 方法的處理方式類似,只是它轉換的是整個值,而不是部分值。

    parseInt() 和 parseFloat() 方法只轉換第一個無效字符以前的字符串,所以 "1.2.3" 將分別被轉換爲 "1" 和 "1.2"。

    用 Number() 進行強制類型轉換,"1.2.3" 將返回 NaN,由於整個字符串值不能轉換成數字。若是字符串值能被完整地轉換,Number() 將判斷是調用 parseInt() 方法仍是 parseFloat() 方法

Number(false) 0
Number(true) 1
Number(undefined) NaN
Number(null) 0
Number("1.2") 1.2
Number("12") 12
Number("1.2.3") NaN
Number(new object()) NaN
  • String(value) - 把給定的值轉換成字符串;可把任何值轉換成字符串

對象:對象是由 new 運算符加上要實例化的對象的名字建立的。

Object 對象:ECMAScript 中的全部對象都由這個對象繼承而來

 運算符:delete 對象(刪除),void 運算符對任何值返回 undefined,++/--n(先操做再賦值),n--/++(先賦值)

位運算符:not => ~,and   => &,or=> |,xor=> ^,左移<<,右移>>,無符號右移>>>

邏輯運算符:邏輯not  => !  邏輯and => &&  邏輯or  =>  ||

關係運算符小於、大於、小於等於和大於等於

等號運算符:==,!=,===

等號由雙等號(==)表示,當且僅當兩個運算數相等時,它返回 true。非等號由感嘆號加等號(!=)表示,當且僅當兩個運算數不相等時,它返回 true。爲肯定兩個運算數是否相等,這兩個運算符都會進行類型轉換。

•若是一個運算數是 Boolean 值,在檢查相等性以前,把它轉換成數字值。false 轉換成 0,true 爲 1。
•若是一個運算數是字符串,另外一個是數字,在檢查相等性以前,要嘗試把字符串轉換成數字。
•若是一個運算數是對象,另外一個是字符串,在檢查相等性以前,要嘗試把對象轉換成字符串。
•若是一個運算數是對象,另外一個是數字,在檢查相等性以前,要嘗試把對象轉換成數字。

在比較時,該運算符還遵照下列規則:
•值 null 和 undefined 相等。
•在檢查相等性時,不能把 null 和 undefined 轉換成其餘值。
•若是某個運算數是 NaN,等號將返回 false,非等號將返回 true。
•若是兩個運算數都是對象,那麼比較的是它們的引用值。若是兩個運算數指向同一對象,那麼等號返回 true,不然兩個運算數不等。

 ===全等:在檢查相等性前,不執行類型轉換。

全等號由三個等號表示(===),只有在無需類型轉換運算數就相等的狀況下,才返回 true。

 語句:if,do while,while, for ,for in(用於枚舉對象的屬性),break ,continue, switch

函數:關鍵字 function、函數名、一組參數,以及置於括號中的待執行代碼。

          arguments 對象:函數代碼中的參數集

          Function 對象(類):Function 類能夠表示開發者定義的任何函數。

                 var function_name = new function(arg1, arg2, ..., argN, function_body)

         閉包,指的是詞法表示包括不被計算的變量的函數,也就是說,函數可使用函數以外定義的變量

        1.使用全局變量是一個簡單的閉包實例

        2.複雜閉包

var iBaseNum = 10;

function addNum(iNum1, iNum2) {
  function doAdd() {
    return iNum1 + iNum2 + iBaseNum;
  }
  return doAdd();
}

函數 addNum() 包括函數 doAdd() (閉包)。內部函數是一個閉包,由於它將獲取外部函數的參數 iNum1 和 iNum2 以及全局變量 iBaseNum 的值。 addNum() 的最後一步調用了 doAdd(),把兩個參數和全局變量相加,並返回它們的和。

這裏要掌握的重要概念是,doAdd() 函數根本不接受參數,它使用的值是從執行環境中獲取的。

 

1.變量聲明const和let

  const爲ECMAScript帶來了定義常量的能力,它的值被設置完成後就不能再修改了。

  let 變量爲ECMAScript修復了從前var由於代碼習慣不佳而致使的代碼做用域混亂等問題,同時實現了塊狀做用域中使用,最重要的兩個特性就是提供了塊級做用域與再也不具有變量提高。

  es6新增了let命令,用來聲明變量,用法相似於var,可是所聲明的變量,只在let命令所在的代碼內有效

  var命令會發生」變量提高「現象,即變量能夠在聲明以前使用,值爲undefined。這種現象多多少少是有些奇怪的,按照通常的邏輯,變量應該在聲明語句以後纔可使用。 爲了糾正這種現象,let命令改變了語法行爲,它所聲明的變量必定要在聲明後使用,不然報錯。

 塊級做用域:代碼塊所在區域 只要塊級做用域內存在let命令,它所聲明的變量就「綁定」(binding)這個區域,再也不受外部的影響

if(true){   tmp = 'abc'   let tmp; }

因爲let聲明瞭tmp ,這時代碼塊中tmp是綁定了這塊區域,聲明前引用這時會報錯。

ES6 明確規定,若是區塊中存在let和const命令,這個區塊對這些命令聲明的變量,從一開始就造成了封閉做用域。凡是在聲明以前就使用這些變量,就會報錯。 總之,在代碼塊內,使用let命令聲明變量以前,該變量都是不可用的。這在語法上,稱爲「暫時性死區」(temporal dead zone,簡稱 TDZ)。

2.模板字符串(Template String)

當咱們使用普通的字符串時,會使用單引號或雙引號來包裹字符串的內容,在ES2015的模板字符串中使用反勾號`。  

  const str=`something`   

   (1)支持元素注入:        const str="hello world"        const str1=`String:${str}`         //=>String:hello world

   (2)支持換行: const sql=` select * from Users where FirstName='mike' limit 5; `

3.函數

普通函數:

  function(count){ 。。。}

  function(count = 100){。。。}

箭頭函數:

當你的函數有且僅有一個參數的時候,是能夠省略掉括號的。當你函數返回有且僅有一個表達式的時候能夠省略{} 和 return

 el.on('click',evt=>{...})  ==el.on('click'function(evt){...})

 或[1,2,3].map(x => x + 1) //等同於:[1,2,3].map((function(x){  return x + 1 }).bind(this))

 或const foo = () => {const a = 20;const b = 30;return a + b}


var 變量名/函數名 = (參數,參數)=>{代碼塊}

若是return的是一個對象{id:id,age:age},那麼箭頭右邊要用括號包起來().

箭頭函數有幾個使用注意點。

(1)函數體內的this對象,就是定義時所在的對象,而不是使用時所在的對象,就是說箭頭函數中,沒有this。若是你在箭頭函數中使用了this,那麼該this必定就是外層的this

(2)不可使用arguments對象(即函數中的參數集合),該對象在函數體內不存在。

(3)不可使用yield命令,所以箭頭函數不能用做 Generator 函數。

4.解析結構

ES6 容許按照必定模式,從數組和對象中提取值,對變量進行賦值,這被稱爲解構(Destructuring)。 let a=1;let b=2;let c=3   ==》 let [a,b,c] = [1,2,3]; 表示從數組中提取值,按照對應位置,對變量賦值 let [head, ...tail] = [1, 2, 3, 4];

head // 1 tail // [2, 3, 4] 若是解構不成功,變量的值就等於undefined。

對於 Set 結構,也可使用數組的解構賦值 let [x, y, z] = new Set(['a', 'b', 'c']); x // "a"

事實上,只要某種數據結構具備 Iterator 接口,均可以採用數組形式的解構賦值 解構賦值容許指定默認值。 let [x, y = 'b'] = ['a']; // x='a', y='b'

1.數組的解構賦值:let [a, b, c] = [1, 2, 3];

2.對象的解構賦值: 解構不只能夠用於數組,還能夠用於對象 let { foo, bar } = { foo: "aaa", bar: "bbb" }; foo // "aaa" bar // "bbb"

3.字符串的解構賦值: 字符串也能夠解構賦值。這是由於此時,字符串被轉換成了一個相似數組的對象 const [a, b, c, d, e] = 'hello'; a // "h"

4.數值和bool值的解構賦值: 解構賦值時,若是等號右邊是數值和布爾值,則會先轉爲對象。 let {toString: s} = 123; s === Number.prototype.toString // true

5.函數參數的解構賦值: function add([x, y]){   return x + y; } add([1, 2]); // 3

等等。。。

5.  ...運算符

有兩種做用:1.擴展運算符

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];

對象也能夠用展開運算符。

不肯定props到底還有多少數據會傳進來,就會利用...運算符來處理剩餘的數據

const { size, ...others } = props;  <button {...others} size={size} />
或者函數上:
function(a,b,...num){。。。}

6.Promise 承諾

主要是爲了解決因爲回調或者嵌套致使的代碼爆炸。如ajax請求裏又有ajax請求

Promise,簡單說就是一個容器,裏面保存着某個將來纔會結束的事件(一般是一個異步操做)的結果。從語法上說,Promise 是一個對象,從它能夠獲取異步操做的消息。Promise 提供統一的 API,各類異步操做均可以用一樣的方法進行處理。這是比較官方的說法。

Promise本質是一個構造函數。

https://blog.csdn.net/hyupeng1006/article/details/80351174

ES 6中原生提供了Promise對象,Promise對象表明了某個將來纔會知道結果的事件(通常是一個異步操做),而且這個事件對外提供了統一的API,可供進一步處理。
使用Promise對象能夠用同步操做的流程寫法來表達異步操做,避免了層層嵌套的異步回調

1.promise有三種狀態:Pending(進行中…),Resolved(已完成),Rejected(已失敗),只有異步操做的結果能夠決定當前是哪一種狀態,任何其餘的操做都沒法改變這個狀態
2.狀態變化以後兩種:pending->resolved和pending->rejected,一旦發生,狀態凝固,不會改變

Promise實例生成之後,能夠用then方法分別指定Resolved狀態和Reject狀態的回調函數

let pro = new Promise(function(resolve,reject){
                if(true){
                     resolve('操做成功');//此時resolve函數會返回值
                 }
                 else{
                    reject('操做失敗');
                 }
             }); 
             pro.then(requestA) //能夠經過return傳參給requestB
                   .then(requestB) 
                   .then(requestC)
                   .catch(requestError);

與ajax

/*定義一個使用promise的ajax請求,這裏依賴jquery參數中請求url爲必填參數*/
const ajaxPromise=  param => {
  return new Promise((resovle, reject) => {
    $.ajax({
      "type":param.type || "get",
      "async":param.async || true,
      "url":param.url,
      "data":param.data || "",
      "success": res => {
        resovle(res);},
      "error": err => {
        reject(err);}
    })
  })
}
/* 第一個請求*/
let step1 = () => {
    ajaxPromise({
      "url":"",
    }).then(res => {
        console.log("第一個請求正確返回==>"+res);  
        step2(res);  
    }).catch(err => {
        console.log("第一個請求失敗");  
    })
}
/* 第二個請求*/
let step2 = (res) => {
    ajaxPromise({
      "type":"get",
      "url":"",
      "data":{"name":res}
    }).then(res => {
        console.log("第二個請求正確返回==>"+res);  
    }).catch(err => {
        console.log("第二個請求失敗==>"+err);  
    })
}
step1();

 

7.新的數據結構

==相等運算符和===等同運算符都是用來檢測兩個值是否相等,相等返回true,不等返回false;==是相等運算符,它採用比較寬鬆的同一性定義(即容許進行類型轉換)來檢測兩個運算數是否相等;===是等同運算符,它採用嚴格的同一性定義檢測兩個運算數是否徹底等同。

值類型數據結構:  

String 字符串  

Number 數值  

Boolean 布爾型(true與false)  

Null 空值  

Undefined 未定義值

Symbol (ECMAScript 6 新定義)

引用類型數據結構:

 Object 對象  

Array 數組

 RegExp(Regular Expression with pattern)正則表達式  

Date 日期  

Error 錯誤

(1)Set有序集合     Array表示一系列元素的有序集合,其中每個元素都會帶有自身處在這個集合內的位置並以天然數做爲標記,即帶有下標。無序集合能夠把它當成沒有排序概念的數組,而且元素不可重複 const set=new Set()   //const set=new Set([1,2,3])

set.forEach(item=>{ console.log(item) }) //=>1 2 3 4 set.forEach(item=>{ console.log(item*this.foo) },{foo:2}) //=>2 4 6 8

Set屬性:size---返回成員總數

Set操做方法:add(value)---返回Set、delete(value)---返回布爾、has(value)---返回布爾、clear()---無返回值

Set遍歷方法:keys()---返回鍵(索引)的遍歷器、values()---返回值的遍歷器、

                       entries---返回鍵值對的遍歷器、forEach(callback())---遍歷每一個成員,並經過回調函數基於數據作點什麼

(2)WeakSet

WeakSet與Set的區別: a.WeakSet不能包含值類型元素,不然會拋出一個TypeError; b.WeakSet不能包含無引用的對象,不然會自動清除出集合; c.WeakSet沒法被探知其大小,也沒法被探知其中所包含的元素

相似於Set,只是它的成員只能是對象,沒有size,不能遍歷

(3)Map映射類型 const map=new Map() //const map = new Map([['foo', 1 ], [ 'foo', 2 ]])

for(const [key,value] of map){ console.log(`${key}:${value}`) } //=>foo:1 bar:2 map.forEach((value,key,map)=>{ console.log(`${key}:${value}`) })

廣義上的鍵值對集合,鍵的範圍不侷限於字符串,對象也能夠看成鍵

Map操做方法:set(key,value)---設置成員、get(key)---讀取指定鍵的值,若無返回undefined,has(key) 、 delete(key) 、clear() 這些方法和 size 屬性

(4)WeakMap WeakMap的鍵會檢查變量引用,只要其中任意一個引用被解除,該值對就會被刪除

WeakMap 相對於普通的 Map,也是鍵值對集合,只不過 WeakMap 的 key 只能是非空對象(non-null object)。WeakMap 對它的 key 僅保持弱引用,也就是說它不阻止垃圾回收器回收它所引用的 key。WeakMap 最大的好處是能夠避免內存泄漏。一個僅被 WeakMap 做爲 key 而引用的對象,會被垃圾回收器回收掉。

WeakMap 擁有和 Map 相似的 set(key, value) 、get(key)、has(key)、delete(key) 和 clear() 方法,但沒有 size 屬性,也沒有任何與迭代有關的方法。

 8.Symbol

ES6 引入了一種新的原始數據類型Symbol,表示獨一無二的值。它是 JavaScript 語言的第七種數據類型,前六種是:undefinednull、布爾值(Boolean)、字符串(String)、數值(Number)、對象(Object)。

Symbol 值經過Symbol函數生成:let s = Symbol()typeof s //Symbol  let s1 = Symbol('foo');

注意,Symbol函數的參數只是表示對當前 Symbol 值的描述,所以相同參數的Symbol函數的返回值是不相等的

// 沒有參數的狀況
let s1 = Symbol();
let s2 = Symbol();

s1 === s2 // false

// 有參數的狀況
let s1 = Symbol('foo');
let s2 = Symbol('foo');

s1 === s2 // false

1.symbol不能與其餘類型的值進行運算,會報錯
2.symbol能夠顯式轉爲字符串

3.symbol值也能夠轉布爾值,但不能轉數值

symbol重要的功能是 能夠做爲標識符,用於對象的屬性名,就能保證不會出現同名的屬性。

let mySymbol = Symbol();

// 第一種寫法
let a = {};
a[mySymbol] = 'Hello!';
Symbol 值必須放在方括號之中。

1.Symbol屬性名的遍歷:Object.getOwnPropertySymbols方法返回一個數組,成員是當前對象的全部用做屬性名的 Symbol 值。

另外一個新的 API,Reflect.ownKeys方法能夠返回全部類型的鍵名,包括常規鍵名和 Symbol 鍵名。

2.Symbol.for(),Symbol.keyFor()方法

9.代理 Proxy

    Proxy 能夠理解成,在目標對象以前架設一層「攔截」,外界對該對象的訪問,都必須先經過這層攔截,所以提供了一種機制,能夠對外界的訪問進行過濾和改寫原生方法

這裏的代理至關於spring中的動態代理:便可以理解爲在真正經過代理對象來調用真實對象的方法的時候,咱們能夠在該方法先後添加本身的一些操做

var proxy = new Proxy({}, {
  get: function(target, property) {
    return 35;
  }
});

let obj = Object.create(proxy);
obj.time // 35

var person={name:「john」,age:23}

var proxy = new Proxy(person, {

  get: function(target, property) {

    target[「age」] = 35;   

    return target[「age」] ;  

} });

proxy .name// 35

proxy對象是obj對象的原型,obj對象自己並無time屬性,因此根據原型鏈,會在proxy對象上讀取該屬性,致使被攔截。攔截讀取屬性行爲

Proxy 支持的攔截操做一覽,一共 13 種:

—get(target, propKey, receiver):攔截對象屬性的讀取,好比proxy.foo和proxy['foo']。
-set(target, propKey, value, receiver):攔截對象屬性的設置,好比proxy.foo = v或proxy['foo'] = v,返回一個布爾值。
-has(target, propKey):攔截propKey in proxy的操做,返回一個布爾值。
-deleteProperty(target, propKey):攔截delete proxy[propKey]的操做,返回一個布爾值。
-ownKeys(target):攔截Object.getOwnPropertyNames(proxy)、Object.getOwnPropertySymbols(proxy)、Object.keys(proxy)、for...in循環,
返回一個數組。該方法返回目標對象全部自身的屬性的屬性名,而Object.keys()的返回結果僅包括目標對象自身的可遍歷屬性。
-getOwnPropertyDescriptor(target, propKey):攔截Object.getOwnPropertyDescriptor(proxy, propKey),返回屬性的描述對象。 -defineProperty(target, propKey, propDesc):攔截Object.defineProperty(proxy, propKey, propDesc)、Object.defineProperties(proxy, propDescs),返回一個布爾值。 -preventExtensions(target):攔截Object.preventExtensions(proxy),返回一個布爾值。 -getPrototypeOf(target):攔截Object.getPrototypeOf(proxy),返回一個對象。 -isExtensible(target):攔截Object.isExtensible(proxy),返回一個布爾值。 -setPrototypeOf(target, proto):攔截Object.setPrototypeOf(proxy, proto),返回一個布爾值。若是目標對象是函數,那麼還有兩種額外操做能夠攔截。 -apply(target, object, args):攔截 Proxy 實例做爲函數調用的操做,好比proxy(...args)、proxy.call(object, ...args)、proxy.apply(...)。 -construct(target, args):攔截 Proxy 實例做爲構造函數調用的操做,好比new proxy(...args)。

 

var handler = {
    get: function(target, name) {
        if (name === 'prototype') {
            return Object.prototype;
        }
        return 'Hello, ' + name;
    },

    apply: function(target, thisBinding, args) {
        return args[0];
    },

    construct: function(target, args) {
        return {value: args[1]};
    }
};

var fproxy = new Proxy(function(x, y) {
    return x + y;
}, handler);

fproxy(1, 2)                                      // 1
new fproxy(1, 2)                                  // {value: 2}
fproxy.prototype === Object.prototype             // true
fproxy.foo === "Hello, foo"                       // true

上面聲明瞭一個變量/函數fproxy,而且爲其添加了一個攔截器對象handler,

那麼對fproxy進行一些操做行爲的時候,會優先被這個攔截器捕獲,進行特定處理後輸出結果

var fproxy = new Proxy(target,handler);            //一個Proxy實例

construct:構造一個新的fproxy時會觸發攔截器的該方法,new fproxy(1,2)===>return {value : args[1]}===>{value : 2}

apply:函數執行時會觸發攔截器的該方法,fproxy(1,2)===>return args[0]===>1

get:讀取屬性值的時候會觸發攔截器的該方法,fproxy.foo===>foo對應該方法的參數name,return 'Hello, '+name;===>"Hello, foo"

set:設置屬性值的時候會觸發攔截器的該方法。

備註:

let obj = Object.create(fproxy);

這裏爲obj設置了原型fproxy,那麼obj繼承了fproxy的全部屬性,obj.foo===>fproxy.foo===>"Hello, foo"

10.反射Reflect

Reflect對象與Proxy對象同樣,也是 ES6 爲了操做對象而提供的新 API。Reflect不是構造函數, 要使用的時候直接經過Reflect.method()調用, Reflect有的方法和Proxy差很少, 並且多數Reflect方法原生的Object已經從新實現了。

1.將Object對象的一些明顯屬於語言內部的方法(好比Object.defineProperty),放到Reflect對象上。

2.將用 老Object方法 報錯的狀況,改成返回false

3.讓Object操做都變成函數行爲。某些Object操做是命令式,好比name in objdelete obj[name],而Reflect.has(obj, name)Reflect.deleteProperty(obj, name)讓它們變成了函數行爲。

4.Reflect對象的方法與Proxy對象的方法一一對應,只要是Proxy對象的方法,就能在Reflect對象上找到對應的方法。這就讓Proxy對象能夠方便地調用對應的Reflect方法,完成默認行爲,做爲修改行爲的基礎。

 確保對象的屬性能正確賦值,廣義上講,即確保對象的原生行爲可以正常進行,這就是Reflect的做用

Reflect Api:與代理一致

 

Reflect.get(target,name,receiver)------------讀取target對象(必須是對象)的name屬性值,若無返回undefined,

                                                                   若name屬性有get聲明,那麼name函數中的this指向receiver對象。

Reflect.set(target,name,value,receiver)----設置target對象(必須是對象)的name屬性值爲value,

                                                                   若name屬性有set聲明,那麼name函數中的this指向receiver對象。

注意:當Proxy和Reflect同時使用時,爲一個Proxy實例賦值時,觸發set攔截,若set攔截方法體內又有

           Reflect.set(target,name,value,receiver),那麼這又會觸發攔截器的defineProperty攔截,前提是反射操做

           傳入了receiver參數!!!

Reflect.has(obj,name)---------------------------返回布爾值,表示obj對象中有沒有name屬性。

11.類語法(Class)

 js實現類

function Point(x, y) {
  this.x = x;
  this.y = y;
}
Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};
var p = new Point(1, 2);

es6實現類

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

es6中Point 自己指向構造方法。類的數據類型就是函數,經過new 來建立實例。

類的全部實例共享一個原型對象。產生的實例,它們的原型都是Point.prototype,因此__proto__屬性是相等的。即咱們經過prototype添加屬性或方法時,其餘的實例也能夠調用。

 Class 能夠經過extends關鍵字實現繼承

   類的 prototype 屬性和__proto__屬性

prototype是函數的一個屬性(每一個函數都有一個prototype屬性),這個屬性是一個指針,指向一個對象。它是顯示修改對象的原型的屬性。__proto__是一個對象擁有的內置屬性(請注意:prototype是函數的內置屬性,__proto__是對象的內置屬性),是JS內部使用尋找原型鏈的屬性

 

12.Iterator

 

具有Iterator接口的原生數據結構:

Array---Map---Set---String---TypedArray---NodeList對象---函數的arguments對象。

實用場景:

解構賦值:let [x,y] = new Set([1,2,3])                             //x=1;y=2

擴展運算符:[...iterable]                                                 //將實現Iterator接口的對象轉化爲數組

yield*:yield*[2,3,4]---yield 2;yield 3;yield 4;                   //generator函數內部

....

實現了Iterator接口的數據類型,都會有一個屬性[Symbol.iterator],固定寫法,它是一個函數,返回一個遍歷器對象

13.生成器(Generator)

若是某個方法以前加上星號(*),就表示該方法是一個 Generator 函數。

一是,function關鍵字與函數名之間有一個星號;二是,函數體內部使用yield表達式,定義不一樣的內部狀態(yield在英語裏的意思就是「產出」)

function* helloWorldGenerator() {
  yield 'hello';
  yield 'world';
  return 'ending';
}

var hw = helloWorldGenerator();

 調用遍歷器對象的next方法,使得指針移向下一個狀態

hw.next()
// { value: 'hello', done: false }
hw.next()
// { value: 'world', done: false }
hw.next()
// { value: 'ending', done: true }
hw.next()
// { value: undefined, done: true }

因爲 Generator 函數返回的遍歷器對象,只有調用next方法纔會遍歷下一個內部狀態,因此其實提供了一種能夠暫停執行的函數。yield表達式就是暫停標誌。

 

14.模塊化代碼(Module)

 模塊不是對象,而是經過export命令顯式指定輸出的代碼,再經過import命令輸入.

如:import { stat, exists, readFile } from 'fs';
實質是從fs模塊加載 3 個方法,其餘方法不加載。這種加載稱爲「編譯時加載」或者靜態加載,即 ES6 能夠在編譯時就完成模塊加載,效率要比 CommonJS 模塊的加載方式高

 
export {firstName, lastName, year}; 也能夠分別export var year = 1958;,也能夠經過as 進行重命名
export命令除了輸出變量,還能夠輸出函數或類

 export default命令,爲模塊指定默認輸出。

本質上,default就是輸出一個叫作default的變量或方法,而後系統容許你爲它取任意名字。因此,下面的寫法是有效的

exportexport {add as default};
// 等同於
// export default add;

// app.js
import { default as foo } from 'modules';
// 等同於
// import foo from 'modules';

import命令能夠爲該匿名函數指定任意名字,而不須要知道函數名

相關文章
相關標籤/搜索