javascript中this指向问题

本文参考http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html

this是JavaScript的一个关键字,它代表函数运行时自动生成的一个内部对象,只能在函数内部使用,比如:

function test () {
     this.x = 1;  
}

随着函数使用场合的不同,this的指向会发生变化。但有一个总的原则就是,this指向最后一个调用函数的那个对象。

下面分四种情况,讨论一下this的用法;

情况一:纯粹的函数调用

这是函数通常用法,属于全局性调用,this指向全局对象;

下面这段代码运行结果为1:

function test () {
     this.x = 1;
     alert(this.x);
}
test(); // 1

此处运行结果为1,我开始以为当前的this指向的是函数本身,其实指向的是全局对象

代码做下面处理:

var x = 1;
function test () {
     alert(this.x)
}
test(); // 1

全局中定义一个x变量,在函数内部使用this.x结果是1;

再变一下:

var x = 1;
function test () {
    this.x = 2;
    alert(this.x)
}
test(); // 2

全局变量x的值在函数内部被改变。

情况二:作为对象方法的调用

函数还可以作为某个对象方法的调用,这时this指向的就是引用它的对象;

function test () {
   alert(this.x)
}
var o = {};
o.x = 1;
o.m = test;
o.m();  // 1

情况三:作为构造函数调用

所谓构造函数,就是通过这个函数生成一个对象,这时this就是指向这个新对象;

function test () {
    this.x = 1;
}
var o = new test();
console.log(o); // {x: 1}
alert(o.x); // 1

还是跟上面一样,我在函数内部改变一下全局变量的值,看是否能够成功:

var x = 1;
function test () {
    this.x = 2;  
}
var o = new test();
alert(o.x); // 2
alert(this.x); // 1 

从上面代码可以看到构造函数中的this只指向生成的对象,无法改变全局变量。

情况四:apply调用

apply()是函数对象的一个方法,它的作用是改变函数调用的对象,它的第一个参数就是表示调用这个函数的对象,因此this指向的就是第一个参数;

var x = 1;
function test () {
    alert(this.x)
}
var o = {};
o.x = 2;
o.m = test;
o.m.apply(); // 1,apply()函数参数为空时默认调用全局对象,因此,此时运行的结果为1,证明this指向全局对象
o.m.apply(o); // 2,此时this指向对象o

最后用代码解释一下为什么说this指向最后调用它的对象

var a = 666;
var o = {
   a: 1,
   b: {
       a: 2,
       fn: function () {
           console.log(this.a)  
       }
   }
}
o.b.fn(); // 2,此时调用函数的对象是a对象中的b对象,所以运行结果为2
var test = o.b.fn; // 这只是一个赋值的过程,并没有执行
test(); // 666,此时调用test()方法的是全局对象

 

posted @ 2017-07-27 14:50  长镜头  阅读(127)  评论(0编辑  收藏  举报