js中的this指向

晁州發表於2018-04-03
JS

js中的this指向

首先，js中的this指向是根據執行時確定的，而非定義時。

js中的this指向大致分為如下幾種：

  • 作為物件的方法呼叫
  • 作為普通函式呼叫
  • 構造呼叫
  • call、apply呼叫

作為物件的方法呼叫

var obj = {
  a: 1,
  getA: function(){
    alert ( this === obj ); // true
    alert ( this.a ); // 1
  }
};
obj.getA();

作為普通函式呼叫（瀏覽器環境）

window.name = 'globalName';
var getName = function(){
  return this.name;
};
console.log( getName() ); // globalName

或者

window.name = 'globalName';
var myObject = {
  name: 'sven',
  getName: function(){
    return this.name;
  }
};
var getName = myObject.getName;
console.log( getName() ); // globalName

構造呼叫

var MyClass = function(){
  this.name = 'sven';
};
var obj = new MyClass();
alert ( obj.name ); // sven

一般情況下，構造呼叫時this指向new後的物件，但是有種比較特殊，就是當建構函式return一個物件時（必須是物件，其餘型別比如string請忽略）指向該物件。

var MyClass = function(){
  this.name = 'sven';
  return {
  name: 'anne'
  }
};
var obj = new MyClass();
alert ( obj.name ); // anne

返回一個普通字串：

var MyClass = function(){
  this.name = 'sven'
  return 'anne';
};
var obj = new MyClass();
alert ( obj.name ); // sven

call、apply呼叫

call、apply、bind可以人為改變function的this指向:

var obj1 = {
  name: 'sven',
  getName: function(){
    return this.name;
  }
};
var obj2 = {
  name: 'anne'
};
console.log( obj1.getName() ); // sven
console.log( obj1.getName.call( obj2 ) ); // anne

相關文章