我在 JavaScript 中尝试了 8 种类型

介绍

我很难在 JavaScript 中使用 this，所以我尝试了 8 种不同的 this 动作来组织和备忘录。
这篇文章主要是基于我从这两篇文章中学到的。

ui 的博客 JavaScript 完整解释 JavaScript 中的“this”！！【启蒙JavaScript总结】
关于 JavaScript 中的这个

1.顶层（外部函数）this

结论
this 的引用目标 = 全局对象 = 窗口对象。

顶级（外部函数）this

"use strict";

console.log(this) // window

this.alert('Hello World'); // window

显示控制台
JavaScriptのthisを8種類試してみた
显示html

* 即使在非严格模式下，结果也是一样的。

2. this 在一个函数中

结论
严格模式：this 引用 = undefined
非严格模式：thisreferences = window

严格模式

this 在函数中（严格模式）

"use strict";

function consoleDisplay() {
    console.log(this);
}
consoleDisplay(); // undefined

显示控制台
JavaScriptのthisを8種類試してみた

非严格模式

this 在函数中（非严格模式）

function consoleDisplay() {
    console.log(this);
}

consoleDisplay(); // window

显示控制台
JavaScriptのthisを8種類試してみた

3.this里面的箭头函数

结论
thisreferences = 调用者对象

尝试 2 种模式。

在顶层声明的箭头函数

let testArrowFunction = () => {
    console.log(this);
}
testArrowFunction(); // window (呼び出し元のオブジェクト)

显示控制台
JavaScriptのthisを8種類試してみた

对象中的箭头函数

let testO = {
    testMethod() {
        let consoleDisplay = () => {
            console.log(this);
        }
        consoleDisplay();
    }
}
test.testMethod(); // testMethod (呼び出し元のオブジェクト)

显示控制台
JavaScriptのthisを8種類試してみた

4.对象的函数中的this

结论
this 参考 = 全局对象 = 窗口对象

this 在对象的函数中

let test = {
    testMethod() {
        let consoleDisplay = function() {
            console.log(this);
        }
        consoleDisplay();
    }
}
test.testMethod(); // window

显示控制台
JavaScriptのthisを8種類試してみた

5. this 当用 call(), apply() 调用时

结论
this 的引用目的地 = call() 的参数指定的目的地，apply()

this 当用 call(), apply() 调用时

const testMethod = function (a, b) {
    console.log(this);
    console.log(a + b);
}

const testObject = {
    testMethod: testMethod
}

testMethod(); // window // NaN
testMethod.call(null, 1, 2); // window // 3
testMethod.apply(null, [3, 4]); // window // 7
testMethod.call(testMethod, 5, 6); // testMethod // 11
testMethod.apply(testMethod, [7, 8]); // testMethod // 15
testMethod.call(testObject, 9, 10); // testMethod // 19
testMethod.apply(testObject, [11, 12]); // testMethod // 23

6.this 当使用 bind() 调用时

结论
this 的引用目标 = 在 bind() 参数中指定的目标

使用 bind() 调用时

function test(){
    console.log("thisの値：" + this);
}

const obj = test.bind("今日のご飯")
obj(); // thisの値：今日のご飯

显示控制台
JavaScriptのthisを8種類試してみた

7. 事件处理程序/事件监听器中的 this

结论
匿名函数调用的this 的引用目的地 = 事件源
箭头函数调用的this的引用目的地=调用者对象

尝试 3 种模式。

在html端设置按钮

<button id="btn">表示</button>

this 由匿名函数调用

document.getElementById('btn').addEventListener('click', function() {
    console.log(this) // <button id="btn">表示</button>
})

显示控制台
JavaScriptのthisを8種類試してみた

this 由箭头函数调用

document.getElementById('btn').addEventListener('click', () => {
    console.log(this) // window
})

显示控制台
JavaScriptのthisを8種類試してみた

this 由对象中的箭头函数调用

const testObj = {
    testMethod: function () {
        document.getElementById('btn').addEventListener('click', () => {
            console.log(this) // testMethod
        })
    }
}
testObj.testMethod();

显示控制台
JavaScriptのthisを8種類試してみた

8. this 在构造函数中调用时

结论
this 引用 = 生成的实例

尝试 2 种模式。

const Food = function(name, price){
    this.name = name;
    this.price = price;
}

const curry = new Food("Curry", 850);
console.log(curry.name); // Curry
console.log(curry.price); // 850

显示控制台
JavaScriptのthisを8種類試してみた

this 在类内的构造函数中调用时

class Food {
    constructor(name, price){
        this.name = name;
        this.price = price;
    }
}

const curry = new Food("Curry", 850);

console.log(curry.name); // Curry
console.log(curry.price); // 850

显示控制台
JavaScriptのthisを8種類試してみた

概括

我对this有了更好的理解。
欲了解更多信息，请访问以下网站。

参考资料

原创声明：本文系作者授权爱码网发表，未经许可，不得转载;

原文地址：https://www.likecs.com/show-308632385.html