es6箭頭函數(shù)

UnixAgain 發(fā)布于2019-08-26 10:59 / 1826人閱讀

摘要：但是箭頭函數(shù)并沒有自己的其是繼承了外層執(zhí)行環(huán)境的，且不能改變，因此不能作為構(gòu)造函數(shù)，此時，引擎會在報錯。不能作為事件的回調(diào)在中，事件的回調(diào)函數(shù)中，會動態(tài)的指向監(jiān)聽的對象，但是由于監(jiān)聽是一個全局函數(shù)，所以箭頭函數(shù)的回調(diào)中指向。

箭頭函數(shù)

es6中添加了函數(shù)新的定義語法——箭頭函數(shù)，當(dāng)有大于一個形參的時候，必須使用()代表部分參數(shù)，函數(shù)體大于一行時，必須使用{}將函數(shù)體括起來，并使用return返回。

箭頭函數(shù)不會創(chuàng)建自己的this

箭頭函數(shù)會在自己的作用域鏈上的上一層尋找this。所以箭頭函數(shù)會在定義時找到自己外層的this，并繼承這個this的值。在后面的任何操作中，this的值都不會改變。
箭頭函數(shù)的實現(xiàn)

var a =  1;
function func() {
    setTimeout(() => {
        console.log(this.a);
    }, 1000);
}
func.call({a: 2});
// 2

setTimeout使用的是箭頭函數(shù)，所以this在定義的時候就確定了，繼為外層func的this的值。在函數(shù)執(zhí)行的時候，通過call改變了func的this指向{a:2},所以箭頭函數(shù)繼承func在執(zhí)行環(huán)境中的指向，所以打印輸出2。

普通函數(shù)的實現(xiàn)

var a =  1;
let func = function () {
    setTimeout(function () 
    {
        console.log(this.a);
    }, 1000);
}
func.call({a: 2});
//1

setTimeout使用的是普通的函數(shù)，所以其this指向為函數(shù)運行時的所在的作用域。在1秒之后函數(shù)是在全局作用域中執(zhí)行的，此時this指向window對象，所以輸出為1。

不能定義對象方法

let obj = {
    name: "lisi",
    a: function() 
    {
        console.log(this.name);
    },
    b: () =>{
        console.log(this.name);
        this.a();
    }
}

let name = "zhangsan";
obj.a();
obj.b();

//lisi
//zhangsan
//Uncaught TypeError: this.a is not a function

JS中對象方法的定義方式是在對象上定義一個指向函數(shù)的屬性，當(dāng)方法被調(diào)用的時候，方法內(nèi)的this就會指向方法所屬的對象。所以方法a中的this指向?qū)ο髈bj。但是在obj對象的{}無法形成一個多帶帶的作用域，所以obj是在window作用域中，方法b為箭頭函數(shù)，指向上層obj的this === window，所以a方法輸出obj的name屬性，b方法輸出全局name的值。且由于全局作用域上沒有a方法，所以this.a()執(zhí)行報錯。所以用箭頭函數(shù)定義對象方法時，不會有預(yù)想的輸出。當(dāng)要定義對象方法時，請使用函數(shù)表達(dá)式或者方法簡寫（es6）。

箭頭函數(shù)不能當(dāng)作構(gòu)造函數(shù)

function Person (name, age) {
     this.age = age;
     this.name = name;
}
let person = new Person("lisi", 23);
console.log(person.name, person.age);
//lisi 23

js在new 生成一個新的實例對象的時候，首先在內(nèi)部生成一個新的空對象，然后將this指向該對象，接著執(zhí)行構(gòu)造函數(shù)的指令，最后將該對象作為實例返回。

let Person = (name, age) => {
    this.name = name;
    this.age = age;
}
let person = new Person("lisi", 23);
console.log(person.name, person.age);
//Uncaught TypeError: Person is not a constructor

但是箭頭函數(shù)并沒有自己的this,其this是繼承了外層執(zhí)行環(huán)境的this，且不能改變，因此不能作為構(gòu)造函數(shù)，此時，js引擎會在報錯。Person不是一個構(gòu)造函數(shù)。

this的指向改變

箭頭函數(shù)this的指向不會因為call()、bind()、apply()而改變

var a = "haha"
let func = () =>{
    console.log(this.a)
}
func();
func.bind({a: 1})()
func.apply({a: 2});
func.call({a: 3});
//haha
//haha
//haha
//haha

在js中，可以使用bind()、apply()、call()來動態(tài)綁定函數(shù)的作用域，但是在箭頭函數(shù)中，this由于已經(jīng)固化在上層作用域鏈上，所以這三種方法不能改變this的指向，且不報錯。

箭頭函數(shù)不能使用arguments、super、new.target

function foo() {
  setTimeout(() => {
    console.log("args:", arguments);
  }, 100);
}

foo(2, 4, 6, 8)
// args: [2, 4, 6, 8]

由于定時器的回調(diào)函數(shù)是一個箭頭函數(shù)，所以其this指向上一層的foo函數(shù)的環(huán)境中的值。

在es6中可以使用rest參數(shù)代替arguments來訪問函數(shù)的參數(shù)列表

let func = (...args) => {
    console.log(args);
}

func(1, 2, 3, 4, 5);
//[1,2,3,4,5]

沒有原型

由于箭頭函數(shù)沒有自己的this，,所以箭頭函數(shù)沒有自己的原型。

let sayHi = () => {
    console.log("Hello World !")
};
console.log(sayHi.prototype); // undefined

不能作為事件的回調(diào)

在js中，事件的回調(diào)函數(shù)中，this會動態(tài)的指向監(jiān)聽的對象，但是由于監(jiān)聽是一個全局函數(shù)，所以箭頭函數(shù)的回調(diào)中this指向window。

var button = document.getElementById("press");
button.addEventListener("click", () => {
  this.innerHtml = "hello"
});

在全局上下文下定義的箭頭函數(shù)執(zhí)行時 this 會指向 window，當(dāng)單擊事件發(fā)生時，瀏覽器會嘗試用 button 作為上下文來執(zhí)行事件回調(diào)函數(shù)，但是箭頭函數(shù)預(yù)定義的上下文是不能被修改的，這樣 this.innerHTML 就等價于 window.innerHTML，而后者是沒有任何意義的。