es6箭頭函數

UnixAgain 發布于2019-08-26 10:59 / 1819人閱讀

摘要：但是箭頭函數并沒有自己的其是繼承了外層執行環境的，且不能改變，因此不能作為構造函數，此時，引擎會在報錯。不能作為事件的回調在中，事件的回調函數中，會動態的指向監聽的對象，但是由于監聽是一個全局函數，所以箭頭函數的回調中指向。

箭頭函數

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

箭頭函數不會創建自己的this

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

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

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

普通函數的實現

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

setTimeout使用的是普通的函數，所以其this指向為函數運行時的所在的作用域。在1秒之后函數是在全局作用域中執行的，此時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中對象方法的定義方式是在對象上定義一個指向函數的屬性，當方法被調用的時候，方法內的this就會指向方法所屬的對象。所以方法a中的this指向對象obj。但是在obj對象的{}無法形成一個多帶帶的作用域，所以obj是在window作用域中，方法b為箭頭函數，指向上層obj的this === window，所以a方法輸出obj的name屬性，b方法輸出全局name的值。且由于全局作用域上沒有a方法，所以this.a()執行報錯。所以用箭頭函數定義對象方法時，不會有預想的輸出。當要定義對象方法時，請使用函數表達式或者方法簡寫（es6）。

箭頭函數不能當作構造函數

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 生成一個新的實例對象的時候，首先在內部生成一個新的空對象，然后將this指向該對象，接著執行構造函數的指令，最后將該對象作為實例返回。

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

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

this的指向改變

箭頭函數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()來動態綁定函數的作用域，但是在箭頭函數中，this由于已經固化在上層作用域鏈上，所以這三種方法不能改變this的指向，且不報錯。

箭頭函數不能使用arguments、super、new.target

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

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

由于定時器的回調函數是一個箭頭函數，所以其this指向上一層的foo函數的環境中的值。

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

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

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

沒有原型

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

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

不能作為事件的回調

在js中，事件的回調函數中，this會動態的指向監聽的對象，但是由于監聽是一個全局函數，所以箭頭函數的回調中this指向window。

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

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

云服務器 GPU云服務器箭頭函數 ES6 es6-系列 ES6入門

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/106955.html

es6 - 箭頭函數

摘要：也就是說箭頭函數的的值不再根據調用時上下文確定，而是像普通變量那樣根據定義時的作用域鏈進行查找。箭頭函數中的依然要根據定義時的作用域鏈進行查找。知乎這篇文章對箭頭函數的一些不適合的場景進行了總結，可以作為參考。 es6 - 箭頭函數哇，箭頭函數...，聽起來好NB，但是如果你知道它是因為使用了=>這樣類似箭頭的符號，所以才叫箭頭函數。瞬間感覺：呵，這名字起的...。 es6增加了...

13651657101 2019-08-26 11:46 評論0 收藏0
ES6學習筆記之箭頭函數

摘要：特性介紹箭頭函數是新增的特性之一，它為這門語言提供了一種全新的書寫函數的語法。用生成的函數會定義一個自己的，而箭頭函數沒有自己的，而是會和上一層的作用域共享。本文同步自我得博客：http://www.joeray61.com JS中的箭頭箭頭在JS里并不算是個新鮮的玩意兒，一直以來，JS都支持-->這樣的箭頭。很早的時候有些瀏覽器還不支持JS，當時的人們為了兼容這些瀏覽器，需要這...

Vultr 2019-08-19 18:12 評論0 收藏0
深入ES6：箭頭函數

摘要：令人震驚的箭頭函數引入了寫入函數的新語法。使用箭頭函數創建簡單對象時有一個警告。代碼因此被默默地解釋為一個不執行任何操作并返回未定義的箭頭函數。內部函數是一個箭頭函數，所以它從封閉范圍繼承此函數。箭頭從一開始就一直是JavaScript的一部分。第一個JavaScript教程建議在HTML注釋中包裝內聯腳本。這會阻止不支持JS的瀏覽器錯誤地將JS代碼顯示為文本。你會寫這樣的東西： ...

MasonEast 2019-08-22 17:14 評論0 收藏0
ES6 箭頭函數從了解到深入

摘要：有傳聞說，箭頭函數的語法，是受到了的影響，并且它與中的語法一樣，共享上下文。箭頭函數是新增加的一個特性。箭頭函數沒有自己的值，其值是通過繼承其它傳入對象而獲得的通常來說是上一級外部函數的的指向。箭頭函數 1. 簡單的定義：胖箭頭函數 Fat arrow functions，又稱箭頭函數，是一個來自ECMAScript 2015（又稱ES6）的全新特性。有傳聞說，箭頭函數的語法=>，...

Eminjannn 2019-08-20 16:37 評論0 收藏0
ES6~你跟箭頭函數升華之路

摘要：箭頭函數簡單的定義胖箭頭函數，又稱箭頭函數，是一個來自又稱的全新特性。箭頭函數是新增加的一個特性。使用箭頭函數的注意點箭頭函數在參數和箭頭之間不能換行。值得注意的一點就是對象的指向是可變的，但在箭頭函數內是固定的。箭頭函數 1. 簡單的定義：胖箭頭函數 Fat arrow functions，又稱箭頭函數，是一個來自ECMAScript 2015（又稱ES6）的全新特性。有傳聞說，...

Faremax 2019-08-21 17:16 評論0 收藏0
關于ES6中箭頭函數的this問題

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

LeviDing 2019-08-22 10:53 評論0 收藏0