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)用一個函數(shù)，this 默認會指向全局（瀏覽器端為window)

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

sayName();
window.sayName();

可以看到

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

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

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

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

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

可以用that保持this再進行下一步，或者匿名函數(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);

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

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

這時this會指向這個obj

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

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

具體使用方法

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

var name = 'name1';

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

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

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

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

比如 new Foo();

先來看個簡單的例子：

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

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

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

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