成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

es6基礎(chǔ)0x001：箭頭函數(shù)

stonezhu / 3460人閱讀

摘要：這就是所謂的箭頭函數(shù)不綁定，而在我看來，回調(diào)函數(shù)就是箭頭函數(shù)最好的歸宿。

0x000 概述

箭頭函數(shù)有兩個(gè)作用：

更簡短的寫法

不綁定this

0x001 語法一表覽 
()=>{}
()=>{console.log("arrow");return null}
()=>"hello"
(num1, num2)=>num1+num2
num=>++num
()=>({name:"arrow"})
0x002 寫法

正規(guī)一點(diǎn)

let add = (num1, num2)=>{
   return num1 + num2
}
add(1, 2)

聲明了一個(gè)add變量，該變量是一個(gè)加法函數(shù)，該函數(shù)有兩個(gè)形參：num1、num2，返回值為這兩個(gè)參數(shù)相加的結(jié)果

單參數(shù)

let  increment = num=>{
    return num + 1
}

上面聲明了一個(gè)increment變量，該變量是一個(gè)自增函數(shù)，該參數(shù)只有一個(gè)形參num，返回值為該參數(shù)自增1，因?yàn)橹挥幸粋€(gè)參數(shù)，所以可以省略箭頭函數(shù)參數(shù)列表的()

無參數(shù)

let now = () => {
    return Date.now()
}
let now==>{} // Uncaught SyntaxError: Unexpected token ==

上面聲明了一個(gè)now變量，該變量是一個(gè)函數(shù)，可以獲取當(dāng)前時(shí)間戳，因?yàn)椴恍枰獏?shù)，所以參數(shù)列表置空，但是這種情況下不能將()省略，否則將導(dǎo)致語法錯(cuò)誤

單一返回值

let now = () =>  Date.now()

上面函數(shù)還可以簡寫為以下方式，因?yàn)楹瘮?shù)體只有一句話，所以可以省略{}和return

單一返回值：返回對象字面量
雖然箭頭函數(shù)可以省略{}和return，但是在返回一個(gè)對象字面量的時(shí)候要格外注意，如果是像下面的寫法，雖然在語法檢查的時(shí)候不會(huì)報(bào)錯(cuò)，但是和你所期望的可能不太一樣，比如這里，你希望得到的數(shù)據(jù)是{name:"hello"}，但是結(jié)果卻是undefined。

let data=()=>{name:"hello"} // 不會(huì)報(bào)錯(cuò) 
console.log(data()) // undefined

為什么呢？用babel解析一下

可以發(fā)現(xiàn)，被解析成了

var data = function data() {
  name: "hello";
};

并沒有return，對比4的例子

所以，其實(shí){name:"hello"}被解析成了函數(shù)體，{}是函數(shù)的{}，而不是對象的{}，而name:"hello"被解析成了語句，這種語句不常用，卻是滿足js語法的，叫做標(biāo)簽，案例：

var str = "";

loop1:
for (var i = 0; i < 5; i++) {
  if (i === 1) {
    continue loop1;
  }
  str = str + i;
}

console.log(str); // 0234

所以如果箭頭函數(shù)需要返回單一的對象字面量，需要加對()

let data=()=>({name:"hello"})

0x003 不綁定this

看下面一種情況

function Person() {
  this.age = 0;

  setInterval(function growUp() {
    console.log(this.age)
  }, 1000);
}

var p = new Person();

通常，我們希望在setInterval的回調(diào)函數(shù)中訪問Person的變量，比如age，但是每個(gè)新定義的函數(shù)都有自己的this，所以這里的this是growUp的this，并不是Person的this，這將導(dǎo)致this.age將會(huì)得到undefined，為了解決這種問題，我們通常會(huì)使用折中的解決方案：

function Person() {
  this.age = 0;
  var that=this
  setInterval(function growUp() {
    console.log(that.age)
  }, 1000);
}

var p = new Person();

用一個(gè)臨時(shí)變量that來持有this，避免使用growUp的this，這個(gè)時(shí)候就輪到箭頭函數(shù)上場了：

function Person() {
  this.age = 0;
  setInterval(()=> {
    console.log(this.age)
  }, 1000);
}

var p = new Person();

在箭頭函數(shù)中，是不會(huì)綁定this的，也就是他沒有自己的this，所以這個(gè)時(shí)候，他的this，就是Person的this。這就是所謂的箭頭函數(shù)不綁定this，而在我看來，回調(diào)函數(shù)就是箭頭函數(shù)最好的歸宿。
babel解析之后的結(jié)果其實(shí)還是老方法：

"use strict";

function Person() {
  var _this = this;

  this.age = 0;
  setInterval(function () {
    console.log(_this.age);
  }, 1000);
}

var p = new Person();
0x004 注意

箭頭函數(shù)支持默認(rèn)參數(shù)

let add = (num1 = 0, num2) => num1 + num2

箭頭函數(shù)支持剩余參數(shù)

let add = (...numList) => numList.reduce((n1, n2) => n1 + n2)

箭頭函數(shù)支持參數(shù)列表解構(gòu)

let f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;

箭頭函數(shù)不支持arguments，如果要使用arguments，推薦上面的剩余參數(shù)的寫法

// 栗子1
var arguments = [1, 2, 3];
var arr = () => arguments[0];

arr(); // 1
// 栗子2
function foo(n) {
  var f = () => arguments[0] + n; // 隱式綁定 foo 函數(shù)的 arguments 對象. arguments[0] 是 n
  return f();
}

foo(1); // 2
// 栗子3
function foo() { 
  var f = (...args) => args[0]; 
  return f(2); 
}

foo(1); 
// 2

Object.defineProperty()會(huì)出現(xiàn)意料之外的影響

"use strict";
var obj = {
  a: 10
};

Object.defineProperty(obj, "b", {
  get: () => {
    console.log(this.a, typeof this.a, this);
    return this.a+10; 
   // 代表全局對象 "Window", 因此 "this.a" 返回 "undefined"
  }
});

無法和new一起使用

var Foo = () => {};
var foo = new Foo(); // TypeError: Foo is not a constructor

沒有prototype 

var Foo = () => {};
console.log(Foo.prototype); // undefined

解析順序有影響

let callback;

callback = callback || function() {}; // ok

callback = callback || () => {};      
// SyntaxError: invalid arrow-function arguments

callback = callback || (() => {});    // ok

0x005 資源

MDN-箭頭函數(shù)

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99051.html

相關(guān)文章

  • es6基礎(chǔ)0x024：babel簡單使用

    摘要：簡單的說就是，新語法編譯器舊語法。說明所以，對于新特性，我們可以通過使用，也可以通過語法轉(zhuǎn)化來達(dá)到兼容。 0x001 polyfill 我們都知道，js總是一直存在著兼容性問題，雖然其他語言也存在著兼容性問題，比如c++、java，但那種兼容性是新特性在舊版本上的不兼容，js則存在著各種奇形怪哉的不兼容。這其中有著非常復(fù)雜的歷史和時(shí)代的原因，并不加以累述。而解決兼容性問題的方法在以前只...

    wangbinke 評論0 收藏0

  • es6基礎(chǔ)0x018：類、繼承、重寫、超類調(diào)用

    摘要：要注意的是，如果要重寫構(gòu)造函數(shù)，必須要在構(gòu)造函數(shù)的第一行調(diào)用父類的構(gòu)造函數(shù)，在而在其他地方，則可以通過或者調(diào)用父級的變量或者方法 0x000 概述 es6真正的引入的面相對象的類，以前我們總是通過其他手段來模擬類這種形式，現(xiàn)在終于有了，我有點(diǎn)開心，又有點(diǎn)難過，因?yàn)樵谖铱磥恚琷s并不是所謂的面相對象的語言，反而更偏向函數(shù)式，原型繼承是他真正的面目。面相對象不過是人們在思考問題時(shí)總結(jié)出一套...

    LiuRhoRamen 評論0 收藏0

  • es6基礎(chǔ)0x015：for...of

    摘要：概述是一個(gè)迭代可迭代對象的方式，可迭代對象包括對象等等語法迭代數(shù)組迭代字符串迭代迭代迭代迭代集合總結(jié)只能迭代可迭代對象 0x000 概述 for...of是一個(gè)迭代可迭代對象的方式，可迭代對象包括Array、Map、Set、String、TypedArray、arguments 對象等等 0x001 語法 for(variable of iterable){ // statem...

    luxixing 評論0 收藏0

  • es6基礎(chǔ)0x010：增強(qiáng)的對象字面量

    摘要：概述在中，對象字面量的語法被增強(qiáng)了更短的屬性聲明如果屬性的屬性名和屬性值引用的變量名一致，可以直接省略之前更短的函數(shù)聲明如果屬性的屬性名和屬性值函數(shù)的函數(shù)名一致或者屬性值函數(shù)沒有函數(shù)名，可以省略關(guān)鍵字和屬性名之前可動(dòng)態(tài)計(jì)算的屬性名屬性名可以 0x000 概述 在es6中，對象字面量的語法被增強(qiáng)了 0x001 更短的屬性聲明 如果屬性的屬性名和屬性值引用的變量名一致，可以直接省略 let...

    fox_soyoung 評論0 收藏0

  • es6基礎(chǔ)0x016：生成器函數(shù)

    摘要：概述其實(shí)前幾章我都不知道怎么寫，因?yàn)樗麄兛偸巧婕暗揭恍┍容^深的東西，比如可迭代對象生成器迭代器之類的東西，等寫完這個(gè)系列，再好好整理一下這些東西可能會(huì)好一點(diǎn)，現(xiàn)在整理到哪兒就寫到哪兒吧語法使用作為聲明標(biāo)識符，表示這是一個(gè)生成器函數(shù)是函數(shù)名是 0x000 概述 其實(shí)前幾章我都不知道怎么寫，因?yàn)樗麄兛偸巧婕暗揭恍┍容^深的東西，比如可迭代對象、生成器、迭代器之類的東西，等寫完這個(gè)系列，再好好...

    ghnor 評論0 收藏0

發(fā)表評論

0條評論

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