实现call和apply

                 Function.prototype.myCall = function (context) {
		 var context = context || window
		  console.log(context,this)
		  // 给 context 添加一个属性
		  // getValue.call(a, 'yck', '24') => a.fn = getValue
		  context.fn = this
		  // 将 context 后面的参数取出来
		  var args = [...arguments].slice(1)
		  // getValue.call(a, 'yck', '24') => a.fn('yck', '24')
		  var result = context.fn(...args)
		  // 删除 fn
		  delete context.fn
		  return result
		}复制代码

		Function.prototype.myApply = function (context) {
		  var context = context || window
		  context.fn = this

		  var result
		  // 需要判断是否存储第二个参数
		  // 如果存在,就将第二个参数展开
		  if (arguments[1]) {
		    result = context.fn(...arguments[1])
		  } else {
		    result = context.fn()
		  }

		  delete context.fn
		  return result
		}复制代码


<think>首先,用户的问题是:“callapply的用法区别”,这指的是JavaScript中的callapply方法。我需要用中文回答。 我的回答结构: 1. 解释callapply的用法。 2. 解释它们的区别。 3. 在回答末尾,必须添加“§§相关问题§§”行,然后列出3-5个相关问题。 4. 相关问题必须基于用户的问题我的回答。 关键点: - 回答必须完整。 - “§§相关问题§§”必须作为第一行输出在末尾部分,且不能换行分散。 - 相关问题应直接相关,有助于进一步学习。 **callapply的用法区别:** - 两者都是JavaScript函数的方法,用于改变函数的this指向。 - 用法: - `call(thisArg, arg1, arg2, ...)`:第一个参数是this值,后跟参数列表。 - `apply(thisArg, [argsArray])`:第一个参数是this值,第二个是参数数组。 - 区别:call接受参数列表,apply接受参数数组。 **相关问题构想:** 基于用户的问题,提出相关问题: 1. bind方法的用法是什么? 2. 在什么场景下应该使用call而不是apply? 3. 如何理解JavaScript中的this关键字? 4. callapply在性能上有什么区别? 5. 能否举例说明callapply的实际应用? 我需要列出3-5个,所以选择4个: 1. bind方法的用法是什么? 2. 在什么场景下应该使用call而不是apply? 3. 如何理解JavaScript中的this关键字? 4. callapply在性能上有什么区别? 确保输出格式: - 回答完问题后,直接输出“§§相关问题§§”,然后列出问题,用数字点表示。 - 问题之间用换行分隔。 完整回答结构: 1. 解释callapply。 2. 输出“§§相关问题§§” 3. 列出问题。 用中文写回答。</think>在 JavaScript 中,`call` `apply` 都是函数对象的方法,用于显式设置函数执行时的 `this` 值(即函数内部的上下文),并传递参数。它们的主要目的是在调用函数时,改变 `this` 的指向,从而实现函数的重用或借用其他对象的方法。 ### 用法: - **`call` 方法**: - 语法:`function.call(thisArg, arg1, arg2, ...)` - 第一个参数 `thisArg` 是函数运行时 `this` 的值,后续参数是传递给函数的参数列表(逗号分隔)。 - 示例: ```javascript function greet(greeting, punctuation) { return `${greeting}, ${this.name}${punctuation}`; } const person = { name: 'Alice' }; console.log(greet.call(person, 'Hello', '!')); // 输出: "Hello, Alice!" ``` 这里,`call` 将 `this` 设置为 `person` 对象,并传递了 `'Hello'` `'!'` 作为参数。 - **`apply` 方法**: - 语法:`function.apply(thisArg, [argsArray])` - 第一个参数 `thisArg` 是函数运行时 `this` 的值,第二个参数是一个数组(或类数组对象),包含要传递给函数的参数。 - 示例: ```javascript function greet(greeting, punctuation) { return `${greeting}, ${this.name}${punctuation}`; } const person = { name: 'Bob' }; const args = ['Hi', '?']; console.log(greet.apply(person, args)); // 输出: "Hi, Bob?" ``` 这里,`apply` 将 `this` 设置为 `person` 对象,并通过数组 `args` 传递参数。 ### 区别: - **参数传递方式**: - `call` 接受参数列表(逗号分隔的多个参数)。 - `apply` 接受参数数组(单个数组参数)。 - **适用场景**: - 当参数数量固定时,`call` 更直观(如 `func.call(obj, a, b)`)。 - 当参数数量不固定或已存在数组时,`apply` 更方便(如 `func.apply(obj, [a, b])` 或结合 `arguments` 对象)。 - **性能**:在现代 JavaScript 引擎中,`call` 通常略快于 `apply`,因为 `apply` 需要处理数组解包,但差异很小,一般不影响日常使用。 - **本质**:两者功能相同,都是立即调用函数并设置 `this`,区别仅在于参数格式。在 ES6 中,可以使用扩展运算符(`...`)替代 `apply`(如 `func.call(obj, ...args)`)。 总之,`call` `apply` 的核心是改变 `this` 绑定,`call` 适合离散参数,`apply` 适合数组参数。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值