JavaScript’s ‘this’ Keyword

     对象：分全局对象，自定义对象等。

        The “this” keywor指的是由它的构造函数去实例化，建立一个新对象，例如,如果有一个类 Boat, 有一个方法 moveBoat(),当在moveBoat（）方法里面有一个this”，实际上，表示我们可以访问刚建立Boat的新对象 。

In JavaScript, 当我们使用构造函数调用模式，即new 构造函数，然后调用一个方法时，this就存在了。 “this”也能常用来指不同a different execution context的不同对象.

// global scopefoo = 'abc';alert(foo); // abcthis.foo = 'def';alert(foo); // def

无论是么时候你在全局context 使用关键字“this”, 它总是指向全局对象window. 现在让我们看看 在一个函数里面的“this” 。

var boat = {    size: 'normal',    boatInfo: function() {        alert(this === boat);        alert(this.size);    }};boat.boatInfo(); // true, 'normal'var bigBoat = {    size: 'big'};bigBoat.boatInfo = boat.boatInfo; //复制一个方法，其实是函数的地址给bigBoat.boatInfo,bigBoat.boatInfo(); // false, 'big'所以也能调用boatInfo(),this=bigBoat.

      我们看见一个对象boat,有一个属性size和一个方法boatInfo()。如果this是实际的boat对象，就显示。
 因此，我们使用boat.boatInfo()去调用函数，这时看见的boad对象和属性size是正常的。

      然后我们建立另一个对象， bigBoat,有一个size属性. 没有boatInfo()方法，因此我们使用 bigBoat.boatInfo = boat.boatInfo 去从boat对象中复制一个方法boatInfo().现在，当我们调用bigBoat.boatInfo()，进入了函数，
 我们看见这个并不和boat相等且size现在是big. 为什么size属性改变了？

     第一：你必须意识到再函数里面的this,并不是static,类的全局变量，

     第二：每当你调用一次，this总是重新取值。

     第三：函数执行它的代码之前，在一个函数里面的this值实际上由父作用域的提供。 

      实际上函数语法是如何被重写的？

   每当你调用一个函数，我们必须马上寻找括号左边的对象。如果在括号的左边上，我们能看见一个引用，“this”值等于引用的对象，然后传递给调用的函数，这个函数正是该对象所属的函数, 否则，他是全局对象。让我们看看这些例子：

function bar() {    alert(this);}bar(); // 全局 - 因为当方法bar()调用时，bar()属于全局对象objectvar foo = {    baz: function() {        alert(this);    }}foo.baz(); //  函数属于foo对象 -当baz()调用时，baz()属于foo对象

 下面通过在一个函数里改变“this”值 ，通过以两种不同的方式调用函数。首先通过对象的方法调用，哪么this=object,然后通过函数式调用对象，哪么this =window 全局变量，所以方法的this是随着调用函数方式不同，this值不一样。

var foo = {    baz: function() {        alert(this);    }}foo.baz(); // foo - because baz belongs to the foo object when invokedvar anotherBaz = foo.baz;//指向的是同一函数。anotherBaz(); // global - because the method anotherBaz() belongs to the global object when invoked, NOT foo

 看下面：

var anum = 0;var foo = {    anum: 10,    baz: {        anum: 20,        bar: function() {            console.log(this.anum);        }    }}foo.baz.bar(); // 20 - 当bar调用时，因为括号（）左边是bar, 它属于baz对象 var hello = foo.baz.bar;hello(); // 0 - 因为括号左边是hello, 它属于全局变量，当调用时。

Another question often asked is how is the keyword “this” determined inside an event handler? The answer is “this” inside of an event handler always refers to the element it was triggered on. Let’s see an example:

<div id="test">I am an element with id #test</div>function doAlert() {     alert(this.innerHTML); } doAlert(); // undefined ，这是函数式调用，前面无对象，表示全局对象。var myElem = document.getElementById('test'); myElem.onclick = doAlert; alert(myElem.onclick === doAlert); // true myElem.onclick(); // I am an element

这儿我们能看见当doAlert()是第一调用，显示undefined, 引文 doAlert()属于全局object. 然后我们写myElem.onclick = doAlert, 然后复制函数 doAlert()到myElem的 onclick()事件。 这意味着，无论什么时候onclick()被触发,他是myElem方法, “this” 准确的是myElem对象。

 “this” 值也能被手动的设着，通过使用call() and apply(), 重写 what we have discussed here today. Also of interested is that when calling “this” inside a function constructor, “this” refers to the newly created object in all instances inside the constructor. The reason for that is the function constructor is invoked with the “new” keyword, which creates a new object where “this” inside the constructor always refers to the new object just created.

总结

 我们知道“this”值从不是static，有一个不同的值，取决于一个函数如何被调用。

  【参考文章】：http://davidshariff.com/blog/javascript-this-keyword/