this的指向

通常在瀏覽器中，在全局中使用this，該this指向的是window對象，無論是否開啟了嚴格模式。但我們一般使用this，也是在函數(shù)中進行使用。所有的函數(shù)在被調(diào)用的時候，會產(chǎn)生一個函數(shù)執(zhí)行上下文，該上下文中記錄這函數(shù)的作用域鏈、AO對象以及當(dāng)前這個函數(shù)的this指向。我們看下面代碼:

function foo() {
  console.log(this)
}
foo()//window
var obj = {
  name: 'why',
  foo: foo
}
obj.foo()//obj
foo.apply("abc")//String{'abc'}

上面代碼中，我們定義了一個函數(shù)foo來輸出調(diào)用它的時候this的指向，從上往下分別指向的是window、obj、String{'abc'}，所以我們可以知道：

• 函數(shù)在調(diào)用時，JavaScript會默認給this綁定一個值；
• this的綁定和定義的位置（編寫的位置）沒有關(guān)系；
• this的綁定和調(diào)用方式以及調(diào)用的位置有關(guān)系；
• this是在運行時被動態(tài)綁定的，而不是編譯時固定下來的

判斷this綁定的4條規(guī)則

規(guī)則1：默認綁定

獨立函數(shù)調(diào)用的時候，this永遠綁定的是window對象，如下示例：

function foo() {
   console.log(this)
}
function foo2() {
   foo()
}
var obj = {
  name: "xiaomin",
  foo: function() {
    console.log(this)
  }
}
foo()//window
foo2()//window
var bar = obj.foo
bar()//window

規(guī)則2：隱式綁定

通過某個對象發(fā)起調(diào)用的函數(shù)，哪個對象發(fā)起調(diào)用的函數(shù)，那么該調(diào)用函數(shù)的this就隱式綁定在了這個對象：

var obj1 = {
  name: "obj1",
  foo: function () {
    console.log(this);
  },
};
var obj2 = {
  name: "obj2",
  bar: obj1.foo,
  obj1: obj1,
};
obj1.foo();//obj1
obj2.obj1.foo();//obj1
obj2.bar();//obj2

規(guī)則3：顯示綁定

通過函數(shù)的方法call、apply、bind將this顯示綁定了某個對象上，那么該函數(shù)的this就指向到這個對象上：

function foo() {
       console.log(this)
}
var obj = {
   name: "obj"
}
foo.call(obj)
foo()//obj
foo.apply(obj)
foo()//obj
var newfoo = foo.bind(obj)
newfoo()//obj

規(guī)則4：new綁定

我們有如下代碼：

function Person(name, age) {
  this.name = name
  this.age = age
  console.log(this)//p
}
var p = new Person("kobe",12);

在這里我們有一個構(gòu)造函數(shù)Person，并用它創(chuàng)建了一個對象，這里簡單說明一下通過new調(diào)用構(gòu)造函數(shù)創(chuàng)建對象時的5個步驟：

• 在內(nèi)存中創(chuàng)建一個空對象
• 將該對象的[[prototype]]指向構(gòu)造函數(shù)的prototype屬性
• 構(gòu)造函數(shù)里的this指向這個空對象
• 開始執(zhí)行構(gòu)造函數(shù)的函數(shù)體代碼
• 如果構(gòu)造函數(shù)未返回內(nèi)容，將該對象作為返回值返回出去

從上面我們可以看到，在使用new創(chuàng)建對象的時候，在第三個步驟會將構(gòu)造函數(shù)內(nèi)部的this綁定到創(chuàng)建的這個對象上，也就是上面代碼中，Person函數(shù)中打印的this就是會是通過new關(guān)鍵字創(chuàng)建的對象p。

this綁定的優(yōu)先級

當(dāng)同時出現(xiàn)上列規(guī)則的多種規(guī)則綁定的時候，這時候this的指向就會根據(jù)上面綁定規(guī)則的優(yōu)先級進行綁定：

• 默認綁定優(yōu)先級最低
• 顯示綁定優(yōu)先于隱式綁定，如下列代碼打印的this就不是obj而是String {'aaa'}

function foo() {
  console.log(this);//String?{'aaa'}
}
var obj = {
  name: "obj",
  foo: foo.bind("aaa"),
};
obj.foo();

• new綁定優(yōu)先于隱式綁定，如下列代碼打印出來的就不是obj，而是創(chuàng)建出來的對象f

var obj = {
  name: "obj",
  foo: function () {
    this.name = "kkk";
    console.log("this:", this);//foo?{name: 'kkk'}
  },
};
var f = new obj.foo();

• new綁定優(yōu)先bind綁定（new綁定不能同時與call、apply同時使用），如下代碼this打印出來的就是obj的對象而不是String{'aaa'}

function foo() {
  console.log(this);
}
var bar = foo.bind("aaa");
var obj = new bar();
//var obj2 = new foo.apply("123");//這樣寫會報錯

除了四個this綁定規(guī)則外的特殊情況

1、在顯示綁定中我們綁定了null或者undefined，this會綁定到window上

function foo() {
  console.log(this)
}
foo.call({})//{}
foo.call(null)//window
foo.call(undefined)//window

2、函數(shù)的間距引用，在下列代碼中，賦值表達式 p.foo = o.foo 的返回值是目標函數(shù)的引用，因此調(diào)用位置是 foo()，不是o.foo()。所以打印出來的this是window而不是o或者p

function foo() {
  console.log(this);
}
var o = { foo: foo };
var p = {};
o.foo(); // o
(p.foo = o.foo)(); // window

3、箭頭函數(shù)。箭頭函數(shù)是不會有自己的this的，在調(diào)用箭頭函數(shù)的時候，在它的函數(shù)執(zhí)行上下文中并不會生成它this的記錄，而如果在箭頭函數(shù)的函數(shù)體中使用到了this，那么它將會在它的上層作用域里面去找this，看下面代碼

var obj = {
  data: [],
  changeData: function () {
    console.log("普通函數(shù)this:", this);
    (() => {
      console.log("箭頭函數(shù)this:", this);
    })();
    setTimeout(() => {
      this.data = ["1", "2", "3"];
      console.log("this:", this);
    }, 1000);
  },
};
obj.changeData();

打印結(jié)果：

可以看出，上面打印的this其實都是指向的obj。在箭頭函數(shù)內(nèi)它自身沒有this，那么它就向外層尋找，找到了changeData這個函數(shù)，而這時由于隱式綁定規(guī)則，changeData由obj調(diào)用的，那么changeData的this就指向的obj，所以箭頭函數(shù)的this指向的就是obj。

以上就是細說JavaScript中的this指向與綁定規(guī)則的詳細內(nèi)容，更多關(guān)于JavaScript this的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論