溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
Invocation 調用
調用一個函數將暫停當前函數的執行，傳遞控制權和參數給新函數。
實參與形參不一致不會導致運行時錯誤，多的被忽略，少的補為undefined
每個方法都會收到兩個附加參數：this和arguments。this的值取決于調用的模式，調用模式：方法，函數，構造器和apply調用模式
this被賦值發生在被調用的時刻。不同的調用模式可以用call方法實現
var myObject = {
value: 0,
increment: function (inc) {
this.value += typeof inc === 'number' ? inc : 1;
}
};
myObject.double = function(){
var helper = function(){
console.log(this);// this point to window
}
console.log(this);// this point to object myObject
helper();
}
myObject.double();//myObject Window
1 The Method Invocation Pattern 方法調用模式
方法：函數被保存為對象的屬性.當方法被調用時，this被綁定到該對象
公共方法：通過this取得他們所屬對象的上下文的方法
myObject.increment(); document.writeln(myObject.value); //
底層實現： myObject.increment。call(myObject，0);
2 The Function Invocation Pattern 函數調用模式
當函數并非對象的屬性時就被當作函數調用（有點廢話。。），this被綁定到全局對象（window）
ECMAScript5中新增strict mode， 在這種模式中，為了盡早的暴露出問題，方便調試。this被綁定為undefined
var add = function (a,b) { return a + b;};
var sum = add（3，4）；// sum的值為7
底層實現：add.call（window，3，4）
strict mode：add.call（undefined，3，4）
方法調用模式和函數調用模式的區別
function hello(thing) {
console.log(this + " says hello " + thing);
}
person = { name: "Brendan Eich" }
person.hello = hello;
person.hello("world") // [object Object] says hello world 等價于 person。hello。call（person，“world”）
hello("world") // "[object DOMWindow]world" 等價于 hello。call（window，“world”）
3 The Constructor Invocation Pattern
JavaScript是基于原型繼承的語言，同時提供了一套基于類的語言的對象構建語法。
this指向new返回的對象
var Quo = function (string) {
this.status = string;
};
Quo.prototype.get_status = function ( ) {
return this.status;
};
var myQuo = new Quo("this is new quo"); //new容易漏寫，有更優替換
myQuo.get_status( );// this is new quo
4 The Apply Invocation Pattern
apply和call是javascript的內置參數，都是立刻將this綁定到函數,前者參數是數組，后者要一個個的傳遞apply也是由call底層實現的
apply(this,arguments[]);
call(this,arg1,arg2...);
var person = {
name: "James Smith",
hello: function(thing,thing2) {
console.log(this.name + " says hello " + thing + thing2);
}
}
person.hello.call({ name: "Jim Smith" },"world","!"); // output: "Jim Smith says hello world!"
var args = ["world","!"];
person.hello.apply({ name: "Jim Smith" },args); // output: "Jim Smith says hello world!"
相對的,bind函數將綁定this到函數和調用函數分離開來，使得函數可以在一個特定的上下文中調用，尤其是事件bind的apply實現
Function.prototype.bind = function(ctx){
var fn = this; //fn是綁定的function
return function(){
fn.apply(ctx, arguments);
};
};
bind用于事件中
function MyObject(element) {
this.elm = element;
element.addEventListener('click', this.onClick.bind(this), false);
};
//this對象指向的是MyObject的實例
MyObject.prototype.onClick = function(e) {
var t=this; //do something with [t]...
};
總結
以上所述是小編給大家介紹的JavaScript調用模式與this關鍵字綁定的關系 ，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
