JavaScript call apply使用 JavaScript對象的方法綁定到DOM事件後this指向問題

最後更新：2018-12-08 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

先來看看現象：複製代碼代碼如下:<html>
<head>
<title>apply_and_call</title>
</head>
<body onload="init()">
<div id="testDiv" style="position: absolute; border: 1px solid gray; width:100px; height: 100px"></div>
<script type="text/javascript">
function init() {
var el = document.getElementById("testDiv");
var a = new classA(el);
}
function classA(el) {
this.a = 1;
this.container = el;
//綁定單擊事件
this.container.onclick = this.click;
}
classA.prototype = {
click:function() {
alert(this.a);
}
}
</script>
</body>
</html>

當單擊DIV後，彈出框顯示undefined。
原因是當DOM對象響應單擊事件後，事件方法中的this關鍵字指向的是DOM對象，此時DOM對象沒有a屬性，所以彈出undefined。
而程式員本意是響應事件方法中this指向的是classA的對象a，如何才能達到此目的？這就需要使用到call或apply方法。
下面再來熟悉下call方法：
摘要：
function.call(thisobj, args…)
參數：
thisobj
　　調用function的對象。在函數主體中，thisobj是關鍵字this的值。
args…
　　任意多個參數，這些參數將傳遞給函數function。
傳回值：
調用函數function的傳回值。
拋出：
TypeError
　　如果調用該函數的對象不是函數，則拋出該異常。
描述：
call()將指定的函數function作為對象thisobj的方法來調用，把參數列表中thisobj後的參數傳遞給它，傳回值是調用函數後的傳回值。在函數體內，關鍵字this引用thisobj對象。
如果將指定數組作為傳遞給函數的參數，請使用Function.apply()方法。
熟悉call()方法後，將代碼1修改如下：
代碼2：複製代碼代碼如下:<html>
<head>
<title>apply_and_call</title>
</head>
<body onload="init()">
<div id="testDiv" style="position: absolute; border: 1px solid gray; width:100px; height: 100px"></div>
<script type="text/javascript">
function init() {
var el = document.getElementById("testDiv");
var a = new classA(el);
}
function classA(el) {
this.t = 1;
this.clickDele = createDele(this.click, this);
el.onclick = this.clickDele;
}
classA.prototype = {
click:function() {
alert(this.t);
}
}
function createDele(fun, obj, arg) {
return function() {
return fun.call(obj, arg);
}
}
</script>
</body>
</html>

代碼2 25行：主要添加了createDele方法，該方法包含三個參數：fun、obj、arg，分別是“要執行的方法”、“fun中this需要指向的對象”、“傳入fun中的參數”。該方法返回一個匿名方法。
匿名方法負責執行fun方法，同時將fun中的this指向obj，並使用作為arg傳入參數，處理結果返回。
當程式執行走到第15行調用createDele方法，傳入對象的方法和對象本身，createDele接收參數後返回一個匿名方法，this.clickDele被設定成為返回的匿名方法，16行代碼將this.clickDele(匿名方法)綁定到DOM事件上，程式執行完畢，點擊DOM(DIV)觸發匿名方法，些時匿名方法中fun為之前傳入的this.click(即：方法a.click)，obj為之前傳入的this(即：對象a)，所以此時使用call方法使得this.click(即：方法a.click)中的this指向obj(即：對象a)，最終彈出結果為1。結果正確，達到了程式的本意。
回顧匿名方法多少會讓人感到有些怪異：調用匿名方法時fun為什麼會是this.click(即：方法a.click)、obj什麼為是this(即：對象a)。這個問題就需要用JavaScript的閉包來解釋了，這裡暫不介紹閉包，後面會有介紹JavaScript閉包的文章發表，歡迎有興趣的朋友持續關注！
不管各位看官信還是不信，反正道理和程式是沒有問題的！：）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More