資訊專欄INFORMATION COLUMN
摘要：是在運(yùn)行時(shí)進(jìn)行綁定的，它的指向取決于它的調(diào)用位置。調(diào)用位置為當(dāng)前正在執(zhí)行的函數(shù)的前一個(gè)調(diào)用中。我們可以可以通過修改為來(lái)達(dá)到目的。返回要執(zhí)行的函數(shù)，需要的時(shí)候再執(zhí)行。箭頭函數(shù)箭頭函數(shù)會(huì)繼承外層函數(shù)調(diào)用的綁定
this
首先我們分析一下下面代碼的執(zhí)行結(jié)果
function foo(num) {
console.log( "foo: " + num );
this.count++; //記錄函數(shù)執(zhí)行次數(shù)
}
foo.count = 0;
function test(){
for(let i = 0 ; i < 4; i++){
foo(i)
}
console.log("foo執(zhí)行次數(shù)："+foo.count)
}
test()
執(zhí)行結(jié)果如下：
foo: 0 foo: 1 foo: 2 foo: 3 foo執(zhí)行次數(shù)：0
由此可見this指向的并不是函數(shù)自身。this 是在運(yùn)行時(shí)進(jìn)行綁定的，它的指向取決于它的調(diào)用位置。我們可以通過分析調(diào)用棧來(lái)找到函數(shù)的調(diào)用位置。（調(diào)用位置為當(dāng)前正在執(zhí)行的函數(shù)的前一個(gè)調(diào)用中）。當(dāng)我們?cè)诘谝粋€(gè)例子中增加debugger,在瀏覽器工具中可以清晰的看到函數(shù)的調(diào)用棧：
foo函數(shù)的調(diào)用位置在test函數(shù)中，此時(shí)this的指向默認(rèn)綁定為window，而不是foo對(duì)象。我們可以可以通過修改this.count為foo.count來(lái)達(dá)到目的。
this的綁定規(guī)則有：默認(rèn)綁定、隱式綁定、顯式綁定、new綁定，上面函數(shù)調(diào)用中this就是默認(rèn)綁定。
new綁定function foo(a) {
this.a = a;
}
var bar = new foo(2);
console.log(bar.a); //2
var bar2 = new foo(3);
console.log(bar2.a) //3
當(dāng)使用new調(diào)用foo函數(shù)時(shí)，會(huì)構(gòu)造一個(gè)新對(duì)象并把它綁定到 foo
顯式綁定我們可以通過call、bind、apply來(lái)改變this的指向。call、apply本質(zhì)上沒有區(qū)別，都是立即執(zhí)行，只是第二個(gè)參數(shù)的傳值方式不一樣。bind返回要執(zhí)行的函數(shù)，需要的時(shí)候再執(zhí)行。(bind后的函數(shù)當(dāng)使用new執(zhí)行時(shí)，綁定無(wú)效)
function foo() {
console.log(this.a);
}
var obj = {
a:2
};
var fn = foo.bind( obj );
fn() //2
new fn() //undefined
隱式綁定
當(dāng)函數(shù)存在上下文對(duì)象時(shí)會(huì)影響調(diào)用位置
function foo() {
console.log( this.a );
}
var obj2 = {
a: 42,
foo: foo
};
var obj1 = {
a: 2,
obj2: obj2
};
obj1.obj2.foo(); //42
我們來(lái)看另一個(gè)例子
function foo() {
console.log( this.a );
}
function doFoo(fn) {
// fn 其實(shí)引用的是 foo
fn(); // <-- 調(diào)用位置！
}
var obj = {
a: 2,
foo: foo
};
var a = "oops, global";
doFoo( obj.foo );
此時(shí)fn函數(shù)會(huì)丟失上下文綁定的對(duì)象。
箭頭函數(shù)箭頭函數(shù)會(huì)繼承外層函數(shù)調(diào)用的 this 綁定
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/109018.html
摘要：首先我們可以通過給目標(biāo)函數(shù)指定作用域來(lái)簡(jiǎn)單實(shí)現(xiàn)方法保存，即調(diào)用方法的目標(biāo)函數(shù)考慮到函數(shù)柯里化的情況，我們可以構(gòu)建一個(gè)更加健壯的這次的方法可以綁定對(duì)象，也支持在綁定的時(shí)候傳參。原因是，在中，多次是無(wú)效的。而則會(huì)立即執(zhí)行函數(shù)。 bind 是返回對(duì)應(yīng)函數(shù)，便于稍后調(diào)用；apply 、call 則是立即調(diào)用 。 apply、call 在 javascript 中，call 和 apply 都是...
摘要：使用方法調(diào)用匿名函數(shù)在下例中的循環(huán)體內(nèi)，我們創(chuàng)建了一個(gè)匿名函數(shù)，然后通過調(diào)用該函數(shù)的方法，將每個(gè)數(shù)組元素作為指定的值執(zhí)行了那個(gè)匿名函數(shù)。這個(gè)匿名函數(shù)的主要目的是給每個(gè)數(shù)組元素對(duì)象添加一個(gè)方法，這個(gè)方法可以打印出各元素在數(shù)組中的正確索引號(hào)。 原文：回味JS基礎(chǔ):call apply 與 bind 在JavaScript中，call、apply和bind是Function對(duì)象自帶的三個(gè)方法...
摘要：的使用場(chǎng)景作為構(gòu)造函數(shù)執(zhí)行作為對(duì)象屬性執(zhí)行作為普通函數(shù)執(zhí)行。要在執(zhí)行時(shí)才能確認(rèn)值，定義時(shí)無(wú)法確認(rèn)改變上下文指向。 1.this this的使用場(chǎng)景： 1.作為構(gòu)造函數(shù)執(zhí)行； 2.作為對(duì)象屬性執(zhí)行； 3.作為普通函數(shù)執(zhí)行； 4.call apply bind。 this要在執(zhí)行時(shí)才能確認(rèn)值，定義時(shí)無(wú)法確認(rèn) var a = { name:A, fn:function()...
摘要：返回值這段在下方應(yīng)用中有詳細(xì)的示例解析?；卣{(diào)函數(shù)丟失的解決方案綁定回調(diào)函數(shù)的指向這是典型的應(yīng)用場(chǎng)景綁定指向，用做回調(diào)函數(shù)。 showImg(https://segmentfault.com/img/remote/1460000019971331?w=1024&h=680); 函數(shù)原型鏈中的 apply，call 和 bind 方法是 JavaScript 中相當(dāng)重要的概念，與 this...
摘要：參考鏈接在中，和是對(duì)象自帶的三個(gè)方法，都是為了改變函數(shù)體內(nèi)部的指向。返回值是函數(shù)方法不會(huì)立即執(zhí)行，而是返回一個(gè)改變了上下文后的函數(shù)。而原函數(shù)中的并沒有被改變，依舊指向全局對(duì)象。原因是，在中，多次是無(wú)效的。 參考鏈接：https://juejin.im/post/59bfe8... 在JavaScript中，call、apply和bind是Function對(duì)象自帶的三個(gè)方法，都是為了改變...
閱讀 2380·2021-11-22 14:56
閱讀 1188·2019-08-30 15:55
閱讀 3218·2019-08-29 13:29
閱讀 1368·2019-08-26 13:56
閱讀 3517·2019-08-26 13:37
閱讀 573·2019-08-26 13:33
閱讀 3358·2019-08-26 13:33
閱讀 2242·2019-08-26 13:33
