this和物件原型
this是一個很特別的關鍵字,被自動定義在所有函數的作用域中
# // foo.count 是0,字面理解是錯的
function foo(num) {
console .log("foo:"+ num);
this.count++;
}
foo.count = 0;##o.
## for(i=0;i<10;i++){ if(i>5){# }
console.log(foo.count) //0
//
使用詞法作用域解決問題function foo(num) {
console.log("foo:"+ num); data.count++;
#}
# data.count++;
#}
#var data = {
count:0
};
var i;
for(i=0;i<10;i++){
if(i>5){
foo(i)
## }}console.log(data.count. ); // 4//用
foo標識符來取代this來引用函數物件,迴避了this 的問題,完全依賴變數foo的詞法作用域。 function foo(num) {
console.log("foo:"+ num); foo.count++;#} foo.count = 0var i;##for(i=0;i<10;i++){
if(i>5 ){
foo(i)
}
}
#console.log(foo.count) //4
#
console.log(foo.count) //4
#
//強制#this 指向foo
函數物件 ###################################################都##### function foo(num) {###### console.log("foo:"+num);###### # foo.count = 0;###### var i;###### for(i=0; i< 10; i++){##### #### foo.call(foo,i);###### foo.call(foo,i);###### }###############}
console.log(foo.count) //4
this是運作是綁定的,並不是寫時所綁定的,它的上下文取決於函數呼叫時的各種條件,this的綁定和和函數宣告的位置沒有任何關係,只取決於函數呼叫的方式。
this全面解析
呼叫堆疊與呼叫位置
function baz(){
//目前呼叫堆疊是:baz
// 因此,目前的呼叫中位置是全域作用域
console.log("baz");
bar(); // <--bar的呼叫位置
##}function bar(){//目前的呼叫堆疊是: baz-> bar//
因此,目前呼叫位置在baz
console.log("bar);foo(); // <-- foo的呼叫位置
} function foo(){//目前的呼叫堆疊是: baz-> bar->foo//
因此,目前呼叫位置在bar##console.log( "foo");
}
baz(); // <-- baz
的呼叫位置##
只有運行在非
strict mode下,預設綁定才能綁定到全域物件。一層灰影響呼叫位置。 obj2 = {a: 42,foo:foo
};var obj1 = {
a:2,
obj2: obj2
};
obj1.obj2.foo(); // 42
硬綁定的典型應用場景就是建立一個包裹函數,傳入所有的函數並傳回接收到的所有的值。 );return this.a + something;};#var obj = {a:2}; var bar = function() {return foo.apply(obj,arguments);
};#var b = bar(3) ; // 2 3console.log(b) // 5另一種方法是建立一個
i可以重複使用的輔助函數
function foo(something){console.log(this.a, something);#return this.a + something;}//簡單的輔助綁定函數
function bind(fn,obj){return function(){
return fn.apply(obj,arguments);};
}var obj = {a:2}var bar = bind(foo,obj);
var b = bar(3); // 2 3
console.log(b) // 5
ES5 中提供了內建的方法Function.prototype.bind, bind(..) #會回傳一個硬編碼的新函數,它會
把參數設定為this的上下文並呼叫原始函數。
function foo(something){
console.log(this.a, something);
return this.a + something;
}
var obj = {
a:2
}
var bar = foo.bind(obj);
# var b = bar(3); // 3 5
console.log(b) // 5
API 呼叫的上下文
function foo(el){
console.log(el,this.id);
}
var obj = {
id: "awesome'
}
// 呼叫#foo(..)時把 this 綁定到obj
[1,2,3].forEach(foo,obj);
// 1 awesome 2 awesome 3 awesome
new可以影響函數呼叫時this 綁定行為的方法。 (a){
this.a = a; }var bar = new foo(2);console.log(bar. a); // 2判斷
this1.函數是否在
new 中呼叫( new 綁定)? #var bar = new foo();2.函數是否透過call , apply (顯示綁定
) 或硬綁定呼叫? #va bar = foo.call(obj2)3.函數是否在某個上下文物件中呼叫(隱含綁定 ) ? var bar = obj1.foo()4.如果都不是的話,使用預設綁定。如果在嚴格模式下,就綁定到
undefined,
否則綁定到全域物件上。 var bar = foo();軟體綁定function foo(){console. log("name:" + this.name);}
var obj = {name: "obj"},obj2 = {name: "obj2" },obj3 = {name: "obj3"},obj3 = {name: "obj3"};
var foo0BJ = foo.softBind(obj);
foo0BJ(); // name:obj
obj2.foo = foo.softBind(obj);
obj2.foo = foo.softBind(obj);
#obj2.foo(); // name:obj3 <--看!
setTimeout(obj2.foo,10);
// name:obj <---應用了軟體綁定
# ####### ###以上是javaScript中this和物件原型的實例教程的詳細內容。更多資訊請關注PHP中文網其他相關文章!