call、apply、bind 的用法分别是什么?

简介: call、apply、bind 的用法

call和apply

call和apply都是改变this指向并执行的。

call用法

<script>
        window.color = 'red';
        document.color = 'yellow';
        let s1 = {color: 'blue' };
        function changeColor(){
            console.log(this.color);
        }
        changeColor.call();         //red (默认传递参数)
        changeColor.call(window);   //red
        changeColor.call(document); //yellow
        changeColor.call(this);     //red
        changeColor.call(s1);       //blue
    </script>
let Pet = {
        words : '...',
        speak : function (say) {
            console.log(say + ''+ this.words)
        }
    }
    Pet.speak('Speak'); // 结果:Speak...
    let Dog = {
        words:'Wang'
    }
    //将this的指向改变成了Dog
    Pet.speak.call(Dog, 'Speak'); //结果: SpeakWang
    ```

apply用法

<script>
        window.number = 'one';
        document.number = 'two';
        let s1 = {number: 'three' };
        function changeColor(){
            console.log(this.number);
        }
        changeColor.apply();         //one (默认传参)
        changeColor.apply(window);   //one
        changeColor.apply(document); //two
        changeColor.apply(this);     //one
        changeColor.apply(s1);       //three
    </script>

不同点

call是一个一个传,传多少个都行,不固定

apply是传数组,只有一个参数,这个参数就是数组 用展开运算符,call也能实现apply了。

fn.call(obj, ...arr)   // 基于es6的展开运算符也可以实现把数组中的每一项依次传递给参数

总结

call和apply都是funcition原型上的方法,

每一个函数作为funciton的实例,都可以调用这两个方法,

而这两个方法执行的目的都是改变函数中this的指向的,

唯一的区别是call是一个一个传,apply是以数组的方式

在传3个值以上的时候,传call比apply好一些,所以后期开发的时候,如果追求极致的话,可以使用call多一点。

bind

bind也是用来改变this指向的

与call和apply不同的是,bind不让函数执行,只是预先处理改变函数中this指向的

bind用法

window.a = 1;
 let module = {
     a : 2,
     getA:function() {
     return this.a;    
     }
 };
 module.getA();//2
let getA1 = module.getA;
 // getA在外部调用,此时的this指向了全局对象
 getA1();//1
 // 再把getA1方法绑定到module环境上
 var getA2 = getA1.bind(module);
 getA2(); //2



目录
相关文章
|
数据安全/隐私保护
新年快乐鞭炮祝福html网页源码
新年快乐鞭炮祝福html网页源码,动态点燃鞭炮动画祝福新年快乐,带新年背景音乐,无加密完整可用,源码由HTML+CSS+JS组成,记事本打开源码文件可以进行内容文字之类的修改,双击html文件可以本地运行效果,也可以上传到服务器里面,重定向这个界面。
385 0
新年快乐鞭炮祝福html网页源码
|
存储 JSON API
1688订单详情接口使用指南:含代码实现获取订单信息
随着电子商务的飞速发展,越来越多的企业开始通过1688平台进行采购和销售。为了更好地管理订单,提高客户满意度,许多企业选择使用1688订单详情接口来获取订单信息。本文将详细介绍如何使用1688订单详情接口,并提供示例代码,帮助企业快速实现订单信息的获取
|
机器学习/深度学习 SQL 分布式计算
MaxCompute产品使用合集之一张odps表最多能支持多少字段
MaxCompute作为一款全面的大数据处理平台,广泛应用于各类大数据分析、数据挖掘、BI及机器学习场景。掌握其核心功能、熟练操作流程、遵循最佳实践,可以帮助用户高效、安全地管理和利用海量数据。以下是一个关于MaxCompute产品使用的合集,涵盖了其核心功能、应用场景、操作流程以及最佳实践等内容。
113 0
|
双11 C语言
C语言:练习2
C语言:练习2
200 0
|
关系型数据库 MySQL Java
【解决方案 三】---Linux下Web项目部署诸多问题
【解决方案 三】---Linux下Web项目部署诸多问题
381 0
|
小程序 安全 搜索推荐
【社区每周】订单中心新增30+状态模板;《小程序安全开发指引》正式发布(2022年7月第二期)
【社区每周】订单中心新增30+状态模板;《小程序安全开发指引》正式发布(2022年7月第二期)
187 0
|
机器学习/深度学习 存储 人工智能
大脑里也有个Transformer!和「海马体」机制相同
大脑里也有个Transformer!和「海马体」机制相同
296 0
大脑里也有个Transformer!和「海马体」机制相同
|
Java Maven
<7>springcloud中使用zuul网关实现反向代理和zuul过滤器
在之前一篇博客搭建的springcloud聚合项目基础上
|
SpringCloudAlibaba 监控 微服务
SA实战 ·《SpringCloud Alibaba实战》第26章-专栏总结与后续规划
一不小心《SpringCloud Alibaba实战》专栏都更新完了,再不上车就跟不上了,小伙伴们快跟上啊!
412 0
SA实战 ·《SpringCloud Alibaba实战》第26章-专栏总结与后续规划