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

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

字符串格式化:

${占位符}

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

在这里插入图片描述

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!

分析:

​ 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!
总结:
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!

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

你可能感兴趣的:(web前端,javascript,前端,开发语言)