es6的等號箭頭「=>」是指箭頭函數，是一種函數的簡寫方式，語法為(參數)=>{函數體};」。箭頭函數表達式的語法比函數表達式更簡潔，沒有this、super、arguments和new.target綁定，不能透過new關鍵字調用，不可以改變this的綁定。
=>是箭頭函數，是ES6標準中新增的一種新的函數。顧名思義，箭頭函數是一種使用箭頭（=>）定義函數的新語法，箭頭函數表達式的語法比函數表達式更簡潔，但是它與傳統的JavaScript函數有些許不同，主要集中在以下方面：
(function(){
"use strict";
// use arrow functions here
}());一個新話題
=>
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, y) => {
x = x * 2;
return x + y;
})( 3, "A" ); // "6A"var func = x => {
return x++;
};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
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吧。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中文網其他相關文章！
