es6箭頭函數的特性有:1、箭頭函數沒有arguments物件;2、箭頭函數的this值,取決於函數外部非箭頭函數的this值,箭頭函數不能改變this指向;3、箭頭函數不能用new關鍵字宣告;4、箭頭函數沒有原型prototype屬性。
本教學操作環境:windows7系統、ECMAScript 6版、Dell G3電腦。
ES6標準新增了一種新的函數:Arrow Function(箭頭函數)。
為什麼叫Arrow Function(箭頭函數)?因為它的定義用的就是一個箭頭:
x => x * x
上面的箭頭函數相當於:
function (x) { return x * x; }
箭頭函數相當於匿名函數,並且簡化了函數定義。箭頭函數有兩種格式,一種像上面的,只包含一個表示式,連{ ... }和return都省略掉了。還有一種可以包含多條語句,這時候就不能省略{ ... }和return:
x => { if (x > 0) { return x * x; } else { return - x * x; } }
如果引數不是一個,就需要用括號()括起來:
// 兩個引數: (x, y) => x * x + y * y // 無引數: () => 3.14 // 可變引數: (x, y, ...rest) => { var i, sum = x + y; for (i=0; i<rest.length; i++) { sum += rest[i]; } return sum; }
如果要返回一個物件,就要注意,如果是單表示式,這麼寫的話會報錯:
// SyntaxError: x => { foo: x }
因為和函數體的{ ... }有語法衝突,所以要改為:
// ok: x => ({ foo: x })
es6箭頭函數的特性
1、箭頭函數沒有arguments
let test1 = () => { console.log(arguments) } test1(123) // arguments is not defined
箭頭函數找arguments物件只會找外層非箭頭函數的函數,如果外層是一個非箭頭函數的函數如果它也沒有arguments物件也會中斷返回,就不會在往外層去找
function test2(a, b, c){ return () => { console.log(arguments) // [1] } } test2(1)()
2、箭頭函數this值
箭頭函數的this值,取決於函數外部非箭頭函數的this值,如果上一層還是箭頭函數,那就繼續往上找,如果找不到那麼this就是window物件
let person = { test: () => { console.log(this) }, fn(){ return () => { console.log(this) } } } person.test() // window person.fn()() // person物件
箭頭函數不能改變this指向
let person = {} let test = () => console.log(this) test.bind(person)() test.call(person) test.apply(person)
在預編譯的時候,this 就已確定。
3、箭頭函數不能用new關鍵字宣告
let test = () => {} new test() // Uncaught TypeError: test is not a constructor
4、箭頭函數沒有原型prototype屬性
JavaScript中所有的函數都有prototype屬性嗎,這個是錯誤的。
let test = () => {} test.prototype // undefined test.__proto__ === Function.prototype // true
箭頭函數不能重複命名引數
// 箭頭函數不能重複命名引數 let bbb = (b, b, b) => { } // Uncaught SyntaxError: Duplicate parameter name not allowed in this context let bb = function(b, b, b){ } // es5 不會報錯
【相關推薦:、】
以上就是es6箭頭函數有哪些特性的詳細內容,更多請關注TW511.COM其它相關文章!