call,apply,bind的用法

本文探讨JavaScript中对象的mySay方法如何通过call(), apply()和bind()进行属性替换和参数传递,展示了三种方法在实际应用中的区别与使用场景。
var obj = {
    name: "张三",
    age: 18,
    mySay: function (fm, t) {
    console.log('我是' + this.name + '今年' + this.age + '来自' + fm + '去往' + t);
            }
        }
var objOther = {
    name: '李四',
    age: 20
    }
obj.mySay()

上述代码定义两个对象,当执行obj中的mySay()方法时,输出结果如下
在这里插入图片描述
我们可用使用特定方法来替换对象中的某些属性:

1.使用call()方法,传入参数用字符串形式

obj.mySay.call(objOther, '成都', '北京')

在这里插入图片描述

2.使用apply()方法,传入参数用数组的形式

obj.mySay.apply(objOther, ['成都', '北京'])

在这里插入图片描述

3.使用bind()方法,传入参数可用字符串可用数组(单个分开的数组)要再次执行

obj.mySay.bind(objOther, ['成都'], ['北京'])()
obj.mySay.bind(objOther, '成都', '北京')()

在这里插入图片描述

### JavaScript 中 callapplybind 方法的区别 #### 1. **call 方法** `call` 方法用于调用一个函数,并将函数的 `this` 指向指定的对象。同时,`call` 方法可以接受多个参数,这些参数会依次传递给被调用的函数[^3]。 示例代码: ```javascript function greet(greeting, punctuation) { console.log(greeting + ' ' + this.name + punctuation); } const person = { name: 'Alice' }; greet.call(person, 'Hello', '!'); // 输出:Hello Alice! ``` #### 2. **apply 方法** `apply` 方法与 `call` 方法类似,同样是用于调用一个函数并将 `this` 指向指定的对象。但不同之处在于,`apply` 方法接受的是一个参数数组,而不是单独的参数列表[^1]。 示例代码: ```javascript function greet(greeting, punctuation) { console.log(greeting + ' ' + this.name + punctuation); } const person = { name: 'Alice' }; greet.apply(person, ['Hello', '!']); // 输出:Hello Alice! ``` #### 3. **bind 方法** `bind` 方法不会直接调用函数,而是返回一个新函数,该新函数的 `this` 被永久绑定到指定的对象上。即使后续对返回的新函数进行多次调用,其 `this` 值也不会改变[^5]。 示例代码: ```javascript function greet(greeting, punctuation) { console.log(greeting + ' ' + this.name + punctuation); } const person = { name: 'Alice' }; const boundGreet = greet.bind(person); boundGreet('Hello', '!'); // 输出:Hello Alice! ``` #### 4. **核心区别总结** - **调用方式**: - `call` 和 `apply` 是立即执行函数的方法。 - `bind` 是返回一个绑定了特定 `this` 的新函数,需要手动调用返回的函数[^2]。 - **参数传递**: - `call` 接受的是逗号分隔的参数列表。 - `apply` 接受的是一个参数数组[^1]。 - **应用场景**: - 当需要立即执行函数时,可以选择 `call` 或 `apply`。 - 当需要创建一个具有固定上下文的函数副本时,使用 `bind`[^5]。 --- ### 示例对比 以下是一个综合示例,展示三者的区别: ```javascript const obj = { x: 10 }; function multiply(a, b) { return this.x * a * b; } // 使用 call console.log(multiply.call(obj, 2, 3)); // 输出:60 // 使用 apply console.log(multiply.apply(obj, [2, 3])); // 输出:60 // 使用 bind const boundMultiply = multiply.bind(obj); console.log(boundMultiply(2, 3)); // 输出:60 ``` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值