成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

總結(jié)js中this的指向問(wèn)題

lieeps / 3130人閱讀

摘要：下面只探討在瀏覽器中的指向，有興趣的也可以把后面的例子在中跑一下。

我們知道js中有個(gè)全局對(duì)象就是window,如果在頂層聲明一個(gè)變量如

var a=1 //就相當(dāng)于window.a=1

同時(shí)有了node以后，js也可以在服務(wù)端運(yùn)行了，官方解釋為Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境。通俗說(shuō)node是一個(gè)支持js語(yǔ)法的容器，直接寫(xiě)js就可以在node下運(yùn)行。這里介紹node主要說(shuō)一下在node中的全局變量叫global,就像window一樣有一些js默認(rèn)的變量和方法。下面只探討this在瀏覽器中的指向，有興趣的也可以把后面的例子在node中跑一下。

this一般在函數(shù)中使用比較多，那就從函數(shù)說(shuō)起吧，我們調(diào)用的函數(shù)一般分為聲明式函數(shù)，或者是放在對(duì)象中作為方法的函數(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()  // 這里看到會(huì)打印出3，應(yīng)該也很好理解，a變量將demo2函數(shù)執(zhí)行后的的返回值及demo3函數(shù)返回，然后執(zhí)行，此時(shí)this依舊指向window
二、對(duì)象中的方法調(diào)用
var obj1={
      value:3,
      increment:function(){
           this.value++;
           console.log(this,this.value)
      }
}
obj1.increment() //  obj1{value:4,increment:function(){...}},4 ;打印出obj1對(duì)象和4，obj1包含一個(gè)value值和一個(gè)increment方法，也好理解

在看一個(gè)例子

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方法，跟上一個(gè)例子一樣，這里的this是指向我obj2對(duì)象，所以this.value再執(zhí)行+1以后為5，后面是一個(gè)自執(zhí)行函數(shù)，這里面的this直接指向了window，window的value一開(kāi)始不存在所以為undefined,后面增加一個(gè)全局變量value值為1；然后是第二條直接執(zhí)行obj2中的方法print，此時(shí)的this還是obj2所以值為5,；然后是第三條聲明一個(gè)變量P指向obj2中的print方法，執(zhí)行這個(gè)方法這是this指向window，所以輸出1
總結(jié)來(lái)說(shuō)：
使用聲明式函數(shù)（后面兩個(gè)對(duì)象中的方法也是使用的聲明式函數(shù)）會(huì)自動(dòng)綁定this,直接在全局中聲明的函數(shù)this會(huì)直接指向window對(duì)象
延伸一下，現(xiàn)在我們都經(jīng)常會(huì)用的es6的箭頭函數(shù)，箭頭函數(shù)是不會(huì)自動(dòng)綁定this的，默認(rèn)從上一級(jí)繼承下來(lái)，那不妨把剛才的例子改下看看
例子1改寫(xiě)
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,因?yàn)橹罢f(shuō)的在全局下聲明本身就有個(gè)this指向window對(duì)象
var a=demo2();
a()  // 3，這里也一樣
例子2改寫(xiě)
var obj1={
      value:3,
      increment:()=>{
           this.value++;
           console.log(this,this.value)
      }
}
obj1.increment() // 這時(shí)候會(huì)看到輸出window對(duì)象和一個(gè)NaN
簡(jiǎn)單說(shuō)明下：
如前面所說(shuō)箭頭函數(shù)不會(huì)自動(dòng)綁定this，所以執(zhí)行increment函數(shù)中的this依舊會(huì)指向window，而window下的value還不存在，所以為undefined再執(zhí)行+1操作所以value就變成了NaN了
例子3改寫(xiě)
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
簡(jiǎn)單說(shuō)明下：
第一個(gè)依舊window對(duì)象(this沒(méi)綁定的嘛)，后面的value當(dāng)然又是沒(méi)聲明.....然后自執(zhí)行函數(shù)也沒(méi)得說(shuō),后面才接著給window的value賦值為1了，后面就兩句自然輸出兩次1了
那么箭頭函數(shù)怎么綁定this呢,有apply,call和bind這三個(gè)方法得嘛，大家應(yīng)該都知道，具體區(qū)別可以查一下

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93335.html

相關(guān)文章

  • 關(guān)于js中this指向的總結(jié)

    摘要：中指向問(wèn)題一直是個(gè)坑，之前一直是懵懵懂懂的，大概知道一點(diǎn)，但一直不知道各種情況下指向有什么區(qū)別，今天親自動(dòng)手測(cè)試了下的指向。這就是我關(guān)于學(xué)習(xí)的總結(jié)，希望能給需要的人點(diǎn)幫助，然后有啥不足希望有大神能指點(diǎn)出來(lái)。 js中this指向問(wèn)題一直是個(gè)坑，之前一直是懵懵懂懂的，大概知道一點(diǎn)，但一直不知道各種情況下指向有什么區(qū)別，今天親自動(dòng)手測(cè)試了下this的指向。 1.在對(duì)象中的this對(duì)象中的t...

    zhangfaliang 評(píng)論0 收藏0

  • 關(guān)于js中this指向的總結(jié)

    摘要：中指向問(wèn)題一直是個(gè)坑，之前一直是懵懵懂懂的，大概知道一點(diǎn)，但一直不知道各種情況下指向有什么區(qū)別，今天親自動(dòng)手測(cè)試了下的指向。這就是我關(guān)于學(xué)習(xí)的總結(jié)，希望能給需要的人點(diǎn)幫助，然后有啥不足希望有大神能指點(diǎn)出來(lái)。 js中this指向問(wèn)題一直是個(gè)坑，之前一直是懵懵懂懂的，大概知道一點(diǎn)，但一直不知道各種情況下指向有什么區(qū)別，今天親自動(dòng)手測(cè)試了下this的指向。 1.在對(duì)象中的this對(duì)象中的t...

    mcterry 評(píng)論0 收藏0

  • myslide 插件開(kāi)發(fā)知識(shí)點(diǎn)總結(jié)和 css3 動(dòng)畫(huà)性能問(wèn)題的研究

    摘要：插件開(kāi)發(fā)知識(shí)點(diǎn)總結(jié)和動(dòng)畫(huà)性能問(wèn)題的研究這篇文章主要是總結(jié)最近開(kāi)發(fā)過(guò)程中遇到的問(wèn)題。有幾個(gè)問(wèn)題又是不容易發(fā)現(xiàn)原因的問(wèn)題，但是最后的結(jié)果又是很簡(jiǎn)單的。和都是可以指定函數(shù)運(yùn)行時(shí)，的值。比如觸發(fā)盒子的還有就是禁止元素在水平或者豎直方向滾動(dòng)。 myslide 插件開(kāi)發(fā)知識(shí)點(diǎn)總結(jié)和 css3 動(dòng)畫(huà)性能問(wèn)題的研究 這篇文章主要是總結(jié)最近開(kāi)發(fā)過(guò)程中遇到的問(wèn)題。有幾個(gè)問(wèn)題又是不容易發(fā)現(xiàn)原因的問(wèn)題，但是最...

    iliyaku 評(píng)論0 收藏0

  • js中的this總結(jié)

    摘要：關(guān)于的指向問(wèn)題算的上是中的一個(gè)十分重要的問(wèn)題了。首先，的指向問(wèn)題可以用一句話總結(jié)就是總是指向調(diào)用的對(duì)象，也就是說(shuō)指向誰(shuí)與函數(shù)聲明的位置沒(méi)有關(guān)系，只與調(diào)用的位置有關(guān)。此外注意幾種特殊情況，特別是中的箭頭函數(shù)。 關(guān)于this的指向問(wèn)題算的上是js中的一個(gè)十分重要的問(wèn)題了。今天把這個(gè)問(wèn)題總結(jié)下，加深下自己對(duì)this的理解。首先，this的指向問(wèn)題可以用一句話總結(jié)就是：this總是指向調(diào)用的對(duì)...

    light 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<