js中this

首先声明，我是小白，以下只是自己的简单理解。

先看下面的代码：

 (function () {

     console.log(this);

 })();

毫无疑虑，输出的是window。

在看下面代码：

 (function () {

     function Main() {
         console.log(this);
     }
     new Main();
 })();

当然这样返回的是Main{}。

解释一下吧：首先说this返回的是当前对象，而在次代码中，this也就指的是，Main的这个对象了。（注意是对象）。

接着看下面的代码：

 (function () {

     function main() {
         console.log(this);
     }
     main();
 })();

这个结果输出的是window，是不是有点不可思议。接下来分析一下，懂原理了就明白了O(∩_∩)O哈！

先提下new,它声明了一个对象，这个对象再去执行一个函数。拿第二个代码来说，new声明了一个对象Main{}，它去执行的函数，所以这个this返回的是Main{}对象。

如果没有new，而直接执行函数main,那么谁去执行的呢，不用说，没有对象了，这个负担就交给了window了（window:我心累啊！）

最后提一点，第二个和第三个代码，函数名不一样，第二个代码是Main（），第一个字母是大写的，也就表明了它是构造函数。这里说的目的是，webstorm编译器会给予警告，不会报错,但看起来不爽，而且编码也不规范（对于我这强迫症患者更是痛苦啊Ｏ(≧口≦)Ｏ）

 (function () {

     var self=this;
     function Main() {
         console.log(self);
     }
     new Main();
 })();

这次输出的是window,这就表明this可以传递。

用处：当你想获取函数外部的函数的this时候可以先用一个对象变量保存this，从而传递this。（这算是一个技巧吧）

接着"上菜"

 (function () {

     function Main() {
         var show = this.showThis;
         show.apply(this);
     }

     Main.prototype.showThis = function () {
         console.log(this);
     };
     new Main();
 })();

结果是Main{}，这段代码用了原型方法，当然this也指的是Main{}这个对象。

prototype明天如果有时间话整理（明天又要开始培训了苦逼啊）

补充by8.23

今天看了会《JavaScript高级程序设计》，对this又有了些许感悟，特此几下。

引用其中的一句话：在全局函数中，this 等于window，而当函数被作为某个对象的方法调用时，this 等于那个对象

最重要的一句话就是，this实在针对对象来说的。 这也就解释了上面的有new和没new的区别。

看个代码：

 var name = "The Window";
 var object = {
 　　name : "My Object",
 　　getNameFunc : function(){
 　　　　return function(){
 　　　　　　return this.name;
 　　　　};
 　　}
 };
 alert(object.getNameFunc()());

返回的结果是window。

这也就说明了this只往上找一级，找不到返回的就是window

代码如果这样写的话：

 var name = "The Window";
 　　var object = {
 　　　　name : "My Object",
 　　　　getName: function(){
 　　　　return this.name;
 　　}
 };

在输出object.getName();结果就是My Object

因为这里的this找到了var声明的对象object。

补充by8.30

一个特别特别特别重要的知识点：

截取部分代码：

  Card.prototype.addClickEvent = function () {

         var self = this;
         this._htmlNode.bind("click", function () {
             console.log($(this));
             self.showB();
         });

     };

 Card.prototype.addClickEvent = function () {

         this._htmlNode.bind("click", function () {
             console.log($(this));
             this.showB();
         }.bind(this));

     };

这是卡片旋转的部分代码。（用的jQuery写的）

说明，点击时候不是点击Card而是，htmlNode。

两个代码等价。但个人认为下面的高大上。当然高富帅也是要付出代价的不容易记。

注意一点bind里面绑定的是this,不是Card。