- 记住，对于function函数，this就是call的第一个参数！！！
- 箭头函数的this定义：箭头函数的this是在定义函数时绑定的，而不是在执行过程中绑定的！！！
人话：箭头函数没有this，箭头函数里出现this的话，你就把它当做普通变量，看外面有没有定义，注意啦！所以也可以说，如果箭头函数里出现了this，那么这个this的值就是声明箭头函数时定义的this的值，且后面一直会是这个值，不会改变！！！- 普通函数的this定义：基于函数的执行环境绑定的！！！
人话：谁调用我谁就是我的this；
一、分析下面的代码
第一个
var a = {
name: "里面的name",
sayName: function () {
console.log("this.name = " + this.name);
},
};
var name = "外面的name";
function sayName() {
var sss = a.sayName;
sss(); //this.name = ?
a.sayName(); //this.name = ?
(a.sayName)(); //this.name = ?
(b = a.sayName)(); //this.name = ?
}
sayName();
1、首先遇到调用，一定先变成call()的形式！！！
-
sayName()>>sayName.call(null)，this为window； -
sss()>>sss.call(null)，this为window； -
a.sayName()>>a.sayName.call(a)，this为对象a，如果是对象后面接一个函数，那么call的第一个参数就是这个对象； -
(a.sayName)()>>a.sayName.call(a)，this为对象a，注意啦！！在js中，你加不加括号都是一样的！！！ -
(b = a.sayName)()>>b.call(null)，this为window，这个就相当于上面那个sss，先给b赋值，再调用b；
第二个
var length = 10;
function fn() {
console.log(this.length);
}
var obj = {
length: 5,
method: function (fn) {
fn();
arguments[0]();
},
};
obj.method(fn, 1);
2、还是需要先改写成call()的形式！！！
-
obj.method(fn, 1)>>obj.method.call(obj,fn, 1)，this是对象obj，arguments是参数组成的数组[fn, 1]； - 再往里看method函数，
fn()>>fn.call(null)，this为window；所以第一个打印出10； -
arguments[0]()>>arguments.0.call(arguments)，this为arguments，arguments的长度为2，所以打印出2；
二、定时器中的this
1、 如果没有特殊指向，setInterval和setTimeout的回调函数中this的指向都是window。这是因为JS的定时器方法是定义在window下的。
2、看下面的代码，因为两个setTimeout都是在window下调用的，所以它们回调函数里面的this都是window，第一个setTimeout里的回调函数是add函数，它里面的this指向window，所以改动的就不是fn里的num，第二个setTimeout打印fn.num时，那肯定还是1啦~~~
function Fn (){
console.log(this, 'this111')
this.num = 1
this.add = function (){
console.log(this, 'this222')
this.num++
}
}
const fn = new Fn()
setTimeout(fn.add,1000)
setTimeout(function(){
console.log(this, 'this333')
console.log(fn.num, 'num')
},2000)
image.png
3、改一下上面第一个setTimeout里的回调函数，把里面的this指向fn了
function Fn (){
console.log(this, 'this111')
this.num = 1
this.add = function (){
console.log(this, 'this222')
this.num++
}
}
const fn = new Fn()
setTimeout(fn.add.bind(fn),1000)
setTimeout(function(){
console.log(this, 'this333')
console.log(fn.num, 'num')
},2000)
image.png
4、再看一组
- 这就需要了解箭头函数的this指向和普通函数的this指向；
- 箭头函数的this定义：箭头函数的this是在定义函数时绑定的，而不是在执行过程中绑定的！！！
人话：箭头函数没有this，箭头函数里出现this的话，你就把它当做普通变量，看外面有没有定义，注意啦！所以也可以说，如果箭头函数里出现了this，那么这个this的值就是声明箭头函数时定义的this的值，且后面一直会是这个值，不会改变！！！ - 普通函数的this定义：基于函数的执行环境绑定的！！！
人话：谁调用我谁就是我的this； - 所以下面第一组代码中的setTimeout(fn.y, 1000)，虽然setTimeout的this是window，但是fn.y是箭头函数，它的this只需要看它定义时绑定的对象，那就是Fn函数；
function Fn(){
this.x = function(){
console.log(this, 'thisxxx')
}
this.y = ()=>{
console.log(this, 'thisyyy')
}
}
const fn = new Fn()
fn.x()
fn.y()
setTimeout(fn.x, 1000)
setTimeout(fn.y, 1000)
image.png
var obj = {
x: function(){
console.log(this, 'thisxxx')
},
y: ()=>{
console.log(this, 'thisyyy')
}
}
obj.x()
obj.y()
setTimeout(obj.x, 1000)
setTimeout(obj.y, 1000)
image.png
三、绑定this的方法
this的动态切换，固然为 JavaScript 创造了巨大的灵活性，但也使得编程变得困难和模糊。有时，需要把this固定下来，避免出现意想不到的情况。JavaScript 提供了call、apply、bind这三个方法，来切换/固定this的指向。
- Function.prototype.call()
- call方法的参数，应该是一个对象。第一个参数是this，如果第一个参数为空、null和undefined，则默认传入全局对象。
var n = 123;
var obj = { n: 456 };
function a() {
console.log(this.n);
}
a.call() // 123
a.call(null) // 123
a.call(undefined) // 123
a.call(window) // 123
a.call(obj) // 456
- Function.prototype.bind()
- bind方法用于将函数体内的this绑定到某个对象，然后返回一个绑定了这个对象的新函数。
var d = new Date();
d.getTime() // 1481869925657
var print = d.getTime;
print() // Uncaught TypeError: this is not a Date object.
上面代码中，我们将d.getTime方法赋给变量print，然后调用print就报错了。这是因为getTime方法内部的this，绑定Date对象的实例，赋给变量print以后，内部的this已经不指向Date对象的实例了。
bind方法可以解决这个问题;
var print = d.getTime.bind(d);
print() // 1481869925657
四、参考下面三篇文章
1、this的值到底是什么？https://zhuanlan.zhihu.com/p/23804247
2、如何确定this；https://zhuanlan.zhihu.com/p/25991271
3、JS里为什么要有this；https://zhuanlan.zhihu.com/p/30164164
网友评论