this的使用

Posted 2020-09-22

（1）全局环境

在全局环境使用this，它指的就是顶层对象window。

this === window // true

function f() {
  console.log(this === window); // true
}
不管是不是在函数内部，只要是在全局环境下运行，this就是指顶层对象window。

（2）构造函数

构造函数中的this，指的是实例对象。

var Obj = function (p) {
  this.p = p;
};

Obj.prototype.m = function() {
  return this.p;
};

上面代码定义了一个构造函数Obj。由于this指向实例对象，所以在构造函数内部定义this.p，就相当于定义实例对象有一个p属性；然后m方法可以返回这个p属性。

（3）对象的方法

当A对象的方法被赋予B对象，该方法中的this就从指向A对象变成了指向B对象。所以要特别小心，将某个对象的方法赋值给另一个对象，会改变this的指向。

var obj ={
  foo: function () {
    console.log(this);
  }
};

obj.foo() // obj

obj.foo方法执行时，它内部的this指向obj。

但是，只有这一种用法（直接在obj对象上调用foo方法），this指向obj；其他用法时，this都指向代码块当前所在对象（浏览器为window对象）。

// 情况一
(obj.foo = obj.foo)() // window

// 情况二
(false || obj.foo)() // window

// 情况三
(1, obj.foo)() // window

obj.foo先运算再执行，即使它的值根本没有变化，this也不再指向obj了。

可以这样理解，在javascript引擎内部，obj和obj.foo储存在两个内存地址，简称为M1和M2。只有obj.foo()这样调用时，是从M1调用M2，因此this指向obj。但是，上面三种情况，都是直接取出M2进行运算，然后就在全局环境执行运算结果（还是M2），因此this指向全局环境。

// 情况一
(obj.foo = function () {
  console.log(this);
})()

// 情况二
(false || function () {
  console.log(this);
})()

// 情况三
(1, function () {
  console.log(this);
})()

同样的，如果某个方法位于多层对象的内部，这时为了简化书写，把该方法赋值给一个变量，往往会得到意料之外的结果。

var a = {
  b: {
    m: function() {
      console.log(this.p);
    },
    p: ‘Hello‘
  }
};

var hello = a.b.m;
hello() // undefined

上面代码中，m是多层对象内部的一个方法。为求简便，将其赋值给hello变量，结果调用时，this指向了顶层对象。为了避免这个问题，可以只将m所在的对象赋值给hello，这样调用时，this的指向就不会变。

var hello = a.b;
hello.m() // Hello

（4）Node

在Node中，this的指向又分成两种情况。全局环境中，this指向全局对象global；模块环境中，this指向module.exports。

// 全局环境
this === global // true

// 模块环境
this === module.exports // true


原文链接：
http://javascript.ruanyifeng.com/oop/this.html