JavaScript中的this问题超详细总结

console.log(this); // 浏览器环境中输出 window

"use strict";
console.log(this); // 输出 undefined

const obj = {
  name: 'Alice',
  sayName: function () {
    console.log(this.name);
  }
};

obj.sayName(); // 输出 'Alice'

function Person(name) {
  this.name = name;
}

const person1 = new Person('Bob');
console.log(person1.name); // 输出 'Bob'

const obj = {
  name: 'Alice',
  sayName: function () {
    const arrowFunc = () => {
      console.log(this.name);
    };
    arrowFunc();
  }
};

obj.sayName(); // 输出 'Alice'
//箭头函数 arrowFunc 中的 this 继承自 sayName 方法中的 this，即 obj

const button = document.querySelector('button');
button.addEventListener('click', function () {
  console.log(this); // 指向 button 元素
});

const button = document.querySelector('button');
button.addEventListener('click', () => {
  console.log(this); // 指向外部作用域的 this（可能是 window 或 undefined，取决于严格模式）
});

class Person {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(this.name);
  }
}

const person = new Person('Dave');
person.sayName(); // 输出 'Dave'

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

const obj = {
  method: function() {
    [1, 2, 3].forEach(myCallback); // myCallback 作为回调函数
  }
};

obj.method();
// 输出：
// 在非严格模式下，输出 window（浏览器环境）
// 在严格模式下，输出 undefined

const obj = {
  name: 'Alice',
  sayName: function() {
    console.log(this.name);
  }
};

[1, 2, 3].forEach(obj.sayName);
// 输出：
// undefined（因为 this 不再指向 obj）
// 或者报错（如果 this.name 被访问且 this 是 undefined 或 window）

const button = document.querySelector('button');

button.addEventListener('click', function() {
  console.log(this); // 指向 button 元素
});

button.addEventListener('click', () => {
  console.log(this); // 指向外部作用域的 this（可能是 window 或 undefined，取决于严格模式）
});

const obj = {
  name: 'Alice',
  fetchData: async function() {
    const data = await new Promise((resolve) => {
      setTimeout(() => {
        resolve('Data fetched');
      }, 1000);
    });
    console.log(this.name); // 这里的 this 需要正确绑定
  }
};

// 使用箭头函数或 bind 确保 this 指向 obj
obj.fetchData().then(() => {}); // 正常输出 'Alice'

// 如果在另一个上下文中调用 fetchData，需要绑定 this
const fetch = obj.fetchData;
fetch.call(obj); // 或者使用 bind

let xiaoming = {
    age: 18,
    introduce: function() {
        setTimeout(function() {
            console.log(this.age)
        }, 1000)
    }
}

xiaoming.introduce();

let xiaoming = {
    age: 18,
    introduce: function() {
        let a = this;          //用一个变量a来储存
        setTimeout(function() {
            console.log(a.age)  //此处变为调用a
        }, 1000)
    }
}

xiaoming.introduce();

class MyCom {
    constructor() {
        this.value = 100;
    }
    getValue() {
        return this.value;
    }
}

let mc = new MyCom();
console.log(mc.getValue());  // 结果: 100

class MyCom {
    constructor() {
        this.value = 100;
    }
    getValue() {
        return this.value;
    }
}

let btn = {
    value: 200
}

let mc = new MyCom();
btn.getValue = mc.getValue;
console.log(btn.getValue());  // 结果: 200。因为调用者变为了btn

class MyCom {
    constructor() {
        this.value = 100;
        this.getValue = this.getValue.bind(this);
    }
    getValue() {
        return this.value;  //此时this被锁定为MyCom的实例对象
    }
}

let btn = {
    value: 200
}

let mc = new MyCom();
btn.getValue = mc.getValue;
console.log(btn.getValue());  // 结果: 100

function test() {
}

let newTest = test.bind(xiaoming);
newTest();  // this永远指向xiaoming