ES6

第七章：箭頭函數(shù)

1.箭頭符號，悠久的歷史

以下寫法是不是灰常眼熟啊，但你了解為啥要這樣寫嗎？

這是為了兼容不支持JS的瀏覽器（現(xiàn)在應該跟恐龍一樣絕跡了吧?。?/p>

不支持JS的瀏覽器：解析為兩個不支持的標簽<script>，</script>和一段HTML注釋支持JS的瀏覽器：識別出JS代碼，被解析為單行注釋的開始

<script language="javascript">
  <!--
    console.log('Hello Daniel');
  // -->
</script>

2.節(jié)省

懶人必備良品：

可省去function關鍵字
單語句可省去return關鍵字和大括號 {}
單參數(shù)可省去小括號 ()

最省情況代碼示例：

[1, 2, 3].filter(num => num > 1);

非單參數(shù)代碼示例：

[1, 2, 3].filter((num, idx) => idx > 1);

非單語句代碼示例：

[1, 2, 3].filter(num => { console.log(num); return num > 1; });

3.注意事項

如果想簡單返回對象，這個時候就不能偷懶，至少得加個小括號，不然會被解析為塊代碼?？聪麓a示例，第一和第二句都被當作塊代碼：

var result = [1, 2, 3].map(num => {}); // 這樣相當于空代碼，返回值為undefined
var result = [1, 2, 3].map(num => {key: num}); // 這樣的返回值同上
var result = [1, 2, 3].map(num => ({key: num})); // 必須加個小括號

4.與function關鍵字聲明的函數(shù)的區(qū)別

1. 沒有自己的this值。this值繼承自外圍作用域

2. 沒有arguments對象。這不是壞消息，因為我們有不定參數(shù)和默認值法寶

5.理解this

提到this，你確定你對它真的了解嗎？反正我剛好可以趁這個機會更加深入地了解它一番（這篇文章值得一看）。

this都是在函數(shù)內(nèi)才能用到，我們來列舉下常見的幾種場景：

• 場景一：調(diào)用對象的方法

var deep_thought = {
  the_answer: 42,
  ask_question: function () {
    return this.the_answer;
  }
};

var the_meaning = deep_thought.ask_question(); 

當 deep_thought.ask_question()執(zhí)行時，Javascript為函數(shù)建立執(zhí)行上下文（execution context），將this設為函數(shù)所屬的對象引用（即deep_thought）

• 場景二：構造函數(shù)

function BigComputer(answer) {
  this.the_answer = answer;
  this.ask_question = function () {
    return this.the_answer;
  }
}

var deep_thought = new BigComputer(42);
var the_meaning = deep_thought.ask_question(); 

當用new關鍵字來創(chuàng)建構造函數(shù)的實例對象時，過程是這樣的：先創(chuàng)建一個要返回的對象，然后將this指向它的引用，執(zhí)行完函數(shù)代碼后返回該對象。當執(zhí)行deep_thought.ask_question()，函數(shù)里的this指向的是構造函數(shù)的實例對象

• 場景三：普通函數(shù)

function test_this() {
  return this;
}
var i_wonder_what_this_is = test_this(); 

因為我們沒明確指定函數(shù)調(diào)用的上下文，所以默認是全局對象，在瀏覽器端為window對象，在NodeJS為global對象

• 場景四：事件處理

這個還要看具體的寫法：

寫法一：this指向全局對象，這里即window對象

<script type="text/javascript">
  function click_handler() {
    alert(this); // alerts the window object 
  }
</script>
...
<button id='thebutton' onclick='click_handler()'>Click me!</button>

寫法二：this指向DOM對象，因為觸發(fā)事件的時候其實是DOM.onclick()

<script type="text/javascript">
  function click_handler() {
    alert(this); // alerts the button DOM node 
  }

  function addhandler() {
    document.getElementById('thebutton').onclick = click_handler;
  }

  window.onload = addhandler;
</script>
...
<button id='thebutton'>Click me!</button>

簡單總結(jié)一下：
函數(shù)內(nèi)的this指向的是函數(shù)的執(zhí)行者（[執(zhí)行者].fnName()），如果沒指定執(zhí)行者，則為全局對象

來個題目考考你唄，以下代碼點擊按鈕會顯示什么信息呢？

<script type="text/javascript">
  function BigComputer(answer) {
    this.the_answer = answer;
    this.ask_question = function () {
      alert(this.the_answer);
    }
  }

  function addhandler() {
    var deep_thought = new BigComputer(42);
    var the_button = document.getElementById('thebutton');

    the_button.onclick = deep_thought.ask_question;
  }

  window.onload = addhandler;
</script>

答案是：alert的內(nèi)容是undefined，因為button DOM是沒有the_answer這個屬性滴。這是為什么呢？大聲念一遍上邊的總結(jié)

this除了以上的默認規(guī)則外，你也可以手動指定this指向的值，apply和call以及漂亮的bind就是用來干這事

上面的例子要alert出正確的值，改用bind手動指定this的值即可

function addhandler() {
  var deep_thought = new BigComputer(42);
  var the_button = document.getElementById('thebutton');

  the_button.onclick = deep_thought.ask_question.bind(deep_thought);
}

好吧，沒想到this講了這么長的篇幅，我們馬上進入第八篇吧。

第八章：Symbols

1.我是原始類型

Symbol為Javascript的第7種原始類型。

Hi，大家，我是老七，我的大哥們分別是Object，Boolean，String，Number，Null，Undefined

2.設計初衷

Symbol的設計初衷就是避免沖突，一般應用于屬性鍵的命名上。

有沒一頭霧水，那例子伺候吧。
以下假設第三方庫對象libA和libB都想對傳入的對象進行屬性值的修改，而屬性的名稱剛好相同，那么沖突就發(fā)生了

var libA = {
  symbolIsShowKey: Symbol('isShow'),
  stringIsShowKey: 'isShow',
  fn: function (data) {
    data[this.symbolIsShowKey] = true;
    data[this.stringIsShowKey] = true;
  }
};

var libB = {
  symbolIsShowKey: Symbol('isShow'),
  stringIsShowKey: 'isShow',
  fn: function (data) {
    if (data[this.symbolIsShowKey]) { // 沒被其它庫干擾掉
      console.log('Symbol.isShow is true: do something');
    }
    if (data[this.stringIsShowKey]) { // 被其它庫干擾到
      console.log('String.isShow is true: do something');
    }
  }
};

var dataObj = {};
libA.fn(dataObj);
libB.fn(dataObj);

3.注意事項

symbol不能被自動轉(zhuǎn)換成字符串，所以嘗試將它與字符串拼接將報錯，比如：

Symbol('daniel') +' some string' // 報錯
Symbol('daniel').toString() + ' some string' // 顯式轉(zhuǎn)換則OK

4. 獲取symbol的方式

1. Symbol() 每次都返回新的唯一的symbol，無論描述是否一樣

console.log(Symbol('daniel') == Symbol('daniel'));

2. Symbol.for() 用于共享symbol，描述作為symbol注冊表中的鍵，描述相同，則每次取出的symbol值是相同的

console.log(Symbol.for('daniel') === Symbol.for('daniel'));

3. 使用標準定義的symbol。如Symbol.match，Symbol.iterator等（還記得《讀深入ES6記[一]》中我們?nèi)绾巫屍胀▽ο髶碛?code>for-of來遍歷數(shù)據(jù)的特性嗎）

這就是第七，八章的學習情況，接下來可繼續(xù)看《讀深入ES6記[五]》。

前面章節(jié)的學習情況請看：
《讀深入ES6記[一]》
《讀深入ES6記[二]》
《讀深入ES6記[三]》

--EOF--