1,首先先做一个定义:每个函数都包含两个非继承的方法:apply()和call(),apply和call这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值,两者唯一的区别就是第二个参数不同,apply是传一个数组或者arguments对象,call则需要逐个列出来。(call是把它们一个一个都叫过来,apply是整个应用)

函数a.apply(b, [1,2]) == 函数a.call(b, 1, 2),其实含义就是在b里面执行a函数,作用域是b所在的执行环境,这里有个注意点,就是在使用了apply和call之后,会立即执行该函数。

传递参数的示例代码就不写了,太多了。。

事实上,传递参数并非call和apply真正的用武之地,它们真正强大的地方是扩充作用域。

window.color = "red";

var o = {
color: 'blue'
}; function fn(){
console.log(this.color)
}; fn(); // red
fn.call(this); // red
fn.call(window); // red
fn.call(o); // blue

上面换成apply也一样。call和apply如果传递的是null或者undefined,默认就是在window中。

一些类数组,比如arguments和NodeList,只能使用数组索引而不能用push,pop等数组方法,我们就可以用apply或call为其添加数组的方法。

(function(){
Array.prototype.push.call(arguments,4);
console.log(arguments);//[1, 2, 3, 4]
})(1,2,3)

还有之前提到的如何判断类型:

console.log(Object.prototype.toString.call(123)) //[object Number]
console.log(Object.prototype.toString.call('123')) //[object String]
console.log(Object.prototype.toString.call(undefined)) //[object Undefined]
console.log(Object.prototype.toString.call(true)) //[object Boolean]
console.log(Object.prototype.toString.call({})) //[object Object]
console.log(Object.prototype.toString.call([])) //[object Array]
console.log(Object.prototype.toString.call(function(){})) //[object Function]

2,而bind方法会创建一个函数的实例,其this值会被绑定到传给bind()函数的值,和call和apply方法不同的是,bind不会立即执行。

window.color = 'red';

function fn(){
alert(this.color)
}; var b = {
color: 'blue'
} var o = fn.bind(b);
o(); // 'blue'

记住一定要给bind绑定后赋值,因为它返回的是一个函数实例,不然没办法触发。

bind是ES5定义的,所以可能部分浏览器不支持,需要模拟bind():

Function.prototype.bind = function(context){
var self = this;
return function(){
return self.apply(context, arguments)
}
}

js中call,apply和bind的更多相关文章

  1. JS中的apply,call,bind深入理解

    在Javascript中,Function是一种对象.Function对象中的this指向决定于函数被调用的方式.使用apply,call 与 bind 均可以改变函数对象中this的指向,在说区别之 ...

  2. 深入理解js中的apply、call、bind

    概述 js中的apply,call都是为了改变某个函数运行时的上下文环境而存在的,即改变函数内部的this指向. apply() apply 方法传入两个参数:一个是作为函数上下文的对象,另外一个是作 ...

  3. js 中call,apply,bind的区别

    call.apply.bind方法的共同点与区别: apply.call.bind 三者都是用来改变函数的this对象的指向: apply.call.bind 三者都可以利用后续参数传参: bind ...

  4. JS中call,apply,bind的区别

    1.关于this对象的指向,请看如下代码 var name = 'jack'; var age = 18; var obj = { name:'mary', objAge:this.age, myFu ...

  5. js的call,apply,bind的使用与区别

    在原生js中会有三个很常见的函数,call,apply,bind 他们的作用就是改变当前函数的this指针, 但是细微来说他们还是有不同的. 1)call,apply都是执行某一函数,发现this有变 ...

  6. js call、apply和bind

    function add(a,b) { alert(a+b); } function sub(a,b) { alert(a-b); } add.call(sub,3,1); 例1 例子1中的意思就是用 ...

  7. js中的apply和call API

    借用网上的一个例子: fun.call(this,arg1,arg2,arg3) fun.apply(this,arguments) this.fun(arg1,arg2,arg3) 三种方法等效. ...

  8. js中call(),apply(),以及prototype的含义

    最近段时间主要学习前端去了,然而所遇到的一些问题我觉得有必要去深究一下 prototype: 1 js中有三种表达方法 类方法,属性方法,原型方法 function People(name) { th ...

  9. js中call apply方法的使用介绍

    js call call 方法 请参阅 应用于:Function 对象 要求 版本 5.5 调用一个对象的一个方法,以另一个对象替换当前对象. call([thisObj[,arg1[, arg2[, ...

  10. Js中的apply和call

    1.call和apply都是为了改变某个函数运行时的上下文而存在的 2.也就是改变函数体内this的指向. 3.二者的作用完全一样,只是接受参数的方式不太一样. 4.call 需要把参数按顺序传递进去 ...

随机推荐

  1. 搭建Redis主从复制的集群

    在主从复制模式的集群里,主节点一般是一个,从节点一般是两个或多个,写入主节点的数据会被复制到从节点上,这样一旦主节点出现故障,应用系统能切换到从节点去读写数据,这样能提升系统的可用性.而且如果再采用主 ...

  2. 面试:Java基础知识(一)

    1.面向对象的特征有哪些方面  1.抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解全部问题,而只是选择其中的一部分,暂时不用部分细节.抽 ...

  3. Xcode11更改启动页设置方法

    新开了个项目,发现之前的启动页怎么也调不好,后来发现配置里边少了一行,所以整理一下,我使用的xcode版本是11. 以前的时候是在这2个中间,还有一行,通过下边2项来配置,现在更改了,附上新的教程.如 ...

  4. Node.js异步IO原理剖析

    为什么要异步I/O? 从用户体验角度讲,异步IO可以消除UI阻塞,快速响应资源 JavaScript是单线程的,它与UI渲染共用一个线程.所以在JavaScript执行的时候,UI渲染将处于停顿的状态 ...

  5. application.yml使用@符合问题:'@' that cannot start any token. (Do not use @ for indentation)

    在application配置文件中使用@出现异常: Exception in thread "main" while scanning for the next tokenfoun ...

  6. GitLab 配置模板

    GitLab 配置模板 GitLab 使用模板和参数生成配置文件. 一般来说,我们会通过 gitlab.rb 文件修改配置,例如 Nginx 相关配置. gitlab.rb 只能使用特定的几个 Ngi ...

  7. 排查Mysql突然变慢的一次过程

    排查Mysql突然变慢的一次过程 上周客户说系统突然变得很慢,而且时不时的蹦出一个 404 和 500,弄得真的是很没面子,而恰巧出问题的时候正在深圳出差,所以一直没有时间 看问题,一直到今天,才算是 ...

  8. 一篇文章快速搞懂什么是GitHub

    导读:什么是GitHub?Git与GitHub之间是什么关系?我们为什么需要版本控制系统?GitHub如何使用?本文将带你一探究竟. 本文字数:1710,阅读时长大约:13分钟 一.什么是版本控制 按 ...

  9. vue实现自定义表格列

    在我们开发PC端的项目使用表单时,尤其是crm系统,应该经常会遇到这样的需求, 用户需要根据设置来自定义显示列. 查了element的官方文档, 并没有此类组件, 所以手动封装了一个简单的组件, 希望 ...

  10. 2020-05-29:redis怎么保证高可用,高可用模式有那些?对比下优缺点?

    福哥答案2020-05-29: Redis 高可用架构如下:1.Redis Sentinel 集群 + 内网 DNS + 自定义脚本.2.Redis Sentinel 集群 + VIP + 自定义脚本 ...