this 是 javascript 中的一个关键字，当前环境执行期上下文对象的一个属性，this 在不同的环境、不同作用下，表现不同

全局作用域下的 this

window 和 this 的关系：全局作用域下，this === window

获取全局对象：

web 环境下：window、self、frames、this
node 环境下：global
worker：self
通用：globalThis

在松散模式下，可以在函数中返回 this 来获取全局对象，但是在严格模式和模块环境下，this 会返回 undefined

对象中的 this

this 指向的基本原则：谁调用 this 的宿主，this 就指向谁

对象方法内部的 this，指向最近的 this 引用

var obj = {
  a: 1,
  b: 2,
  foo: function () {
    console.log(this.a); // 1
  },
  bar: function () {
    console.log(this.b); // 2
  },
  c: {
    d: 3,
    demo: function () {
      console.log(this.d); // 3
    },
  },
};
obj.c.demo();

var obj2 = {
  name: "sunny",
  age: 18,
  foo: function () {
    function bar() {
      console.log(this); // window
    }
    bar();
  },
};

obj2.foo();

call、apply、bind

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数
apply() 方法调用一个函数, 其具有一个指定的 this 值，以及作为一个数组（或类似数组的对象）提供的参数
bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

apply 和 call 的区别是 call 方法接受的是若干个参数列表，而 apply 接收的是一个包含多个参数的数组。

注意：bind 只会生效一次

var obj = {
  a: 1,
};

var obj2 = {
  a: 50,
};

function foo(arg1, arg2) {
  console.log(this.a, arg1, arg2);
}

function bar(arg3, arg4) {
  console.log(this.a, arg3, arg4);
}

foo.bind(obj, 3, 4).bind(obj2, 5, 6)(); // 1 3 4

箭头函数中的 this

不管是否在严格模式下，全局作用域下箭头函数 this 指向 window

"use strict";
var foo = () => {
  console.log(this);
};

foo(); // window

箭头函数是忽略任何形式的 this 指向的改变

var obj = {
  a: 1,
};

var a = 2;

var foo = () => {
  console.log(this);
};

foo.call(obj); // window
foo.apply(obj); // window
foo.bind(obj)(); // window

// 注意：箭头函数一定不是一个构造器，new foo()会报错

箭头函数中的 this 不是谁绑定就指向谁

var obj2 = {
  a: 50,
};

obj2.bar = () => {
  console.log(this);
};
obj.bar(); // window

箭头函数中的 this 指向外层非箭头函数的 this

var obj = { a: 1 };

obj.bar = function () {
  console.log("bar", this); // obj
  var t1 = () => {
    console.log("t1", this); // obj
    var t2 = () => {
      console.log("t2", this); // obj
    };
    t2();
  };
  t1();
};
obj.bar();

obj.foo = function () {
  console.log("foo", this); // obj
  var t1 = function () {
    console.log("t1", this); // window
    var t2 = () => {
      console.log("t2", this); // window
    };
    t2();
  };
  t1();
};

obj.foo();

obj.test = function () {
  var t = () => {
    console.log(this); // obj
  };
  t();
};

obj.test();

obj.demo = function () {
  setTimeout(() => {
    console.log(this); // obj
  }, 0);
};

obj.demo();

箭头函数的 this 始终指向函数定义时的 this，而非执行时。

箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined

事件处理函数中的 this

事件处理函数中的 this 总是指向被绑定 DOM 元素

Object.defineProperty()

var person = {
  name: "cherry",
};

Object.defineProperty(person, "age", {
  get() {
    console.log(this); // person:{}
  },
});
console.log(person.age);

js中this总结