摘要:特性箭頭函數(shù)內(nèi)部沒有方法,也沒有,所以不支持操作。箭頭函數(shù)的始終指向函數(shù)定義時的,而非執(zhí)行時。不可以使用對象,該對象在函數(shù)體內(nèi)不存在。不可以使用命令,因此箭頭函數(shù)不能用作函數(shù)。
語法:
([param] [, param]) => { statements } param => expression
使用:
( )=>{···}; //零個參數(shù)用()表示 x =>{···}; //一個參數(shù),可以省略() (x,y)=>{···}; //多個參數(shù)不能省略() **多行語句需要用{}括起來,單行表達(dá)式不需要{},并且會作為函數(shù)返回值。**
特性:
箭頭函數(shù)內(nèi)部沒有constructor方法,也沒有prototype,所以不支持new操作。但是它對this的處理與一般的普通函數(shù)不一樣。箭頭函數(shù)的 this 始終指向函數(shù)定義時的 this,而非執(zhí)行時。
例如:
var o = { x : 1, fn : function() { console.log(this.x) }, test : function() { setTimeout(function() { this.fn(); }, 100); } }; o.test(); // TypeError : this.fn is not a function
上面的代碼會出現(xiàn)錯誤,因?yàn)閠his的指向從o變?yōu)榱巳郑ê瘮?shù)調(diào)用中的this都是指向全局的)。
要修改上面的代碼如下:
var o = { x : 1, fn : function() { console.log(this.x) }, test : function() { var _this = this; setTimeout(function() { _this.fn(); }, 100); } }; o.test();
通過使用外部事先保存的this就行了。
利用到箭頭函數(shù)修改,箭頭函數(shù)的 this 始終指向函數(shù)定義時的 this,而非執(zhí)行時。
var o = { x : 1, fn : function() { console.log(this.x) }, test : function() { setTimeout(() => { this.fn() }, 100); } }; o.test();
這回this就指向o了。箭頭函數(shù)可以讓setTimeout里面的this,綁定定義時所在的作用域,而不是指向運(yùn)行時所在的作用域。
上面代碼中,轉(zhuǎn)換后的ES5版本清楚地說明了,箭頭函數(shù)里面根本沒有自己的this,而是引用外層的this。
需要注意一點(diǎn)的就是箭頭函數(shù)中的this是不會改變指向?qū)ο蟮模覀冎纁all和apply可以改變this的指向,但是在箭頭函數(shù)中是無效的。
var x = 1, o = { x : 10, test : () => { console.log(this);//window函數(shù)調(diào)用中的this都是指向全局的 return this.x } }; console.log(o.test()); // 1 console.log(o.test.call(o)); // 依然是1
如果箭頭函數(shù)的代碼塊部分多于一條語句,就要使用大括號將它們括起來,并且使用return語句返回。
var sum = (num1, num2) => { return num1 + num2; }
由于大括號被解釋為代碼塊,所以如果箭頭函數(shù)直接返回一個對象,必須在對象外面加上括號。
var getTempItem = id => ({ id: id, name: "Temp" });
使用注意點(diǎn)
函數(shù)體內(nèi)的this對象,就是定義時所在的對象,而不是使用時所在的對象
不可以當(dāng)作構(gòu)造函數(shù),也就是說,不可以使用new命令,否則會拋出一個錯誤。
不可以使用arguments對象,該對象在函數(shù)體內(nèi)不存在。如果要用,可以用Rest參數(shù)代替。
不可以使用yield命令,因此箭頭函數(shù)不能用作Generator函數(shù)。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/102254.html
摘要:也就是說箭頭函數(shù)的的值不再根據(jù)調(diào)用時上下文確定,而是像普通變量那樣根據(jù)定義時的作用域鏈進(jìn)行查找。箭頭函數(shù)中的依然要根據(jù)定義時的作用域鏈進(jìn)行查找。知乎這篇文章對箭頭函數(shù)的一些不適合的場景進(jìn)行了總結(jié),可以作為參考。 es6 - 箭頭函數(shù) 哇,箭頭函數(shù)...,聽起來好NB,但是如果你知道它是因?yàn)槭褂昧?>這樣類似箭頭的符號 ,所以才叫箭頭函數(shù)。 瞬間感覺:呵,這名字起的...。 es6增加了...
摘要:特性介紹箭頭函數(shù)是新增的特性之一,它為這門語言提供了一種全新的書寫函數(shù)的語法。用生成的函數(shù)會定義一個自己的,而箭頭函數(shù)沒有自己的,而是會和上一層的作用域共享。 本文同步自我得博客:http://www.joeray61.com JS中的箭頭 箭頭在JS里并不算是個新鮮的玩意兒,一直以來,JS都支持-->這樣的箭頭。 很早的時候有些瀏覽器還不支持JS,當(dāng)時的人們?yōu)榱思嫒葸@些瀏覽器,需要這...
摘要:令人震驚的箭頭函數(shù)引入了寫入函數(shù)的新語法。使用箭頭函數(shù)創(chuàng)建簡單對象時有一個警告。代碼因此被默默地解釋為一個不執(zhí)行任何操作并返回未定義的箭頭函數(shù)。內(nèi)部函數(shù)是一個箭頭函數(shù),所以它從封閉范圍繼承此函數(shù)。 箭頭從一開始就一直是JavaScript的一部分。第一個JavaScript教程建議在HTML注釋中包裝內(nèi)聯(lián)腳本。這會阻止不支持JS的瀏覽器錯誤地將JS代碼顯示為文本。你會寫這樣的東西: ...
摘要:有傳聞?wù)f,箭頭函數(shù)的語法,是受到了的影響,并且它與中的語法一樣,共享上下文。箭頭函數(shù)是新增加的一個特性。箭頭函數(shù)沒有自己的值,其值是通過繼承其它傳入對象而獲得的通常來說是上一級外部函數(shù)的的指向。 箭頭函數(shù) 1. 簡單的定義: 胖箭頭函數(shù) Fat arrow functions,又稱箭頭函數(shù),是一個來自ECMAScript 2015(又稱ES6)的全新特性。有傳聞?wù)f,箭頭函數(shù)的語法=>,...
摘要:箭頭函數(shù)簡單的定義胖箭頭函數(shù),又稱箭頭函數(shù),是一個來自又稱的全新特性。箭頭函數(shù)是新增加的一個特性。使用箭頭函數(shù)的注意點(diǎn)箭頭函數(shù)在參數(shù)和箭頭之間不能換行。值得注意的一點(diǎn)就是對象的指向是可變的,但在箭頭函數(shù)內(nèi)是固定的。 箭頭函數(shù) 1. 簡單的定義: 胖箭頭函數(shù) Fat arrow functions,又稱箭頭函數(shù),是一個來自ECMAScript 2015(又稱ES6)的全新特性。有傳聞?wù)f,...
摘要:對象的指向是可變的,但是在箭頭函數(shù)中,它是固定的。同樣的由于箭頭函數(shù)沒有自己的所以傳統(tǒng)的顯性綁定無效內(nèi)部的指向外部在的學(xué)習(xí)中,的指向問題一直是個難點(diǎn),特別是在對象方法中使用時,必須更加小心。由此箭頭函數(shù)在很大程度上減少了我們的困擾。 什么是箭頭函數(shù) 用法 ES6 允許使用箭頭(=>)定義函數(shù) 測試 var p1 = document.getElementById(test1)...
閱讀 808·2021-09-06 15:02
閱讀 2451·2019-08-30 15:43
閱讀 2175·2019-08-30 11:26
閱讀 2381·2019-08-26 12:12
閱讀 3549·2019-08-23 18:24
閱讀 3268·2019-08-23 18:16
閱讀 704·2019-08-23 17:02
閱讀 2253·2019-08-23 15:34