JavaScript之this指针深入详解

1、JavaScript之this指针深入详解中的含义非常丰富，它可以是全局对象，当前对象或者是任意对象，这都取决于函数的调用方式。函数有以下几种调用方式：作为对象方法调用、作为函数调用、作为构造函数调用、或调用。对象方法调用作为对象方法调用的时候，会被绑定到该对象。varpoint=x:0,y:0,moveTo:function(x,y)this.x=this.x+x;this.y=this.y+y;绑定到当前对象，即对象这里我想强调一点内容，就是是在函数执行的时候去获取对应的值，而不是函数定义时。即使是对象方法调用，如果该方法的函数属性以函数名的形式传入别的作用域，也会改变的指向。我举一个例子

2、：vara=aa:0,bb:0,fun:function(x,y)this.aa=this.aa+x;this.bb=this.bb+y;varaa=1;varb=aa:0,bb:0,fun:function()returnthis.aa;a.fun(3,2);document.write(a.aa);3,this指向对象本身document.write(b.fun();/0,this指向对象本身(function(aa)注意传入的是函数，而不是函数执行的结果varc=aa();document.write(c);/1,由于fun在该处执行，导致this不再指向对象本身，而是这里的window

3、)(b.fun);这样就明白了吧。这是一个容易混淆的地方。函数调用函数也可以直接被调用，这个时候被绑定到了全局对象。varx=1;functiontest()this.x=0;test();alert(x);/0但这样就会出现一些问题，就是在函数内部定义的函数，其也会指向全局，而和我们希望的恰恰相反。代码如下：varpoint=x:0,y:0,moveTo:function(x,y)/内部函数6.varmoveXfunction(x)6.varmoveXfunction(x)this.x=x;/this绑定到了全局TOC o 1-5 h z;/内部函数varmoveY=function(y)t

4、his.y=y;/this绑定到了全局;moveX(x);moveY(y);point.moveTo(1,1);point.x;/=0point.y;/=0 x;/=1y;/=1我们会发现不但我们希望的移动呢效果没有完成，反而会多出两个全局变量。那么如何解决呢？只要要进入函数中的函数时将保存到一个变量中，再运用该变量即可。代码如下：1.varpoint=2.x:0,3.y:0,4.moveTo:function(x,y)5.varthat=this;6./内部函数7.varmoveX=function(x)8.that.x=x;9.;10./内部函数11.varmoveY=function(y

5、)12.that.y=y;13.14.moveX(x);15.moveY(y);16.17.;18.point.moveTo(1,1);point.x;/=1point.y;/=1构造函数调用在中自己创建构造函数时可以利用来指向新创建的对象上。这样就可以避免函数中的指向全局了。varx=2;functiontest()this.x=1;varo=newtest();alert(x);/2或调用这两个方法可以切换函数执行的上下文环境，也就是改变绑定的对象。和比较类似，区别在于传入参数时一个要求是数组，一个要求是分开传入。所以我们以为例：varname=window;varsomeone=name

6、:Bob,showName:function()alert();varother=name:Tom;someone.showName();/Bobsomeone.showName.apply();/windowsomeone.showName.apply(other);/Tom可以看到，正常访问对象中方法时，指向对象。使用了后，无参数时，的当前对象是全局，有参数时，的当前对象就是该参数。箭头函数调用这里需要补充一点内容，就是在下一代标准中的箭头函数的始终指向函数定义时的，而非执行时。我们通过一个例子来理解varo=x:1,func:function()console.log(

7、this.x),test:function()setTimeout(function()this.func();,100);o.test();/TypeError:this.funcisnotafunction上面的代码会出现错误，因为的指向从变为了全局。我们需要修改上面的代码如下：varo=x:1,func:function()console.log(this.x),TOC o 1-5 h ztest:function()var_this=this;setTimeout(function()_this.func();,100);o.test();通过使用外部事先保存的就行了。这里就可以利用到箭头函数了，我们刚才说过，箭头函数的始终指向函数定义时的，而非执行时。所以我们将上面的代码修改如下：varo=x:1,func:function()console.log(this.x),test:function()setTimeout()=this.func(),100);o.test();这回就指向了，我们还需要注意一点的就是这个是不会改变指向对象的，我们知道和可以改变的指向，但是在箭头函数中是无效的。TOC o 1-5 h zvarx=1,o=x:10,test