关闭 x
IT技术网
    技 采 号
    ITJS.cn - 技术改变世界
    • 实用工具
    • 菜鸟教程
    IT采购网 中国存储网 科技号 CIO智库

    IT技术网

    IT采购网
    • 首页
    • 行业资讯
    • 系统运维
      • 操作系统
        • Windows
        • Linux
        • Mac OS
      • 数据库
        • MySQL
        • Oracle
        • SQL Server
      • 网站建设
    • 人工智能
    • 半导体芯片
    • 笔记本电脑
    • 智能手机
    • 智能汽车
    • 编程语言
    IT技术网 - ITJS.CN
    首页 » JavaScript »JavaScript中bind、call、apply函数用法详解

    JavaScript中bind、call、apply函数用法详解

    2015-03-13 00:00:00 出处:PHP100
    分享

    在给我们项目组的其他程序介绍 js 的时候,我准备了很多的内容,但看起来效果不大,果然光讲还是不行的,必须动手。前几天有人问我关于代码里 call() 函数的用法,我让他去看书,这里推荐用js 写服务器的程序猿看《javascript编程精粹》 这本书,crockford大神果然不是盖的。之后我在segmentfault上又看到了类似的问题,那边解答之后干脆这里记一笔。

    首先,关于 js 定义类或对象的方法,请参看w3school 的这里的这里,写的非常详细和清晰,我不再赘言了。

    javascript中bind、call、apply函数的用法

    为了介绍 bind、call、apply 这三个函数的用法,不得不介绍 js 里函数的一些设定。关于这部分推荐通读 《javascript编程精粹》 的第四章,这里我所说的在书里都能找到。

    关于这三个函数的详细介绍,可以参看 MDN 的文档:bind、call、apply。

    下面开始搬砖,修改自我之前在 segmentfault 上的答案:

    js 里函数调用有 4 种模式:方法调用、正常函数调用、构造器函数调用、apply/call 调用。

    同时,无论哪种函数调用除了你声明时定义的形参外,还会自动添加 2 个形参,分别是 this 和arguments。

    arguments 不涉及到上述 3 个函数,所以这里只谈 this。this 的值,在上面 4 中调用模式下,分别会绑定不同的值。分别来说一说:

    方法调用:

    这个很好理解,函数是一个对象的属性,比如

    var a = {     
        v : 0,     
        f : function(xx) {                 
            this.v = xx;     
        } 
    } 
    a.f(5);

    这个时候,上面函数里的 this 就绑定的是这个对象 a。所以 this.v 可以取到对象 a 的属性 v。

    正常函数调用:依然看代码

    function f(xx) {         
        this.x = xx; 
    } 
    f(5);

    这个时候,函数 f 里的 this 绑定的是全局对象,假如是在浏览器运行的解释器中,一般来说是 window 对象。所以这里 this.x 访问的其实是 window.x ,当然,假如 window 没有 x 属性,那么你这么一写,按照 js 的坑爹语法,就是给 window 对象添加了一个 x 属性,同时赋值。

    构造器函数调用:

    构造函数一直是我认为是 js 里最坑爹的部分,因为它和 js 最初设计的基于原型的面向对象实现方式格格不入,就好像是特意为了迎合大家已经被其他基于类的面相对象实现给惯坏了的习惯。

    假如你在一个函数前面带上 new 关键字来调用,那么 js 会创建一个 prototype 属性是此函数的一个新对象,同时在调用这个函数的时候,把 this 绑定到这个新对象上。当然 new 关键字也会改变return 语句的行为,不过这里就不谈了。看代码

    function a(xx)
    {         
        this.m = xx; 
    } 
    var b = new a(5);

    上面这个函数和正常调用的函数写法上没什么区别,只不过在调用的时候函数名前面加了关键字 new罢了,这么一来,this 绑定的就不再是前面讲到的全局对象了,而是这里说的创建的新对象,所以说这种方式其实很危险,因为光看函数,你不会知道这个函数到底是准备拿来当构造函数用的,还是一般函数用的。所以我们可以看到,在 jslint 里,它会要求你写的所有构造函数,也就是一旦它发现你用了 new 关键字,那么后面那个函数的首字母必须大写,这样通过函数首字母大写的方式来区分,我个人只有一个看法:坑爹:)

    apply/call 调用:

    我们知道,在 js 里,函数其实也是一个对象,那么函数自然也可以拥有它自己的方法,有点绕,在js 里,每个函数都有一个公共的 prototype —— Function,而这个原型自带有好几个属性和方法,其中就有这里困惑的 bind、call、apply 方法。先说 apply 方法,它让我们构造一个参数数组传递给函数,同时可以自己来设置 this 的值,这就是它最强大的地方,上面的 3 种函数调用方式,你可以看到,this 都是自动绑定的,没办法由你来设,当你想设的时候,就可以用 apply()了。apply 函数接收 2 个参数,第一个是传递给这个函数用来绑定 this 的值,第二个是一个参数数组。

    看代码

    function a(xx) {         
        this.b = xx; 
    } 
    var o = {}; 
    a.apply(o, [5]); 
    alert(a.b);    // undefined 
    alert(o.b);    // 5

    是不是很神奇,函数 a 居然可以给 o 加属性值。当然,假如你 apply 的第一个参数传递 null,那么在函数 a 里面 this 指针依然会绑定全局对象。

    call() 方法和 apply() 方法很类似,它们的存在都是为了改变 this 的绑定,那 call() 和apply() 有什么区别呢 就我个人看来,没啥鸟区别。。。开玩笑!刚刚说了,上面 apply() 接收两个参数,第一个是绑定 this 的值,第二个是一个参数数组,注意它是一个数组,你想传递给这个函数的所有参数都放在数组里,然后 apply() 函数会在调用函数时自动帮你把数组展开。而 call()呢,它的第一个参数也是绑定给 this 的值,但是后面接受的是不定参数,而不再是一个数组,也就是说你可以像平时给函数传参那样把这些参数一个一个传递。

    所以假如一定要说有什么区别的话,看起来是这样的

    function a(xx, yy) {     
        alert(xx, yy);     
        alert(this);     
        alert(arguments); 
    } 
    a.apply(null, [5, 55]); 
    a.call(null, 5, 55);

    仅此而已。

    最后再来说 bind() 函数,上面讲的无论是 call() 也好, apply() 也好,都是立马就调用了对应的函数,而 bind() 不会, bind() 会生成一个新的函数,bind() 函数的参数跟 call() 一致,第一个参数也是绑定 this 的值,后面接受传递给函数的不定参数。 bind() 生成的新函数返回后,你想什么时候调就什么时候调,看下代码就明白了

    var m = {    
        "x" : 1 
    }; 
    function foo(y) { 
        alert(this.x + y); 
    } 
    foo.apply(m, [5]); 
    foo.call(m, 5); 
    var foo1 = foo.bind(m, 5); 
    foo1();

    末了来个吐槽,你在 js 里想定义一个函数,于是你会这么写:

    function jam() {};

    其实这是 js 里的一种语法糖,它等价于:

    var jam = function() {};

    然后你想执行这个函数,脑洞大开的你会这么写:

    function jam() {}();

    但是这么写就报错了,其实这种写法也不算错,因为它确实是 js 支持的函数表达式,但是同时 js 又规定以function 开头的语句被认为是函数语句,而函数语句后面是肯定不会带 () 的,所以才报错,于是聪明的人想出来,加上一对括号就可以了。于是就变成了这样:

    1(function jam() {}());

    这样就定义了一个函数同时也执行它,详情参加 ECMAScript 的 Expression Statement 章节。

    上一篇返回首页 下一篇

    声明: 此文观点不代表本站立场;转载务必保留本文链接;版权疑问请联系我们。

    别人在看

    hiberfil.sys文件可以删除吗?了解该文件并手把手教你删除C盘的hiberfil.sys文件

    Window 10和 Windows 11哪个好?答案是:看你自己的需求

    盗版软件成公司里的“隐形炸弹”?老板们的“法务噩梦” 有救了!

    帝国CMS7.5编辑器上传图片取消宽高的三种方法

    帝国cms如何自动生成缩略图的实现方法

    Windows 12即将到来,将彻底改变人机交互

    帝国CMS 7.5忘记登陆账号密码怎么办?可以phpmyadmin中重置管理员密码

    帝国CMS 7.5 后台编辑器换行,修改回车键br换行为p标签

    Windows 11 版本与 Windows 10比较,新功能一览

    Windows 11激活产品密钥收集及专业版激活方法

    IT头条

    智能手机市场风云:iPhone领跑销量榜,华为缺席引争议

    15:43

    大数据算法和“老师傅”经验叠加 智慧化收储粮食尽显“科技范”

    15:17

    严重缩水!NVIDIA将推中国特供RTX 5090 DD:只剩24GB显存

    00:17

    无线路由大厂 TP-Link突然大裁员:补偿N+3

    02:39

    Meta 千万美金招募AI高级人才

    00:22

    技术热点

    微软已修复windows 7/windows 8.1媒体中心严重漏洞 用户可下载安

    卸载MySQL数据库,用rpm如何实现

    windows 7中使用网上银行或支付宝支付时总是打不开支付页面

    一致性哈希算法原理设计

    MySQL数字类型中的三种常用种类

    如何解决SQL Server中传入select语句in范围参数

      友情链接:
    • IT采购网
    • 科技号
    • 中国存储网
    • 存储网
    • 半导体联盟
    • 医疗软件网
    • 软件中国
    • ITbrand
    • 采购中国
    • CIO智库
    • 考研题库
    • 法务网
    • AI工具网
    • 电子芯片网
    • 安全库
    • 隐私保护
    • 版权申明
    • 联系我们
    IT技术网 版权所有 © 2020-2025,京ICP备14047533号-20,Power by OK设计网

    在上方输入关键词后,回车键 开始搜索。Esc键 取消该搜索窗口。