es6 等號箭頭什麼意思

es6的等號箭頭「=>」是指箭頭函數，是一種函數的簡寫方式，語法為(參數)=>{函數體};」。箭頭函數表達式的語法比函數表達式更簡潔，沒有this、super、arguments和new.target綁定，不能透過new關鍵字調用，不可以改變this的綁定。

##本教學操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。

=>是箭頭函數，是ES6標準中新增的一種新的函數。顧名思義，箭頭函數是一種使用箭頭（=>）定義函數的新語法，箭頭函數表達式的語法比函數表達式更簡潔，但是它與傳統的JavaScript函數有些許不同，主要集中在以下方面：

• 沒有this、super、arguments和new.target綁定，其值由外圍最近一層非箭頭函數決定

• 不能透過new關鍵字呼叫

• 沒有原型

• 不支援arguments物件

• 不支援重複的命名參數

函數體內的this的指向總是指向定義它所在的對象，而不會指向呼叫它的對象，我們知道es5中的函數是誰執行它，它就指向誰。

執行環境

你可以自己去學習和嘗試下, 你可以簡單的把範例程式碼複製到你的瀏覽器控制台下. 現在, 推薦使用Firefox(22 )開發者工具, Firefox(22 )開發者工具現在支援箭頭函數,你也可以使用Google瀏覽器. 如果你使用Google瀏覽器, 你必須要做下列兩件事:

在Google瀏覽器中網址列中輸入：about:flags, 找到"使用體驗性JavaScript"選項，開啟使用。

#在函數的開頭加上use strict,然後再在你的Google瀏覽中測試箭頭函數吧(提示：請用Google瀏覽器v38,我當時就是被瀏覽器版本坑了):

(function(){
    "use strict";
    // use arrow functions here
}());

幸運的是後面會有越來越多的瀏覽器支持ES6特性. 現在你完成了所有準備工作, 讓我們繼續深入它吧!

一個新話題

最近大家在討論關於ES6的一個主題：關於箭頭函數, 像這樣:

=>

新的語法

隨著討論產生了一個新的語法：

param => expression

新增的語法是作用在變數上, 可以在表達式中申明多個變數, 下面是箭頭函數的使用模式:

//  一个参数对应一个表达式
param => expression;// 例如 x => x+2;

// 多个参数对应一个表达式
(param [, param]) => expression; //例如 (x,y) => (x + y);

// 一个参数对应多个表示式
param => {statements;} //例如 x = > { x++; return x;};

//  多个参数对应多个表达式
([param] [, param]) => {statements} // 例如 (x,y) => { x++;y++;return x*y;};

//表达式里没有参数
() => expression; //例如var flag = (() => 2)(); flag等于2
() => {statements;} //例如 var flag = (() => {return 1;})(); flag就等于1

//传入一个表达式，返回一个对象
([param]) => ({ key: value });
//例如  var fuc = (x) => ({key:x})
        var object = fuc(1);
        alert(object);//{key:1}

箭頭函數是怎麼實現的

我們可以把一個普通函數轉換成用箭頭函數來實現：

// 当前函数
var func = function (param) {
    return param.split(" ");
}
// 利用箭头函数实现
var func = param => param.split(" ");

從上面的例子我們可以看出箭頭函數的語法其實是回傳了一個新的函數, 這個函數有函數體和參數。

因此, 我們可以這樣呼叫剛才我們建立的函數:

func("Felipe Moura"); // returns ["Felipe", "Moura"]

#立即執行函數(IIFE)

你能在立即執行函數裡使用箭頭函數，例如:

( x => x * 2 )( 3 ); // 6

這行程式碼產生了一個臨時函數，這個函數有一個形參x，函數的返回值為x*2,之後系統會馬上執行這個臨時函數, 將3賦值給形參x.

下面的例子描述了臨時函數體裡有多行程式碼的情況：

( (x, y) => {
    x = x * 2;
    return x + y;
})( 3, "A" ); // "6A"

#相關思考

思考下面的函數：

var func = x => {
    return x++;
};

我們列出了一些常見的問題：

箭頭函數創建的臨時函數的arguments它不會被置:

console.log(arguments); // not defined

typeof

和

instanceof函

數也能正常檢查臨時函數:###

func instanceof Function; // true
typeof func; // function
func.constructor == Function; // true

###把箭頭函數放在括號內是無效的:###

//  有效的常规语法
(function (x, y){
    x= x * 2;
    return x + y;
} (3, "B") );
// 无效的箭头函数语法
( (x, y) => {
    x= x * 2;
    return x + y;
} ( 3, "A" ) );
// 但是可以这样写就是有效的了：
( (x,y) => {
    x= x * 2;return x + y;
} )( 3,"A" );//立即执行函数

###儘管箭頭函數會產生一個臨時函數，但是這個臨時函數不是一個建構函數:###

var instance= new func(); // TypeError: func is not a constructor

###同樣也沒有原型物件:###

func.prototype; // undefined

######## ##作用域############這個箭頭函數的作用域和其他函數有一些不同,如果不是嚴格模式，this關鍵字就是指向window，嚴格模式就是undefined，在建構子裡的this指向的是當前對象實例,如果this在一個對象的函數內則this指向的是這個對象，this有可能指向的是一個DOM元素，例如當我們添加事件監聽函數時,可能這個this的指向不是很直接，其實this（不只this變數）變數的指向是根據一個規則來判斷的：作用域流。下面我將示範this在事件監聽函數和在物件函數內出現的情況：######在事件監聽函數中：###

document.body.addEventListener('click', function(evt){
    console.log(this); // the HTMLBodyElement itself
});

###在建構子裡：###

function Person () {
    let fullName = null;
    this.getName = function () {
        return fullName;
    };
    this.setName = function (name) {
        fullName = name;
        return this;
    };
}
let jon = new Person();
jon.setName("Jon Doe");
console.log(jon.getName()); // "Jon Doe"
//注：this关键字这里就不解释了，大家自己google,baidu吧。

###在這個範例中，如果我們讓Person.setName函數傳回Person物件本身，我們就可以這樣用：###

jon.setName("Jon Doe")
.getName(); // "Jon Doe"

###在一個物件裡:###

let obj = {
    foo: "bar",
    getIt: function () {
        return this.foo;
    }
};
console.log( obj.getIt() ); // "bar"

但是当执行流(比如使用了setTimeout)和作用域变了的时候，this也会变。

function Student(data){
    this.name = data.name || "Jon Doe";
    this.age = data.age>=0 ? data.age : -1;
    this.getInfo = function () {
        return this.name + ", " + this.age;
    };
    this.sayHi = function () {
        window.setTimeout( function () {
            console.log( this );
        }, 100 );
    }
}

let mary = new Student({
    name: "Mary Lou",
    age: 13
});
console.log( mary.getInfo() ); // "Mary Lou, 13"
mary.sayHi();
// window

当setTimeout函数改变了执行流的情况时，this的指向会变成全局对象,或者是在严格模式下就是undefine,这样在setTimeout函数里面我们使用其他的变量去指向this对象，比如self，that,当然不管你用什么变量，你首先应该在setTimeout访问之前，给self，that赋值，或者使用bind方法不然这些变量就是undefined。

这是后就是箭头函数登场的时候了，它可以保持作用域，this的指向就不会变了。

让我们看下上文起先的例子，在这里我们使用箭头函数：

function Student(data){
    this.name = data.name || "Jon Doe";
    this.age = data.age>=0 ? data.age : -1;
    this.getInfo = function () {
        return this.name + ", " + this.age;
    };
    this.sayHi = function () {
        window.setTimeout( ()=>{
            // the only difference is here
            console.log( this );
        }, 100 );
    }
}

let mary = new Student({
    name: "Mary Lou",
    age: 13
});
console.log( mary.getInfo() ); // "Mary Lou, 13"
mary.sayHi();
// Object { name: "Mary Lou", age: 13, ... }

分析：在sayHi函数中，我们使用了箭头函数，当前作用域是在student对象的一个方法中，箭头函数生成的临时函数的作用域也就是student对象的sayHi函数的作用域。所以即使我们在setTimeout调用了箭头函数生成的临时函数，这个临时函数中的this也是正确的指向。

有趣和有用的使用

创建一个函数很容易，我们可以利用它可以保持作用域的特征：

例如我们可以这么使用：Array.forEach()

var arr = ['a', 'e', 'i', 'o', 'u'];
arr.forEach(vowel => {
    console.log(vowel);
});

分析：在forEach里箭头函数会创建并返回一个临时函数 tempFun,这个tempFun你可以想象成这样的：function(vowel){ console.log(vowel);}但是Array.forEach函数会怎么去处理传入的tempFunc呢？在forEach函数里会这样调用它：tempFunc.call(this,value);所有我们看到函数的正确执行效果。

//在Array.map里使用箭头函数，这里我就不分析函数执行过程了。。。。

var arr = ['a', 'e', 'i', 'o', 'u'];
arr.map(vowel => {
    return vowel.toUpperCase();
});
// [ "A", "E", "I", "O", "U" ]

费布拉奇数列

var factorial = (n) => {
    if(n==0) {
        return 1;
    }
    return (n * factorial (n-1) );
}
factorial(6); // 720

我们也可以用在Array.sort方法里：

let arr = ['a', 'e', 'i', 'o', 'u'];
arr.sort( (a, b)=> a < b? 1: -1 );

也可以在事件监听函数里使用：

// EventObject, BodyElement
document.body.addEventListener('click', event=>console.log(event, this));

总结

尽管大家可能会认为使用箭头函数会降低你代码的可读性，但是由于它对作用域的特殊处理，它能让我们能很好的处理this的指向问题。箭头函数加上let关键字的使用，将会让我们JavaScript代码上一个层次！尽量多使用箭头函数，你可以再你的浏览器测试你写的箭头函数代码，大家可以再评论区留下你对箭头函数的想法和使用方案！我希望大家能享受这篇文章，就像你会不就的将来享受箭头函数带给你的快乐.

更多编程相关知识，请访问：编程入门！！

以上是es6 等號箭頭什麼意思的詳細內容。更多資訊請關注PHP中文網其他相關文章！