本文共 2638 字，大约阅读时间需要 8 分钟。

this是一个比较难理解的关键字，它在不同情况下具有不同的指向，而且其字面含义也容易让人产生误解，因为它并不直接指向函数本身。

aes拉链丑闻这两个关键词丑闻发生在哪些场合

了解this的关键是需要掌握以下几点：

this不指向函数本身

this不仅倾向于全局对象在浏览器中，它还在严格模式下指向undefined

this不指向函数的作用域

设想执行上下文是一个对象，这个对象拥有一个属性--this。每当函数被调用时，都会创建一个新的执行上下文。除了全局执行上下文，还有其他多个执行上下文（如通过new创建的执行上下文）。全局执行上下文中的this指向全局对象（在浏览器中即window，进入严格模式下则指向undefined）。

function foo（num）的调用情况

// foo的this不指向函数本身

// 不指向函数本身
function foo(num) {
    console.log(`foo被调用了${num}次`);
    this.count++;
}
foo.count = 0;
for(let i = 1; i < 6; i++) {
    foo(i);
}
console.log(foo.count);

从上面的代码可以明显看出，foo被调用了5次，但最终输出的却是0。这表明函数中的foo.count并未保持其状态。

// this也不指向函数的作用域

// this也不指向函数的作用域
function foo() {
    let a = 1;
    console.log(this.a);
}
foo(); // 输出undefined

从

this的指向取决于调用方式

函数的调用方式决定了this的指向，除了箭头函数外，函数的调用形式主要有以下几种：

1. 直接调用函数

function foo() {
    console.log(this);
}
foo(); // 输出，全局对象（浏览器中是window，严格模式下是undefined）.

2. 作为对象属性的调用

let obj = { bar: 1, methods() {
    console.log(this.bar);
}}
let obj2 = { bar: 2, obj: obj };
obj.methods(); // bar的值为1
obj2.obj.methods(); // 相同的bar的值是1。

我们可以忽略宿主的各种复杂情况，认为在这种情况下，函数的this指向的是最后一次调用它的对象。

3. 通过new调用

构造函数使用new运算符调用，上述操作符包含以下几个要点：

function CreatePerson({ name = '', gender='female'}) {
    this.name = name;
    this.gender = gender;
}
CreatePerson.prototype = {
    constructor: CreatePerson,
    getName() {
        console.log(this.name);
    },
    getGender() {
        console.log(this.gender);
    },
    work() { console.log('work'); },
    sleep() { console.log('sleep'); },
    play() { console.log('play'); }
};
const Tom = new CreatePerson({ name: 'Tom', gender: 'male' });
const Tom.getName(); // 返回Tom
const Tom.getGender(); // 返回male

通过Change操作符创建一个新对象后，该对象将成为调用函数的this。ccccccc

4. 使用bind、call、apply方法

这三种方法能够重新定义函数的this关键字。

function foo() {
    console.log(this.name);
    console.log(this.age);
}
let obj = { name: 'alex', age: 18 };
foo.bind(obj)(); // this会被完全重置为obj

let obj = {
    a: 1,
    b: 2
};
function foo() {
    console.log(this.a);
    console.log(this.b);
}
foo.call(obj); // a和b都从对象中取值

事件处理函数中的this

在事件处理中， rus这个名称所代表的键元素。不仅仅是嵌入式事件处理，其在事件处理函数中的this指向触发事件的元素。而在内联事件处理器中的this指向事件监听器绑定的对象。

箭头函数中的this

与常规函数不同，箭头函数的this的定义方式在调用时并不获取执行环境的状态即时，而是根据其定义位置进行判断。

var a = 1;
const foo = ()=>{ console.log(this.a); };
const obj = { a: 2, methods() { return () => { console.log(this.a); } } };
const obj1 = { a:3, methods: ()=>{ console.log(this.a); } };
foo(); //=>在无特定对象的执行环境中，this会指向全局对象，a是1。
obj.methods(); //=>在调用obj.methods时，this指向对象本身，所以输出2.
obj1.methods(); //=>使用arrow函数作为方法，this会指向对象本身。1等于未指向。

综上所述

通过以上例子可以看出，this的values是根据函数的调用方式和环境来确定的。在实际开发中，熟悉这些情况是非常重要的，这有助于更好地理解和使用this关键字。