JS设计模式学习 - this关键字

JavaScript的this

在 JS 中，this 的调用完全取决于函数调用时的上下文，而不是像 Java 一样，this 在声明的时候确定。JS 中 this 的指向大概能分为 4 种情况，分别是：

作为对象的方法调用
作为普通函数的调用
Function.prototype.call 或 Function.prototype.apply

作为方法

如果作为对象的方法调用，this 是指向该对象：

let obj = {
  objName:'obj',
  objThis(){
    alert(this.objName);
  }
  obj.objThis();
}

对象 obj 里面的方法 objThis 中的 this 是指向 obj 对象本身。

作为函数

作为普通函数调用，this 指向全局对象也就是 window 对象

var objName = "window";
function objThis() {
  console.log(this.objName);
}
objThis(); // window

此处的 this 默认指向全局 window，其实这种情况也可以理解为作为对象方法的一种特例：这里的对象是全局对象 window，objThis 这个方法是在 window 上调用的，那么 this 自然也就是 window 了。

作为构造函数

构造器调用，this 指向实例化对象

function Fruit() {
  this.func = function() {
    return this;
  };
}
var apple = new Fruit();
var orange = new Fruit();
apple.func() === apple; //true
orange.func() === orange; // ture

创建了一个空对象，将这个空对象作为 this 传给这个构造函数(每一个函数被调用时，都隐式的传入一个 this)，如果没有显示的返回值，新创建的这个对象，就会作为构造函数的返回值进行返回。

// ES6 类调用
class Obj {
  constructor(str, number) {
    this.str = str;
    this.number = number;
  }
  num() {
    console.log(this.str, this.number, this);
  }
}

//类实例
let obj = new Obj("hello", 123);
obj.num();

此处 this 输出的是类的实例对象，周遭函数或者类中的 this 指向自身实例

总结

在谁中使用 this，this 指向谁。

更多精彩内容可以访问我的博客Aelous-BLog

JS设计模式学习 - this关键字

JavaScript的this

作为方法

作为函数

作为构造函数

猜你喜欢