理解ES6 “箭頭”函數(shù)（=>）

bawn 發(fā)布于2019-08-21 17:37 / 3054人閱讀

摘要：允許使用箭頭定義函數(shù)。等同于如果箭頭函數(shù)不需要參數(shù)或需要多個參數(shù)，就使用一個圓括號代表參數(shù)部分。如果箭頭函數(shù)直接返回一個對象，必須在對象外面加上括號。匿名函數(shù)的指向。

ES6允許使用“箭頭”（=>）定義函數(shù)。

var f = v => v;

等同于：

var f = function(v) {
  return v;
};

如果箭頭函數(shù)不需要參數(shù)或需要多個參數(shù)，就使用一個圓括號代表參數(shù)部分。

var f = () => 5;
// 等同于
var f = function () { return 5 };


var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

//若你想使用標準的函數(shù)體，或者函數(shù)體內(nèi)可能有更多的語句要執(zhí)行，則要用大括號將函數(shù)體括起來，并明確定義返回值。
var sum = (num1, num2) => { return num1 + num2; }

//如果箭頭函數(shù)直接返回一個對象，必須在對象外面加上括號。
var getTempItem = id => ({ id: id, name: "Temp" });

//以上例子出處  https://www.cnblogs.com/huansky/p/5684867.html

至此，我們已經(jīng)理解怎么用它了；那么它跟普通的function定義函數(shù)最大的區(qū)別是什么？

箭頭函數(shù)中的 this

箭頭函數(shù) 中的 this，指向的是它定義時所在的this；實際上，箭頭函數(shù)沒有自己的this；它的作用域是詞法作用域，會跟著作用域鏈找到最近的一個this引用；

var name = 456
var obj = {
        name:"123",
        fn:function () {
            console.log(this.name);//123 對象的屬性方法中的this 指向?qū)ο蟆?            setTimeout(function () {
                console.log(this.name)//456 匿名函數(shù)的 this 指向window。
            },1000);
            setTimeout(()=>{console.log(this.name)},2000);//123 找到this是指向obj的；
            obj.do(()=>{console.log(this)});//obj對象 找到定義時的this是指向obj的（即obj.fn 的this）；
        },
        do:function (fn) {
            fn();
        }
    };
    obj.fn();

匿名函數(shù)的 this 始終是指向window 的

var obj = {
          fn:function () {
            (function () {
                console.log(this); //window
            })();
            console.log(this); //obj
        }
    }
    obj.fn();

普通函數(shù)的this 可以這樣概括

（來自知乎）

函數(shù)執(zhí)行時，this 總是指向調(diào)用該函數(shù)的對象，規(guī)則可以簡單概括如下：

有對象就指向調(diào)用對象
沒調(diào)用對象就指向全局對象
用new構(gòu)造就指向新對象
通過 apply 或 call 或 bind 可以改變this的指向

其實也就是根據(jù)點的左邊是什么東西來判斷。

this用于繼承

方法 call ，可以改變執(zhí)行上下文環(huán)境。通過call去拿到其他對象的方法，繼承為自己的方法；

function superClass () {     
    this.a = 1;     
    this.print = function () {         
        console.log(this.a);     
    } 
}  
function subClass () {     
    superClass.call(this);     
    this.print(); 
}  
subClass(); // 1

subClass通過call方法，繼承了superClass的print方法和a變量，同時subClass還可以擴展自己的其他方法

GPU云服務器云服務器箭頭函數(shù) 這個函數(shù)怎么理解 ES6 es6-系列

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89784.html

面試題目別有洞天 -> 從es6優(yōu)雅解法，到降級polyfill，再到redux reduce

摘要：每次被執(zhí)行時，和被傳入，這個根據(jù)進行累加或者是自身消減，英文原意，進而返回最新的。之前的一篇文章：從一道面試題，到我可能看了假源碼討論了bind方法的各種進階Pollyfill，今天再分享一個有意思的題目。從解這道題目出發(fā)，我會談到數(shù)組的Reduce方法，ES6特性和Redux數(shù)據(jù)流框架中Reducer的命名等等。一道典型的題目，卻如唐代詩人章碣《對月》詩中所云：別有洞天三十六，水...

econi 2019-08-21 11:33 評論0 收藏0
讓你的代碼更簡短，更整潔，更易讀的ES6小技巧

摘要：讓你的代碼更簡短，更整潔，更易讀的小技巧寫在文章前面這篇文章翻譯自文章就代碼整潔方面對進行了總結(jié)。如果你正在使用的代碼使用的語法，這個是你需要注意的事情。更多還提供了我們很多很多其他的方式來使我們的代碼更簡潔，更易讀，以及更穩(wěn)定。讓你的代碼更簡短，更整潔，更易讀的ES6小技巧寫在文章前面這篇文章翻譯自ES6 tips and tricks to make your code cl...

wpw 2019-08-26 11:42 評論0 收藏0
學習js中的'this'關鍵字

　　在JavaScript中‘this’關鍵字是一個非常重要的概念，我們雖然知道它重要，但它也十分的晦澀難懂，也給我們學習造成不小的困擾?！　∈裁词?#39;this'關鍵字　　'this'關鍵字是為每個執(zhí)行上下文(每個函數(shù))創(chuàng)建的一個特殊變量；所以一般來說，在使用'this'關鍵字的函數(shù)中，'this'永遠是取其所有者的值。總結(jié)一句話是該函...

3403771864 2022-10-23 14:17 評論0 收藏0