JS中this上下文對象使用方式

2019-11-20 08:48:09

字體：大中小

來源：轉載

供稿：網友

JavaScript 有一套完全不同于其它語言的對 this 的處理機制。在五種不同的情況下，this 指向的各不相同。

有句話說得很在理 -- 誰調用它，this就指向誰

一、全局范圍內

在全局范圍內使用this ，它將指向全局對象（瀏覽器中為 window）

var name = 'name1';console.log(name);this.name = 'name2';console.log(name);console.log(this.name);window.name = 'name3';console.log(name);console.log(this.name);console.log(window.name);

二、函數調用

直接調用一個函數，this 默認會指向全局（瀏覽器端為window)

var name = 'name1';function sayName(){ console.log(name); console.log(this);}sayName();window.sayName();

可以看到

還有幾個常見的情況，根據誰調用方法就指向誰的原則，this的指向要細看

// 全局 namevar name = 'name1';var obj = { name: 'name2', sayName: function(){    // 調用它的時候 this指向全局  return function(){   console.log(this.name);  }; }, changeName: function(){    // 調用它的時候 this指向全局  setTimeout(function(){   this.name = 'name3';  },0); }};obj.sayName()();obj.changeName();setTimeout(function(){ console.log(name); console.log(obj.name);},0);

像這些類似匿名的函數，默認都是被全局（瀏覽器下的window）對象調用，要正確地讓obj調用，就要指代好

可以用that保持this再進行下一步，或者匿名函數傳值，或者使用call/apply/bind改變context等

var name = 'name1';var obj = { name: 'name2', sayName: function(){  var that = this;  return function(){   console.log(that.name);  }; }, changeName: function(){  var that = this;  setTimeout(function(){   that.name = 'name3';  },0); }};obj.sayName()(); // name2obj.changeName();setTimeout(function(){ console.log(name); // name1 console.log(obj.name); // name3},0);

三、作為對象方法的調用

其實就類似上頭提到的 obj.sayName() obj.name 等

這時this會指向這個obj

四、call/apply/bind 的調用

當使用 Function.prototype 上的 call 或者 apply ，bind 方法時，函數內的 this將會被顯式設置為函數調用的第一個參數。

具體使用方法

我們可以稍微修改一下上頭的代碼，就可以看到this指向的改變

var name = 'name1';var obj = { name: 'name2', sayName: function(){  // 返回一個默認全局的函數  return function(){   console.log(this.name);  }; }, changeName: function(){  // 返回一個默認全局的函數  setTimeout(function(){   this.name = 'name3';  // 然后將該函數綁定給this(當前obj對象)  }.bind(this),0); }};// obj.sayName()這個函數，讓obj來調用obj.sayName().call(obj);// 讓this(也就是全局對象）來調用obj.sayName().apply(this);obj.changeName();setTimeout(function(){ // 輸出更改之后，全局name的值 console.log(name); // 輸出更改之后，obj對象中 name的值 console.log(obj.name);},0);

五、作為構造函數調用

比如 new Foo();

先來看個簡單的例子：

var name = 'name1';function Foo(){ // 賦值this(當前對象)的name屬性值 this.name = 'name2';}// new 構造函數產生一個實例var foo = new Foo();console.log(name);console.log(foo.name);// 直接調用該函數Foo();console.log(name);