Javascript中this的使用

JavaScript 中的 this 一直是让我迷惑的部分,本文内容基本来自于 这篇文章

在一个 function 的执行过程中，如果变量的前面加上了 this 作为前缀的话，如this.myVal，对此变量的求值就从 this 所表示的对象开始.

this 的值取决于 function 被调用的方式，一共有四种，具体如下：

1, 如果一个 function 是一个对象的属性，该 funtion 被调用的时候，this 的值是这个对象。如果 function 调用的表达式包含句点（.）或是 []，this 的值是句点（.）或是 [] 之前的对象.举个例子:

var some = {
    name: "zhangsan",
    speak: function(){ //此时function是some对象的一个属性(speak)
        return this.name; //此时的this就是只some对象
    }
}
console.log(some.speak()); //输出"zhangsam"

2, 如果一个 function 不是作为一个对象的属性，那么该 function 被调用的时候，this 的值是全局对象.当一个 function 中包含内部 function 的时候，如果不理解 this 的正确含义，很容易造成错误.这是由于内部 function 的 this 值与它外部的 function 的 this 值是不一样的。在下面的例子中，在myObj的func中有个内部名为inner的 function，在inner被调用的时候，this 的值是全局对象，因此找不到名为myVal的变量.这个时候通常的解决办法是将外部 function 的 this 值保存在一个变量中（此处为self），在内部 function 中使用它来查找变量.

var myObj = {
  myVal : "Hello World",
  func : function() {
     console.log(typeof this.myVal);    // 结果为 string
     console.log(this.myVal);    // 结果为 "Hello World"
     var self = this;
     function inner() {
       console.log(typeof this.myVal);  // 结果为 undefined
       console.log(typeof self.myVal);  // 结果为 string
       console.log(self.myVal);  // 结果为 "Hello World"
     }
     inner();
  }
 };

myObj.func();

3, 如果在一个 function 之前使用 new 的话，会创建一个新的对象，该 funtion 也会被调用，而 this 的值是新创建的那个对象.举个例子:

function User(name) {
    this.name = name
};
var user1 = new User("Alex");

console.log(user1.name); //输出 "Alex"

在上面的例子中，通过调用new User(“Alex”)，会创建一个新的对象，以user1来引用，User这个 function 也会被调用，会在user1这个对象中设置名为name的属性，其值是Alex.

4, 可以通过 function 的 apply 和 call 方法来指定它被调用的时候的 this 的值. apply 和 call 的第一个参数都是要指定的 this 的值，两者不同的是调用的实际参数在 apply 中是以数组的形式作为第二个参数传入的，而 call 中除了第一个参数之外的其它参数都是调用的实际参数.举个例子:

func.apply(anotherObj, [arg1, arg2]) //func调用时候的 this 指的是anotherObj,两个参数分别是arg1和arg2
func.call(anotherObj, arg1, arg2) //同上

Over！