摘要:關(guān)鍵詞概述是什么關(guān)鍵字是中最復(fù)雜的機制之一。它是一個很特別的關(guān)鍵字,被自動定義在所有函數(shù)的作用域中。當調(diào)用函數(shù)時,被解析成了全局變量。中提供了方法和方法實現(xiàn),這兩個方法的第一個參數(shù)接受一個對象,會把這個對象綁定到,接著在調(diào)用函數(shù)是指定這個。
this關(guān)鍵詞
概述
this是什么
this關(guān)鍵字是JavaScript中最復(fù)雜的機制之一。它是一個很特別的關(guān)鍵字,被自動定義在所有函數(shù)的作用域中。但是即使在非常有經(jīng)驗的JavaScript開發(fā)者也很難說清它到底指向什么。
世界上,JavaScript中this 的機制并沒有那么先進,但是開發(fā)者往往會把理解過程復(fù)雜化。毫不夸張地說,不理解它的含義,大部分開發(fā)任務(wù)都無法完成。
this都有一個共同點,他總是返回一個對象。簡單說,this就是屬性或方法‘當前’所在的對象。
var = person ={
name :"張三",
describe:function(){
return"姓名"+this.name;}
};
person.descibe();//"姓名:張三"
為什么要使用this
this提供了一種更優(yōu)雅的方式來隱式‘傳遞’一個對象引用,因此可以將API設(shè)計的更加簡介并且易于復(fù)用。
隨著你的使用模式越來越復(fù)雜,顯示傳遞上下文對象會讓代碼變得越來越混亂,使用this則不會這樣。
function indetify() {return this.name.toUpperCase();}
function speak(){ console.log("Hello, i"m"+identify.call(this)); }
var me ={name :"Kyle"};
var you ={name:"Reader"};
identify.call(me);//KYLE
identify.call(you);//READER
speak.call(me);//Hello,我是KYLE
speak.call(you);//Hello,我式READER
調(diào)用位置
想要了解this的綁定過程,首先要理解調(diào)用位置:調(diào)用位置就是函數(shù)在代碼中被調(diào)用的位置(而不是聲明的位置)。
通常來說,尋找調(diào)用位置就是尋找“函數(shù)被調(diào)用的位置”。最重要的式要分析調(diào)用棧(就是為了到達當前執(zhí)行位置調(diào)用的所有函數(shù))。
function baz(){
//當前調(diào)用棧式:baz。因此,當前調(diào)用位置式全局作用域
console.log("baz");
bar();//<--bar的調(diào)用位置
}
function bar (){82
//當前調(diào)用棧式baz-> bar。因此,當前調(diào)用位置在baa中sonsole.log("bar");
}
baz();//<--baz的調(diào)用位置
綁定規(guī)則
默認綁定
在一個函數(shù)體中使用this,當該函數(shù)被獨立調(diào)用??梢园堰@條規(guī)則看作式無法應(yīng)用 其他規(guī)則時的默認規(guī)則。
function foo(){
console.log(this,a);
}
var a =2
foo();//2
聲明在全局作用域中的變量(比如 var a=2)就是全局對象的一個同名屬性。當調(diào)用foo()函數(shù)時,
this a 被解析成了全局變量a。
函數(shù)調(diào)用時應(yīng)用了this 的默認綁定,因此this指向全局對象。
隱式綁定
隱式綁定的規(guī)則需要考慮的式調(diào)用位置是否有上下文對象,或者說是否被某個對象擁有或者包含。當然,這種說法并不準確。
function foo(){
console.log(this.a);}
var obj = {a:2,
foo:foo};
obj.foo()//2
調(diào)用位置會使用ovj上下文來引用函數(shù),因此你可以說函數(shù)被調(diào)用時obj對象‘’擁有或者 ‘包含’它。
隱式綁定
隱式丟失式最常見的this 綁定問題,指的就是被隱式綁定的函數(shù)會丟失綁定對象,也就是說它會應(yīng)用默認綁定,從而把this綁定到全局對象。
function foo(){
console.log(this.a);}
var obj ={a:2,
foo:foo};
var bar = obj.foo;函數(shù)別名
var a ="Opps,global";//a式全局對象屬性
bar();//"oops,global"
bar式obj.foo的一個引用,但是實際上,他引用的是foo函數(shù)本身,因此此時的bar()其實是一個不帶任何修飾符的函數(shù)調(diào)用,因此應(yīng)用了默認綁定。
顯示綁定
顯示綁定就是確定在調(diào)用時,this所綁定的對象。JavaScript中提供了apply()方法和call方法實現(xiàn),
這兩個方法的第一個參數(shù)接受一個對象,會把這個對象綁定到this,接著在調(diào)用函數(shù)是指定這個this。
function foo(){
console.log(this.a);}
var obj ={a:2};
foo.call(obj);//2
如果傳入了一個原始值來當作this 的綁定對象,這個原始值會被轉(zhuǎn)換成它的對象形式,這通常被稱之為"裝箱"。
new綁定
在JavaScript中,構(gòu)造函數(shù)只是一些使用new操作符時被調(diào)用的函數(shù)。包括內(nèi)置對象函數(shù)在內(nèi)的所有函數(shù)都可用new函數(shù),會自動執(zhí)行下面的操作:
1創(chuàng)建(或者說構(gòu)造)一個全安行的對象。
2這個新對象會綁定到函數(shù)調(diào)用的this。
3如果函數(shù)沒有返回其他對像,那么new表達式中的函數(shù)調(diào)用會自動返回這個新對象。
function foo (a){
this.a = a;}
var bar = new foo(2);
console.log(bar.a);//2
綁定例外
被忽略的this
如果把null或者undefined作為this 的綁定對象的傳入call ,apply或者bind,這些值在調(diào)用時會被忽略,實際應(yīng)用的是默認綁定規(guī)則。
function foo(){
console.log(this.a);}
var a = 2;
foo.call (null);//2
間接引用
有可能(有意或者無意的)創(chuàng)建一個函數(shù)的"間接引用",在著中情況下,調(diào)用這個函數(shù)會應(yīng)用默認綁定規(guī)則。
間接引用最容易在賦值時放生:
function foo(){
console.log(this.a);}
var a =2;
var 0 = {a:3,
foo:foo};
var p = {a:4};
o.foo();//3
(p,foo = o.foo)();//2
注意事項
避免多層this
多層函數(shù)或方法嵌套可能導致不同層次的this綁定的對象不同,如下示代碼所示:
var 0 = {
f1:function (){
console.log(this);
var f2 = function(){
console.log(this);}
();}}o.f1();
上面代碼包含兩層this,結(jié)果運行后,第一層指向?qū)ο髈,第二層指向全局對象。
避免數(shù)組方法中的this
數(shù)組的map和foreach方法,允許提供一個函數(shù)作為參數(shù)。這個函數(shù)內(nèi)部不應(yīng)該使用this。
var o = {
v:"hello",
p:["a1","a2"],
f:function f(){
this.p.forEach(function(idem){
console.log(this.v+""+item);}) }}
o.f();
上面代碼中,foreach方法的回調(diào)函數(shù)中的this,其實是指向全局對象,因此取不到o.v的值。
避免回電函數(shù)中的this 回調(diào)函數(shù)中的this 經(jīng)常會改變綁定的對象,最好的解決方案就是避免這樣使用this。
Var 0 ={
name :"臥龍學院"}
o.fn = function(){
console.log (this.name);}
var name = "前端開發(fā)";
function f(v){
v();}f(o.fn);
上面的代碼中,f()方法的回調(diào)函數(shù)中this ,其實是指向全局對象。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/97090.html
摘要:除此之外,還有一種情況也會修改,在一些庫中傳入回調(diào)函數(shù),可能會強制改變的綁定,例如在中本例中的就是被強制改變綁定到了觸發(fā)事件的元素上。它們的第一個參數(shù)是一個對象,它們會把這個對象綁定到,接著在調(diào)用函數(shù)時指定這個。 理解JavaScript中的this關(guān)鍵詞 this關(guān)鍵詞是JavaScript語言中一個很重要,同時也是一個非常復(fù)雜的機制,它同時也是一個很特殊的關(guān)鍵詞,它一般會被自動定義...
摘要:高亮顯示通過實現(xiàn)對關(guān)鍵詞的替換,通過添加實現(xiàn)關(guān)鍵詞高亮顯示匹配關(guān)鍵字正則高亮替換值在查詢到結(jié)果后執(zhí)行方法將查詢出來的數(shù)據(jù)傳遞過來通過來將關(guān)鍵詞替換成標簽,同時用中的進行綁定。 最近在做移動real-time-search于實時搜索和關(guān)鍵詞高亮顯示的功能,通過博客的方式總結(jié)一下,同時希望能夠幫助到別人~~~ 如果不喜歡看文字的朋友我寫了一個demo方便已經(jīng)上傳到了github上,可以cl...
摘要:高亮顯示通過實現(xiàn)對關(guān)鍵詞的替換,通過添加實現(xiàn)關(guān)鍵詞高亮顯示匹配關(guān)鍵字正則高亮替換值在查詢到結(jié)果后執(zhí)行方法將查詢出來的數(shù)據(jù)傳遞過來通過來將關(guān)鍵詞替換成標簽,同時用中的進行綁定。 最近在做移動real-time-search于實時搜索和關(guān)鍵詞高亮顯示的功能,通過博客的方式總結(jié)一下,同時希望能夠幫助到別人~~~ 如果不喜歡看文字的朋友我寫了一個demo方便已經(jīng)上傳到了github上,可以cl...
摘要:在中,當使用關(guān)鍵字調(diào)用函數(shù)構(gòu)造函數(shù)時,函數(shù)構(gòu)造函數(shù)中也有這個概念,但是它不是惟一的規(guī)則,而且常常可以引用來自不同執(zhí)行上下文的不同對象。因此,我們使用調(diào)用函數(shù),可以看到這是對象,并且的屬性是正常的。 一直以來,javascript里邊的this都是一個很難理解的東西,之前看的最多的就是阮一峰老師關(guān)于this的理解: http://www.ruanyifeng.com/blo... htt...
閱讀 842·2023-04-25 22:13
閱讀 2351·2019-08-30 15:56
閱讀 2234·2019-08-30 11:21
閱讀 661·2019-08-30 11:13
閱讀 2029·2019-08-26 14:06
閱讀 1966·2019-08-26 12:11
閱讀 2297·2019-08-23 16:55
閱讀 546·2019-08-23 15:30