JS中this的使用

this

前排提示：this只有在執行的時候才能確認，定義時無法被確認。

1. 作為對象屬性執行

var name = '李四';
var person = {
  name: '張三',
  getName() {
    console.log(this.name); // 這個this是啥，不知道，我又沒調用這個方法
  }
};

person.getName(); // 此時this為person, 作為對象屬性執行，輸出張三

2. 作為構造函數執行

function Foo(name) {
  this.name = name; // 此時的this === {}
};
var f = new Foo('張三');

3. 作為普通函數執行

var name = '李四';
var person = {
  name: '張三',
  getName() {
    console.log(this.name)
  }
};
var per = person.getName;
per();
// 此時輸出李四而不是張三, this已經為window了，在全局作用域中定義了name變量，自然輸出全局的name
// 而不是person對象的name

4. call，apply，bind可以改變this的指向

var p1 = {
  name: '張三',
  getName(age, job) {
    console.log(this.name, age, job);
  }
};
var p2 = {
  name: '李四'
};
p1.getName.call(p2, 18, '前端工程師'); // 輸出李四18前端工程師
p1.getName.apply(p2, [18, '前端工程師']); // 輸出李四18前端工程師
p2.getName = p1.getName.bind(p2);
p2.getName(18, '前端工程師'); // 輸出李四

這里引用下追夢子博客的一些知識

function Fn() {
  this.name = 'fn';
  return {};
}
var f = new Fn();
console.log(f.name); // 輸出undefined

function Fn() {
  this.name = 'fn';
  return function () {};
}
var f = new Fn();
console.log(f.name); // 輸出undefined

function Fn() {
  this.name = 'fn';
  return undefined;
}
var f = new Fn();
console.log(f.name); // 輸出fn

function Fn() {
  this.name = 'fn';
  return 1;
}
var f = new Fn();
console.log(f.name); // 輸出fn

上面代碼說明了，只要構造函數不返回對象，就不會影響新建的實例。