如何理解JS中的this指向问题
2016-10-22 13:52
603 查看
如何理解JS中的this指向问题
this中的最终指向的是那个调用它的函数(一定要记住这句话,但是这句话仍然有问题,下文会做解释)this在函数式编程和面向对象编程的过程中,能帮助简化我们的代码,是非常重要的一个知识点。
[b]废话不多说,直接上例子[/b]
function aa(){ var men = "leon"; console.log(this.men);//undefined console.log(this);//window } aa();
按照上面我们说的那样,this的最终指向的是调用它的对象,这里的函数aa实际上是最终指向的window,而window里面是没有men的,所以第一个是undefined,第二个则是window。
例子2:
var bb ={ 'men' : "leon", fn:function(){ console.log(this.men)//leon } } bb.fn();
说明:这里的this指向的是对象bb,因为你调用这个fn是通过bb.fn()执行的。所以我们可以说明一点,this的指向在函数创建的时候是决定不了的,在调用的时候才能够决定,谁调用就指向谁。
BUT:
上面的两个例子其实严格来说也并不是太准确,这也是我们很多人一直困惑的一个点,请看下面的例子。
例子3:var bb ={ 'men' : "leon", fn:function(){ console.log(this.men)//leon } } window.bb.fn();
说明:
window是js中的全局对象,我们创建的变量实际上是给window添加属性,而一般情况我们经常省略window,所以这里可以用window.bb
例子3和例子2的代码执行结果是一样的,但是这里this为什么不指向window呢?
我们再来看个列子:
var cc = { a:99, b:{ a:100, fn:function(){ console.log(this.a);//100 } } } cc.b.fn();
这里的函数是由最外层的cc点出来的,但是this和上面一样并没有执行它,而是最终指向的b;所以我们可以推翻一开始说的那句话,并且总结如下
情况1:如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window(但是这里需要说明的是js的严格版中this指向的不再是window,这个问题在这里不谈)
情况2:如果一个函数中有this,这个函数有被上一级的对象所调用,this指向的是就是它上一级的对象。
情况3:如果一个函数中有this,这个函数包含多个对象,尽管这个函数是被最外层的对象所调用,this也只是指向的它上一级的元素
总结:在上面三种情况下,this指向的只能是它上一级的对象
相关文章推荐
- 彻底理解JS中This指向问题
- js 深入理解this指向问题
- 理解js中this的指向问题
- 小白也能彻底理解js中this的指向问题
- 深入理解js函数的作用域与this指向
- 如何用enable_shared_from_this 来得到指向自身的shared_ptr 及对enable_shared_from_this 的理解
- JavaScript中函数里this的值到底指向谁?如何理解上下文context?
- 理解 backbone.js 中的 bind 和 bindAll 方法,关于如何在方法中指定其中的 this,包含apply方法的说明[转载]
- 关于js中this的指向问题
- 彻底理解js中this的指向
- 如何更好的理解js中的this,分享2段有意思的代码
- js绑定事件this指向发生改变的问题解决方法
- 彻底理解js中this的指向
- js中的this指向问题及解决方案
- js中this指向问题实例详解
- 彻底理解js中this的指向
- js如何判断函数或者方法中的this指向谁?四句话
- 如何解决attachEvent函数时,this指向被绑定的元素的问题?
- 如何解决attachEvent函数时,this指向被绑定的元素的问题?
- Js中的this指向问题