資訊專欄INFORMATION COLUMN
摘要：的綁定規(guī)則默認(rèn)綁定像嚴(yán)格模式下等價(jià)于非嚴(yán)格模式下等價(jià)于全局對象這個(gè)全局對象在瀏覽器中是，中是隱氏綁定像等價(jià)于，作為一個(gè)上下文對象隱性傳遞到了中這個(gè)傳遞是隱性的，我們觀察不到的。
用call來解釋this很形象，但是不是那么嚴(yán)謹(jǐn)，詳情看補(bǔ)充1；
了解this的本質(zhì)比較嚴(yán)謹(jǐn)?shù)慕忉專阂粋€(gè)函數(shù)可以在多個(gè)環(huán)境中執(zhí)行，函數(shù)執(zhí)行時(shí)允許訪問環(huán)境中的其他變量，this會指向調(diào)用函數(shù)的那個(gè)環(huán)境；
比較易懂的解釋：
函數(shù)調(diào)用時(shí)都指定了它的外部環(huán)境，這里用call來展示外部環(huán)境：
fn(x);,可以理解為fn.call(undefined,x);這里fn中的this就是undefined；
obj.fn(); 可以理解為obj.fn.call(obj,x);這里fn中的this就是obj；
call函數(shù)的第一個(gè)參數(shù)就是指定的外部環(huán)境，就是this
想要知道一個(gè)函數(shù)中的this是誰，大部分情況下可以去函數(shù)調(diào)用棧中找上一個(gè)函數(shù)看到。
1.默認(rèn)綁定
像fn();
嚴(yán)格模式下等價(jià)于fn.call(undefined);
非嚴(yán)格模式下等價(jià)于fn.call(全局對象);這個(gè)全局對象在瀏覽器中是window，node中是global；
2.隱氏綁定
像obj.fn();等價(jià)于fn.call(obj)，obj作為一個(gè)上下文對象隱性傳遞到了fn中；
這個(gè)傳遞是隱性的，我們觀察不到的。
3.顯示綁定
像fn.call(context); fn在執(zhí)行時(shí)，this就是context；
這個(gè)綁定很明顯，是我們可以觀察、并且控制的。
顯示綁定很常用，這里貼一個(gè)bind方法的極簡實(shí)現(xiàn)
function bind(fn, obj) {
return function() {
return fn.apply( obj, arguments );
};
}
4.new綁定
js中的new操作符和其他語言的new機(jī)制完全不一樣。
new執(zhí)行的操作用偽代碼表達(dá)一下：
// 執(zhí)行new Foo()時(shí)發(fā)生的操作
var obj = {}; // 創(chuàng)建空對象
obj.__proto__ = Foo.prototype; // 連接到foo的原型，繼承機(jī)制
Foo.call(obj); // 綁定成上下文，并執(zhí)行foo
return obj; // foo中如果沒有return的話，return obj這個(gè)對象回去
補(bǔ)充1：this被忽略的情況，用call做例子不嚴(yán)謹(jǐn)?shù)脑?/b>
當(dāng)把null或undefined作為this傳入call、apply、bind時(shí)，實(shí)際應(yīng)用的是默認(rèn)綁定規(guī)則；
// 非嚴(yán)格模式
function foo() {
console.log( this.a );
}
var a = 2;
foo.call( null ); // 2
補(bǔ)充2：一個(gè)結(jié)合this、聲明提升、全局局部變量的例子：
var a=10;
function test(){
a=5;
alert(a);
alert(this.a);
var a;
alert(this.a);
alert(a);
}
執(zhí)行test()和new test() 結(jié)果是什么
答案：
alert的內(nèi)容：test(): 5,10，10，5
new test():5,undefined,undefined,5
補(bǔ)充3：this丟失（優(yōu)先級）
// 用一個(gè)簡單的例子開個(gè)頭 // obj.fn是一種隱性綁定，將fn中的this指向obj // 但是this又被context覆蓋了，這種this丟失可以引申出優(yōu)先級的問題。 obj.fn.call(context)補(bǔ)充4：箭頭函數(shù)
箭頭函數(shù)的this繼承上層函數(shù)
var obj = {
say: function () {
setTimeout(() => {
console.log(this) //obj
}, 0)
}
}
補(bǔ)充5
立即執(zhí)行函數(shù)執(zhí)行時(shí)，obj還是undefined
var obj = {
say: function () {
function _say() {
console.log(this) //window or global
}
return _say.bind(obj)
}()
}
obj.say()
補(bǔ)充6
var length = 10;
function fn() {
console.log(this.length);
}
var obj = {
length: 5,
method: function(fn) {
fn();
arguments[0](); // arguments.0()
}
};
obj.method(fn, 1);
// 10 2
補(bǔ)充7
var a=10;
var foo={
a:20,
bar:function(){
var a=30;
return this.a;
}
}
foo.bar()
(foo.bar)()
(foo.bar=foo.bar)()
(foo.bar,foo.bar)()
// 20 20 10 10
補(bǔ)充8
var num = 1;
function codequn(){
"use strict";
console.log("codequn: ",this.num++);
}
function codequn2(){
console.log("codequn2: ",++this.num);
}
(function(){
"use strict";
codequn2();
})();
codequn();
// codequn2: 2
// Cannot read property "num" of undefined
補(bǔ)充9
箭頭函數(shù)中的this是定義時(shí)所在對象的this，而不是執(zhí)行時(shí)
const debounce = function(fn, time) {
let timeout = null
return function() {
const _self = this
clearTimeout(timeout)
timeout = setTimeout(()=>{
console.log(this === _self) //true
fn.call(this, ...arguments)
}, time)
}
}
參考：
《你不知道的javascript上卷》；
https://www.zhihu.com/questio...；
http://www.ruanyifeng.com/blo...；
https://developer.mozilla.org...；
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/103246.html
摘要：首先設(shè)置侵入狀態(tài)欄，并設(shè)置狀態(tài)欄為透明色，相當(dāng)于隱藏的狀態(tài)欄，然后在中封裝狀態(tài)欄，由控制自己的顏色即可但是狀態(tài)欄字體顏色還是需要通過控制。 目錄介紹 1.關(guān)于如何集成 2.關(guān)于如何使用 3.關(guān)于鳴謝 4.關(guān)于版本更新說明 5.關(guān)于其他介紹 0.說明 狀態(tài)欄工具類，應(yīng)該可以滿足絕大多數(shù)的使用場景。具體可以參考代碼案例，歡迎star！！ 1.技術(shù)博客匯總 2.開源項(xiàng)目匯總 3.生...
摘要：關(guān)于提供了一種優(yōu)雅的方式來隱式傳遞一個(gè)對象引用，因此可以將設(shè)計(jì)得更加簡潔并且易于復(fù)用。對于的誤解新手會誤認(rèn)為指向函數(shù)本身。這時(shí)候，可以使用的方法強(qiáng)制使指向函數(shù)對象。的綁定和函數(shù)聲明的位置沒有任何關(guān)系，只取決于函數(shù)的調(diào)用方式。 關(guān)于this this 提供了一種優(yōu)雅的方式來隱式傳遞一個(gè)對象引用，因此可以將API設(shè)計(jì)得更加簡潔并且易于復(fù)用。 /* *this 隱式傳遞...
摘要：中指向問題一直是個(gè)坑，之前一直是懵懵懂懂的，大概知道一點(diǎn)，但一直不知道各種情況下指向有什么區(qū)別，今天親自動手測試了下的指向。這就是我關(guān)于學(xué)習(xí)的總結(jié)，希望能給需要的人點(diǎn)幫助，然后有啥不足希望有大神能指點(diǎn)出來。 js中this指向問題一直是個(gè)坑，之前一直是懵懵懂懂的，大概知道一點(diǎn)，但一直不知道各種情況下指向有什么區(qū)別，今天親自動手測試了下this的指向。 1.在對象中的this對象中的t...
摘要：中指向問題一直是個(gè)坑，之前一直是懵懵懂懂的，大概知道一點(diǎn)，但一直不知道各種情況下指向有什么區(qū)別，今天親自動手測試了下的指向。這就是我關(guān)于學(xué)習(xí)的總結(jié)，希望能給需要的人點(diǎn)幫助，然后有啥不足希望有大神能指點(diǎn)出來。 js中this指向問題一直是個(gè)坑，之前一直是懵懵懂懂的，大概知道一點(diǎn)，但一直不知道各種情況下指向有什么區(qū)別，今天親自動手測試了下this的指向。 1.在對象中的this對象中的t...
摘要：另外，的綁定和函數(shù)聲明的位置沒有任何關(guān)系，之取決于函數(shù)的調(diào)用方式。請看下面代碼這樣，我們就可以在調(diào)用的時(shí)候強(qiáng)制把它的綁定到上綁定在傳統(tǒng)的面向類語言中，使用初始化類時(shí)會調(diào)用類中的構(gòu)造函數(shù)。 關(guān)于this 上一章我們講了關(guān)于作用域和閉包的相關(guān)知識，現(xiàn)在開始新一輪的學(xué)習(xí)，那就是JavaScript中最復(fù)雜的機(jī)制之一---this關(guān)鍵字。它是一個(gè)很特別的關(guān)鍵字，被自動定義在所有函數(shù)的作用域中。...
閱讀 2686·2023-04-25 20:28
閱讀 1863·2021-11-22 09:34
閱讀 3694·2021-09-26 10:20
閱讀 1853·2021-09-22 16:05
閱讀 3094·2021-09-09 09:32
閱讀 2526·2021-08-31 09:40
閱讀 2108·2019-08-30 13:56
閱讀 3325·2019-08-29 17:01
