資訊專欄INFORMATION COLUMN
摘要：下面只探討在瀏覽器中的指向，有興趣的也可以把后面的例子在中跑一下。
我們知道js中有個全局對象就是window,如果在頂層聲明一個變量如
var a=1 //就相當于window.a=1
同時有了node以后，js也可以在服務端運行了，官方解釋為Node.js 是一個基于 Chrome V8 引擎的 JavaScript 運行環(huán)境。通俗說node是一個支持js語法的容器，直接寫js就可以在node下運行。這里介紹node主要說一下在node中的全局變量叫global,就像window一樣有一些js默認的變量和方法。下面只探討this在瀏覽器中的指向，有興趣的也可以把后面的例子在node中跑一下。
this一般在函數(shù)中使用比較多，那就從函數(shù)說起吧，我們調(diào)用的函數(shù)一般分為聲明式函數(shù)，或者是放在對象中作為方法的函數(shù)function demo1(){
console.log(this)
}
function demo2(){
this.num=2
function demo3(){
this.num++
console.log(num)
}
return demo3
}
demo1() // 調(diào)用demo1函數(shù)，這里this很顯然指向window
var a=demo2();
a() // 這里看到會打印出3，應該也很好理解，a變量將demo2函數(shù)執(zhí)行后的的返回值及demo3函數(shù)返回，然后執(zhí)行，此時this依舊指向window
var obj1={
value:3,
increment:function(){
this.value++;
console.log(this,this.value)
}
}
obj1.increment() // obj1{value:4,increment:function(){...}},4 ;打印出obj1對象和4，obj1包含一個value值和一個increment方法，也好理解
在看一個例子
var obj2={
value:4,
increment:function(){
this.value++;
console.log(this,this.value);
(function(){
console.log("這又是啥",this,this.value)
this.value=1
})()
},
print:function(){
console.log("print",this.value)
}
}
obj2.increment()
obj2.print()
var P=obj2.print
P()
// 打印結(jié)果出如下
// {value: 5, increment: ?, print: ?}
// 5
// 這又是啥 Window
// undefined
// print 5
// print 1
第一條先執(zhí)行obj2中的increment方法，跟上一個例子一樣，這里的this是指向我obj2對象，所以this.value再執(zhí)行+1以后為5，后面是一個自執(zhí)行函數(shù)，這里面的this直接指向了window，window的value一開始不存在所以為undefined,后面增加一個全局變量value值為1；然后是第二條直接執(zhí)行obj2中的方法print，此時的this還是obj2所以值為5,；然后是第三條聲明一個變量P指向obj2中的print方法，執(zhí)行這個方法這是this指向window，所以輸出1
使用聲明式函數(shù)（后面兩個對象中的方法也是使用的聲明式函數(shù)）會自動綁定this,直接在全局中聲明的函數(shù)this會直接指向window對象延伸一下，現(xiàn)在我們都經(jīng)常會用的es6的箭頭函數(shù)，箭頭函數(shù)是不會自動綁定this的，默認從上一級繼承下來，那不妨把剛才的例子改下看看
var demo1=()=>{
console.log(this)
}
var demo2=()=>{
this.num=2
function demo3(){
this.num++
console.log(num)
}
return demo3
}
demo1() // 調(diào)用demo1函數(shù)，這里this還是指向window,因為之前說的在全局下聲明本身就有個this指向window對象
var a=demo2();
a() // 3，這里也一樣
var obj1={
value:3,
increment:()=>{
this.value++;
console.log(this,this.value)
}
}
obj1.increment() // 這時候會看到輸出window對象和一個NaN
如前面所說箭頭函數(shù)不會自動綁定this，所以執(zhí)行increment函數(shù)中的this依舊會指向window，而window下的value還不存在，所以為undefined再執(zhí)行+1操作所以value就變成了NaN了
var obj2={
value:4,
increment:()=>{
this.value++;
console.log(this,this.value);
(function(){
console.log("這又是啥",this,this.value)
this.value=1
})()
},
print:()=>{
console.log("print",this.value)
}
}
obj2.increment()
obj2.print()
var P=obj2.print
P()
// 打印結(jié)果出如下
// Window
// NaN
// 這又是啥 Window
// NaN
// print 1
// print 1
第一個依舊window對象(this沒綁定的嘛)，后面的value當然又是沒聲明.....然后自執(zhí)行函數(shù)也沒得說,后面才接著給window的value賦值為1了，后面就兩句自然輸出兩次1了
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/93335.html
摘要：中指向問題一直是個坑，之前一直是懵懵懂懂的，大概知道一點，但一直不知道各種情況下指向有什么區(qū)別，今天親自動手測試了下的指向。這就是我關(guān)于學習的總結(jié)，希望能給需要的人點幫助，然后有啥不足希望有大神能指點出來。 js中this指向問題一直是個坑，之前一直是懵懵懂懂的，大概知道一點，但一直不知道各種情況下指向有什么區(qū)別，今天親自動手測試了下this的指向。 1.在對象中的this對象中的t...
摘要：中指向問題一直是個坑，之前一直是懵懵懂懂的，大概知道一點，但一直不知道各種情況下指向有什么區(qū)別，今天親自動手測試了下的指向。這就是我關(guān)于學習的總結(jié)，希望能給需要的人點幫助，然后有啥不足希望有大神能指點出來。 js中this指向問題一直是個坑，之前一直是懵懵懂懂的，大概知道一點，但一直不知道各種情況下指向有什么區(qū)別，今天親自動手測試了下this的指向。 1.在對象中的this對象中的t...
摘要：插件開發(fā)知識點總結(jié)和動畫性能問題的研究這篇文章主要是總結(jié)最近開發(fā)過程中遇到的問題。有幾個問題又是不容易發(fā)現(xiàn)原因的問題，但是最后的結(jié)果又是很簡單的。和都是可以指定函數(shù)運行時，的值。比如觸發(fā)盒子的還有就是禁止元素在水平或者豎直方向滾動。 myslide 插件開發(fā)知識點總結(jié)和 css3 動畫性能問題的研究 這篇文章主要是總結(jié)最近開發(fā)過程中遇到的問題。有幾個問題又是不容易發(fā)現(xiàn)原因的問題，但是最...
摘要：關(guān)于的指向問題算的上是中的一個十分重要的問題了。首先，的指向問題可以用一句話總結(jié)就是總是指向調(diào)用的對象，也就是說指向誰與函數(shù)聲明的位置沒有關(guān)系，只與調(diào)用的位置有關(guān)。此外注意幾種特殊情況，特別是中的箭頭函數(shù)。 關(guān)于this的指向問題算的上是js中的一個十分重要的問題了。今天把這個問題總結(jié)下，加深下自己對this的理解。首先，this的指向問題可以用一句話總結(jié)就是：this總是指向調(diào)用的對...
閱讀 1076·2021-10-14 09:42
閱讀 1369·2021-09-22 15:11
閱讀 3285·2019-08-30 15:56
閱讀 1243·2019-08-30 15:55
閱讀 3612·2019-08-30 15:55
閱讀 889·2019-08-30 15:44
閱讀 2028·2019-08-29 17:17
閱讀 2072·2019-08-29 15:37
