javascript下動態this與動態綁定執行個體代碼

來源:互聯網
上載者:User

那麼函數就是被掰成兩部分儲存於對象,一是其函數名(鍵),一是函數體(值),那麼函數中的this一般都指向函數所在的對象。但這是一般而已,在全域調用函數時,我們並沒有看到調用者,或者這時就是window。不過,函式宣告後,其實並沒有綁定到任何對象,因此我們可以用call apply這些方法設定調用者。

一個簡單的例子:
[script]
<script>
window.name = "window";
var run = function() {
alert("My name is " + this.name);
}
run();
</script>
[/html]
這裡你不能說run是作為window的一個屬性而存在,但它的確是被window屬性調用了。實質上大多數暴露在最上層的東西都則window接管了。在它們需要調用時被拷貝到window這個對象上(不過在IE中window並不繼承對象),於是有了window['xxx']與window.xxx效能上的差異。這是內部實現,不深究了。
另一個例子,綁定到一個明確的對象上


[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

答案顯然易見,this總是為它的調用者。但如果複雜一點呢?
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

儘管它是定義在object內部,儘管它是定義run函數內部,但它彈出的既不是object也不是run,因為它既不是object的屬性也不是run的屬性。它鬆散在存在於run的範圍用,不能被前兩者調用,就只有被window拯救。window等原生對象浸透於在所有指令碼的內部,無孔不入,只要哪裡需要到它做貢獻的地方,它都義不容辭。但通常我們不需要它來幫倒忙,這就需要奠出call與apply兩大利器了。
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

call與apply的區別在於第一個參數以後的參數的形式,call是一個個,aplly則都放到一個數組上,在參數不明確的情況,我們可以藉助arguments與Array.slice輕鬆搞定。
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

由此Prototype開發人員搞了一個非常有名的函數出來,bind!以下是它的一個最簡單的版本: 複製代碼 代碼如下:var bind = function(context, fn) {
return function() {
return fn.apply(context, arguments);
}
}


[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

不過為了面對更複雜的情況建議用以下版本。 複製代碼 代碼如下:function bind(context,fn) {
var args = Array.prototype.slice.call(arguments, 2);
return args.length == 0 ? function() {
return fn.apply(context, arguments);
} : function() {
return fn.apply(context, args.concat.apply(args, arguments));
};
};

它還有一個孿生兄弟叫bindAsEventListener ,綁定事件對象,沒什麼好說的。 複製代碼 代碼如下:var bindAsEventListener = function(context, fn) {
return function(e) {
return fn.call(context, (e|| window.event));
}
}

Prototype的版本 複製代碼 代碼如下:Function.prototype.bind = function() {
if (arguments.length < 2 && (typeof arguments[0]==='undefined'))
return this;
var _slice = Array.prototype.slice
var __method = this, args = _slice.call(arguments,0), context = args.shift();
return function() {
return __method.apply(context, args.concat(_slice.call(arguments,0)));
}
}


[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

bind函數是如此有用,google早早已把它加入到Function的原型中了(此外還有inherits,mixin與partial)。 複製代碼 代碼如下://在chrome中
var a = function(){};
alert(a.bind)

有綁定就有反綁定,或者叫剝離更好!例如原生對象的泛化方法我們是無法通過遍曆取出它們的。
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]

要取出它們就需要這個東西: 複製代碼 代碼如下:var _slice = Array.prototype.slice;
function unbind(fn) {//第一步取得泛化方法
return function(context) {//第二部用對應原生對象去重新調用!
return fn.apply(context, _slice.call(arguments, 1));
};
};

樣本以前也給過了,請見文章
總結:
this 的值取決於 function 被調用的方式,一共有四種,
如果一個 function 是一個對象的屬性,該 funtion 被調用的時候,this 的值是這個對象。如果 function 調用的運算式包含句點(.)或是 [],this 的值是句點(.)或是 [] 之前的對象。如myObj.func 和myObj["func"] 中,func 被調用時的 this 是myObj。
如果一個 function 不是作為一個對象的屬性,那麼該 function 被調用的時候,this 的值是全域對象。當一個 function 中包含內部 function 的時候,如果不理解 this 的正確含義,很容易造成錯誤。這是由於內部 function 的 this 值與它外部的 function 的 this 值是不一樣的。解決辦法是將外部 function 的 this 值儲存在一個變數中,在內部 function 中使用它來尋找變數。
如果在一個 function 之前使用 new 的話,會建立一個新的對象,該 funtion 也會被調用,而 this 的值是新建立的那個對象。如function User(name) {this.name = name}; var user1 = new User("Alex"); 中,通過調用new User("Alex") ,會建立一個新的對象,以user1 來引用,User 這個 function 也會被調用,會在user1 這個對象中設定名為name 的屬性,其值是Alex 。
可以通過 function 的 apply 和 call 方法來指定它被調用的時候的 this 的值。 apply 和 call 的第一個參數都是要指定的 this 的值。由於它們存在,我們得以建立各種有用的函數。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: 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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.