ES6 札記：函數

CoreDump 發布于2019-08-22 17:12 / 527人閱讀

摘要：所以，當函數傳參為時，短路操作符會給定默認值。對于來說，無論是否在嚴格模式下，更改參數值的行為都不會同步更改對象。且箭頭函數中的值無法改變而非箭頭函數也正因為如此，箭頭函數無法作為構造函數，因為值無法綁定至構造函數的實例。

如同我們所看到的，ES6 中引入來箭頭函數，相比 ES5 來講是最為直觀而明顯的特性。

在 ES6 之前，聲明一個函數：

function add(a, b) {
  return a + b;
}
add(1, 2); // 3

如果用箭頭函數的形式寫：

const add = (a, b) => a + b;
add(1, 2); // 3

計算圓面積的例子：

const square = (r) => {
  const PI = 3.14;
  return PI*r*r;
}
square(4);

形式上的改變僅僅是一部分，接下來關注一個很有用的特性：默認值。

默認值

在 ES6 之前，函數內給定參數的默認值，只能這樣：

function add(a, b) {
  console.log(arguments[0]);
  a = a || 2000;
  b = b || 333;
  return a + b;
}
add(); // 2333

但是此方案遇到 boolean 為 false 的 js 值無法工作，例如：

add(0); // 2333

顯然，結果錯誤。運算中 a 仍舊采用了默認值。

所以，當函數傳參為 null, undefined, "", 0, -0, NaN 時，短路操作符 || 會給定默認值。

修訂版成了這樣：

function add(a, b) {
  a = (typeof a !== "undefined") ? a : 2000;
  b = (typeof b !== "undefined") ? b : 333;
  return a + b;
}
add(0); // 333

而在 ES6 中，只需要給參數直接賦予默認值即可：

const add = (a = 2000, b = 333) => a + b;
add(); // 2333
add(0); // 333

默認值對 arguments 的影響

在 ES5 中：

function add(a, b) {
  console.log(arguments.length);
  console.log(a === arguments[0]);
  console.log(b === arguments[1]);
  a = 200;
  b = 33;
  console.log(a === arguments[0]);
  console.log(b === arguments[1]);
}
add(1, 2);
// 2
// true
// true
// true
// true

如果在嚴格模式下運行，結果是這樣的：

function add(a, b) {
  "use strict";
  console.log(arguments.length);
  console.log(a === arguments[0]);
  console.log(b === arguments[1]);
  a = 200;
  b = 33;
  console.log(a === arguments[0]);
  console.log(b === arguments[1]);
}
add(1, 2);
// 2
// true
// true
// false
// false

在 ES5 中的非嚴格模式下，更改參數值將會同步的更改 arguments 對象內的參數值，而在嚴格模式下不會更改。

對于 ES6 來說，無論是否在嚴格模式下，更改參數值的行為都不會同步更改 arguments 對象。

function add(a = 2000, b = 333) {
  console.log(arguments.length);
  console.log(a === arguments[0]);
  console.log(b === arguments[1]);
  a = 200;
  b = 33;
  console.log(a === arguments[0]);
  console.log(b === arguments[1]);
}
add(0);
// 1
// true
// false
// false
// false

再來看個例子：

const add = (a = 2000, b = 333) => {
  console.log(arguments.length);
  console.log(a === arguments[0]);
  console.log(b === arguments[1]);
  a = 200;
  b = 33;
  console.log(a === arguments[0]);
  console.log(b === arguments[1]);
}
add(0);
// Uncaught ReferenceError: arguments is not defined

另外需要注意的點是，箭頭函數沒有自己的 arguments 對象。但它可以訪問外圍函數的 arguments 對象：

function add(a = 2000, b = 333) {
  return (() => arguments[0] + arguments[1])();
}
add(); // NaN
add(200, 33); // 233

this

在 ES6 的箭頭函數中，this 值總是綁定到函數的定義：

const obj = {
  name: "Rainy",
  say: function () {
    setTimeout(() => {
      console.log(`I"m ${this.name}`);
    })
  }
}
obj.say(); // I"m Rainy

而如果是普通函數，由于 setTimeout 函數內的 this 指向 window，所以找不到 name 值：

const obj = {
  name: "Rainy",
  say: function () {
    setTimeout(function () {
      console.log(`I"m ${this.name}`);
    })
  }
}
obj.say(); // I"m

可以將箭頭函數的該行為看作：

const obj = {
  name: "Rainy",
  say: function () {
    const self = this;
    setTimeout(function () {
        console.log(`I"m ${self.name}`);
    })
  }
}
obj.say(); // I"m Rainy

實際上這是由于箭頭函數本身沒有 this，其中的 this 實際上是外部函數的 this 綁定。

且箭頭函數中的 this 值無法改變：

const obj = {
  name: "Rainy",
  say: function () {
    setTimeout((() => console.log(`I"m ${this.name}`)).bind({name: "Null"}))
  }
}
obj.say(); // I"m Rainy

而非箭頭函數：

const obj = {
  name: "Rainy",
  say: function () {
    setTimeout((function () {console.log(`I"m ${this.name}`)}).bind({name: "Null"}))
  }
}
obj.say(); // I"m Null

也正因為如此，箭頭函數無法作為構造函數，因為 this 值無法綁定至構造函數的實例。

參考

《深入理解 ES6》

《實戰 ES2015》

MDN

-EOF-

GPU云服務器云服務器札記 ES6 es6-系列 ES6入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/94952.html

ES6 札記：let 和 const

摘要：在之前，中沒有常量聲明方式，有的僅僅是一種命名上的約定。這樣就可以最大程度上規避變量的意外變化來使程序發生異常的可能性。為了避免作用域的污染，在中需要使用一個立即執行函數來確保變量的作用域范圍。在 ES6 之前，JS 中沒有常量聲明方式，有的僅僅是一種命名上的約定。 var PI = 3.14; PI = 4; console.log(PI); // 4 我們用大寫變量名來標識這是一...

bluesky 2019-08-22 17:11 評論0 收藏0
JS 異步系列 —— Promise 札記

摘要：以下，請求兩個，當兩個異步請求返還結果后，再請求第三個此處為調用后的結果的數組對于來說，只要參數數組有一個元素變為決定態，便返回新的。 showImg(https://segmentfault.com/img/remote/1460000015444020); Promise 札記研究 Promise 的動機大體有以下幾點：對其 api 的不熟悉以及對實現機制的好奇; 很多庫(比...

zhouzhou 2019-08-22 18:26 評論0 收藏0
ES6常用知識學習札記

摘要：在年正式發布了，簡稱，又稱為。再次簡寫循環迭代數組每個元素都執行一次回調函數。方法用于調用數組的每個元素，并將元素傳遞給回調函數。注意對于空數組是不會執行回調函數的。轉載請注明出處原文連接 http://blog.huanghanlian.com/article/5c7aa6c7bf3acc0864870f9d es6 是什么首先弄明白ECMA和js的關系。ECMA是標準，Jav...

googollee 2019-08-23 15:53 評論0 收藏0
ES6常用知識學習札記

摘要：在年正式發布了，簡稱，又稱為。再次簡寫循環迭代數組每個元素都執行一次回調函數。方法用于調用數組的每個元素，并將元素傳遞給回調函數。注意對于空數組是不會執行回調函數的。轉載請注明出處原文連接 http://blog.huanghanlian.com/article/5c7aa6c7bf3acc0864870f9d es6 是什么首先弄明白ECMA和js的關系。ECMA是標準，Jav...

tracymac7 2019-08-26 13:37 評論0 收藏0
CSS札記（一）：CSS選擇器

一、語法規則選擇器{ 屬性1:屬性值1; 屬性2:屬性值2; ...... } /*注釋*/ 二、如何在html中應用CSS 1. 外部引用css文件 css文件：css/layout.css（css文件夾和HTML位于同一個目錄下） 2. 內部嵌入css /*css代碼*/ 3...

yzzz 2019-08-30 14:20 評論0 收藏0