4、 this 问题

61 阅读1分钟
function Person(name,age){
    this.name = name;
    this.age = age;
}
var person1 = new Person("张三",18);
var person2 = Person("李四",12);

console.log(person1);
console.log(person2);
console.log(person1.name, person1.age);
console.log(window.name, window.age);

// 打印结果:
// { name: '张三', age: 18 }
// undefined
// 张三
// 18
// 李四
// 12

// 解析:
// new Person 时,this 指向实例,所以 person1 = { name: '张三', age: 18 }
// 直接调用 Person 时,等价于 window.Person 调用,所以 this 指向 window
// 由于函数无返回值,所以 person2 = undefined
function test(arg) {
  this.x = arg;
  return this;
}

var x = test(5);
var y = test(6);

console.log(x.x);
console.log(y.x);

// 打印结果为:
// undefined
// 6

// 解析:
var x = test(5); => window.x = window.test(5)
window.x = 5; x = window; => window.x == x == window

var y = test(6); => window.y = window.test(6)
window.x = 6; y = window; => window.x == x == 6

x.x => 6.x => undefined
y.x => window.x => 6
var obj = {
  data: [1, 2, 3, 4, 5],
  data2: [1, 2, 3, 4, 5],
  fn: function () {
    console.log("--test--");
    console.log(this);
    return this.data.map(function (item) {
      console.log(this);
      return item * 2;
    });
  },
  fn2: function () {
    console.log("---test2---");
    console.log(this);
    return this.data2.map((item) => {
      console.log(this);
      return item * 2;
    });
  },
};
obj.fn();
obj.fn2();

// 打印结果为:
// --test--
// obj
// window
// window
// window
// window
// window

// --test2--
// obj
// obj
// obj
// obj
// obj
// obj

// 解析:
// obj.fn() 调用,this 指向 obj
// 执行 map 时,其回调函数是个普通的函数表达式
// 它不会自动绑定到对象上,因此它的this值将默认为全局对象,通常是window