call, apply , bind 区别详解 及 实现购物车业务开发实例

news2025/1/10 18:14:52

call 方法:

原理

call 方法允许一个对象借用另一个对象的方法。通过 call,你可以指定某个函数运行时 this 指向的上下文。本质上,call 改变了函数运行时的作用域,它可以让我们借用一个已存

在的函数,而将函数体内的 this 绑定到当前对象。

function displayInfo(age, job) {
    console.log(`${this.name} is ${age} years old and is a ${job}.`);
}

const person = {
    name: 'Alice'
};

// 使用 call 调用函数,同时将 this 设置为 person 对象
displayInfo.call(person, 30, 'developer');
// 输出: Alice is 30 years old and is a developer.

apply方法:

原理

applycall 非常相似,差别仅在于 apply 接受一个参数数组,而不是一组参数列表。这在你需要传递一个数组数据作为调用函数的参数时特别有用。比如,当你使用 Math.max() 计算数组中的最大值时,可以使用 apply

function displayInfo(age, job) {
    console.log(`${this.name} is ${age} years old and is a ${job}.`);
}

const person = {
    name: 'Alice'
};

// 使用 apply 调用函数,传递参数数组
displayInfo.apply(person, [30, 'developer']);
// 输出: Alice is 30 years old and is a developer.

bind方法:

bind 方法创建一个新的函数,当被调用时,这个新函数的 this 被指定为 bind 的第一个参数,而其余参数将作为新函数的参数,供调用时使用。

function greet(greeting, punctuation) {
    console.log(`${greeting}, my name is ${this.name}${punctuation}`);
}

const person = { name: 'Alice' };
const sayHello = greet.bind(person, 'Hello');
sayHello('!');  // 输出: Hello, my name is Alice!

原理解析

  • callapply 的区别 主要在于参数的传递方式。call 需要将参数按顺序一个接一个地传递,而 apply 则是把参数放在一个数组中传递。
  • bind 则是返回一个新的函数,允许你预设 this 参数和其他参数,之后可以随时调用。

这三个方法都是函数原型上的方法,即 Function.prototype,因此在JavaScript中所有函数都可以使用这些方法。这些方法的主要用途是控制函数执行时 this 关键字的值。

代码:

//商品购物车 套版  函数
function ShoppingCart(){
  this.items = []
  this.total = 0
  //this.total = items.length ?

}
//如果需要后续绑定this 对象,谨慎用箭头函数 (call,bind,apply 影响不了他的this)
ShoppingCart.prototype.addItem = function (item){
  this.items.push(item)
  this.total += item.price
  console.log(`${item.name} add successfully . Total is ${this.total}`)
}
ShoppingCart.prototype.removeItem = function (itemName){
  const itemIndex = this.items.findIndex(item => item.name === itemName)
  if(itemIndex > -1){
    this.total -= this.items[itemIndex].price
    this.items.splice(itemIndex,1)
    console.log(`${itemName} remove successfully.Total is ${this.total}`)
  }
}
//使用call 、apply
const p1 = {
  name:'书包',
  price:221
}
const p2 = {
  name:'书',
  price:12
}
const cart = new ShoppingCart()
//call适合一个对象 ,apply适合数组对象(必须是一个数组)
//两者都只会临时更改对象一次this 指向方向
cart.addItem.call(cart,p1)
cart.addItem.apply(cart,[p1, p2])
//bind 方法
const gadget = { name: 'Echo Dot', price: 49.99 }
// 创建一个永久绑定到 cart 的 addItem 方法
const boundAddItem = cart.addItem.bind(cart)
// 添加商品
boundAddItem(gadget)

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1649324.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

关于执行CLAM的代码的一些需要记录的点

文章链接:[2004.09666] Data Efficient and Weakly Supervised Computational Pathology on Whole Slide Images (arxiv.org) 代码链接:GitHub - mahmoodlab/CLAM: Data-efficient and weakly supervised computational pathology on whole slide images…

VALSE 2024 Workshop报告分享┆Open-Sora Plan视频生成开源计划——进展与不足

2024年视觉与学习青年学者研讨会(VALSE 2024)于5月5日到7日在重庆悦来国际会议中心举行。本公众号将全方位地对会议的热点进行报道,方便广大读者跟踪和了解人工智能的前沿理论和技术。欢迎广大读者对文章进行关注、阅读和转发。文章是对报告人…

新手做抖音小店多久能出单?新手抖音小店出单秘籍!出单教程必看

大家好,我是电商花花。 现阶段还是有很多朋友加入到抖音电商行业,因为抖音小店上还隐藏很多的红利和市场,很多新手开店后第一个问题就是,店铺开通后,一般多久能出单? 多久能出单,其实更看重的…

高等数学笔记(下中)

曲线积分 第一类曲线积分:对弧长的积分计算方法 定理:设 f ( x , y ) f(x,y) f(x,y)在曲线弧 L L L上有定义且连续, L L L的参数方程是 { x φ ( t ) y ψ ( t ) ( α ≤ t ≤ β ) \begin{cases} x\varphi(t)\\ y\psi(t) \end{cases}(\a…

国内如何下载TikTOK,手机刷机教程

最近很多玩家都来问怎么刷机?手机环境怎么搭建?这里给大家整理了苹果IOS刷机教程 1.iOS下载教程 : 步骤一:手机调试 苹果手机系统配置推荐:iPhone6S以上,16G。 注意:如果是选择购入二手手机…

某东抢购某台脚本——高版本

某东抢购某台脚本——高调 小白操作-学习参考 说明 这个脚本用于自动化京东的秒杀过程,特别是对于高需求商品如茅台。它展示了通过自动化工具模拟用户行为的能力,但同时也涉及到了使用自动化脚本可能违反网站使用条款的问题。使用此类脚本前应确保合…

软件设计师-应用技术-UML建模题3

基础知识及技巧: 1. 用例图: 1.1 考点: 题干里面有关项目的详细描述,完整用例图中的某些参与者和某些用来扣掉,根据题干内容和已有用例图补充。根据题干,分析用例图之间的关系。 1.2 基础知识&#xff…

速览Coinbase 2024Q1 财报重点:业务全面开花,净利润达11.8亿美元

作者:范佳宝,Odaily 星球日报 近期,Coinbase 发布了其 2024 年第一季度财报。 报告显示,Coinbase 第一季度营收为 16.4 亿美元,高于分析师平均预期的 13.4 亿美元;净利润为 11.8 亿美元,合每股…

renren-fast开源快速开发代码生成器

简介 renrenfast框架介绍 renren-fast是一个轻量级的Spring Boot快速开发平台,能快速开发项目并交付.完善的XSS防范及脚本过滤,彻底杜绝XSS攻击实现前后端分离,通过token进行数据交互 使用流程 项目地址 https://gitee.com/renrenio/ren…

深度学习之基于Vgg16卷积神经网络书法字体风格识别

欢迎大家点赞、收藏、关注、评论啦 ,由于篇幅有限,只展示了部分核心代码。 文章目录 一项目简介 二、功能三、系统四. 总结 一项目简介 一、项目背景 书法是中国传统文化的重要组成部分,具有深厚的历史底蕴和独特的艺术魅力。在数字化时代&…

跨考专业课142分,上岸重邮!

这个系列会邀请上岸学长学姐进行经验分享~ 今天分享经验的同学是我的“关门弟子”,小叮当,跨考上岸重邮通信工程!从平时和小叮当的交流和测试,就能看出专业课水平,我一直和她开玩笑说,早点遇到我&#xff…

【GA】deap之个体和种群概览(一)

参考资料 1.《基于遗传算法(deap库)的一元函数寻优代码详解》 2.官方文档:http://deap.readthedocs.io/en/master/index.html 3.《 Deap: python中的遗传算法工具箱》 ,⭐️666 —————— 文章目录 壹、overview一、Types1. Fitness 适应…

懒人网址导航源码v3.9源码及教程

懒人网址导航源码v3.9源码及教程 效果图使用方法部分源码领取源码下期更新预报 效果图 使用方法 测试环境 宝塔Nginx -Tengine2.2.3的PHP5.6 MySQL5.6.44为防止调试错误,建议使用测试环境运行的php与mysql版本首先用phpMyAdmin导入数据库文件db/db.sql 如果导入不…

嵌入式5-7

练习:优化登录框,输入完用户名和密码后,点击登录,判断账户是否为 Admin 密码 为123456,如果判断成功,则输出登录成功,并关闭整个登录界面,如果登录失败,则提示登录失败&a…

全栈开发之路——前端篇(6)生命周期和自定义hooks

全栈开发一条龙——前端篇 第一篇:框架确定、ide设置与项目创建 第二篇:介绍项目文件意义、组件结构与导入以及setup的引入。 第三篇:setup语法,设置响应式数据。 第四篇:数据绑定、计算属性和watch监视 第五篇 : 组件…

落地企业业财一体化的关键能力和路径

在财务数字化的改革过程中,财务部门已经通过会计电算化、ERP、财务共享,基本实现业务财务流程拉通和财务运营效率的提升,接下来面临问题是如何通过构建业财一体化体系,进一步挖掘数字利用价值,为管理决策赋能。 但在业…

C++ Primer 总结索引 | 第十四章:重载运算与类型转换

1、C语言定义了 大量运算符 以及 内置类型的自动转换规则 当运算符 被用于 类类型的对象时&#xff0c;C语言允许我们 为其指定新的含义&#xff1b;也能自定义类类型之间的转换规则 例&#xff1a;可以通过下述形式输出两个Sales item的和&#xff1a; cout << item1 …

面试中算法(最大公约数)

高效求出两个整数的最大公约数&#xff0c;要尽量优化算法的性能。 def getDiv(a,b):mamax(a,b)mimin(a,b)#判断能被整除if ma%mi0:return mi#递归return getDiv(ma%mi,mi)if __name__ __main__:# print(getDiv(10, 25))print(getDiv(1000, 50))没错&#xff0c;这确实是辗转…

三维点云处理-模型拟合

以直线拟合为例&#xff0c;模型拟合常用的方法有Least Square&#xff08;最小二乘&#xff09;、Hough Transform&#xff08;霍夫变换&#xff09;、Random Sample Consensus&#xff08;RANSAC&#xff09;等。那么该如何区分和使用这几种方法呢&#xff1f; 情况1&#x…