箭头函式

Node.js 箭头函式
Categories:
Tags:

原始函式与箭头函式比较

原始函式

function greeting() {
  console.log('Hello, JavaScript!!');
}

greeting();

箭头函式

const greeting = () => {
  console.log('Hello, JavaScript!!');
};

greeting();

函式仅回传指定资料

函式本身只是要回传某个值的话，可以把 return 这个字省略掉，要回传的资料直接放在箭头后方

const greeting = () => console.log('Hello, JavaScript!!');
greeting();

const greeting = () => 'Hello, JavaScript!!';
console.log(greeting()); // 'Hello, JavaScript!!'

// 等同于这样写
const greeting = function () {
  return 'Hello, JavaScript!!';
};

箭头函式带入参数值

const add = (a, b) => a + b;
console.log(add(3, 5));

// 等同于这样写
const add = function (a, b) {
  return a + b;
};

箭头函式对 this 的影响

箭头函式当中的 this 绑定的是是定义时的物件，而不是使用时的物件，所以定义当下 this 指的是哪个物件就会是那个物件，不会随着时间改变

let id = 21;
let data = {
    id: 21,
};

fn.call(data);
arrowFn.call(data);

// 原本的 function
function fn() {
    // [fn] Object
    console.log(`[fn] ${this.constructor.name}`);

    setTimeout(function () {
        // [fn.setTimeout] Timeout
        console.log(`[fn.setTimeout] ${this.constructor.name}`);
    }, 100);
}

// 箭头函式 Arrow function
function arrowFn() {
    // [arrowFn] Object
    console.log(`[arrowFn] ${this.constructor.name}`);

    setTimeout(() => {
        // [arrowFn.setTimeout] Object
        console.log(`[arrowFn.setTimeout] ${this.constructor.name}`);
    }, 100);
}
  • this.constructor.name：这样子的写法只是避免在回传出物件的时候，把整个物件内容给传出来，而是仅传出该物件的名称。

使用 .call(data) 指定在函式都是使用 data 这个物件当作是 this 物件

fn.call(data) 传统函式

裡面的 setTimeout 执行的时间点是在 Stack 没有任务时，才从 task queue 拿出来执行，当时的执行环境是 global environment，所以 this 的绑定会依据当时执行的环境换掉

arrowFn.call(data) 箭头函式

裡面的 setTimeout 是在 data 物件当成是 this 时候定义的，所以箭头函式内的 this 会一直绑定为原呼叫的物件

参考资料