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);

二、函數(shù)調(diào)用

直接調(diào)用一個(gè)函數(shù)，this 默認(rèn)會(huì)指向全局（瀏覽器端為window)

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

sayName();
window.sayName();

可以看到

還有幾個(gè)常見的情況，根據(jù)誰(shuí)調(diào)用方法就指向誰(shuí)的原則，this的指向要細(xì)看

// 全局 name
var name = 'name1';

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

obj.sayName()();
obj.changeName();
setTimeout(function(){
 console.log(name);
 console.log(obj.name);
},0);

像這些類似匿名的函數(shù)，默認(rèn)都是被全局（瀏覽器下的window）對(duì)象調(diào)用，要正確地讓obj調(diào)用，就要指代好

可以用that保持this再進(jìn)行下一步，或者匿名函數(shù)傳值，或者使用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()(); // name2
obj.changeName();
setTimeout(function(){
 console.log(name); // name1
 console.log(obj.name); // name3
},0);

三、作為對(duì)象方法的調(diào)用

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

這時(shí)this會(huì)指向這個(gè)obj

四、call/apply/bind 的調(diào)用

當(dāng)使用 Function.prototype 上的 call 或者 apply ，bind 方法時(shí)，函數(shù)內(nèi)的 this將會(huì)被顯式設(shè)置為函數(shù)調(diào)用的第一個(gè)參數(shù)。

具體使用方法

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

var name = 'name1';

var obj = {
 name: 'name2',
 sayName: function(){
  // 返回一個(gè)默認(rèn)全局的函數(shù)
  return function(){
   console.log(this.name);
  };
 },
 changeName: function(){
  // 返回一個(gè)默認(rèn)全局的函數(shù)
  setTimeout(function(){
   this.name = 'name3';
  // 然后將該函數(shù)綁定給this(當(dāng)前obj對(duì)象)
  }.bind(this),0);
 }
};

// obj.sayName()這個(gè)函數(shù)，讓obj來調(diào)用
obj.sayName().call(obj);
// 讓this(也就是全局對(duì)象）來調(diào)用
obj.sayName().apply(this);

obj.changeName();
setTimeout(function(){
 // 輸出更改之后，全局name的值
 console.log(name);
 // 輸出更改之后，obj對(duì)象中 name的值
 console.log(obj.name);
},0);

五、作為構(gòu)造函數(shù)調(diào)用

比如 new Foo();

先來看個(gè)簡(jiǎn)單的例子：

var name = 'name1';
function Foo(){
 // 賦值this(當(dāng)前對(duì)象)的name屬性值
 this.name = 'name2';
}

// new 構(gòu)造函數(shù)產(chǎn)生一個(gè)實(shí)例
var foo = new Foo();

console.log(name);
console.log(foo.name);

// 直接調(diào)用該函數(shù)
Foo();
console.log(name);

可以看到，如果函數(shù)傾向于和 new 關(guān)鍵詞一塊使用，則我們稱這個(gè)函數(shù)為構(gòu)造函數(shù)，當(dāng)new 了之后，this則指向這個(gè)心創(chuàng)建的對(duì)象（這個(gè)new 的過程其實(shí)也涉及到了繼承機(jī)制）。

若直接調(diào)用這個(gè)函數(shù)，this就默認(rèn)執(zhí)行全局對(duì)象了。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: