国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Javascript This 機制

DTeam / 1361人閱讀

摘要：中除了聲明定義的形參之外，每個函數(shù)還可以接收兩個附加參數(shù)。這里我們就來仔細(xì)學(xué)習(xí)一下吧。加油，多看幾遍，影像會更深的呢

js中除了聲明定義的形參之外，每個函數(shù)還可以接收兩個附加參數(shù)（this、arguments）。這里我們就來仔細(xì)學(xué)習(xí)一下this吧。

在javascript中明確this指向大致有四種情況

</>復(fù)制代碼 
  1. 函數(shù)調(diào)用的模式，this指向window
</>復(fù)制代碼 
  1. function aa()
  2. {
  3.     console.log(this);
  4. }
  5. aa(); // window
</>復(fù)制代碼 
  1. 方法調(diào)用模式, this指向方法所在的對象
</>復(fù)制代碼 
  1. var a = {};
  2. a.name = "zjj";
  3. a.getName = function(){
  4.     console.log(this.name);
  5. }
  6. a.getName();   // "zjj",這里this指向的是調(diào)用的那個對象
</>復(fù)制代碼 
  1. 構(gòu)造函數(shù)模式， this指向新生成的實例
</>復(fù)制代碼 
  1. function aaa(name){
  2.     this.name = name;
  3.     this.getName = function(){
  4.         console.log(this.name);   // 這里的this指向?qū)嵗膶ο?    }
  5. }
  6. var a = new aaa("meils");
  7. a.getName(); // "meils"
  8. var b = new aaa("bobo");
  9. b.getName()        //  "bobo"
</>復(fù)制代碼 
  1. apply/call調(diào)用模式
</>復(fù)制代碼 
  1. var list1 = {name: "zjj"};
  2. var list2 = {name: "lll"};
  3. function a(){
  4.     console.log(this.name);
  5. }
  6. a.call(list1);  // "zjj"
  7. a.call(list2);  // "lll"

先來一個面試題吧

</>復(fù)制代碼 
  1. obj = {
  2.     name: "a",
  3.     getName : function () {
  4.         console.log(this.name);console.log(this);
  5.     }
  6. }
  7. var fn = obj.getName
  8. obj.getName() // 這里this指向的是調(diào)用getName的那個對象
  9. var fn2 = obj.getName() // 同上執(zhí)行一次 ，返回的fn2已經(jīng)不是一個函數(shù)了
  10. fn()        // 這里的this指向的是window，由于window下并沒有name變量，所以沒有輸出
  11. fn2()        // 由于fn2不是一個函數(shù)，因此會報錯
  12. // 輸出如下
  13. a
  14. {name: "a", getName: ?}
  15. a
  16. {name: "a", getName: ?}getName: ? ()name: "a"__proto__: Object
  17. Window?{postMessage: ?, blur: ?, focus: ?, close: ?, frames: Window,?…}
  18. Uncaught TypeError: fn2 is not a function
</>復(fù)制代碼 
  1. 下面我們依舊通過例子來學(xué)習(xí)this哦

實例一

</>復(fù)制代碼 
  1. function demo1(){
  2.     console.log(this)  
  3. }
  4. function demo2(){
  5.     this.num=2
  6.     function demo3(){
  7.           this.num++
  8.           console.log(num)
  9.     }
  10.     return demo3; 
  11. }
  12. demo1(); // this指向window
  13. var a = demo2(); // 
  14. a(); // 3  a變量將demo2函數(shù)執(zhí)行后的的返回值及demo3函數(shù)返回， 然后執(zhí)行，此時this依舊指向window
</>復(fù)制代碼 
  1. var obj1={
  2.       value:3,
  3.       increment:function(){
  4.            this.value++;
  5.            console.log(this,this.value)
  6.       }
  7. }
  8. obj1.increment()
  9. // {value: 4, increment: ?}  4

實例二

</>復(fù)制代碼 
  1. var obj2={
  2.       value:4,
  3.       increment:function(){
  4.            this.value++;
  5.            console.log(this,this.value);
  6.            (function(){
  7.                  console.log("這又是啥",this,this.value)
  8.                  this.value=1
  9.            })() 
  10.       },
  11.       print:function(){
  12.             console.log("print",this.value)
  13.       }
  14. }
  15. obj2.increment() // this是obj2
  16. obj2.print()
  17. var P=obj2.print
  18. P() // this是window
  19. // 
  20. {value: 5, increment: ?, print: ?} 5
  21. 這又是啥 Window  undefined
  22. print 5
  23. print 1
</>復(fù)制代碼 
  1. obj2.increment() this是obj2，執(zhí)行了value++，此時的value為5，而后是一個自我執(zhí)行的函數(shù)，這里的this是window，由于window下的value還沒有申明，因此返回的是undefined。之后執(zhí)行obj2.print()這里的this是obj2，輸出value是5，而后變量P執(zhí)行了obj2的print方法，這里的this指向了window，所以輸出的是1
</>復(fù)制代碼 
  1. ES6的箭頭函數(shù)

現(xiàn)在我們都經(jīng)常會用的es6的箭頭函數(shù)，箭頭函數(shù)是不會自動綁定this的，默認(rèn)從上一級繼承下來，那不妨把剛才的例子改下看看

</>復(fù)制代碼 
  1. var obj1={
  2.       value:3,
  3.       increment:()=>{
  4.            this.value++;
  5.            console.log(this,this.value)
  6.       }
  7. }
  8. obj1.increment() // 這時候會看到輸出window對象和一個NaN
</>復(fù)制代碼 
  1. 如前面所說箭頭函數(shù)不會自動綁定this，所以執(zhí)行increment函數(shù)中的this依舊會指向window，而window下的value還不存在，所以為undefined再執(zhí)行+1操作所以value就變成了NaN了
</>復(fù)制代碼 
  1. var obj2={
  2.       value:4,
  3.       increment:()=>{
  4.            this.value++;
  5.            console.log(this,this.value);
  6.            (function(){
  7.                  console.log("這又是啥",this,this.value)
  8.                  this.value=1
  9.            })() 
  10.       },
  11.       print:()=>{
  12.             console.log("print",this.value)
  13.       }
  14. }
  15. obj2.increment() 
  16. obj2.print()
  17. var P=obj2.print
  18. P()
  19. // 打印結(jié)果出如下
  20. // Window 
  21. //  NaN
  22. // 這又是啥 Window
  23. // NaN
  24. // print 1
  25. // print 1
</>復(fù)制代碼 
  1. 第一個依舊window對象(this沒綁定的嘛)，后面的value當(dāng)然又是沒聲明.....然后自執(zhí)行函數(shù)也沒得說,后面才接著給window的value賦值為1了，后面就兩句自然輸出兩次1了
    相信看了上面的例子，大家一定對this的使用有了一定的了解了吧。加油，多看幾遍，影像會更深的呢

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

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/94088.html

相關(guān)文章

  • JavaScript 五十問——從源碼分析 ES6 Class 的實現(xiàn)機制

    摘要：防止類的構(gòu)造函數(shù)以普通函數(shù)的方式調(diào)用。這個函數(shù)的主要作用是通過給類添加方法，其中將靜態(tài)方法添加到構(gòu)造函數(shù)上，將非靜態(tài)的方法添加到構(gòu)造函數(shù)的原型對象上。 Class是ES6中新加入的繼承機制，實際是Javascript關(guān)于原型繼承機制的語法糖，本質(zhì)上是對原型繼承的封裝。本文將會討論：1、ES6 class的實現(xiàn)細(xì)2、相關(guān)Object API盤點3、Javascript中的繼承實現(xiàn)方案盤點...

    LeexMuller 評論0 收藏0

  • 理解JavaScript的核心知識點：This

    摘要：關(guān)鍵字計算為當(dāng)前執(zhí)行上下文的屬性的值。毫無疑問它將指向了這個前置的對象。構(gòu)造函數(shù)也是同理。嚴(yán)格模式無論調(diào)用位置，只取顯式給定的上下文綁定的，通過方法傳入的第一參數(shù)，否則是。其實并不屬于特殊規(guī)則，是由于各種事件監(jiān)聽定義方式本身造成的。 this 是 JavaScript 中非常重要且使用最廣的一個關(guān)鍵字，它的值指向了一個對象的引用。這個引用的結(jié)果非常容易引起開發(fā)者的誤判，所以必須對這個關(guān)...

    TerryCai 評論0 收藏0

  • 寫給Java開發(fā)者看的JavaScript對象機制

    摘要：如果你已經(jīng)對機制已有了解，但是由于兩者對象機制的巨大本質(zhì)差異，對它和構(gòu)造函數(shù)，實例對象的關(guān)系仍有疑惑，本文或許可以解答你的問題。所有的原型對象都會自動獲得一個屬性，這個屬性的值是指向原型所在的構(gòu)造函數(shù)的指針。 幫助面向?qū)ο箝_發(fā)者理解關(guān)于JavaScript對象機制 本文是以一個熟悉OO語言的開發(fā)者視角，來解釋JavaScript中的對象。 對于不了解JavaScript 語言，尤其是習(xí)...

    Charles 評論0 收藏0

  • 細(xì)說 Javascript 函數(shù)篇（二） : this 的工作機制

    摘要：與其他編程語言相比，對的使用是一套完全不同的機制。在五種情況下的值是各有不同的。調(diào)用一個函數(shù)時在這里，同樣指向全局對象。此時在函數(shù)內(nèi)，指向新建的對象。盡管，晚綁定初看上去是個不好的決定，但實際上這是原型式繼承工作的基礎(chǔ)。 與其他編程語言相比，Javascript 對 this 的使用是一套完全不同的機制。this 在五種情況下的值是各有不同的。 全局作用域下 this; 當(dāng)在全...

    ZoomQuiet 評論0 收藏0

  • 這一次，我們換種姿勢學(xué)習(xí) javascript

    摘要：操作符或調(diào)用函數(shù)時傳入?yún)?shù)的操作都會導(dǎo)致關(guān)聯(lián)作用域的賦值操作。此外可以使用和來設(shè)置對象及其屬性的不可變性級別。忽視這一點會導(dǎo)致許多問題。使用調(diào)用函數(shù)時會把新對象的屬性關(guān)聯(lián)到其他對象。 前言 《你不知道的 javascript》是一個前端學(xué)習(xí)必讀的系列，讓不求甚解的JavaScript開發(fā)者迎難而上，深入語言內(nèi)部，弄清楚JavaScript每一個零部件的用途。本書介紹了該系列的兩個主題：...

    zone 評論0 收藏0

  • Javascript函數(shù)執(zhí)行、new機制以及繼承

    摘要：函數(shù)執(zhí)行一個函數(shù)，被執(zhí)行有三種途徑或機制以及繼承中定義了一種對象，稱之為對象，其內(nèi)部實現(xiàn)包括以下說明該對象可以被執(zhí)行，具有屬性說明該對象可以接受操作，具有構(gòu)造器屬性指向?qū)ο蟮脑玩湣? JS函數(shù)執(zhí)行 一個JavaScript函數(shù)fn，被執(zhí)行有三種途徑： fn() new fn() fn.call()或fn.apply() new機制以及繼承 JavaScript中定義了一種對象，稱之...

    sshe 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<