之前關(guān)注了一個公眾號: JavaScript,里面詳細描述了this的各種情況,在此總結(jié)一下.
只考慮當(dāng)宿主環(huán)境是瀏覽器的時候,并且處于非嚴格模式下:
this是在運行時綁定的,并不是在編寫時綁定的,this的綁定只取決于函數(shù)的調(diào)用方式.
在全局范圍內(nèi),this等價于window對象。
console.log(this === window); //true
在全局范圍內(nèi),用var聲明一個變量和給this或者window添加屬性是等價的。
var foo = "bar"; console.log(foo); //"bar" console.log(window.foo); //"bar" console.log(this.foo); //"bar"
在全局范圍內(nèi),直接給一個變量賦值(不用var聲明)和給this或者window添加屬性(也可能是改變屬性值)是等價的。
//添加 foo = "bar"; console.log(foo); //"bar" console.log(window.foo); //"bar" console.log(this.foo); //"bar" //改變 foo = "bar"; function changeFoo() { foo = "foo"; //因為在函數(shù)內(nèi)沒有用var定義foo,所以此時的foo和上面的foo是同一個變量 } console.log(this.foo); //"bar" changeFoo(); console.log(this.foo); //"foo"
普通函數(shù)調(diào)用
foo = "bar"; function changeFoo() { this.foo = "foo"; } console.log(this.foo); //"bar" changeFoo(); console.log(this.foo); //"foo"
new調(diào)用
foo = "bar"; function changeFoo() { this.foo = "foo"; } console.log(this.foo); //"bar" console.log(new changeFoo().foo); //"foo" console.log(this.foo); //"bar" function Thing() { console.log(this); // 此時的this是一個新創(chuàng)建的空對象,即{},并且{}.__proto__ === Thing.prototype console.log(this.foo); //該對象沒有自有屬性,會去訪問this.__proto__上的foo屬性 } Thing.prototype.foo = "bar"; var thing = new Thing(); //"bar" console.log(thing.foo); //"bar"
當(dāng)作對象的方法調(diào)用
var obj = { name: "irene", getName: function() { console.log(this.name); } } obj.getName(); //"irene".此時this指向?qū)ο髈bj 簡單坑: var getName = obj.getName; getName(); // undefined.此時是普通函數(shù)調(diào)用,this指向全局對象window 高級坑: var obj2 = { name: "irene2" } (obj2.getName = obj.getName)(); // undefined.此時復(fù)制操作的返回值是function() {console,.log(this.name);},然后調(diào)用這個函數(shù),又是普通函數(shù)調(diào)用的情況,所以this指向全局對象window. 高級坑: var obj = { name: "irene", foo: function() { console.log(this); } foo2: function() { console.log(this); setTimeout(function(){ console.log(this); }, 1000); } }; obj.foo(); //指向obj,屬于當(dāng)作對象的方法調(diào)用的情況 obj.foo2(); //第一個this指向obj,和上面的情況一致,1s之后,輸出的this指向全局對象,屬于普通函數(shù)調(diào)用的情況.這是為何???
我個人的理解是醬紫的:JS只有一個線程,稱為主線程.先執(zhí)行主線程中執(zhí)行棧里的代碼,當(dāng)主線程執(zhí)行棧為空時,才會進行事件循環(huán)來查看是否有待處理事件,當(dāng)事件循環(huán)檢測到任務(wù)隊列中有事件就取出相關(guān)回調(diào)放入執(zhí)行棧中,由主線程執(zhí)行.setTimeout的第一個函數(shù)參數(shù)function() {console.log(this);}會被添加到了任務(wù)隊列中.當(dāng)obj.foo2();執(zhí)行完之后(即主線程執(zhí)行棧為空),取出任務(wù)隊列中的function() {console.log(this);}放入執(zhí)行棧中,然后執(zhí)行.此時的執(zhí)行環(huán)境是全局環(huán)境,所以this指向全局對象window.關(guān)于JS的線程/事件循環(huán)/任務(wù)隊列可以參考http://www.cnblogs.com/3body/...
簡單坑: var personA = { name: "xl", showName: function() { console.log(this.name); } }; var personB = { name: "xll", getName: personA }; var personC = { name: "xll", getName: personA.showName }; personB.getName.showName(); //"xl" personC.getName(); //"xll" 簡單坑: var name = "jay"; var person = { name: "irene", getName: function() { return function() { return this.name; } } }; console.log(person.getName()()); //"jay" 簡單坑: function a() { var t = "r"; function b() { console.log(this); console.log(t); } b(); return b; } a(); //普通函數(shù)調(diào)用,所以this指向全局對象window
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/81878.html
摘要:理解的函數(shù)基礎(chǔ)要搞好深入淺出原型使用原型模型,雖然這經(jīng)常被當(dāng)作缺點提及,但是只要善于運用,其實基于原型的繼承模型比傳統(tǒng)的類繼承還要強大。中文指南基本操作指南二繼續(xù)熟悉的幾對方法,包括,,。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。 怎樣使用 this 因為本人屬于偽前端,因此文中只看懂了 8 成左右,希望能夠給大家?guī)韼椭?...(據(jù)說是阿里的前端妹子寫的) this 的值到底...
摘要:和類在開始時遇到類組件,只是需要有關(guān)類的基礎(chǔ)。畢竟,中的條件呈現(xiàn)僅再次顯示大多數(shù)是而不是特定的任何內(nèi)容。 在我的研討會期間,更多的材料是關(guān)于JavaScript而不是React。其中大部分歸結(jié)為JavaScript ES6以及功能和語法,但也包括三元運算符,語言中的簡寫版本,此對象,JavaScript內(nèi)置函數(shù)(map,reduce,filter)或更常識性的概念,如:可組合性,可重用...
摘要:對象在中,除了數(shù)字字符串布爾值這幾個簡單類型外,其他的都是對象。那么在函數(shù)對象中,這兩個屬性的有什么區(qū)別呢表示該函數(shù)對象的原型表示使用來執(zhí)行該函數(shù)時這種函數(shù)一般成為構(gòu)造函數(shù),后面會講解,新創(chuàng)建的對象的原型。這時的函數(shù)通常稱為構(gòu)造函數(shù)。。 本文原發(fā)于我的個人博客,經(jīng)多次修改后發(fā)到sf上。本文仍在不斷修改中,最新版請訪問個人博客。 最近工作一直在用nodejs做開發(fā),有了nodejs,...
摘要:所以相同點是,在全局范圍內(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,...
摘要:原文許多人被中的關(guān)鍵字給困擾住了,我想混亂的根源來自人們理所當(dāng)然地認為中的應(yīng)該像中的或中的一樣工作。盡管有點難理解,但它的原理并不神秘。在瀏覽器中,全局對象是對象。運算符創(chuàng)建一個新對象并且設(shè)置函數(shù)中的指向調(diào)用函數(shù)的新對象。 原文:Understanding the this keyword in JavaScript 許多人被JavaScript中的this關(guān)鍵字給困擾住了,我想混亂的...
閱讀 3682·2021-10-11 11:09
閱讀 1346·2021-09-24 10:35
閱讀 3437·2021-07-29 13:48
閱讀 468·2019-08-30 13:15
閱讀 2522·2019-08-30 12:53
閱讀 3213·2019-08-30 12:44
閱讀 2717·2019-08-29 16:57
閱讀 967·2019-08-29 12:26