对比学习 apply, call, 和 bind 👀👀👀

前言

大家好 , 我是一名在校大二学生 , 今天学习apply, call, 和 bind , 我决定将三者对比学习 , 分别从 :

  • 相同点
  • 差异点
  • 易错点

横向对比

在 JavaScript 开发中,apply, call, 和 bind 是非常常用的函数方法,它们都用于改变函数的 this 上下文。本文将详细介绍这三者的相同点、区别以及易错点,并通过代码示例来加深理解。

相同点

  1. 改变 this 上下文 :这三个方法都可以改变函数调用时的 this 值。
  2. 立即执行 vs 延迟执行applycall 会立即执行函数,而 bind 会返回一个新函数,可以在之后调用。
代码示例
js 复制代码
function greet(name) {
    console.log(`Hello, ${name}! I am ${this.name}`);
}

const person = { name: 'Alice' };

// 使用 call
greet.call(person, 'Bob'); // Hello, Bob! I am Alice

// 使用 apply
greet.apply(person, ['Charlie']); // Hello, Charlie! I am Alice

// 使用 bind
const greetAlice = greet.bind(person);
greetAlice('Dave'); // Hello, Dave! I am Alice

差异点

  1. 参数传递方式
    • call:参数以逗号分隔的形式传递。
    • apply:参数以数组形式传递。
    • bind:参数以逗号分隔的形式传递,但返回的是一个新函数,可以在之后调用。
代码示例
javascript 复制代码
function sum(a, b, c) {
    return a + b + c;
}

const numbers = [1, 2, 3];

// 使用 call
console.log(sum.call(null, 1, 2, 3)); // 6

// 使用 apply
console.log(sum.apply(null, numbers)); // 6

// 使用 bind
const sum12 = sum.bind(null, 1, 2);
console.log(sum12(3)); // 6
  1. 返回值
    • callapply:返回函数的执行结果。
    • bind:返回一个新函数,可以在之后调用。
代码示例
js 复制代码
function getGreeting(name) {
    return `Hello, ${name}! I am ${this.name}`;
}

const person = { name: 'Alice' };

// 使用 call
const greetingCall = getGreeting.call(person, 'Bob');
console.log(greetingCall); // Hello, Bob! I am Alice

// 使用 apply
const greetingApply = getGreeting.apply(person, ['Charlie']);
console.log(greetingApply); // Hello, Charlie! I am Alice

// 使用 bind
const getGreetingAlice = getGreeting.bind(person);
const greetingBind = getGreetingAlice('Dave');
console.log(greetingBind); // Hello, Dave! I am Alice

易错点

  1. this 上下文的默认值

    • 在严格模式下,this 默认为 undefined
    • 在非严格模式下,this 默认为全局对象(浏览器中是 window,Node.js 中是 global)。
代码示例
scss 复制代码
function logThis() {
    console.log(this);
}

// 严格模式
(function() {
    'use strict';
    logThis.call(); // undefined
})();

// 非严格模式
logThis.call(); // window 或 global
  1. bind 返回的新函数的 this 上下文
  • bind 返回的新函数的 this 上下文是固定的,即使使用 callapply 也无法改变。
代码示例
javascript 复制代码
function logThis() {
    console.log(this);
}

const boundLogThis = logThis.bind({ name: 'Alice' });

boundLogThis.call({ name: 'Bob' }); // { name: 'Alice' }
  1. apply call 的性能
  • apply 需要将参数数组展开,性能略低于 call
代码示例
js 复制代码
function sum(a, b, c) {
    return a + b + c;
}

const numbers = [1, 2, 3];

console.time('call');
for (let i = 0; i < 1000000; i++) {
    sum.call(null, 1, 2, 3);
}
console.timeEnd('call'); // call: 10ms

console.time('apply');
for (let i = 0; i < 1000000; i++) {
    sum.apply(null, numbers);
}
console.timeEnd('apply'); // apply: 15ms

总结

apply, call, 和 bind 都是改变函数 this 上下文的强大工具,但它们在参数传递方式、立即执行 vs 延迟执行、返回值等方面有所不同。理解这些差异和易错点,可以帮助我们在实际开发中更灵活地使用这些方法,提高代码的可读性和可维护性。

希望本文对你有所帮助!如果有任何疑问或建议,欢迎在评论区留言交流。

相关推荐
Wiktok1 小时前
pureadmin的动态路由和静态路由
前端·vue3·pureadmin
devii661 小时前
html.
前端
掘金安东尼1 小时前
为什么浏览器要限制 JavaScript 定时器?
前端·javascript·github
学前端搞口饭吃1 小时前
react context如何使用
前端·javascript·react.js
GDAL2 小时前
为什么Cesium不使用vue或者react,而是 保留 Knockout
前端·vue.js·react.js
wheeldown2 小时前
【Linux】面试常考!Linux 进程核心考点:写时拷贝优化原理 + 进程等待实战,一篇理清进程一生
linux·运维·服务器·面试·php
IT_陈寒2 小时前
《Java 21新特性实战:5个必学的性能优化技巧让你的应用快30%》
前端·人工智能·后端
小谭鸡米花2 小时前
uni小程序中使用Echarts图表
前端·小程序·echarts
芜青2 小时前
【Vue2手录11】Vue脚手架(@vue_cli)详解(环境搭建+项目开发示例)
前端·javascript·vue.js
a别念m2 小时前
前端架构-CSR、SSR 和 SSG
前端·架构·前端框架