this關鍵詞

explorer_ddf 發布于2019-08-23 11:31 / 2910人閱讀

摘要：關鍵詞概述是什么關鍵字是中最復雜的機制之一。它是一個很特別的關鍵字，被自動定義在所有函數的作用域中。當調用函數時，被解析成了全局變量。中提供了方法和方法實現，這兩個方法的第一個參數接受一個對象，會把這個對象綁定到，接著在調用函數是指定這個。

this關鍵詞
概述
this是什么
this關鍵字是JavaScript中最復雜的機制之一。它是一個很特別的關鍵字，被自動定義在所有函數的作用域中。但是即使在非常有經驗的JavaScript開發者也很難說清它到底指向什么。
世界上，JavaScript中this 的機制并沒有那么先進，但是開發者往往會把理解過程復雜化。毫不夸張地說，不理解它的含義，大部分開發任務都無法完成。
this都有一個共同點，他總是返回一個對象。簡單說，this就是屬性或方法‘當前’所在的對象。
var = person ={
name :"張三"，
describe：function（）{
return"姓名"+this.name；}
}；
person.descibe（）；//"姓名：張三"

為什么要使用this
this提供了一種更優雅的方式來隱式‘傳遞’一個對象引用，因此可以將API設計的更加簡介并且易于復用。
隨著你的使用模式越來越復雜，顯示傳遞上下文對象會讓代碼變得越來越混亂，使用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

調用位置
想要了解this的綁定過程，首先要理解調用位置：調用位置就是函數在代碼中被調用的位置（而不是聲明的位置）。
通常來說，尋找調用位置就是尋找“函數被調用的位置”。最重要的式要分析調用棧（就是為了到達當前執行位置調用的所有函數）。
function baz(){
//當前調用棧式：baz。因此，當前調用位置式全局作用域
console.log（"baz"）；
bar（）；//<--bar的調用位置
}
function bar （）{82
//當前調用棧式baz-> bar。因此，當前調用位置在baa中sonsole.log（"bar"）；
}
baz（）；//<--baz的調用位置

綁定規則
默認綁定
在一個函數體中使用this，當該函數被獨立調用。可以把這條規則看作式無法應用其他規則時的默認規則。
function foo(){
console.log(this,a);
}
var a =2
foo();//2
聲明在全局作用域中的變量（比如 var a=2）就是全局對象的一個同名屬性。當調用foo（）函數時，
this a 被解析成了全局變量a。
函數調用時應用了this 的默認綁定，因此this指向全局對象。

隱式綁定
隱式綁定的規則需要考慮的式調用位置是否有上下文對象，或者說是否被某個對象擁有或者包含。當然，這種說法并不準確。
function foo（）{
console.log（this.a）；}
var obj = {a：2，
foo：foo}；
obj.foo（）//2
調用位置會使用ovj上下文來引用函數，因此你可以說函數被調用時obj對象‘’擁有或者 ‘包含’它。
隱式綁定
隱式丟失式最常見的this 綁定問題，指的就是被隱式綁定的函數會丟失綁定對象，也就是說它會應用默認綁定，從而把this綁定到全局對象。
function foo（）{
console.log（this.a）；}
var obj ={a：2，
foo：foo}；
var bar = obj.foo；函數別名
var a ="Opps,global"；//a式全局對象屬性
bar（）；//"oops，global"
bar式obj.foo的一個引用，但是實際上，他引用的是foo函數本身，因此此時的bar（）其實是一個不帶任何修飾符的函數調用，因此應用了默認綁定。

顯示綁定
顯示綁定就是確定在調用時，this所綁定的對象。JavaScript中提供了apply（）方法和call方法實現，
這兩個方法的第一個參數接受一個對象，會把這個對象綁定到this，接著在調用函數是指定這個this。
function foo(){
console.log(this.a);}
var obj ={a:2};
foo.call(obj);//2
如果傳入了一個原始值來當作this 的綁定對象，這個原始值會被轉換成它的對象形式，這通常被稱之為"裝箱"。

new綁定
在JavaScript中，構造函數只是一些使用new操作符時被調用的函數。包括內置對象函數在內的所有函數都可用new函數，會自動執行下面的操作：
1創建（或者說構造）一個全安行的對象。
2這個新對象會綁定到函數調用的this。
3如果函數沒有返回其他對像，那么new表達式中的函數調用會自動返回這個新對象。
function foo （a）{
this.a = a；}
var bar = new foo（2）；
console.log（bar.a）；//2

綁定例外
被忽略的this
如果把null或者undefined作為this 的綁定對象的傳入call ，apply或者bind，這些值在調用時會被忽略，實際應用的是默認綁定規則。
function foo（）{
console.log（this.a）；}
var a = 2；
foo.call （null）；//2
間接引用
有可能（有意或者無意的）創建一個函數的"間接引用"，在著中情況下，調用這個函數會應用默認綁定規則。
間接引用最容易在賦值時放生：
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
多層函數或方法嵌套可能導致不同層次的this綁定的對象不同，如下示代碼所示：
var 0 = {
f1：function （）{
console.log（this）；
var f2 = function(){
console.log(this);}
();}}o.f1();
上面代碼包含兩層this，結果運行后，第一層指向對象o，第二層指向全局對象。

避免數組方法中的this
數組的map和foreach方法，允許提供一個函數作為參數。這個函數內部不應該使用this。
var o = {
v："hello",
p:["a1","a2"],
f:function f(){
this.p.forEach(function(idem){
console.log(this.v+""+item);}) }}
o.f();
上面代碼中，foreach方法的回調函數中的this，其實是指向全局對象，因此取不到o.v的值。

避免回電函數中的this 回調函數中的this 經常會改變綁定的對象，最好的解決方案就是避免這樣使用this。
Var 0 ={
name :"臥龍學院"}
o.fn = function(){
console.log (this.name);}
var name = "前端開發"；
function f（v）{
v（）；}f(o.fn);
上面的代碼中，f（）方法的回調函數中this ，其實是指向全局對象。

GPU云服務器云服務器 jsp關鍵字this this[] this _this

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97090.html

理解JavaScript中的this關鍵詞

摘要：除此之外，還有一種情況也會修改，在一些庫中傳入回調函數，可能會強制改變的綁定，例如在中本例中的就是被強制改變綁定到了觸發事件的元素上。它們的第一個參數是一個對象，它們會把這個對象綁定到，接著在調用函數時指定這個。理解JavaScript中的this關鍵詞 this關鍵詞是JavaScript語言中一個很重要，同時也是一個非常復雜的機制，它同時也是一個很特殊的關鍵詞，它一般會被自動定義...

paulquei 2019-08-20 10:45 評論0 收藏0
基于Vue實現關鍵詞實時搜索高亮顯示關鍵詞

摘要：高亮顯示通過實現對關鍵詞的替換，通過添加實現關鍵詞高亮顯示匹配關鍵字正則高亮替換值在查詢到結果后執行方法將查詢出來的數據傳遞過來通過來將關鍵詞替換成標簽，同時用中的進行綁定。最近在做移動real-time-search于實時搜索和關鍵詞高亮顯示的功能，通過博客的方式總結一下，同時希望能夠幫助到別人~~~ 如果不喜歡看文字的朋友我寫了一個demo方便已經上傳到了github上，可以cl...

NusterCache 2019-08-22 18:50 評論0 收藏0
基于Vue實現關鍵詞實時搜索高亮顯示關鍵詞

摘要：高亮顯示通過實現對關鍵詞的替換，通過添加實現關鍵詞高亮顯示匹配關鍵字正則高亮替換值在查詢到結果后執行方法將查詢出來的數據傳遞過來通過來將關鍵詞替換成標簽，同時用中的進行綁定。最近在做移動real-time-search于實時搜索和關鍵詞高亮顯示的功能，通過博客的方式總結一下，同時希望能夠幫助到別人~~~ 如果不喜歡看文字的朋友我寫了一個demo方便已經上傳到了github上，可以cl...

xushaojieaaa 2019-08-30 15:54 評論0 收藏0
【譯】javascript的this關鍵詞理解

摘要：在中，當使用關鍵字調用函數構造函數時，函數構造函數中也有這個概念，但是它不是惟一的規則，而且常常可以引用來自不同執行上下文的不同對象。因此，我們使用調用函數，可以看到這是對象，并且的屬性是正常的。一直以來，javascript里邊的this都是一個很難理解的東西，之前看的最多的就是阮一峰老師關于this的理解： http://www.ruanyifeng.com/blo... htt...

tainzhi 2019-08-23 17:06 評論0 收藏0