apply和call在Javascript中的使用与区别

apply和call在js中的使用与区别：

字符串格式化：

${占位符}

name='小帅'
console.log(`我是${name}`) //我是小帅
1
2

---

apply:

• 语法：function.apply(thisArg, [argsArray])
• thisArg：可选参数，指定函数执行时的上下文（即函数内部的this值）。
• argsArray：可选参数，是一个类数组对象，包含传递给函数的参数列表。
• 作用：将一个对象作为函数的上下文（this值），并以数组形式传递参数，然后调用该函数。
• 参数一：对象 参数二：数组

function greet(name) {
  console.log(`Hello, ${name}!`);
}
const person = {
  name: 'Alice'
};

greet.apply(person, ['Bob']);
// 输出：Hello, Bob!
greet(person.name)
//Hello, Alice!
1
2
3
4
5
6
7
8
9
10
11

分析：

​ person调用greet函数但是并没有使用自身的参数，而是使用外部的.

​ person.greet 参数就是自身的name值.

---

call:

• 语法：function.call(thisArg, arg1, arg2, ...)
• thisArg：可选参数，指定函数执行时的上下文（即函数内部的this值）。
• arg1, arg2, ...：可选参数，是按顺序传递给函数的参数列表。
• 作用：将一个对象作为函数的上下文（this值），然后按参数列表传递参数，调用该函数。
• 参数一：对象 ，参数二、参数三、参数四

function greet(name) {
  console.log(`Hello, ${name}!`);
}

const person = {
  name: 'Alice'
};

greet.call(person, 'Bob');
// 输出：Hello, Bob!
1
2
3
4
5
6
7
8
9
10

总结：

function greet() {
  console.log(`Hello, ${this.name}!`);//不传递参数
}

const person1 = { name: 'Alice' };
const person2 = { name: 'Bob' };

//
// 使用apply()调用greet()，并指定执行上下文为person1
greet.apply(person1); // 输出：Hello, Alice!

// 使用call()调用greet()，并指定执行上下文为person2
greet.call(person2); // 输出：Hello, Bob!
1
2
3
4
5
6
7
8
9
10
11
12
13

​ 无论是apply()还是call()，它们都可以用来改变函数内部的this值，并在调用函数时传递参数。并不使用内部对象的值，而是使用传入的参数，区别在于apply()使用数组形式传递参数，而call()使用逗号分隔的参数列表传递参数。