js中的this

javascript是一種很是活躍的語言，其中關於其中的this關鍵字，是javascript中的核心概念之一，今天來討論下js中的this關鍵字。

說到this，大部分狀況下會想到兩種關於this的常見常見使用場景

• js上下文中的this
• js操做DOM節點的this
• 構造函數中的this

這個兩個不論哪種狀況，在js中都遵循：誰調用this，this就指向誰

1、js上下文中的js

一、普通的函數調用

先來看下面的代碼

a = 6; // 至關於window.a=6 或 this.a=6
function fun() {
    console.log(this.a)
};
fun();  // 至關於window.fun()
// 6

如上執行結果，最終打印出來的結果爲6

因爲調用fun()函數至關於window.fun()調用，即fun()函數由window調用，而且window對象上定義了變量a，因此函數裏的this指向window對象，打印出來的結果就是window.a=6

二、對象中的this

同普通的函數調用不同，對象裏的this指向要相對複雜些

this.a = 100;
var obj = {
    a: 10,
    fun: function() {
        console.log(this.a)
    }
};
obj.fun();
// 結果爲10

上面代碼執行結果爲10，這個應該就很好理解，由於調用函數的obj對象，obj裏定義了obj.a=10，因此打印結果爲10，可是當函數裏採用了閉包以後又會出現不一樣的結果，以下代碼

this.a = 100;
var obj = {
    a: 10,
    fun: function() {
        console.log(this.a)
        return function() {
            console.log(this.a)
        }
    }
};
obj.fun()();    // (obj.fun())();
// 10
// 100

執行結果爲，先打印出10，再打印出100，爲何會出現這樣的狀況呢？

第一個結果爲10確定是不會有疑惑了，由於同上面那一種狀況相同，obj調用fun()函數，第一個this一樣指向obj，結果爲obj.a=10

第二個結果爲100，是由於執行了obj.fun()以後，返回了裏面的閉包函數，此時返回來的函數是在window做用域中執行的，至關因而在window對象中調用閉包函數，因此第二個結果爲100；上面的調用方式也能夠像下面的調用方式同樣

this.a = 100;
var obj = {
    a: 10,
    fun: function() {
        console.log(this.a)  // 10
        return function() {
            console.log(this.a)  //100
        }
    }
};
var fun1 = obj.fun();  // 將返回來的函數賦值給fun1
window.fun1();  // 在window對象中調用fun1

上面的調用方式應該會更好理解一些

 

2、js操做DOM節點的this

除了在操做對象中常常使用js外，對DOM的操做一樣也會常常使用到this，看下面需求

// 點擊button，改變button的字體顏色
function changeColor() {
    this.style.color = "red";
}

var btn = document.getElementById('btn');
btn.onclick = changeColor;

上面點擊按鈕，按鈕字體顏色變成紅色，這裏一樣適用誰調用：this，this就指向誰

此時的this指向btn節點

在例以下面代碼

<button id="app" style="color:blue">click</button>
var style = {
    color: "red"
};
window.fun(); // red
function fun() {
    alert(this.style.color)
}
var btn = document.getElementById('app');
btn.onclick = fun; // blue

 

3、構造函數中的this

this.a = 100;
function fun() {
    this.a = 10;
}
fun.prototype.geta = function() {
    return this.a;
}
var fun1 = new fun();
console.log(fun1.geta()); // 10

此處輸出10，由於fun1調用geta()函數，fun函數是fun1的構造函數，因此fun1中含有屬性a=10，調用原型中geta方法，返回的就是this.a=10;