调用无上下文函数
如果在没有任何上下文的情况下调用的函数中使用 this，它将绑定到全局对象。
该示例如下所示：
<!DOCTYPE html>
<html>
<body>
<script>
let context = "global";
let obj = {
context: "object",
method: function() {
function func() {
let context = "function";
return this + ":" + this.context;
};
return func(); //无上下文调用
}
};
alert(obj.method()); //[object Window]:global
</script>
</body>
</html>
在原型链上定义的函数内部
如果方法在对象原型链上，则 this 内部与执行方法的对象相关，就好像它是在对象上定义的一样。
该示例如下所示：
let ProtoObject = {
func: function () {
return this.a;
}
}; //create（）创建以ProtoObject为原型的对象，并将其分配给obj，
//从而使func（）成为其原型链上的方法
let obj = Object.create(ProtoObject);
obj.a = 999;
console.log(obj.func()); //999
//注意，fun（）是在obj的原型上定义的，但是在fun()中，'this.a'返回的是obj.a
在全局上下文中使用 this
如果在全局上下文中使用 this，它会绑定到全局对象。
下面是一个例子：
console.log(this); //[object Window]
如果在全局上下文中定义的函数中使用 this，它仍然绑定到全局对象。
该示例如下所示：
function func() {
return this;
}
console.log(func()); //[object Window]
全局对象的方法在func之上。
它也可以在 window 对象上调用，如下所示：
<!DOCTYPE html>
<html>
<body>
<script>
function func() {
return this;
}
alert(window.func()); //[object Window]
</script>
</body>
</html>
在 Call()、Apply() 和 Bind() 函数内部
在 Function.prototype 中描述了 Call、Apply 和 Bind 等方法。
这些方法允许编写一次函数并在许多上下文中调用它。
换句话说，它们有助于指定在调用函数时可能使用的 this 值。
func.apply(obj1 [, argsArray])可以将 obj1 设置为 func() 内部的 this 值，调用 func() 并像它的元素一样传递 argsArray 的元素。
-func.call(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]])可以将 obj1 设置为 func() 中 this 的值，调用 func() 传递 arg1, arg2, arg3, ...喜欢它的参数。fun.bind(obj1 [, arg1 [, arg2 [,arg3 [, ...]]]])可以在绑定到 obj1 的 func 中使用 this 返回对函数 func 的引用，以及绑定到 func 的参数arg1, arg2, arg3,... 等参数。
对象方法内部
在对象方法中使用 this 关键字的情况下，它绑定到直接封闭对象，如下所示：
let obj = {
name: "obj",
func: function () {
return this + ":" + this.name;
}
};
console.log(obj.func()); //[object Object]:obj
箭头函数内部
在箭头函数中， this 像标准变量一样运行。
它是从它的词法范围继承的。
它看起来和这里一样：
(function () {}).bind(this)
另外，看看下面的代码：
const globalArrowFunction = () => {
return this;
};
console.log(globalArrowFunction()); //window
const contextObject = {
method1: () => {
return this
},
method2: function () {
return () => {
return this
};
}
};
console.log(contextObject.method1()); //window
const contextLessFunction = contextObject.method1;
console.log(contextLessFunction()); //window
console.log(contextObject.method2()()) //contextObject
const innerArrowFunction = contextObject.method2();
console.log(innerArrowFunction()); //contextObject
因此，运算符 this 在 JavaScript 中起着至关重要的作用。
它也是 JavaScript 被误解的概念之一，因为它在其他编程语言中的行为不同。
当然，它指的是当前正在执行的函数的所有者。
必须知道，在 JavaScript 中，与其他编程语言相比，this 关键字的操作方式不同。
此代码可了解它的工作原理和方式。
JavaScript 中 this 的值由函数 (context.function()) 的调用上下文以及调用位置决定。
构造函数内部
如果函数用作构造函数（当使用 new 运算符调用时），则函数体内的 this 显示正在构造的新对象。
下面是一个例子：
let varName = "global context";
function SimpleFunction() {
this.varName = "Simple Function";
}
let obj = new SimpleFunction(); //adds varName to obj
//1.`new“使”SimpleFunction（）中的“this”指向正在构造的对象，
//从而将在SimpleFunction（）中使用this.memberName创建的任何成员添加到正在构造的对象中
//2. 默认情况下，如果没有指定显式返回值，
//“new”使函数返回新构造的对象
console.log(obj.varName); //Simple Function
日期：2020-06-02 22:16:07 来源：oir作者：oir