其实是一个很简单的东西,认真看十分钟就从一脸懵B 到完全 理解!

先看明白下面:

例 1

obj.objAge;  //
obj.myFun() // 小张年龄 undefined
 

例 2

shows()  // 盲僧 
 

比较一下这两者 this 的差别,第一个打印里面的 this 指向 obj,第二个全局声明的 shows() 函数 this 是 window ;

1,call()、apply()、bind() 都是用来重定义 this 这个对象的!

如:

obj.myFun.call(db);    // 德玛年龄 99
obj.myFun.apply(db);    // 德玛年龄 99
obj.myFun.bind(db)();   // 德玛年龄 99
 

以上出了 bind 方法后面多了个 () 外 ,结果返回都一致!

由此得出结论,bind 返回的是一个新的函数,你必须调用它才会被执行。

2,对比call 、bind 、 apply 传参情况下

 

obj.myFun.call(db,'成都','上海');     // 德玛 年龄 99  来自 成都去往上海
obj.myFun.apply(db,['成都','上海']); // 德玛 年龄 99 来自 成都去往上海
obj.myFun.bind(db,'成都','上海')(); // 德玛 年龄 99 来自 成都去往上海
obj.myFun.bind(db,['成都','上海'])();   // 德玛 年龄 99 来自 成都, 上海去往 undefined
 

  

微妙的差距!

从上面四个结果不难看出:

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象,第二个参数差别就来了:

call 的参数是直接放进去的,第二第三第 n 个参数全都用逗号分隔,直接放到后面 obj.myFun.call(db,'成都', ... ,'string' )。

apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['成都', ..., 'string' ])。

bind 除了返回是函数以外,它 的参数和 call 一样。

当然,三者的参数不限定是 string 类型,允许是各种类型,包括函数 、 object 等等!

<JavaScript> call()、apply()、bind() 的用法的更多相关文章

  1. JavaScript学习(2)call&apply&bind&eval用法

    javascript学习(2)call&apply&bind&eval用法 在javascript中存在这样几种特别有用的函数,能方便我们实现各种奇技淫巧.其中,call.bi ...

  2. call,apply,bind的用法

    关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成 ...

  3. javascript中call,apply,bind的用法对比分析

    这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们.   关于call,apply,bind这三个函数的用法,是学习java ...

  4. js call().apply().bind()的用法

    function Person(age) { this.age = age; } Person.prototype.sayHi = function (x, y) { console.log((x + ...

  5. call,apply,bind的用法及区别

    <script> function test(){ console.log(this) } // new test(); //函数调用call方法的时候,就会执行. //call的参数:第 ...

  6. ES5-call,apply,bind的用法

    区别bind()与call()和apply()? 1. Function.prototype.bind(obj) : * 作用: 将函数内的this绑定为obj, 并将函数返回2. 面试题: 区别bi ...

  7. 理解 JavaScript call()/apply()/bind()

    理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题,用一句话来总结就是:this 的指向一定是在执行时决定的,指向被调用函数的对象.当然 ...

  8. 如何实现new,call,apply,bind的底层原理。

    new做了什么? new是用来实例化对象的,当new了一个对象后 1.创建一个新对象 2.将构造函数的作用域赋值给新对象(this指向新对象) 3.执行构造函数里面的代码(为这个新对象添加属性) 4. ...

  9. js中call、apply、bind的用法

    原文链接:http://www.cnblogs.com/xljzlw/p/3775162.html var zlw = { name: "zlw", sayHello: funct ...

  10. js中bind的用法,及与call和apply的区别

    call和apply的使用和区别不再做阐述,可以参考我的另一篇随笔<JavaScript中call和apply方法的使用>(https://www.cnblogs.com/lcr-smg/ ...

随机推荐

  1. vue中用div的contenteditable属性实现v-for遍历,双向数据绑定的动态表格编辑

    1.HTML部分 <tr v-for="(item,index) in customerVisitList2" :key="index"> < ...

  2. 【Day5】项目实战.CSDN热门文章爬取

    import urllib.request as ur import lxml.etree as le import user_agent keyword = input('请输入关键词:') pn_ ...

  3. Js获取字符串的显示宽度/高度

    重点:1.在H5页面,文字大小单位为rem2.不同的font-family,文字的宽度不一样3.文字宽度同时受font-size和font-family影响 思路:在页面动态创建一个节点,设置节点的f ...

  4. 大数据之路week04--day05(java XML解析)

    java解析XML的四种方式: XML是一种通用的数据交换格式,它的平台无关性.语言无关性.系统无关性.给数据集成与交互带来了极大的方便.XML在不同的语言环境中解析方式都是一样的,只不过实现的语法不 ...

  5. 如何查看JVM的内存

    学过java的人都知道,jvm是解释运行java的,java能够作为跨平台语言,也是因为jvm的存在,合理的使用jvm内存可以帮助程序很好的运行.那么,怎么查看jvm的内存使用情况呢,下面本文介绍一下 ...

  6. 「Django」Xadmin应用

    第一:命令安装xadmin2 pip install xadmin2 第二:setting.py中设置 INSTALLED_APPS INSTALLED_APPS = ( ... 'xadmin', ...

  7. 使用 EasyExcel 读取Excel(两种方式)

    引入 jar 包 <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel&l ...

  8. pandas实现hive的lag和lead函数 以及 first_value和last_value函数

    lag和lead VS shift 该函数的格式如下: 第一个参数为列名, 第二个参数为往上第n行(可选,默认为1), 第三个参数为默认值(当往上第n行为NULL时候,取默认值,如不指定,则为NULL ...

  9. PHP mysqli_error() 函数

    返回最近调用函数的最后一个错误描述: <?php  // 假定数据库用户名:root,密码:123456,数据库:RUNOOB  $con=mysqli_connect("localh ...

  10. ueditor自动上传Word中的图片

    如何做到 ueditor批量自动上传word图片? 1.前端引用代码 <!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//E ...