資訊專欄INFORMATION COLUMN
摘要：基本用法在中允許使用來定義函數，如下就等同于從上面可以看出，在箭頭左側的是代表參數，若參數只有一個，可以省略，箭頭右側的表示函數代碼塊，若代碼塊里面是個返回值，則可以省略不寫無參數情況若箭頭函數不需要參數，則左側用代替，如下無參數情況無參數
基本用法
在ES6中允許使用 => 來定義函數，如下：
var f = a => a;
console.log(f(1)); //1
就等同于
var f = function(a){
return a;
}
console.log(f(1)); //1
從上面可以看出，在箭頭左側的是代表參數，若參數只有一個，()可以省略，箭頭右側的表示函數代碼塊，若代碼塊里面是個返回值，則{}可以省略不寫
1.無參數情況若箭頭函數不需要參數，則左側用()代替，如下：
var f = () => {
console.log("無參數情況");
}
f();//無參數情況
2.有參數情況
var f = (a, b) => {
return a+b;
}
console.log(f(1,2)); //3
var f = a => a; console.log(f(1)); //1
如果箭頭函數有參數，則需要用()括起來，若只有一個參數，括號可以省略不寫
在這里要注意一個情況，就是當箭頭函數直接返回一個對象的時候，如下：
var f = () => {name:"liming", age:22}; //報錯
console.log(f());
這樣寫肯定是報錯的，因為{}執行時變成代碼塊，會去運行代碼，所以要用一個()括起來才可以，如下:
var f = () => ({name:"liming", age:22});
console.log(f());
執行結果為：
{name: "liming", age: 22}
以上這個寫法才是正確的
箭頭函數注意點 1.this指向 var a = "全局變量a";
var obj={
a:"局部變量a",
fn1:function(){
console.log(this.a);
},
fn2:()=>{
console.log(this.a);
}
}
obj.fn1();
obj.fn2();
輸出結果為：
局部變量a 全局變量a
普通函數的this我們知道是指向最近的一個對象，而箭頭函數的this實際上是指向定義時的this，比如把上面代碼改為：
var obj={
a:"局部變量a",
fn1:function(){
console.log(this.a);
},
fn2:()=>{
console.log(this.a);
}
}
obj.fn1();
obj.fn2();
輸出結果為：
局部變量a undefined
此時因為箭頭函數是指向全局的，全局沒有變量a則輸出undefined,這里的fn1和fn2都是全局函數，所以箭頭函數this指向的是定義時的全局，而普通函數的this指向的是最近的一個對象
上面如果那個例子不太明白，可以再看下如下例子：
this.a = "全局a";
function Timer() {
this.a = "timer中的a";
// 普通函數
setTimeout(function () {
console.log("普通函數:", this.a);
});
// 箭頭函數
setTimeout(() => {
console.log("箭頭函數:",this.a);
});
}
new Timer();
輸出結果為：
普通函數: 全局a 箭頭函數: timer中的a
這里普通函數會指向全局是因為，距離普通函數最近的對象是setTimeOut,而setTimeOut是掛在全局作用域中，所以普通函數指向全局，箭頭函數指向的是定義時的對象，箭頭函數是在Timer中定義的，所以箭頭函數指向Timer
如果把以上代碼改為如下：
this.a = "全局a";
function Timer() {
this.a = "timer中的a";
// 普通函數
setTimeout(function () {
console.log("普通函數:", this.a);
});
// 箭頭函數
setTimeout(() => {
console.log("箭頭函數:",this.a);
});
}
Timer();
輸出結果：
普通函數: timer中的a 箭頭函數: timer中的a
這個是為什么呢，因為如果是new Timer相當于是構造函數，構造了一個對象，如果是Timer()就相當于是調用函數Timer()這兩者還是有區別的，如果是調用函數Timer()，這個時候this的指向都是全局，在局部修改this.a會覆蓋全局的this.a
通過以上，我們可以知道普通函數跟箭頭函數this指向的區別是：
普通函數： this指向最靠近的一個對象
箭頭函數： this指向定義時的對象，也就是說箭頭函數一旦定義完成，它的指向是固定的，沒法改變，它的指向是定義時所在的作用域，而不是執行時的作用域
2.不可以當做構造函數箭頭函數不可以當做構造函數，也就是不可以new一個，否則會報錯，如下：
var fn = ()=>{
console.log("123");
}
new fn(); //Uncaught TypeError: fn is not a constructor
以上會報錯，因為箭頭函數本身沒有屬于自己的this，所以箭頭函數不可以當做構造函數，也因為箭頭函數沒有自己的this，所以call()、apply()、bind()這些方法去改變this的指向對箭頭函數也是無效的，如下：
this.x = "outer";
(function() {
console.log([
(() => this.x).bind({ x: "inner" })()
]);
})();
輸出結果為：
["outer"]
把箭頭函數通過bind綁定可見無效，箭頭函數還是指向全局
以上是個人總結，有什么不足之處歡迎留言探討！
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95719.html
前言 今天就簡單總結一下promise的用法，在用promise之前，我們要先了解一下什么promise，這個東西是用來干什么的？ 通俗易懂的講，promise其實就是一個構造函數，是用來解決異步操作的，我們平時其實還是會用到挺多的，比如我們經常會嵌套一層層的函數 step1(function (value1) { step2(value1, function(value2){ s...
摘要：真正被賦值的是后者，而不是前者。第一行語句中，模式是取數組的第一個成員，跟圓括號無關第二行語句中，模式是，而不是第三行語句與第一行語句的性質一致。本文參考鏈接主要是看了阮一峰老師的文章，自己整理了一下，供后期自己看筆記用的 1.數組的解構賦值 我們知道以前我們給一個變量賦值要這樣如下： let a = 1; let b = 2; let c = 3; 但是ES6出來之后，我們可以這樣：...
摘要：命令新增了命令，跟類似，都是用來聲明變量的不允許重復聲明報錯不存在變量提升報錯正確寫法為既要先定義，后面才能有這個值，否則會報錯，如果改成會提示未定義，但是就直接報錯了暫時性死區只要在塊級作用域里面存在則它所聲明的變量就綁定在這個塊級作用域 let命令 ES6新增了let命令，跟var類似，都是用來聲明變量的 1.不允許重復聲明 { let a = 1; let a =...
摘要：當控制流遇到這樣的語句時，它立即跳出當前函數并將返回的值賦給調用該函數的代碼。函數聲明不是常規的從上到下的控制流的一部分。該函數調用控制臺的來完成它的工作，然后將控制流返回到第行。 來源：ApacheCN『JavaScript 編程精解 中文第三版』翻譯項目原文：Functions 譯者：飛龍 協議：CC BY-NC-SA 4.0 自豪地采用谷歌翻譯 部分參考了《JavaScript ...
摘要：事件與節點每個瀏覽器事件處理器被注冊在上下文中。事件對象雖然目前為止我們忽略了它，事件處理器函數作為對象傳遞事件對象。若事件處理器不希望執行默認行為通常是因為已經處理了該事件，會調用事件對象的方法。 來源：ApacheCN『JavaScript 編程精解 中文第三版』翻譯項目原文：Handling Events 譯者：飛龍 協議：CC BY-NC-SA 4.0 自豪地采用谷歌翻譯 部分...
閱讀 1213·2021-09-26 09:55
閱讀 3157·2019-08-30 15:55
閱讀 947·2019-08-30 15:53
閱讀 2285·2019-08-30 13:59
閱讀 2367·2019-08-29 13:08
閱讀 1098·2019-08-29 12:19
閱讀 3289·2019-08-26 13:41
閱讀 411·2019-08-26 13:24
