6 - 27 - 箭頭函數(shù)：基礎(chǔ) & this 關(guān)鍵字

原文：https://dev.to/bhagatparwinder/arrow-function-basics-34cm

簡介

箭頭函數(shù)是在 ES6 引入的，相對(duì)于函數(shù)表達(dá)式來說是一種更簡潔的方式。

箭頭函數(shù)名稱的來源是因?yàn)槭褂昧?=>。

語法

const functionName = (arg1, arg2, ... argN) => {
    return value;
}

例子

const multiply = (a, b) => {
    return a * b;
}
console.log(multiply(7, 8)); // 56
console.log(multiply(3, 2)); // 6

關(guān)鍵特點(diǎn)

• ? 箭頭函數(shù)類似匿名函數(shù)
• ? 若只有一個(gè)參數(shù)，可以省略小括號(hào)

   const square = x => {
       return x * x;
   }
   console.log(square(2)); // 4
   console.log(square(7)); // 49

這個(gè)情形的唯一陷阱是當(dāng)只有一個(gè)參數(shù)且需要解構(gòu)時(shí)：

    const foo = ({name = "New User"}) => name;
    
    console.log(foo({})); // New User
    console.log(foo({name: "Parwinder"})); // Parwinder

• ? 若沒有參數(shù)，需要添加上小括號(hào)

   const greeting = () => {
       return "Hello World!";
   }
   console.log(greeting()); // Hello World!

• ? 若函數(shù)體是一個(gè)表達(dá)式且只返回該表達(dá)式，我們可以移出小括號(hào)和 return 關(guān)鍵字。

   const greeting = () => "Hello World!";
   console.log(greeting()); // Hello World

現(xiàn)在我們知道了所有的關(guān)鍵特點(diǎn)，讓我們來重寫獲取正方形的面積：

const square = x => x * x;
console.log(square(4)); // 16

this 關(guān)鍵字

this 關(guān)鍵字和函數(shù)

JavaScript 中的 this 關(guān)鍵字是執(zhí)行上下文的一個(gè)屬性，它可能是全局的、函數(shù)內(nèi)的或者是 eval 中的。對(duì)于普通的函數(shù)，this 會(huì)根據(jù)調(diào)用它方式不同而變化。

1. 1. 函數(shù)直接調(diào)用時(shí)，this 指向全局對(duì)象；
2. 2. 用在構(gòu)造函數(shù)中，this 代表一個(gè)新對(duì)象；
3. 3. 當(dāng)函數(shù)作為一個(gè)對(duì)象的方法被調(diào)用，this 就代表那個(gè)對(duì)象；
4. 4. 在嚴(yán)格模式下， this 的值為 undefined；
5. 5. 在事件中，this 指向接收到事件的元素；

我們使用這種行為已經(jīng)很久了，以至于大多數(shù)JavaScript開發(fā)者都已經(jīng)習(xí)慣了。

函數(shù)直接調(diào)用，this 代表全局對(duì)象

function foo() {
    return this;
};
console.log(foo()); // window object in a browser, global object for node execution

用在構(gòu)造函數(shù)中，this 代表一個(gè)新對(duì)象

function Order(main, side, dessert) {
    this.main = main;
    this.side = side;
    this.dessert = dessert;
    this.order = function () {
        return `I will have ${this.main} with ${this.side} and finish off with a ${this.dessert}`;
    }
}
const newOrder = new Order("sushi", "soup", "yogurt");
console.log(newOrder.order());
// I will have sushi with soup and finish off with a yogurt

當(dāng)函數(shù)作為一個(gè)對(duì)象的方法被調(diào)用，this 就代表那個(gè)對(duì)象

const myObject = {
    main: "butter chicken",
    side: "rice",
    dessert: "ice cream",
    order: function () {
        return `I will have ${this.main} with ${this.side} and finish off with ${this.dessert}`;
    }
}
console.log(myObject.order());
// I will have butter chicken with rice and finish off with ice cream

上面的例子中，this 指向 myObject,可以獲取它上面的屬性。

在嚴(yán)格模式下， this 的值為 undefined

"use strict";
function foo() {
    return this;
};
console.log(foo() === undefined); // true

在事件中，this 指向接收到事件的元素