JavaScript · ES6箭头函数及this的指向

1. 箭头函数用例

// 箭头后直接跟表达式，相当于return
() => 1;
(x) => x + 1;
x => x * 1;

Tips:

1. 如果参数大于1个，前面必须加()，例如:(x,y) => x + y;
2. 如果返回一个对象，还是可以不用return，但也不能： () => {name:'hx'}; // 语法冲突 ，应该：() => ({name:'hx'})

// 箭头后跟花括号函数体，需要手动return，否则返回undefined
() => {
    console.log(1);
}

var fn = x => {
    x + 1;
    console.log(x + 2);
    return x + 3;
}
var i = fn(1);
// 3 (控制台)
// 4 (函数执行后的实际返回值)
console.log(i + 1);
// 5 (4 + 1)

2. this的指向

• 情形1：this的指向是在函数执行时确定的（箭头函数除外）
• 情形2：箭头函数中的this是在定义时确定的（此时相当于定义在箭头函数外）
• 情形3：自执行函数中的this指向window（setTimeout等）
• 情形4：构造函数中的this指向构造出来的实例
• 情形5：事件绑定函数中的this指向绑定的当前元素
• 情形6：通过call、apply、bind可指定this指向（但在箭头函数中无法指定）

例（情形1）：

var fn = function() {
 console.log(this)
}
fn(); 
// 相当于window.fn()，所以指向window

var obj = {
    name: 'test',
    fn: function() {
        console.log(this)
    }
}
obj.fn(); 
// fn由obj执行，所有指向obj

var obj = {
    name: 'test',
    fn: function() {
        console.log(this)
    }
}
var f = obj.fn;
f(); 
// 相当于window.f = obj.fn; window.f()
// 所以指向window

例（情形2）：

var obj = {
    name: 'test',
    fn: () => {
        console.log(this)
    }
}
obj.fn(); 
// 箭头函数中的this在箭头函数上一级作用域
// 所以指向window

var obj = {
    name: 'test',
    fn: function() {
        var f = () => {
            console.log(this)
        }
        f();
    }
}
obj.fn();
// 相当于console.log(this)在他父级作用域
// 也即function() {console.log(this); var f...}
// 所以this指向obj对象
// 请仔细对比下一个例子（情形3）

例（情形3）：

var obj = {
    name: 'test',
    fn: function() {
        var f = function() {
            console.log(this)
        }
        f();
    }
}
obj.fn();
// 不同于上例，f有自己的this作用域，且f自执行
// 因此指向window

setTimeout(function() {
    console.log(this);
},1000)
// setTimeout的第一个参数自执行，因为指向this
// 如果setTimeout里是箭头函数呢？见下个例子

var obj = {
    name: 'test',
    fn：function() {
        setTimeout(() => {
            console.log(this)
        },1000)
    }
}
obj.fn();
// 虽然箭头函数自执行，但箭头函数中不存在this作用域
// 因此相当于：function() {console.log(this); setTimeout...}
// 等同于obj.fn()，this指向obj

例（情形4）：

function Student(name) {
    this.name = name;
    console.log(this);
}
var stu = new Student('test');
// this指向Student实例 {name: 'test'}

例（情形5）：

var node = documentElementById('div');
node.addEventListener('click',function() {console.log(this)});
// this指向Element节点
// 如果监听器里用箭头函数呢？见下个例子

var node = documentElementById('div');
node.addEventListener('click',() => {
   console.log(this)
});
// 箭头函数作用域中没有this
// 也即this在window中

例（情形6）：

var obj = {
    name: 'test',
    fn: function() {
        console.log(this)
    }
}
obj.fn();
// {name: "test", fn: ƒ}
obj.fn.call({age: 18});
// {age: 18}
obj.fn.apply({gender: 'male'});
// {gender: 'male'}
obj.fn.bind({grade: 2})();
// {grade: 2}

// call、apply、bind的用法及区别请参考其他文章，这里不再详述