淺談 javascript 中的this綁定問(wèn)題

duan199226 發(fā)布于2019-08-22 16:18 / 1663人閱讀

摘要：綁定使用方式進(jìn)行調(diào)用函數(shù)時(shí)，會(huì)發(fā)生構(gòu)造函數(shù)的調(diào)用。先上圖，然后根據(jù)文字閱讀使用調(diào)用函數(shù)之后，該函數(shù)才作為構(gòu)造函數(shù)進(jìn)行調(diào)用，構(gòu)造一個(gè)全新的對(duì)象賦值給，而對(duì)象的指向了的對(duì)象，的對(duì)象有一個(gè)屬性指向的構(gòu)造函數(shù)這個(gè)就是的原型鏈，也是的特性。

javascript語(yǔ)言是在運(yùn)行時(shí)前即進(jìn)行編譯的，而this的綁定也是在運(yùn)行時(shí)進(jìn)行綁定的。也就是說(shuō),this實(shí)際上是在函數(shù)被調(diào)用時(shí)候發(fā)生綁定的，它指向什么完全取決于函數(shù)在哪里被調(diào)用。

1.默認(rèn)綁定

例如直接在全局作用域下聲明:

var a=2;
console.log(this.a);

在全局作用域下聲明的變量或者函數(shù)等，都會(huì)作為window對(duì)象的屬性。

這個(gè)時(shí)候，默認(rèn)this是綁定到全局作用域下的window對(duì)象，如果你去console.log(this);你會(huì)發(fā)現(xiàn)，你打印出來(lái)的是window,盡管你沒(méi)有聲明this就是window，但是js進(jìn)行了默認(rèn)綁定。

以至于你運(yùn)行以下的代碼片段：

function foo(){
console.log(this.a);
}
var a=2;
foo();

瀏覽器控制臺(tái)打印出來(lái)的是 2 ;

2.隱式綁定

當(dāng)函數(shù)引用有上下文對(duì)象時(shí)，在函數(shù)調(diào)用時(shí)，會(huì)進(jìn)行隱式綁定。這么說(shuō)肯定很抽象，還是舉例說(shuō)明吧。

var a=4;
function foo(){
console.log(this.a);
}
var obj={
  a:2,
  foo:foo
}
foo();
obj.foo();

兩次會(huì)打印出來(lái)什么呢？猜一下？

foo()會(huì)打印出來(lái)4，obj.foo()會(huì)打印出來(lái)2

第一個(gè)foo() 使用了默認(rèn)綁定，this綁定到了全局對(duì)象window，打印 this.a 就是打印window.a;

第二個(gè)foo()外層的foo函數(shù)引用作為obj.foo的屬性值，通過(guò)obj進(jìn)行調(diào)用，此時(shí)的obj就是這個(gè)函數(shù)引用的上下文對(duì)象，this會(huì)隱式綁定到obj這個(gè)對(duì)象上。此時(shí)打印的this.a就是obj.a了。

3.顯式綁定

在上面兩種綁定中，我們都沒(méi)有去明確地進(jìn)行強(qiáng)制綁定，而是使用了默認(rèn)規(guī)則的綁定，那么如果我們想要在調(diào)用某個(gè)函數(shù)時(shí)特定地改變this的綁定，這個(gè)時(shí)候就可以用顯式綁定了。

還是上代碼，然后進(jìn)行分析。

var a=4;
function foo(){
console.log(this.a);
}
var obj={
  a:2,
  foo:foo
}
var foo1=foo.bind(obj);
foo();
foo.call(obj);
foo.apply(obj);
foo.call(window);
foo1();

按照順序打印出的是 4 ，2 ，2, 4,2

第一次打印了4 使用了默認(rèn)綁定,foo函數(shù)的this綁定到了window。

第二次打印了2 使用了call函數(shù)，顯式地將foo函數(shù)的this綁定到obj對(duì)象。

第三次打印了2 apply方法的效果跟call方法一樣。

第四次打印了4 call方法顯示地將foo函數(shù)的this綁定到了obj對(duì)象，效果跟默認(rèn)綁定一樣了。

第五次打印了2,bind方法顯示地將foo函數(shù)的this綁定到了obj,并且返回了一個(gè)硬編碼后的新函數(shù)，賦值給foo1變量進(jìn)行調(diào)用，硬編碼就是新函數(shù)內(nèi)部this直接綁定到了指定的對(duì)象，也就是obj。

4.new 綁定

使用new方式進(jìn)行調(diào)用函數(shù)時(shí)，會(huì)發(fā)生構(gòu)造函數(shù)的調(diào)用。怎么解釋呢，還是直接上代碼加分析。

function foo(a){
 this.a=a;
}
foo(3);
var test=new foo(2);
console.log(a);
console.log(test.a);

打印出來(lái)的是 3 ，2

foo函數(shù)只是一個(gè)普通的函數(shù)，直接調(diào)用foo(3)只是作為普通函數(shù)的調(diào)用，會(huì)使用默認(rèn)綁定將this綁定到window上，對(duì)window.a也就會(huì)全局變量a進(jìn)行賦值，所以打印出來(lái)的是3;

foo函數(shù)，進(jìn)行構(gòu)造調(diào)用，this綁定到test對(duì)象,故而this.a作為test對(duì)象的屬性并進(jìn)行傳參賦值。打印出來(lái)的test就是{a:2}，this.a就是2了。

先上圖，然后根據(jù)文字閱讀

使用new 調(diào)用函數(shù)之后，該foo函數(shù)才作為構(gòu)造函數(shù)進(jìn)行調(diào)用，構(gòu)造一個(gè)全新的對(duì)象賦值給test，而test對(duì)象的_proto_
指向了test的prototype對(duì)象，test的prototype對(duì)象有一個(gè)屬性constructor,指向test的構(gòu)造函數(shù)foo,這個(gè)就是javascript的原型鏈，也是javascript的特性。對(duì)于test對(duì)象調(diào)用的方法以及屬性，會(huì)先在test對(duì)象進(jìn)行尋找，如果找到的話(huà)，就直接進(jìn)行調(diào)用，尋找停止。如果尋找不到，順著原型鏈，在test對(duì)象的prototype對(duì)象尋找，如果找到的話(huà)，進(jìn)行調(diào)用，尋找停止，如果還是找不到，會(huì)在prototype對(duì)象的原型上進(jìn)行尋找，這個(gè)時(shí)候_proto_指向了Object的prototype對(duì)象，Object的prototype的constructor指向了Object()本身，而一些Obejct的函數(shù)如toString等等就是在這個(gè)原型上進(jìn)行調(diào)用的，這個(gè)時(shí)候如果還是找不到需要屬性或者方法，那么就是語(yǔ)法錯(cuò)誤，未定義了。因?yàn)镺bject的prototype的_proto_指向是null了，也就沒(méi)有任何對(duì)象屬性以及方法了。不是說(shuō)程序員可以new 很多個(gè)對(duì)象嘛，但是new出來(lái)的對(duì)象 原型最終結(jié)果卻是指向了 空(null),所以還是自己動(dòng)手豐衣足食吧，哈哈。
一般情況下，使用new函數(shù)之后構(gòu)造的對(duì)象，會(huì)優(yōu)先將函數(shù)調(diào)用到的this綁定到這個(gè)對(duì)象，如果函數(shù)沒(méi)有返回其它對(duì)象，會(huì)自動(dòng)調(diào)用返回這個(gè)新對(duì)象。

總結(jié)：

只有對(duì)于this綁定的情況有了基本的了解，才能在編寫(xiě)代碼時(shí)候，避免產(chǎn)生由于綁定帶來(lái)的未知bug。如果你在調(diào)用某個(gè)框架插件或者綁定事件的時(shí)候，發(fā)現(xiàn)this不好用了，有可能是你的this使用綁定錯(cuò)了，打印下console.log(this)在控制臺(tái)看一看，也許就發(fā)現(xiàn)問(wèn)題了。如果在閱讀中遇到什么問(wèn)題，歡迎評(píng)論以及留言。同時(shí)歡迎我的博客陳建光的博客

歡迎評(píng)論以及留言，同時(shí)歡迎關(guān)注我的博客定時(shí)不斷地更新我的文章陳建光的博客