JavaScript中的this浅谈

对大多数JavaScript的初学者来说，this的取值一直困扰着大家，我曾经为了学习this也看了不少这方面的介绍。现在把我对this的理解写出来，分享给大家，如果我这篇随笔有幸帮到了大家，我会感到非常高兴。好了，废话少说，来点实在的。

一句话，函数中的this始终指向调用该函数的对象。

这就像一个公式，下面我们套用一下公式看看是不是这样。

var name = 'hello world';
function test(){
    alert(this.name);
    alert(this === window);
}
test();//等效于window.test()，输出结果是'hello world'，true

上面的代码中test()是一个全局函数，默认的属于window对象，所以相当于window对象调用的该函数，this的值等于window，符合那个公式。

下面这块代码展示了对象中this的指向

var name = 'foo';
var age = 20;
var person = {
    name: 'hello world',
    age: 22,
    sayHello:function(){
        alert('I\'m ' + this.name + ', and I\'m ' + this.age + ' years old');
    }
};
person.sayHello();//I'm hello world, and I'm 22 years old

上面的代码中调用sayHello()函数的对象是person，按照公式this的值应该是person，而事实也正是如此。

下面的代码展示了另一种声明对象的方式中this的取值

var name = 'foo';
var age = 20;
var Person = function(_name, _age){
    this.name = _name;
    this.age = _age;
    this.sayHello = function(){
       alert('I\'m ' + this.name + ', and I\'m ' + this.age + ' years old');    
    }
};
10 var p1 = new Person('Hello World', 22);
var p2 = new Person('ScriptJava', 20);
p1.sayHello();//I'm Hello World, and I'm 22 years old，this指向p1
p2.sayHello();//I'm ScriptJava, and I'm 20 years old，this指向p2

 如果要修改JavaScript中this的指向，可以用call()和apply()方法。这两个的方法功能相同，用法类似，先看下面的代码。注：以下的代码摘自Professional JavaScript for Web Developers

window.color = "red";
var o = { color: "blue"};

function sayColor(){
    alert(this.color);
}

sayColor(); //"red"
o.sayColor = sayColor;
o.sayColor(); //"blue"

第10行的结果表明this的值变成了对象o，下面的代码可以实现同样的效果。

window.color = "red";
var o = {color: "blue"};

function sayColor(){
     alert(this.color);  
}

sayColor.apply(o);//"blue"
sayColor.call(o);//"blue"

可以发现，sayColor当中的this已经变成了o，call()和apply()方法的区别在于接收参数的方式不同，如下面的代码所示

function sum(x, y){
    var sum = x + y;
    alert(sum);
}
sum.apply(this, [1, 2]); //3
sum.call(this, 1, 2); //3

这里的this指向window对象。从上面的代码中你应当能看出apply()和call()的区别了。

博客刚开通不久，写作水平有限，不妥之处欢迎和大家交流。（完）^_^