浅谈 JS 函数的定义和调用

108 阅读2分钟

函数的定义和调用

JavaScript 中定义函数可以使用函数声明或函数表达式。调用函数可以使用函数名加括号的形式,也可以使用 call()apply()bind() 方法。

考点:说说call()apply()bind()的异同? 它们都是 JavaScript 中用于调用函数的方法,用于改变函数的执行上下文(即 this 的值)。它们之间的主要区别在于它们如何传递参数和绑定 this 关键字。下面是它们的具体区别:

call()

call() 方法是在函数上下文中调用函数,可以传递参数列表,并将参数作为一个列表传递给函数。第一个参数指定函数内部的 this 关键字。如果第一个参数是 null 或 undefined,this 将指向全局对象。 示例:

function greeting(name) {
  console.log(`Hello, ${name}! I am ${this.name}.`);
}

const person = { name: 'John' };

greeting.call(person, 'Amy');
// 输出:Hello, Amy! I am John.

apply()

apply() 方法与 call() 方法类似,但是它接收的是一个参数数组而不是一个参数列表。第一个参数也是指定函数内部的 this 关键字。

示例:

function greeting(name) {
  console.log(`Hello, ${name}! I am ${this.name}.`);
}

const person = { name: 'John' };
const args = ['Amy'];

greeting.apply(person, args);
// 输出:Hello, Amy! I am John.

bind()

bind() 方法会返回一个新函数,这个函数的 this 关键字被绑定到传入的参数中的对象。与 call()apply() 不同,bind() 不会立即调用函数,而是返回一个新函数,可以稍后调用。

示例:

function greeting(name) {
  console.log(`Hello, ${name}! I am ${this.name}.`);
}

const person = { name: 'John' };
const boundGreeting = greeting.bind(person);

boundGreeting('Amy');
// 输出:Hello, Amy! I am John.

结论:

call()apply() 在调用函数时传递参数的方式不同,bind() 则返回一个新函数,其 this 关键字被绑定到传入的参数中的对象。使用这些方法可以更灵活地调用函数,特别是在涉及到 this 关键字时。

函数提升

对于函数来说,只有函数声明会被提升到顶部,而函数表达式不会被提升。

/* 函数声明 */

foo(); // "bar"

function foo() {
  console.log("bar");
}


/* 函数表达式 */

baz(); // 类型错误:baz 不是一个函数

var baz = function() {
  console.log("bar2");
};

写在最后

写作不易,如果这篇文章对你有帮助,请不要吝啬你手中的赞👍!你的鼓励将是我不断分享的动力!😄 前端更多知识及内容请关注如下【同步更新】。

📢 update 同步更新

掘金专栏 | 知乎专栏 | Github | 简书专栏 | CSDN | segmentfault