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

資訊專欄INFORMATION COLUMN

關(guān)于箭頭函數(shù)的思考

ytwman / 2573人閱讀

摘要：關(guān)于箭頭函數(shù)的思考自從有了箭頭函數(shù)這個(gè)靈活的功能，現(xiàn)在寫函數(shù)都習(xí)慣寫成箭頭函數(shù)格式然而如果不理解箭頭函數(shù)的原理，濫用它也會(huì)造成很大的影響。等同于等同于如果箭頭函數(shù)的代碼塊部分多于一條語句，就要使用大括號(hào)將它們括起來，并且使用語句返回。

關(guān)于箭頭函數(shù)的思考

自從有了ES6箭頭函數(shù)這個(gè)靈活的功能，現(xiàn)在寫函數(shù)都習(xí)慣寫成箭頭函數(shù)格式

() => {}

然而如果不理解箭頭函數(shù)的原理，濫用它也會(huì)造成很大的影響。
思考下面這個(gè)問題

let func = value => console.log(value)



let func = function(value) {
    console.log(value)
}

我們到平臺(tái)上測(cè)試一下, 顯然兩者不等。

let func = value => console.log(value)

// 等同于

"use strict";
var func = function func(value) {
  return console.log(value);
};

而 console.log()方法返回 undefined
return undefined 與沒有返回值一樣。所以效果上問題中兩種寫法沒有差異。

let func = value => value
// 等同于
let func = value => {
  return value
}
// 等同于
var func = function func(value) {
  return value;
};

如果箭頭函數(shù)的代碼塊部分多于一條語句，就要使用大括號(hào)將它們括起來，并且使用return語句返回。

var sum = (num1, num2) => { 
    console.log("多條語句情況");
    return num1 + num2; 
}

那如果我使用了箭頭，使用了大括號(hào)，沒使用return呢？

var sum = (num1, num2) => {
    console.log("多條語句情況");
    num1+num2
}



"use strict";
var sum = function sum(num1, num2) {
    console.log("多條語句情況");
    num1 + num2; // 這條語句沒有任何作用
};

由于大括號(hào)被解釋為代碼塊，所以如果箭頭函數(shù)直接返回一個(gè)對(duì)象，必須在對(duì)象外面加上括號(hào)

let getInfo = name => ({ name: name, job: "moving bricks" });

使用箭頭函數(shù)必須要有返回值嗎？

// 如果箭頭函數(shù)只有一行語句，且不需要返回值
let fn = () => void doesNotReturn(); // void

箭頭函數(shù)表達(dá)式：沒有自己的 this arguments super new.target, 不能用作構(gòu)造函數(shù)，沒有prototype屬性，不能用作生成器

箭頭函數(shù)不會(huì)創(chuàng)建自己的 this, 它只會(huì)從自己作用域鏈的上一層繼承this 這點(diǎn)很重要。如下面示例，箭頭函數(shù)內(nèi)的this的作用域上一層即 Person 函數(shù)內(nèi)的 this

function Person(){
  this.age = 0;

  setInterval(() => {
    this.age++; // |this| 正確地指向person 對(duì)象
  }, 1000);
}

var p = new Person();

箭頭函數(shù)沒有自己的 this 指針， call() apply() bind() 調(diào)用的時(shí)候， 第一個(gè)參數(shù)會(huì)被忽略 (--- 對(duì)于這個(gè)，我有疑惑。第一個(gè)參數(shù)會(huì)被忽略是指原先調(diào)用 call 方法的 fun.call(thisArg, arg1, arg2, ...)的 thisArg 會(huì)被忽略呢？還是 arg1會(huì)被忽略呢？ 我們來看栗子

var adder = {
  base : 1,
    
  add : function(a) {
    var f = v => v + this.base;
    return f(a); 
  },

  addThruCall: function(a) {
    var f = v => v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, a);
  },

  addTest: function(a) {
   var f = v => v + this.base;
    var b = {
      base : 2
    };
            
    return f.call(b, 23, a);
  }
};

console.log(adder.add(1));         // 輸出 2
console.log(adder.addThruCall(1)); // 仍然輸出 2
console.log(adder.addThruCall("a")); // 輸出 24 （23+1）

很明顯了，第一個(gè)參數(shù)會(huì)被忽略 是忽略 call 方法里的第一個(gè)參數(shù)(好像是我在思考的時(shí)候想多了，這很明顯呀）

參考資源

es6 箭頭函數(shù) -- 阮一峰

箭頭函數(shù) MDN

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

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

相關(guān)文章

  • 關(guān)于ES6中箭頭函數(shù)的this問題

    摘要：對(duì)象的指向是可變的，但是在箭頭函數(shù)中，它是固定的。同樣的由于箭頭函數(shù)沒有自己的所以傳統(tǒng)的顯性綁定無效內(nèi)部的指向外部在的學(xué)習(xí)中，的指向問題一直是個(gè)難點(diǎn)，特別是在對(duì)象方法中使用時(shí)，必須更加小心。由此箭頭函數(shù)在很大程度上減少了我們的困擾。 什么是箭頭函數(shù) 用法 ES6 允許使用箭頭（=>）定義函數(shù) 測(cè)試 var p1 = document.getElementById(test1)...

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

  • 面試官問：JS的this指向

    摘要：之前寫過一篇文章面試官問能否模擬實(shí)現(xiàn)的和方法就是利用對(duì)象上的函數(shù)指向這個(gè)對(duì)象，來模擬實(shí)現(xiàn)和的。雖然實(shí)際使用時(shí)不會(huì)顯示返回，但面試官會(huì)問到。非嚴(yán)格模式下，和，指向全局對(duì)象 前言 面試官出很多考題，基本都會(huì)變著方式來考察this指向，看候選人對(duì)JS基礎(chǔ)知識(shí)是否扎實(shí)。讀者可以先拉到底部看總結(jié)，再谷歌（或各技術(shù)平臺(tái)）搜索幾篇類似文章，看筆者寫的文章和別人有什么不同（歡迎在評(píng)論區(qū)評(píng)論不同之處），...

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

  • ES6 class繼承與super關(guān)鍵詞深入探索

    摘要：請(qǐng)看對(duì)應(yīng)版本干了什么可知，相當(dāng)于以前在構(gòu)造函數(shù)里的行為。這種寫法會(huì)與上文中寫法有何區(qū)別我們?cè)诃h(huán)境下運(yùn)行一下，看看這兩種構(gòu)造函數(shù)的有何區(qū)別打印結(jié)果打印結(jié)果結(jié)合上文中關(guān)于原型的論述，仔細(xì)品味這兩者的差別，最好手動(dòng)嘗試一下。 ES6 class 在ES6版本之前，JavaScript語言并沒有傳統(tǒng)面向?qū)ο笳Z言的class寫法，ES6發(fā)布之后，Babel迅速跟進(jìn)，廣大開發(fā)者也很快喜歡上ES6帶...

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

  • 從 React 綁定 this，看 JS 語言發(fā)展和框架設(shè)計(jì)

    摘要：在語言中，關(guān)于這個(gè)關(guān)鍵字的行為一直以來困擾著一代又一代初級(jí)開發(fā)者。同時(shí)，也充分反應(yīng)了的詭異與靈活。這種情況下，無法自動(dòng)綁定。總結(jié)本文在對(duì)比綁定的五種方法的同時(shí)，也由遠(yuǎn)及近了解了語言的發(fā)展從的，到的箭頭函數(shù)，再到對(duì)的改進(jìn)。 在 javascript 語言中，關(guān)于 this 這個(gè)關(guān)鍵字的行為一直以來困擾著一代又一代初級(jí)開發(fā)者。同時(shí) this，也充分反應(yīng)了 javascript 的詭異與靈活...

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

  • ES6—箭頭函數(shù)（5）

    摘要：因?yàn)樗划a(chǎn)生屬于它自己上下文的箭頭函數(shù)的另一個(gè)用處是簡(jiǎn)化回調(diào)函數(shù)。箭頭函數(shù)使用場(chǎng)景箭頭函數(shù)適合于無復(fù)雜邏輯或者無副作用的純函數(shù)場(chǎng)景下，例如用在的回調(diào)函數(shù)定義中，另外目前等庫(kù)，都大量使用箭頭函數(shù)，直接定義的情況已經(jīng)很少了。 0.為什么會(huì)出現(xiàn)箭頭函數(shù)？ 1.傳統(tǒng)的javascript函數(shù)語法并沒有提供任何的靈活性，每一次你需要定義一個(gè)函數(shù)時(shí)，你都必須輸入function () {},這至少...

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

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

0條評(píng)論

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