javascript闭包怎样绑定特定上下文

function myFunc() {
  console.log(this.name);
}

const obj = { name: 'Alice' };

myFunc.call(obj);   // 输出 "Alice"
myFunc.apply(obj);  // 输出 "Alice"

// 在闭包中使用
function outerFunc() {
  const name = 'Bob';
  return function innerFunc() {
    console.log(this.name);
  }.call(this); // 立即执行，this 指向调用 call 时的上下文
}

const anotherObj = { name: 'Charlie' };
outerFunc.call(anotherObj); // 输出 "Charlie"

//apply 示例
function outerFuncApply() {
    const name = 'Bob';
    return function innerFunc(arg1, arg2) {
      console.log(this.name, arg1, arg2);
    }.apply(this, ['hello', 'world']); // 立即执行，this 指向调用 apply 时的上下文
  }

const yetAnotherObj = { name: 'David' };
outerFuncApply.call(yetAnotherObj); // 输出 "David hello world"

function myFunc() {
  console.log(this.name);
}

const obj = { name: 'Eve' };

const boundFunc = myFunc.bind(obj);
boundFunc();  // 输出 "Eve"

// 在闭包中使用
function outerFunc() {
  const name = 'Bob';
  return function innerFunc() {
    console.log(this.name);
  }.bind(this); // 返回一个绑定了 this 的新函数
}

const anotherObj = { name: 'Frank' };
const boundInnerFunc = outerFunc.call(anotherObj);
boundInnerFunc(); // 输出 "Frank"

function outerFunc() {
  this.name = 'Grace'; // 关键：outerFunc的this指向的对象拥有name属性
  return () => {
    console.log(this.name);
  };
}

const obj = { name: 'Henry' };
const arrowFunc = outerFunc.call(obj);
arrowFunc(); // 输出 "Henry"

//更简洁的例子
const myObject = {
  value: 'Hello',
  myMethod: function() {
    return () => {
      console.log(this.value); // this 指向 myObject
    };
  }
};

const func = myObject.myMethod();
func(); // 输出 "Hello"

const obj = {
  name: 'Karen',
  myFunc: function() {
    // 普通函数
    setTimeout(function() {
      console.log(this.name); // this 指向 window (非严格模式) 或 undefined (严格模式)
    }, 100);

    // 箭头函数
    setTimeout(() => {
      console.log(this.name); // this 指向 obj
    }, 100);
  }
};

obj.myFunc();

class MyComponent {
  constructor(name) {
    this.name = name;
    this.button = document.createElement('button');
    this.button.textContent = 'Click Me';
    document.body.appendChild(this.button);

    // 使用 bind
    this.button.addEventListener('click', this.handleClick.bind(this));

    // 使用箭头函数
    this.button.addEventListener('click', () => {
      this.handleClickArrow();
    });
  }

  handleClick() {
    console.log('Clicked by bind:', this.name);
  }

  handleClickArrow() {
    console.log('Clicked by arrow:', this.name);
  }
}

const myComponent = new MyComponent('Leo');