Javascript This 機(jī)制

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

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

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

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

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

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

方法調(diào)用模式, this指向方法所在的對(duì)象

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

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

function aaa(name){
    this.name = name;
    this.getName = function(){
        console.log(this.name);   // 這里的this指向?qū)嵗膶?duì)象
    }
}

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

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

apply/call調(diào)用模式

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

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

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

先來(lái)一個(gè)面試題吧

obj = {

    name: "a",

    getName : function () {

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

    }

}


var fn = obj.getName

obj.getName() // 這里this指向的是調(diào)用getName的那個(gè)對(duì)象

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

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

fn2()        // 由于fn2不是一個(gè)函數(shù)，因此會(huì)報(bào)錯(cuò)
// 輸出如下

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

下面我們依舊通過(guò)例子來(lái)學(xué)習(xí)this哦

實(shí)例一

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í)行，此時(shí)this依舊指向window

var obj1={
      value:3,
      increment:function(){
           this.value++;
           console.log(this,this.value)
      }
}
obj1.increment()

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

實(shí)例二

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++，此時(shí)的value為5，而后是一個(gè)自我執(zhí)行的函數(shù)，這里的this是window，由于window下的value還沒(méi)有申明，因此返回的是undefined。之后執(zhí)行obj2.print()這里的this是obj2，輸出value是5，而后變量P執(zhí)行了obj2的print方法，這里的this指向了window，所以輸出的是1

ES6的箭頭函數(shù)

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

var obj1={
      value:3,
      increment:()=>{
           this.value++;
           console.log(this,this.value)
      }
}
obj1.increment() // 這時(shí)候會(huì)看到輸出window對(duì)象和一個(gè)NaN

如前面所說(shuō)箭頭函數(shù)不會(huì)自動(dòng)綁定this，所以執(zhí)行increment函數(shù)中的this依舊會(huì)指向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

第一個(gè)依舊window對(duì)象(this沒(méi)綁定的嘛)，后面的value當(dāng)然又是沒(méi)聲明.....然后自執(zhí)行函數(shù)也沒(méi)得說(shuō),后面才接著給window的value賦值為1了，后面就兩句自然輸出兩次1了相信看了上面的例子，大家一定對(duì)this的使用有了一定的了解了吧。加油，多看幾遍，影像會(huì)更深的呢