javascript中this的含義是什么

本文小編為大家詳細介紹“javascript中this的含義是什么”，內容詳細，步驟清晰，細節處理妥當，希望這篇“javascript中this的含義是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

創新互聯公司是一家集網站建設,團風企業網站建設,團風品牌網站建設,網站定制,團風網站建設報價,網絡營銷,網絡優化,團風網站推廣為一體的創新建站企業，幫助傳統企業提升企業形象加強企業競爭力。可充分滿足這一群體相比中小企業更為豐富、高端、多元的互聯網需求。同時我們時刻保持專業、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們為更多的企業打造出實用型網站。

this的中文意思為“當前;這個”，是javascript中的一個指針型變量，它指向當前函數的運行環境。在不同的場景中調用同一個函數，this的指向會發生變化，但它永遠指向其所在函數的真實調用者；如果沒有調用者，this就指向window。

本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

JavaScript 函數的作用域是靜態的，但是函數的調用卻是動態的。由于函數可以在不同的運行環境內執行，因此 JavaScript 在函數體內定義了 this 關鍵字，用來獲取當前的運行環境。

this 是一個指針型變量，它指向當前函數的運行環境。

在不同的場景中調用同一個函數，this的指向也可能會發生變化，但是它永遠指向其所在函數的真實調用者（誰調用就指向誰）；如果沒有調用者，this就指向全局對象window。

使用 this

this 是由 JavaScript 引擎在執行函數時自動生成的，存在于函數內的一個動態指針，指代當前調用對象。具體用法如下：

this[.屬性]

如果 this 未包含屬性，則傳遞的是當前對象。

this 用法靈活，其包含的值也是變化多端。例如，下面示例使用 call() 方法不斷改變函數內 this 指代對象。

var x = "window";  //定義全局變量x，初始化字符串為“window”
function a () {  //定義構造函數a
    this.x = "a";  //定義私有屬性x，初始化字符a
}
function b () {  //定義構造函數b
    this.x = "b";  //定義私有屬性x，初始化為字符b
}
function c () {  //定義普通函數，提示變量x的值
    console.log(x);
}
function f () {  //定義普通函數，提示this包含的x的值
    console.log(this.x);
}
f();  //返回字符串“window”，this指向window對象
f.call(window);  //返回字符串“window”，指向window對象
f.call(new a());  //返回字符a，this指向函數a的實例
f.call(new b());  //返回字符b，this指向函數b的實例
f.call(c);  //返回undefined，this指向函數c對象

下面簡單總結 this 在 5 種常用場景中的表現以及應對策略。

1. 普通調用

下面示例演示了函數引用和函數調用對 this 的影響。

var obj = {  //父對象
    name : "父對象obj",
    func : function () {
        return this;
    }
}
obj.sub_obj = {  //子對象
    name : "子對象sub_obj",
    func : obj.func
}
var who = obj.sub_obj.func();
console.log(who.name);  //返回“子對象sub_obj”，說明this代表sub_obj

如果把子對象 sub_obj 的 func 改為函數調用。

obj.sub_obj = {
    name : "子對象sub_obj",
    func : obj.func()  //調用父對象obj的方法func
}

則函數中的 this 所代表的是定義函數時所在的父對象 obj。

var who = obj.sub_obj.func;
console.log(who.name);  //返回“父對象obj”，說明this代表父對象obj

2. 實例化

使用 new 命令調用函數時，this 總是指代實例對象。

var obj = {};
obj.func = function () {
    if (this == obj) console.log("this = obj");
    else if (this == window) console.log("this = window");
    else if (this.contructor == arguments.callee) console.log("this = 實例對象");
}
new obj.func;  //實例化

3. 動態調用

使用 call 和 apply 可以強制改變 this，使其指向參數對象。

function func () {
    //如果this的構造函數等于當前函數，則表示this為實例對象
    if (this.contructor == arguments.callee) console.log("this = 實例對象");
    //如果this等于window，則表示this為window對象
    else if (this == window) console.log("this = window對象");
    //如果this為其他對象，則表示this為其他對象
    else console.log("this == 其他對象 \n this.constructor =" + this.constructor);
}
func();  //this指向window對象
new func();  //this指向實例對象
cunc.call(1);  //this指向數值對象

在上面示例中，直接調用 func() 時，this 代表 window 對象。當使用 new 命令調用函數時，將創建一個新的實例對象，this 就指向這個新創建的實例對象。

使用 call() 方法執行函數 func() 時，由于 call() 方法的參數值為數字 1，則 JavaScript 引擎會把數字 1 強制封裝為數值對象，此時 this 就會指向這個數值對象。

4. 事件處理

在事件處理函數匯總，this 總是指向觸發該事件的對象。

<input type="button" value="測試按鈕" />
<script>
    var button = document.getElementsByTagName("put")[0];
    var obj = {};
    obj.func = function () {
        if (this == obj) console.log("this = obj");
        if (this == window) console.log("this = window");
        if (this == button) console.log("this = button");
    }
    button.onclick = obj.func;
</script>

在上面代碼中，func() 所包含的 this 不再指向對象 obj，而是指向按鈕 button，因為 func() 是被傳遞給按鈕的事件處理函數之后才被調用執行的。

如果使用 DOM2 級標準注冊事件處理函數，程序如下：

if (window.attachEvent) {  //兼容IE模型
    button.attachEvent("onclick", obj.func);
} else {  //兼容DOM標準模型
    button.addEventListener("click", obj.func, true);
}

在 IE 瀏覽器中，this 指向 window 對象和 button 對象，而在 DOM 標準的瀏覽器中僅指向 button 對象。因為，在 IE 瀏覽器中，attachEvent() 是 window 對象的方法，調用該方法時，this 會指向 window 對象。

為了解決瀏覽器兼容性問題，可以調用 call() 或 apply() 方法強制在對象 obj 身上執行方法 func()，避免出現不同的瀏覽器對 this 解析不同的問題。

if (window.attachEvent) {
    button.attachEvent("onclick", function () {  //用閉包封裝call()方法強制執行func()
        obj.func.call(obj);
    });
} else {
    button.attachEventListener("onclick", function () {
        obj.func.call(obj);
    }, true);
}

當再次執行時，func() 中包含的 this 始終指向對象 obj。

5. 定時器

使用定時器調用函數。

var obj = {};
obj.func = function () {
    if (this == obj) console.log("this = obj");
    else if (this == window) console.log("this = window對象");
    else if (this.constructor == arguments.callee) console.log("this = 實例對象");
    else console.log("this == 其他對象 \n this.constructor =" + this.constructor);
}
setTimeOut(obj.func, 100);

在 IE 中 this 指向 window 對象和 button 對象，具體原因與上面講解的 attachEvent() 方法相同。在符合 DOM 標準的瀏覽器中，this 指向 window 對象，而不是 button 對象。

因為方法 setTimeOut() 是在全局作用域中被執行的，所以 this 指向 window 對象。要解決瀏覽器兼容性問題，可以使用 call 或 apply 方法來實現。

setTimeOut (function () {
    obj.func.call(obj);
}, 100);

讀到這里，這篇“javascript中this的含義是什么”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注創新互聯行業資訊頻道。

分享文章：javascript中this的含義是什么
網站鏈接：http://m.kartarina.com/article38/pipgpp.html

成都網站建設公司_創新互聯，為您提供域名注冊、商城網站、營銷型網站建設、小程序開發、關鍵詞優化、網站導航

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯