之前一直迷惑,记不住call(),apply(),bind()的区别。不知道如何使用,一直处于懵懂的状态。直到有一天面试被问到了这三个方法的区别,所以觉得很有必要总结一下。

如果有不全面的地方,后续再进行补充。

1. 改变this的指向

var obj = {
name : '张三',
age : 17,
myFun : function () {
console.log(this.name + ' ' + this.age);
}
}
var obj2 = {
name : '李四',
age : 20
}
obj.myFun() //张三 17
obj.myFun.apply(obj2) //李四 20
obj.myFun.call(obj2) //李四 20
obj.myFun.bind(obj2)() //李四 20

由例子可以看出,apply,call,bind都对this进行了重定向,apply和call使用方法相同。但是bind后面多了个(),因为bind返回的是一个全新的函数,但是三个返回结果一致。

2. 传参情况不同

var obj = {
name : '张三',
age : 17,
myFun : function (active,fm) {
console.log(this.name + ' ' + this.age + active + fm);
}
}
var obj2 = {
name : '李四',
age : 20
}
obj.myFun.apply(obj2,['爱学习','北京']); //李四 20爱学习北京
obj.myFun.call(obj2,'爱学习','北京'); //李四 20爱学习北京
obj.myFun.bind(obj2,'爱学习','北京')(); //李四 20爱学习北京
obj.myFun.call(obj2,['爱学习','北京'])();//李四 20爱学习,北京undefined

可以发现:apply参数传递用数组,并且在方法中会自动匹配参数

call参数传递是直接放进去,每个参数之间用逗号隔开

apply如果用和call类似的传递参数的方法,则在方法中会自动匹配参数。若像apply一样传递参数,则会把整个数组                       当作一个参数传递进去。

javascript中的call(),apply(),bind()方法的区别的更多相关文章

  1. JavaScript中call,apply,bind方法的区别

    call,apply,bind方法一般用来指定this的环境. var a = { user:"hahaha", fn:function(){ console.log(this.u ...

  2. 深入浅出:了解JavaScript中的call,apply,bind的差别

     在 javascript之 this 关键字详解文章中,谈及了如下内容,做一个简单的回顾:         1.this对象的涵义就是指向当前对象中的属性和方法.       2.this指向的可变 ...

  3. 浅析 JavaScript 中的 Function.prototype.bind() 方法

    Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个对象,bind() 方法会创建一个函数,函数体内this对象的值会被绑定到传入bind() 函数 ...

  4. 别真以为JavaScript中func.call/apply/bind是万能的!

    自从学会call/apply/bind这三个方法后我就各种场合各种使用各种得心应手至今还没踩过什么坑,怎么用?说直白点就是我自己的对象没有某个方法但别人有,我就可以通过call/apply/bind去 ...

  5. JavaScript 中的 Function.prototype.bind() 方法

    转载自:https://www.cnblogs.com/zztt/p/4122352.html Function.prototype.bind()方法 bind() 方法的主要作用就是将函数绑定至某个 ...

  6. Javascript中this作用域以及bind方法的重写

    这是一个最近遇到的笔试题,出于尊重,不会说出该公司的名字,源于自身比较少,笔试题是将bind方法用ES3重写,使用bind这个方法,导致一时半会懵了,只记得bind可以改变this的作用域. 作为查漏 ...

  7. Javascript中call,apply,bind方法的详解与总结

    在 javascript之 this 关键字详解 文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变性.当在全局作用域时,thi ...

  8. Javascript中call,apply,bind的区别

    一.探索call方法原理 Function.prototype.call = function(obj) { // 1.让fn中的this指向obj // eval(this.toString().r ...

  9. JavaScript内置一些方法的实现原理--new关键字,call/apply/bind方法--前戏

    new关键字,call/apply/bind方法都和this的绑定有关,在学习之前,首先要理解this. 一起来学习一下this吧 首先.this是一个对象. 对象很好理解,引用类型值,可以实现如th ...

随机推荐

  1. 50个国内外最棒的C/C++源码站点分享

    C/C++是最基本的编程语言.这里列出了50名优秀站点和网页清单,这些站点提供c/c++源码.这份清单提供了源码的链接以及它们的小说明.我已 尽力包含最佳的C/C++源码的站点.这不是一个完整的清单, ...

  2. 原型和原型对象(__proto__和prototype)转

    看了之后我总算对原型继承有了更深刻的理解,做爱分享的姑娘,原文链接:理解Javascript 原型 我(个人)不喜欢的,就是讲原型时上来就拿类做比较的,所以我不会这样讲.不过我的确讲过构造器函数,在这 ...

  3. CATransform3D 使用

    struct CATransform3D { CGFloat m11(x轴缩放), m12(y轴切变), m13, m14(x轴拉伸); CGFloat m21(x轴切变), m22(y轴缩编), m ...

  4. burp抓取手机包

    burp监听ip和端口要填对应的使用的ip,比如建立了一个网卡wifi,那就填那个ip 手机代理连接wifi的话,就直接先看能不能访问burp监听的端口,然后填上相同代理即可.

  5. SSIS 处理错误的方法

    Package在执行过程中,不可避免地会发生错误,如果处理错误?简单粗暴的做法,是Package直接停止运行.对于一个成熟的ETL工具,这显然不是唯一的错误处理方法.如果在数据流中出现错误,那么数据流 ...

  6. tabindex 属性

    tabindex 属性规定元素的 tab 键控制次序(当 tab 键用于导航时). 语法:<element tabindex="number">规定元素的 tab 键控 ...

  7. AgileRepository - 一个基于接口的Repository快速开发库

    AgileRepository 这是一个可以帮助你快速开发Repository的lib.有点像SpringData JPA根据方法名.注解来自动生成查询方法的功能. 对于一些简单的查询,只需要定义接口 ...

  8. android安卓生成密钥keystore(命令控制)

    android安卓生成密钥keystore(命令控制) • 配置JDK 详细教程 https://blog.csdn.net/u012934325/article/details/73441617/ ...

  9. 怎样注册Docker Hub账号

    Docker Hub是Docker的远程镜像仓库,类似于GitHub;如果没有搭建本地私有仓库,Docker会默认去Docker Hub拉镜像. 访问Docker Hub官网https://hub.d ...

  10. 第四篇 HTTP请求返回状态码收集及解释

    [转载]https://blog.csdn.net/wangsen2235068/article/details/8081274 当用户试图通过 HTTP 访问一台正在运行 Internet 信息服务 ...