摘要:的使用環(huán)境分以下幾種情況普通函數(shù)調(diào)用作為構(gòu)造函數(shù)調(diào)用作為對(duì)象的方法來(lái)調(diào)用方法的調(diào)用普通函數(shù)調(diào)用單純函數(shù)調(diào)用屬于全局調(diào)用,指向指向?qū)ο螅跒g覽器著就是對(duì)象。
我們知道,this對(duì)象是在運(yùn)行時(shí)基于執(zhí)行函數(shù)的執(zhí)行環(huán)境綁定:在全局函數(shù)中,this等于window,而當(dāng)函數(shù)被當(dāng)做某個(gè)對(duì)象的方法調(diào)用時(shí),this等于那個(gè)對(duì)象。
this的使用環(huán)境分以下幾種情況:
普通函數(shù)調(diào)用
作為構(gòu)造函數(shù)調(diào)用
作為對(duì)象的方法來(lái)調(diào)用
call/apply/bind方法的調(diào)用
普通函數(shù)調(diào)用單純函數(shù)調(diào)用屬于全局調(diào)用,this指向this指向Global對(duì)象,在瀏覽器著就是window對(duì)象。
var name = "the window"; function fn(){ alert(this.name); } fn(); //the window
這個(gè)例子很好理解。在全局作用域中聲明的變量、函數(shù),都會(huì)變成window對(duì)象的屬性、方法,this指向window
var length = 10 function fn(){ alert(this.length) } var obj = { length: 5, method: function(fn) { fn() // ? arguments[0]() // ? } } obj.method(fn) //10 1
這個(gè)例子就不太好理解了。這里fn依然是單純的函數(shù)調(diào)用,我們知道,每個(gè)函數(shù)在被調(diào)用時(shí),都會(huì)自動(dòng)取得兩個(gè)特殊變量:this和arguments。內(nèi)部函數(shù)搜索這兩個(gè)變量時(shí),只會(huì)搜索到其活動(dòng)對(duì)象為止。所以這里fn中的this指向window。
另外要注意arguments是一個(gè)對(duì)象,對(duì)象屬于除了點(diǎn)操作符還可以用中括號(hào),arguments[0]()其實(shí)是fn作為arguments對(duì)象的方法被調(diào)用,this指向arguments,因?yàn)閰?shù)只有一個(gè)fn,因此length為1
var length = 10 var obj = { length: 5, method: function() { function fn(){ alert(this.length) } fn(); } } obj.method() //10
再稍微變換一下代碼,this依然指向window
作為對(duì)象的方法調(diào)用函數(shù)被作為某個(gè)方法時(shí),this等于那個(gè)對(duì)象
var length = 10 function fn(){ alert(this.length) } var obj = { length: 5, method: fn } obj.method() //5
再換一個(gè)例子
function fn(){ alert(this.length) } var obj1 = { length: 5, method: fn } var obj2 = { length: 6, method: obj1.method } obj2.method() //6作為構(gòu)造函數(shù)調(diào)用
通過new操作符來(lái)調(diào)用函數(shù),創(chuàng)建一個(gè)新的對(duì)象,將構(gòu)造函數(shù)的作用域賦予給新對(duì)象,因此this指向這個(gè)新對(duì)象。
var name = "windowName"; function fn(name){ this.name = name; this,sayName = function(){ alert(this.name); } } fn("fnName"); //fnNamecall/apply/bind方法的調(diào)用
這三個(gè)方法都是通過傳遞參數(shù)改變函數(shù)體內(nèi)的this。call和apply方法的作用相同,函數(shù)體內(nèi)的this指向的第一個(gè)參數(shù)。
var name = "window"; var o = { name: "object" }; function fn(){ alert(this.name) } fn.call(this); //window fn.call(window); //window fn.call(o); //object
var obj1 = { n1:"n1", n2:"n2" }; var obj2 = { n1:"nn1", n2:"nn2", fn:function(x,y){ this.n1 = x; this.n2 = y; } }; obj2.fn.call(obj1,"new1","new2"); console.log(obj1.n1); // new1 console.log(obj1.n2); // new2 console.log(obj2.n1); // nn1 console.log(obj2.n2); // nn2
bind方法會(huì)創(chuàng)建一個(gè)函數(shù)的實(shí)例,其this值會(huì)被綁定到傳給bind()函數(shù)的值
var obj1 = { n1:"n1", n2:"n2" }; var obj2 = { n1:"nn1", n2:"nn2", fn:function(x,y){ this.n1 = x; this.n2 = y; } }; var obj = obj2.fn.bind(obj1); obj("new1","new2"); console.log(obj1.n1); // new1 console.log(obj1.n2); // new2 console.log(obj2.n1); // nn1 console.log(obj2.n2); // nn2
參考資料
坑爹的js筆試題
JS中的this關(guān)鍵字詳解
關(guān)注作者吧~
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://systransis.cn/yun/91081.html
摘要:理解的函數(shù)基礎(chǔ)要搞好深入淺出原型使用原型模型,雖然這經(jīng)常被當(dāng)作缺點(diǎn)提及,但是只要善于運(yùn)用,其實(shí)基于原型的繼承模型比傳統(tǒng)的類繼承還要強(qiáng)大。中文指南基本操作指南二繼續(xù)熟悉的幾對(duì)方法,包括,,。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。 怎樣使用 this 因?yàn)楸救藢儆趥吻岸?,因此文中只看懂?8 成左右,希望能夠給大家?guī)?lái)幫助....(據(jù)說是阿里的前端妹子寫的) this 的值到底...
摘要:第四點(diǎn)也要著重講下,記住構(gòu)造函數(shù)被操作,要讓正常作用最好不能在構(gòu)造函數(shù)里 4) this、new、call和apply的相關(guān)問題 講解this指針的原理是個(gè)很復(fù)雜的問題,如果我們從javascript里this的實(shí)現(xiàn)機(jī)制來(lái)說明this,很多朋友可能會(huì)越來(lái)越糊涂,因此本篇打算換一個(gè)思路從應(yīng)用的角度來(lái)講解this指針,從這個(gè)角度理解this指針更加有現(xiàn)實(shí)意義。 下面我們看看在ja...
摘要:對(duì)象在中,除了數(shù)字字符串布爾值這幾個(gè)簡(jiǎn)單類型外,其他的都是對(duì)象。那么在函數(shù)對(duì)象中,這兩個(gè)屬性的有什么區(qū)別呢表示該函數(shù)對(duì)象的原型表示使用來(lái)執(zhí)行該函數(shù)時(shí)這種函數(shù)一般成為構(gòu)造函數(shù),后面會(huì)講解,新創(chuàng)建的對(duì)象的原型。這時(shí)的函數(shù)通常稱為構(gòu)造函數(shù)。。 本文原發(fā)于我的個(gè)人博客,經(jīng)多次修改后發(fā)到sf上。本文仍在不斷修改中,最新版請(qǐng)?jiān)L問個(gè)人博客。 最近工作一直在用nodejs做開發(fā),有了nodejs,...
摘要:中函數(shù)的調(diào)用有以下幾種方式作為對(duì)象方法調(diào)用,作為函數(shù)調(diào)用,作為構(gòu)造函數(shù)調(diào)用,和使用或調(diào)用。作為構(gòu)造函數(shù)調(diào)用中的構(gòu)造函數(shù)也很特殊,構(gòu)造函數(shù),其實(shí)就是通過這個(gè)函數(shù)生成一個(gè)新對(duì)象,這時(shí)候的就會(huì)指向這個(gè)新對(duì)象如果不使用調(diào)用,則和普通函數(shù)一樣。 this 是 JavaScript 比較特殊的關(guān)鍵字,本文將深入淺出的分析其在不同情況下的含義,可以這樣說,正確掌握了 JavaScript 中的 th...
摘要:所以相同點(diǎn)是,在全局范圍內(nèi),全局變量終究是屬于老大的。只生效一次引入了。只生效一次在箭頭函數(shù)中,與封閉詞法環(huán)境的保持一致。我通常把這些原始函數(shù)叫做構(gòu)造函數(shù)。在里面你可以嵌套函數(shù),也就是你可以在函數(shù)里面定義函數(shù)。 showImg(https://img-blog.csdnimg.cn/20190522000008399.jpg?x-oss-process=image/watermark,...
摘要:當(dāng)談到語(yǔ)言與其他編程語(yǔ)言相比時(shí),你可能會(huì)聽到一些令人困惑東西,其中之一是工廠函數(shù)和構(gòu)造函數(shù)。好的,讓我們用構(gòu)造函數(shù)做同樣的實(shí)驗(yàn)。當(dāng)我們使用工廠函數(shù)創(chuàng)建對(duì)象時(shí),它的指向,而當(dāng)從構(gòu)造函數(shù)創(chuàng)建對(duì)象時(shí),它指向它的構(gòu)造函數(shù)原型對(duì)象。 showImg(https://segmentfault.com/img/bVbr58T?w=1600&h=900); 當(dāng)談到JavaScript語(yǔ)言與其他編程語(yǔ)言...
閱讀 2761·2021-11-16 11:45
閱讀 1669·2021-09-26 10:19
閱讀 2062·2021-09-13 10:28
閱讀 2822·2021-09-08 10:46
閱讀 1547·2021-09-07 10:13
閱讀 1544·2019-08-30 13:50
閱讀 1383·2019-08-30 11:17
閱讀 1463·2019-08-29 13:18