普通函数的this指向和箭头函数的this指向小总结

普通函数：

1. 函数调用模式: fn() this ------> window

2. 方法调用模式: obj.fn() this ------> 指向调用者

3. 构造函数调用模式 this--------> 实例对象

4. 上下文调用模式, 想让this指向谁, this就指向谁

​ call apply bind

​ fn.call(this指向, 参数1, 参数2, 参数3); 调用函数, 并且指定 this 的指向

​ fn.apply(this指向, [参数1, 参数2, 参数3]); 如果参数很多, 可以放在一个数组中, 此时用 apply 比较方便

​ var newFn = fn.bind(this指向); 作用: 复制一个新函数, 并且绑定死 新函数的 this指向

5.看不见的调用:

(1) 定时器里面的 this, 指向 window

(2) 事件处理函数的 this, 指向事件源

箭头函数：

• 箭头函数:this指向定义时的对象,也就是说箭头函数一旦定义完成,它的指向是固定的，没法改变，

  它的指向是定义时所在的作用域，而不是执行时的作用域

• 个人总结:

  1.箭头函数的this指向是定义(声明)时就绑定的，和执行无关

  2.箭头函数没有自己的this,继承了当前所在环境执行时的this指向

• 遇到箭头函数解题:

​ 1.看当前箭头函数定义的环境是什么?(  小技巧：找上一个{}  )

​ 2.遇到箭头函数的执行或调用,忽略,不看,对箭头函数this指向没有影响

​ 3.判断当前环境执行时this指向谁,箭头函数的this就指向谁

栗子：

var url = "window";
function Antzone() {
let func = () => {
console.log(this.url);
}
func();
}
Antzone();

解析：箭头没有自己的this指向，它是定义在Antzone()函数中，当Antzone()调用的时候，this指向window，所以打印是window

 

栗子：

var name = 'window';
var obj = {
name: 'obj',
say: function () {
setTimeout(function () {
var b2 = () => this.name;
console.log(b2());
}, 100);
}
}
obj.say();

解析：b2()调用这个的时候，由于是箭头函数，没有自己的this，所以往上找，看他定义的环境，他是定义在延时器中，延时器中的this指向window，所以打印是window