this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象。
this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的
普通函数中的this指向:
1.在全局模式下,this的指向就是window
2.在函数作用域下
- 在非严格模式下, 如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window。
- 在严格模式下,如果有一个函数中有this,他也没有被上一级的对象所调用,那么this的指向就是undefined。
- 果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。
- 如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象
3.在对象中this的指向就是当前该对象。
改变this的方法
1.new关键字改变this指向
function Fn(){
this.user = "粒子";
}
var a = new Fn();
console.log(a.user); //粒子
用变量a创建了一个Fn的实例(相当于复制了一份Fn到对象a里面),此时仅仅只是创建,并没有执行,而调用这个函数Fn的是对象a,那么this指向的自然是对象a,那么为什么对象a中会有user,因为你已经复制了一份Fn函数到对象a中,用了new关键字就等同于复制了一份
2.call()
var a = {
user:"粒子",
fn:function(){
console.log(this.user); //粒子
}
}
var b = a.fn;
b.call(a); //若不用call,则b()执行后this指的是Window对象
把b添加到第一个参数的环境中,简单来说,this就会指向那个对象。
call方法除了第一个参数以外还可以添加多个参数,如下:
var a = {
user:"粒子",
fn:function(e,ee){
console.log(this.user); //粒子
console.log(e+ee); //3
}
}
var b = a.fn;
b.call(a,1,2);
3.apply()
apply方法和call()方法类似,它也可以添加多个参数,但是不同的就是apply的第二个参数他必须就是一个数组如下:
var a = {
user:"小明",
fn:function(e,ee){
console.log(this.user); //小明
console.log(e+ee); //11
}
}
var b = a.fn;
b.apply(a,[10,1]);
4.bind()方法
bind()方法他返回的就是一个被修改后的函数。
var a = {
user:"小明",
fn:function(){
console.log(this.user);
}
}
var b = a.fn;
var c = b.bind(a);
console.log(c); //function() { [native code] }
同样bind也可以有多个参数,并且参数可以执行的时候再次添加,但是要注意的是,参数是按照形参的顺序进行的。
var a = {
user:"小明",
fn:function(e,d,f){
console.log(this.user); //小明
console.log(e,d,f); //10 1 2
}
}
var b = a.fn;
var c = b.bind(a,10);
c(1,2);
总结一下:call和apply都是改变上下文中的this并立即执行这个函数,bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加,这是它们的区别。
react里面的函数的this的指向问题
在JSX回调中你必须注意 this 的指向。 在 JavaScript 中,类方法默认没有 绑定 的。如果你忘记绑定 this.handleClick 并将其传递给onClick,那么在直接调用该函数时,this 会是 undefined 。
解决方法
1.使用箭头函数
handleClick = () =>{
console.log(this)
}
<p><button onClick={this.handleClick}>改变count</button></p>
2.可以在构造函数里面进行this的绑定
constuctor(){
super()
this.handleClick = this.handleClick.bind(this)
}
handleClick(){
console.log(this)
}
<p><button onClick={this.handleClick}>改变count</button></p>