call与apply的应用场景

博客主要围绕call与apply展开,重点介绍了它们的应用场景。call和apply是JavaScript中重要的方法,在函数调用、继承等方面有广泛应用,能帮助开发者更灵活地处理函数调用和对象操作。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>oop</title>
    <script type="text/javascript">
    /*
    call/apply的功能:
    1、调用函数
    如果call、apply第一个参数传递null或者undefined,那么函数中this不改变
    如果传递别的数据类型就会改为对应的类型
    2、改变所调用函数的内部this指向
    3、借用别的对象的方法
    4、转化类数组
    */
    // 调用函数
    // function foo(n){
    //     console.log(n);
    //     console.log(this);
    // }
    // foo(123);
    // foo.call(null,123);
    // foo.apply(null,[123]);
    // ---------------------------
    // 改变函数this指向
    // function foo(n,m){
    //     return this.a + this.b + m + n;
    // }

    // var obj1 = {
    //     a : 1,
    //     b : 2
    // }
    // var obj2 = {
    //     a : 11,
    //     b : 22
    // }

    // var ret = foo.call(obj1,1,2);
    // var ret1 = foo.apply(obj2,[11,22]);
    // console.log(ret);
    // console.log(ret1);
    // --------------------------------
    // 借用别的对象方法
    // var m = Math.max(12,32,434,435,34,34,34);
    // console.log(m);

    // var arr = [12,32,434,435,34,34,34];
    // var max = Math.max.apply(null,arr);
    // var min = Math.min.apply(null,arr);
    // console.log(max,min);
    // ---------------------------------
    // 转化类数组
    // 类数组与数组的相同点:1、都是对象;2、都有整数形式索引;都有length属性
    //               不同点:1、类数组没有数组相关方法
    var obj = {0:'abc',1:'hello',2:'message',length:3,abc:'hello'};

    // var arr = [1,2,3,4,5,6];
    // var arr1 = arr.slice(0,1);
    // console.log(arr1);

    var arr = [12,32,434,45,455];
    // arr.push(1,2,3);
    // console.log(arr);

    // Array.prototype.push.call(arr,1,2,3,4);
    // Array.prototype.push.apply(arr,[1,2,3,4]);
    // Array.prototype.push.apply(arr,obj);
    // console.log(arr);

    var arr1 = Array.prototype.slice.call(obj);
    arr1.push('tom and jerry');
    console.log(arr1);
    </script>
</head>
<body>

</body>
</html>
`call` `apply` 都是 JavaScript 中用于改变函数执行上下文(this 指向)的方法,并立即执行该函数。两者的区别在于传参的方式有所不同。 ### 使用场景 #### 1. **借用方法** - 当我们希望将某个对象上的方法借给另一个对象使用时,可以利用 `call` 或 `apply` 来实现。 ```javascript let obj1 = { name: "Alice" }; function sayHello(greeting) { console.log(greeting + ", my name is " + this.name); } sayHello.call(obj1, "Hello"); // 输出:"Hello, my name is Alice" // 如果有多个参数,则适合用 apply sayHello.apply(obj1, ["Hi"]); // 输出:"Hi, my name is Alice" ``` 在这里可以看到,`call` 接受的是若干单独的参数;而 `apply` 则接受一个数组作为参数列表。 --- #### 2. **绑定特定的 this 值** - 运行时动态调整函数内的 this 绑定到指定的对象上,在某些复杂的回调环境中非常有用。 例如: ```javascript var array = [1, 2, 3]; Math.max.apply(null, array); // 返回最大值 3 Math.min.apply(null, array); // 返回最小值 1 ``` 这里通过 `apply` 将 Math 对象的最大、最小计算应用到了具体的数组实例中。 --- #### 3. **偏函数 (Partial Functions)** 构造 有时需要基于现有函数生成新版本的功能更窄化的变体,比如固定部分输入变量创建一个新的函数等操作都可以借助这两个工具完成。 示例代码略... --- 最后提醒一点就是性能方面考虑:由于每次调用都会创建新的作用域以及涉及到额外开销,所以如果不是特别必要的话尽量避免滥用它们!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值