ES6新特性之箭頭函數與function的區別

CarterLi 發布于2019-08-26 13:36 / 1038人閱讀

摘要：寫法不同的寫法箭頭函數的寫法的指向不同在中，指向的是調用該函數的對象使用定義的函數而在箭頭函數中，永遠指向定義函數的環境。變量提升存在變量提升，可以定義在調用語句后箭頭函數以字面量形式賦值，是不存在變量提升的

1.寫法不同

// function的寫法
function fn(a, b){
    return a+b;
}

// 箭頭函數的寫法
let foo = (a, b) =>{ return a + b }

2.this的指向不同

在function中，this指向的是調用該函數的對象；

//使用function定義的函數
function foo(){
    console.log(this);
}
var obj = { aa: foo };
foo(); //Window
obj.aa() //obj { aa: foo }

而在箭頭函數中，this永遠指向定義函數的環境。

//使用箭頭函數定義函數
var foo = () => { console.log(this) };
var obj = { aa:foo };
foo(); //Window
obj.aa(); //Window

function Timer() {
  this.s1 = 0;
  this.s2 = 0;
  // 箭頭函數
  setInterval(() => {
     this.s1++;
     console.log(this);
  }, 1000); // 這里的this指向timer
  // 普通函數
  setInterval(function () {
    console.log(this);
    this.s2++; // 這里的this指向window的this
  }, 1000);
}

var timer = new Timer();

setTimeout(() => console.log("s1: ", timer.s1), 3100);
setTimeout(() => console.log("s2: ", timer.s2), 3100);
// s1: 3
// s2: 0

3.箭頭函數不可以當構造函數

//使用function方法定義構造函數
function Person(name, age){
    this.name = name;
    this.age = age;
}
var lenhart =  new Person(lenhart, 25);
console.log(lenhart); //{name: "lenhart", age: 25}

//嘗試使用箭頭函數
var Person = (name, age) =>{
    this.name = name;
    this.age = age;
};
var lenhart = new Person("lenhart", 25); //Uncaught TypeError: Person is not a constructor

另外，由于箭頭函數沒有自己的this，所以當然也就不能用call()、apply()、bind()這些方法去改變this的指向。

4.變量提升

function存在變量提升，可以定義在調用語句后；

foo(); //123
function foo(){
    console.log("123");
}

箭頭函數以字面量形式賦值，是不存在變量提升的；

arrowFn(); //Uncaught TypeError: arrowFn is not a function
var arrowFn = () => {
    console.log("456");
};

console.log(f1); //function f1() {}   
console.log(f2); //undefined  
function f1() {}
var f2 = function() {}

云服務器 GPU云服務器 es6新特性 es6的新特性 html5新特性之webrtc function函數

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

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

ECMAScript 6新特性印象之一：新語法

摘要：下例實現了一個數組的迭代器在中，可迭代數據結構比如數組都必須實現一個名為的方法，該方法返回一個該結構元素的迭代器。原話是還可以傳遞返回值。前記按照規劃，明年年中，ECMAScript 6(ES6)就要正式發布了。最近抽空看了Dr. Axel Rauschmayer的幾篇文章和演講PPT，對新特性有了些了解。趁沒忘，抓緊記錄下，夾雜自己的感受。計劃分三部分：新語法...

馬忠志 2019-08-21 12:28 評論0 收藏0
ES6 class繼承與super關鍵詞深入探索

摘要：請看對應版本干了什么可知，相當于以前在構造函數里的行為。這種寫法會與上文中寫法有何區別我們在環境下運行一下，看看這兩種構造函數的有何區別打印結果打印結果結合上文中關于原型的論述，仔細品味這兩者的差別，最好手動嘗試一下。 ES6 class 在ES6版本之前，JavaScript語言并沒有傳統面向對象語言的class寫法，ES6發布之后，Babel迅速跟進，廣大開發者也很快喜歡上ES6帶...

jubincn 2019-08-26 10:58 評論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學習筆記之箭頭函數

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

Vultr 2019-08-19 18:12 評論0 收藏0