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