国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

ES6 札記：函數(shù)

CoreDump / 529人閱讀

摘要：所以，當(dāng)函數(shù)傳參為時(shí)，短路操作符會(huì)給定默認(rèn)值。對于來說，無論是否在嚴(yán)格模式下，更改參數(shù)值的行為都不會(huì)同步更改對象。且箭頭函數(shù)中的值無法改變而非箭頭函數(shù)也正因?yàn)槿绱?，箭頭函數(shù)無法作為構(gòu)造函數(shù)，因?yàn)橹禑o法綁定至構(gòu)造函數(shù)的實(shí)例。

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

在 ES6 之前，聲明一個(gè)函數(shù)：

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

如果用箭頭函數(shù)的形式寫：

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

計(jì)算圓面積的例子：

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

形式上的改變僅僅是一部分，接下來關(guān)注一個(gè)很有用的特性：默認(rèn)值。

默認(rèn)值

在 ES6 之前，函數(shù)內(nèi)給定參數(shù)的默認(rèn)值，只能這樣：

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

顯然，結(jié)果錯(cuò)誤。運(yùn)算中 a 仍舊采用了默認(rèn)值。

所以，當(dāng)函數(shù)傳參為 null, undefined, "", 0, -0, NaN 時(shí)，短路操作符 || 會(huì)給定默認(rèn)值。

修訂版成了這樣：

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

而在 ES6 中，只需要給參數(shù)直接賦予默認(rèn)值即可：

const add = (a = 2000, b = 333) => a + b;
add(); // 2333
add(0); // 333
默認(rèn)值對 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

如果在嚴(yán)格模式下運(yùn)行，結(jié)果是這樣的：

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 中的非嚴(yán)格模式下，更改參數(shù)值將會(huì)同步的更改 arguments 對象內(nèi)的參數(shù)值，而在嚴(yán)格模式下不會(huì)更改。

對于 ES6 來說，無論是否在嚴(yán)格模式下，更改參數(shù)值的行為都不會(huì)同步更改 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

再來看個(gè)例子：

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

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

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

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

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

而如果是普通函數(shù)，由于 setTimeout 函數(shù)內(nèi)的 this 指向 window，所以找不到 name 值：

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

可以將箭頭函數(shù)的該行為看作：

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

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

且箭頭函數(shù)中的 this 值無法改變：

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

而非箭頭函數(shù)：

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

也正因?yàn)槿绱?，箭頭函數(shù)無法作為構(gòu)造函數(shù)，因?yàn)?this 值無法綁定至構(gòu)造函數(shù)的實(shí)例。

參考

《深入理解 ES6》

《實(shí)戰(zhàn) ES2015》

MDN

-EOF-

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/94952.html

相關(guān)文章

  • ES6 札記：let 和 const

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

    bluesky 評(píng)論0 收藏0

  • JS 異步系列 —— Promise 札記

    摘要：以下，請求兩個(gè)，當(dāng)兩個(gè)異步請求返還結(jié)果后，再請求第三個(gè)此處為調(diào)用后的結(jié)果的數(shù)組對于來說，只要參數(shù)數(shù)組有一個(gè)元素變?yōu)闆Q定態(tài)，便返回新的。 showImg(https://segmentfault.com/img/remote/1460000015444020); Promise 札記 研究 Promise 的動(dòng)機(jī)大體有以下幾點(diǎn)： 對其 api 的不熟悉以及對實(shí)現(xiàn)機(jī)制的好奇; 很多庫(比...

    zhouzhou 評(píng)論0 收藏0

  • ES6常用知識(shí)學(xué)習(xí)札記

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

    googollee 評(píng)論0 收藏0

  • ES6常用知識(shí)學(xué)習(xí)札記

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

    tracymac7 評(píng)論0 收藏0

  • CSS札記（一）：CSS選擇器

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

    yzzz 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<