JavaScirpt(JS)的this細究

1、js中function的不一樣形態

　　js中類和函數都要經過function關鍵字來構建。

一、js中當函數名大寫時，通常是看成類來處理

function Foo(name, age) {
    this.name = name;
    this.age = age;
    this.getName = function () {
        console.log(this.name)
    }
}

obj = new Foo('文州', 19);  // 實例化一個對象
obj.getName();    // 輸出：文州

二、js中函數名小寫，當作函數來處理

function test() {
    console.log(this);
}
// 等同於window.test,所以這裏的this代指的是window
test();   // 輸出:Window

三、自執行函數，同上面等價

　　自執行函數，同上面等價，this也是代指的window。

(function () {
    console.log(this);   // 輸出：Window 
})()

2、複合案例

一、類和函數結合案例

var name = '景女神';
function Foo(name, age) {
    this.name = name;
    this.age = age;
    this.getName = function () {
        console.log(this.name);   // 文州
        (function () {
            console.log(this.name);   // 景女神（打印的外部全局變量）
        })()
    }
}

obj = new Foo('文州', 19);
obj.getName();   // 文州  景女神

　　生成對象後，對象執行getName方法，此時this.name是輸出的當前對象的name，所以是輸出文州。隨後再執行自執行函數，這裏的this指代的是window對象，獲取全局name變量，所以輸出景女神。

二、讓上例中自執行函數也打印對象的name

var name = '景女神';
function Foo(name, age) {
    this.name = name;
    this.age = age;
    this.getName = function () {
        console.log(this.name);   // 文州
        var that = this;
        (function () {
            console.log(that.name);   // 文州（打印的外部全局變量）
        })()
    }
}

obj = new Foo('文州', 19);
obj.getName();   // 文州  文州

三、自動實例化案例

obj = {
    name: '文州',
    age: 19,
    getName:function () {
        console.log(this.name);   // 文州
        var that = this;
        (function () {
            console.log(that.name);   // 文州
        })()
    }
}
obj.getName();