Javascript This 機制

DTeam 發(fā)布于2019-08-22 16:08 / 1367人閱讀

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

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

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

函數(shù)調用的模式，this指向window

function aa()
{
    console.log(this);
}
aa(); // window

方法調用模式, this指向方法所在的對象

var a = {};
a.name = "zjj";
a.getName = function(){
    console.log(this.name);
}
a.getName();   // "zjj",這里this指向的是調用的那個對象

構造函數(shù)模式， this指向新生成的實例

function aaa(name){
    this.name = name;
    this.getName = function(){
        console.log(this.name);   // 這里的this指向實例化的對象
    }
}

var a = new aaa("meils");
a.getName(); // "meils"

var b = new aaa("bobo");
b.getName()        //  "bobo"

apply/call調用模式

var list1 = {name: "zjj"};
var list2 = {name: "lll"};

function a(){
    console.log(this.name);
}

a.call(list1);  // "zjj"
a.call(list2);  // "lll"

先來一個面試題吧

obj = {

    name: "a",

    getName : function () {

        console.log(this.name);console.log(this);

    }

}


var fn = obj.getName

obj.getName() // 這里this指向的是調用getName的那個對象

var fn2 = obj.getName() // 同上執(zhí)行一次 ，返回的fn2已經不是一個函數(shù)了

fn()        // 這里的this指向的是window，由于window下并沒有name變量，所以沒有輸出

fn2()        // 由于fn2不是一個函數(shù)，因此會報錯
// 輸出如下

a
{name: "a", getName: ?}
a
{name: "a", getName: ?}getName: ? ()name: "a"__proto__: Object

Window?{postMessage: ?, blur: ?, focus: ?, close: ?, frames: Window,?…}
Uncaught TypeError: fn2 is not a function

下面我們依舊通過例子來學習this哦

實例一

function demo1(){
    console.log(this)  
}
function demo2(){
    this.num=2
    function demo3(){
          this.num++
          console.log(num)
    }
    return demo3; 
}


demo1(); // 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()

// {value: 4, increment: ?}  4

實例二

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() // this是obj2
obj2.print()
var P=obj2.print
P() // this是window

// 
{value: 5, increment: ?, print: ?} 5
這又是啥 Window  undefined
print 5
print 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

ES6的箭頭函數(shù)

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

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()
// 打印結果出如下
// Window 
//  NaN
// 這又是啥 Window
// NaN
// print 1
// print 1

第一個依舊window對象(this沒綁定的嘛)，后面的value當然又是沒聲明.....然后自執(zhí)行函數(shù)也沒得說,后面才接著給window的value賦值為1了，后面就兩句自然輸出兩次1了

相信看了上面的例子，大家一定對this的使用有了一定的了解了吧。加油，多看幾遍，影像會更深的呢

云服務器 GPU云服務器 js中的this機制 javascript的this javaScript中的this javascript中this詳解

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

轉載請注明本文地址：http://systransis.cn/yun/94088.html

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

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

LeexMuller 2019-08-23 14:38 評論0 收藏0
理解JavaScript的核心知識點：This

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

TerryCai 2019-08-23 17:00 評論0 收藏0
寫給Java開發(fā)者看的JavaScript對象機制

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

Charles 2019-08-26 12:11 評論0 收藏0
細說 Javascript 函數(shù)篇（二） : this 的工作機制

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

ZoomQuiet 2019-08-21 12:16 評論0 收藏0
這一次，我們換種姿勢學習 javascript

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

zone 2019-08-26 11:54 評論0 收藏0
Javascript函數(shù)執(zhí)行、new機制以及繼承

摘要：函數(shù)執(zhí)行一個函數(shù)，被執(zhí)行有三種途徑或機制以及繼承中定義了一種對象，稱之為對象，其內部實現(xiàn)包括以下說明該對象可以被執(zhí)行，具有屬性說明該對象可以接受操作，具有構造器屬性指向對象的原型鏈。 JS函數(shù)執(zhí)行一個JavaScript函數(shù)fn，被執(zhí)行有三種途徑： fn() new fn() fn.call()或fn.apply() new機制以及繼承 JavaScript中定義了一種對象，稱之...

sshe 2019-08-21 16:53 評論0 收藏0