JavaScript学习日记 : Day7 - 函数(二)

ES6出现的Arrow function，看起来简短许多，但却充满许多陷阱(限制)，所以充份了解箭头函数後，再往後使用上也会减少一些Bug，或是fix bug也会比较有头绪。

1. 简短的语法

// 一般表达式写法
let buySomething = function(something) {
    return `我买了${something}`;
} 

// 箭头函式
let buySomething = (something) => {
    return `我买了${something}`;
}

// 箭头函式省略return
let buySomething = (something) => `我买了${something}`;

// 只有一个参数可升略括号
let buySomething = something => `我买了${something}`;

// 没有参数时，一定要有括号
let buySomething = () => '我买了一些物品';

2. 箭头函式没有arguments

let randomParamFunc = () => {
    console.log(arguments);
}

randomParamFunc(1,2,3,4,5)

// arguments is not defined

3. 绑定的this不同

• 一般函数 --- 呼叫的位置而定
• 箭头函数 --- 根据箭头函数定义时，所处的执行环境而定，this会指向父作用域的this。

一般函数的例子:

let user = {
    id:123,
    name:"Gino",
    height:180,
    getHeight() {
        return this.height
    }
};

console.log(user.getHeight()) // 180

let getHeight = user.getHeight
console.log(getHeight()) // undefined

箭头函数的例子:

function test() {
    return a => {
        console.log(this.a) // this会继承test function的this
    }
}

let objA = {
    a:100
}

let objB = {
    b:200
}

let test1 = test.call(objA);
test1.call(objB); // 100

test函数内部的箭头函数会补捉呼叫test函数时的this，所以会补捉到this绑定到objA，绑定後就无法再变更了，所以最後一行所显示出的是100而不是200，另外也可以发现在箭头函数中，是没办法使用apply、call、bind去指定this的指向。

4. 无法使用建构式

const makeCar = (brand, modal, color) => {
    this.brand = brand;
    this.modal = modal;
    this.color = color
}

const toyotaCar = new makeCar('Toyota','RAV4','white') //makeCar is not a constructor

5. DOM事件监听

针对DOM事件监听的函数中，this会指向全域(window)，导致无法正常运作。

let targets = document.getElementsByTagName('div');
let changeColor = () => {
    this.style.color = 'blue' // this指向window
}

for(let i = 0; i < targets.length; i++) {
    targets[i].addEventListener('click',changeColor)
}

6. Prototype中使用this

在prototype中新增方法如果有用到this，并不会如意的指向呼叫的object，而是会指向全域(window)。

function MakeCar(brand, modal, color){
    this.brand = brand;
    this.modal = modal;
    this.color = color
}

MakeCar.prototype.carInfo = () => {
    console.log(`这是一台${this.brand}，型号为${this.modal}的${this.color}色汽车`)
}

const car = new MakeCar('Toyota','RAV4','white');

car.carInfo(); // 这是一台undefined，型号为undefined的undefined色汽车

参考文章:

铁人赛：箭头函式 (Arrow functions)

当ES6箭头函式遇上this