前端this的几种指向示例

// 1. 普通函数中的this
function normalFunction() {
    console.log('普通函数this指向:', this);
}
// 在非严格模式下，this指向window
normalFunction(); // window
// 严格模式下，this指向undefined
('use strict');
normalFunction(); // undefined

// 2. 对象方法中的this
const obj = {
    name: '张三',
    sayHi() {
        console.log('对象方法中this指向:', this);
        console.log('你好，我是', this.name);
    }
};
obj.sayHi(); // this指向obj对象

// 3. 箭头函数中的this
const person = {
    name: '李四',
    friends: ['王五', '赵六'],
    sayHiToFriends() {
        // 箭头函数继承外层函数的this
        this.friends.forEach((friend) => {
            console.log(`${this.name}向${friend}打招呼`);
        });
    }
};
person.sayHiToFriends();

// 4. 构造函数中的this
function Person(name) {
    this.name = name;
    this.sayName = function () {
        console.log('我的名字是:', this.name);
    };
}
const person1 = new Person('小明');
person1.sayName(); // this指向新创建的实例

// 5. call/apply/bind改变this指向
const teacher = {
    name: '老师',
    teach: function () {
        console.log(`${this.name}正在教课`);
    }
};

const student = {
    name: '学生'
};

teacher.teach.call(student); // "学生正在教课"

// 6. DOM事件处理函数中的this
/*
document.getElementById('myButton').addEventListener('click', function() {
  console.log('事件处理函数中的this:', this); // this指向触发事件的元素
});
*/

// 7. Class中的this
class MyClass {
    constructor(name) {
        this.name = name;
    }

    regularMethod() {
        console.log('普通方法中的this:', this.name);
    }

    arrowMethod = () => {
        console.log('箭头方法中的this:', this.name);
    };
}

const instance = new MyClass('实例');
const method = instance.regularMethod;
method(); // this丢失，将输出undefined
instance.arrowMethod(); // 箭头函数this永远指向实例