js中怎么用this两个对象

在JavaScript中，使用this关键字来引用两个对象的方式有：明确绑定、间接引用、箭头函数、构造函数。在这些方法中，明确绑定是最常用的技术之一，通过call、apply和bind方法来实现。下面详细解释这种方法。

明确绑定通过call、apply和bind方法来实现。call和apply方法的区别在于参数的传递方式不同，call方法将参数逐个传递，而apply方法则是将参数作为数组传递。bind方法则创建一个新的函数，当这个新函数被调用时，其this值是传入的参数。

一、明确绑定

明确绑定是指通过call、apply和bind方法来显式地设置函数内部的this指向。

1、call 方法

call方法可以显式地设置函数内部的this指向，并逐个传递参数。

function greet(greeting, punctuation) {

    console.log(greeting + ', ' + this.name + punctuation);
}
const person1 = { name: 'Alice' };
const person2 = { name: 'Bob' };
greet.call(person1, 'Hello', '!'); // Hello, Alice!
greet.call(person2, 'Hi', '...');  // Hi, Bob...

2、apply 方法

apply方法与call方法相似，只不过参数是以数组的形式传递。

function greet(greeting, punctuation) {

    console.log(greeting + ', ' + this.name + punctuation);
}
const person1 = { name: 'Alice' };
const person2 = { name: 'Bob' };
greet.apply(person1, ['Hello', '!']); // Hello, Alice!
greet.apply(person2, ['Hi', '...']);  // Hi, Bob...

3、bind 方法

bind方法创建一个新的函数，当这个新函数被调用时，其this值是传入的参数。

function greet(greeting, punctuation) {

    console.log(greeting + ', ' + this.name + punctuation);
}
const person1 = { name: 'Alice' };
const person2 = { name: 'Bob' };
const greetAlice = greet.bind(person1);
const greetBob = greet.bind(person2);
greetAlice('Hello', '!'); // Hello, Alice!
greetBob('Hi', '...');    // Hi, Bob...

二、间接引用

间接引用是指通过一个变量间接地引用this，通常在回调函数中使用。

1、在事件处理器中使用

在事件处理器中，this通常指向事件的目标元素。

document.getElementById('myButton').addEventListener('click', function() {

    console.log(this.id); // myButton
});

2、在回调函数中使用

在回调函数中，this的指向可能会发生变化，可以通过闭包或箭头函数解决。

function Timer() {

    this.seconds = 0;
    setInterval(() => {
        this.seconds++;
        console.log(this.seconds);
    }, 1000);
}
const timer = new Timer(); // 1, 2, 3, ...

三、箭头函数

箭头函数不绑定自己的this，它会捕获上下文的this值作为自己的this值。

const person = {

    name: 'Alice',
    greet: function() {
        setTimeout(() => {
            console.log('Hello, ' + this.name);
        }, 1000);
    }
};
person.greet(); // Hello, Alice

四、构造函数

在构造函数中，this指向新创建的对象。

function Person(name) {

    this.name = name;
    this.greet = function() {
        console.log('Hello, ' + this.name);
    };
}
const person1 = new Person('Alice');
const person2 = new Person('Bob');
person1.greet(); // Hello, Alice
person2.greet(); // Hello, Bob

通过这些方法，可以在JavaScript中灵活地使用this关键字来引用不同的对象。在明确绑定中，call、apply和bind方法是最常用的技术，它们可以显式地设置函数内部的this指向，从而实现对不同对象的引用。这些方法在实际开发中非常实用，可以帮助开发者更好地理解和掌握JavaScript中的this关键字。

相关问答FAQs：

1. 在JavaScript中，如何使用this关键字来引用两个对象？

• 问题：如何在JavaScript中使用this关键字引用两个对象？

回答：在JavaScript中，this关键字用于引用当前正在执行的函数所属的对象。要使用this关键字引用两个对象，可以按照以下步骤进行操作：

1. 创建两个对象，每个对象都有自己的属性和方法。
2. 在需要使用this关键字的函数中，使用this关键字来引用当前对象。
3. 在调用函数时，确保将函数与相应的对象关联起来，以便this关键字能够引用正确的对象。

例如，假设我们有两个对象person1和person2，每个对象都有一个属性name和一个方法sayHello。我们可以按照以下方式使用this关键字来引用这两个对象：

// 创建两个对象
var person1 = {
  name: "Alice",
  sayHello: function() {
    console.log("Hello, " + this.name + "!");
  }
};

var person2 = {
  name: "Bob",
  sayHello: function() {
    console.log("Hello, " + this.name + "!");
  }
};

// 调用对象的方法
person1.sayHello(); // 输出：Hello, Alice!
person2.sayHello(); // 输出：Hello, Bob!

在上面的例子中，sayHello方法中的this关键字分别引用了person1和person2对象，使得输出结果根据对象的name属性而不同。

2. 如何在JavaScript中使用this关键字引用不同的两个对象？

• 问题：如何在JavaScript中使用this关键字引用两个不同的对象？

回答：在JavaScript中，使用this关键字引用不同的两个对象可以通过以下方法实现：

1. 创建两个不同的对象，每个对象都有自己的属性和方法。
2. 在需要使用this关键字的函数中，使用条件语句或其他逻辑来判断当前所属的对象，并使用this关键字引用正确的对象。
3. 在调用函数时，确保将函数与相应的对象关联起来，以便this关键字能够引用正确的对象。

例如，假设我们有两个对象person1和person2，每个对象都有一个属性name和一个方法sayHello。我们可以按照以下方式使用this关键字来引用不同的两个对象：

// 创建两个对象
var person1 = {
  name: "Alice",
  sayHello: function() {
    if (this.name === "Alice") {
      console.log("Hello, " + this.name + "!");
    } else {
      console.log("Who are you?");
    }
  }
};

var person2 = {
  name: "Bob",
  sayHello: function() {
    if (this.name === "Bob") {
      console.log("Hello, " + this.name + "!");
    } else {
      console.log("Who are you?");
    }
  }
};

// 调用对象的方法
person1.sayHello(); // 输出：Hello, Alice!
person2.sayHello(); // 输出：Hello, Bob!

在上面的例子中，sayHello方法中使用了条件语句来判断当前对象的name属性，并根据不同的name属性输出不同的结果。

3. 如何在JavaScript中使用this关键字引用两个对象的共同属性？

• 问题：如何在JavaScript中使用this关键字引用两个对象共同的属性？

回答：在JavaScript中，使用this关键字引用两个对象共同的属性可以通过以下方法实现：

1. 创建两个对象，确保它们都有一个共同的属性。
2. 在需要使用this关键字的函数中，使用this关键字引用当前对象的共同属性。
3. 在调用函数时，确保将函数与相应的对象关联起来，以便this关键字能够引用正确的对象。

例如，假设我们有两个对象person1和person2，它们都有一个共同的属性age和一个方法getAge。我们可以按照以下方式使用this关键字来引用这两个对象的共同属性：

// 创建两个对象
var person1 = {
  age: 25,
  getAge: function() {
    console.log("My age is: " + this.age);
  }
};

var person2 = {
  age: 30,
  getAge: function() {
    console.log("My age is: " + this.age);
  }
};

// 调用对象的方法
person1.getAge(); // 输出：My age is: 25
person2.getAge(); // 输出：My age is: 30

在上面的例子中，getAge方法中的this关键字分别引用了person1和person2对象的共同属性age，使得输出结果根据对象的age属性而不同。