理解一下this的困惑

117 阅读1分钟
通常用来解释this的例子是根据
var foo=function(){
console.log(this.name)
}

obj={
name:'内部',
print:foo
}

直接调用
1 执行方式 foo()
打印undefined,因为直接调用时 this 指向window,全局未定义name 所以打印undefined
2 执行方式 obj.print()
打印 '内部',因为这种方式调用时,this指向的是obj对象,obj内定义了name属性,所以打印出内部

上面的解释结束了。
假如代码是这个样子的,会如何执行

var foo=function(){
this.name='方法'
console.log(this.name)
}

obj={
name:'内部',
print:foo
}

还是两种方式调用
foo() 打印 ‘方法’;如下图,因为直接调用时,this指向的window,
相当于给全局环境定义了name属性,所以,console.log(this.name);打印出全局的变量name


obj.print() 打印 ‘方法’;如下图,因为obj.print();调用时foo函数内的this指向确实是obj对象,
但是this.name='方法',执行之后,相当于把obj内部变量name重新赋值了,所以依然打印‘方法’


总结一下,其实不管foo方法内部加不加this.name='方法'这一行代码;
两种方式前后,this指向都是一样的。
只是,在obj指向的基础上,针对赋值发生了变化而已。


以上是针对函数内部修改后

假如我们将函数修改为箭头函数呢,

var foo=()=>{
debugger;
this.name='方法'
console.log(this.name)
}

obj={
name:'内部',
print:foo
}

因为箭头函数是,定义时决定this指向,

foo函数是在全局环境中定义的,所以this指向会一直指向window
验证一下
obj.print()

this 果然指向了window而不是obj