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。