前言
相信很多小伙伴们都被this 的指向问题所折磨过,this 它到底指向哪啊? 今天我们就来聊聊如何判断this 指向哪里,一盏茶的功夫让小伙伴们开心一整天!
文中所实例代码都运行在Chrome浏览器的Console控制台中。
先带大家了解一个概念,在浏览器中运行代码时,window对象
就是全局,因此所有在全局作用域中声明的变量,函数都会变成window对象的属性和方法。
this 的绑定规则
- 默认绑定 --- 函数在哪个词法作用域里生效,this就指向哪里
我们用通俗易懂的话来说:
在非严格模式下,当函数调用时无任何调用前缀的情景,也就是直接调用函数,(后面我们会介绍非直接调用的情况),this 指向全局,在浏览器中也就是window
我们来看一个简单的例子:
var a = 1 function foo() { console.log(this.a); } foo()
在此例子中,foo()就是直接调用,那么函数中的this
就指向全局区,那么this.a
输出1
再来看一个稍微复杂的例子:
var b = 2 function foo() { // [[scope]] var b = 1 function bar() { baz() } function baz() { console.log(this.b); } bar() } foo()
这个例子中无论函数声明在哪,在哪调用,由于函数调用时前面并未指定任何对象,而是直接调用,这种情况下this
指向全局,输出2
2. 隐式绑定 --- 当函数被一个对象所拥有,再调用时,此时this会指向该对象
如果函数被一个对象作为方法所调用时,那么this
就会指向该对象。我们来看一个例子:
function foo() { console.log(this.a); } var obj = { a: '来颗奇趣蛋', func: foo } obj.func()
foo函数体
被对象obj
所拥有,当obj调用时,this
就会指向obj
我们来看看输出结果:
3. 隐式丢失 --- 当函数被多个对象链式调用时,this指向引用函数的对象
通俗一点来说呢,比如有两个对象object 和 obj,例如这样调用一个函数,obj.object.func()
,那么this会指向object(object所引用),也可以说就近原则
我们来看一个例子:
function foo() { console.log(this.a); } var obj2 = { a: '菌菌', obj: obj } var obj = { a: '来颗奇趣蛋', func: foo } obj2.obj.func()
当obj
被obj2
所拥有时,而函数被obj
所拥有,当函数被这样调用时obj2.obj.func()
,this指向所引用函数的obj
让我们来看看输出:
怎么样,是不是解决了你对this指向的问题的一大半疑惑,下篇文章我会讲剩下的两种方法,小伙伴们记得一起来看看。
今天的内容就到这啦,如果你觉得小编写的还不错的话,或者对你有所启发,请给小编一个辛苦的赞吧