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

上面代码说明了，只要构造函数不返回对象，就不会影响新建的实例。