自学-js篇-this关键字

this是JavaScript语言中的关键字。它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。简单的说this所在的函数是当做哪个对象的方法调用的，则该对象就是this所引用的对象，这在编写面向对象的JavaScript编程中起到重要作用。

下面有四种不同的调用方式的情况。

第一种：作为函数调用

function test(){
    this.a=1;
    alert(this.a);
}
test();  //弹出1

再次改变。

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

深层次进行改变。

var a=2;
function test(){
    this.a=1;
}
alert(a);    //弹出2
test();
alert(a);  //弹出1

这里先设置了一个test函数，当执行 test() 时，函数体内的this被绑定到全局对象，接下来执行赋值语句，所以会弹出a的值为1。

第二种：作为对象方法调用

var test={};
test.a=1;
test.b=function{
     alert(this.a);
}<pre name="code" class="html">test.b();

这里先设置了一个test对象，给对象添加了两个属性，当执行 test.b() 时，函数体内的指的是test对象，所以会弹出test对象中的a的值为1。

function test(){
    alert(this.a);
}
var test2={};
test2.a=1;
test2.b=test;
test2.b();

这里先设置了test函数和test2对象，给test2对象里设置两个属性，赋予a属性一个值，赋予b属性一个test函数，当执行 test2.b() 时，test2.b函数体内的指的是test2对象，所以会弹出test对象中的a的值为1。

第三种：作为构造函数调用

function test(){
     this.a=1;
}
var test2=new test();
alert(test2.a);  //弹出1

所谓构造函数，就是通过new一个函数生成新的一个对象。当生成出test2对象，this就指向test2对象，所以结果为2。

将代码稍作改变，表明this不是全局对象,对全局对象没有任何影响。

var a=2;
function test(){
    this.a=1;
}
var test2=new test();
alert(a);  //弹出2

第四种：使用apply或者call调用

在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。apply的用法和call大致相同，只有一点区别，apply只接受两个参数，第一个参数和call相同，第二个参数必须是一个数组，数组中的元素对应的就是函数的形参。注意apply()或者call()参数为空时，默认调用全局对象。

var a=0;
function test(){
    alert(this.a);
}
var test2={};
test2.a=1;
test2.b=test;
test2.b.apply();  //弹出0

由于apply()参数为空，this指的是全局对象。若把最后一行代码修改为

test2.b.apply(test2);

此时this指向的就是对象test2。

扩充内容：

函数的执行环境

JavaScript 中的函数既可以被当作普通函数执行，也可以作为对象的方法执行，这是 this 含义如此丰富的主要原因。

一个函数被执行时，会创建一个执行环境（ExecutionContext），函数的所有的行为均发生在此执行环境中，构建该执行环境时，JavaScript 首先会创建 arguments变量，其中包含调用函数时传入的参数。接下来创建作用域链。然后初始化变量，首先初始化函数的形参表，值为 arguments变量中对应的值，如果 arguments变量中没有对应值，则该形参初始化为 undefined。如果该函数中含有内部函数，则初始化这些内部函数。如果没有，继续初始化该函数内定义的局部变量，需要注意的是此时这些变量初始化为 undefined，其赋值操作在执行环境（ExecutionContext）创建成功后，函数执行时才会执行，这点对于我们理解 JavaScript 中的变量作用域非常重要，我们先不在这里讨论这个话题。最后为 this 变量赋值，如前所述，会根据函数调用方式的不同，赋给 this全局对象，当前对象等。至此函数的执行环境（ExecutionContext）创建成功，函数开始逐行执行，所需变量均从之前构建好的执行环境（ExecutionContext）中读取。

Function.bind

this 在 JavaScript 中经常被误用的一种情况：回调函数。JavaScript 支持函数式编程，函数属于一级对象，可以作为参数被传递。请看下面的例子 myObject.handler 作为回调函数，会在 onclick 事件被触发时调用，但此时，该函数已经在另外一个执行环境（ExecutionContext）中执行了，this 自然也不会绑定到 myObject 对象上。

button.onclick = myObject.handler;

为了避免这种错误，许多 JavaScript 框架都提供了手动绑定 this 的方法。在ES5中，已经提供了内置的 bind 方法供大家使用。

fun.bind(thisArg[, arg1[, arg2[, ...]]])

例如：

var obj = {name:'JSLite.io'};
/**
 * 给document添加click事件监听，并绑定EventClick函数
 * 通过bind方法设置EventClick的this为obj，并传递参数p1,p2
 */
document.addEventListener('click',EventClick.bind(obj,'p1','p2'),false);
//当点击网页时触发并执行
function EventClick(a,b){
 console.log(
  this.name, //JSLite.io
  a, //p1
  b //p2
 )
}
// JSLite.io p1 p2

当点击网页时，EventClick被触发执行，输出JSLite.io p1 p2, 说明EventClick中的this被bind改变成了obj对象。如果你将EventClick.bind(obj,'p1','p2') 变成 EventClick.call(obj,'p1','p2') 的话，页面会直接输出 JSLite.io p1 p2。

eval 方法

JavaScript 中的 eval 方法可以将字符串转换为 JavaScript 代码，使用 eval 方法时，调用者的执行环境（ExecutionContext）中的 this 就被 eval 方法继承下来了。