js中的call()、apply()和bind()

柯里棱镜
• 阅读 1669

方法call()、apply()、bind()都保存在函数的prototype名下(因此每个函数都可以直接调用)。都用于改变函数的执行环境。

call()和apply()

call()和apply()实际功能一致。
call()和apply()在原函数拥有参数的时候,不能只有一个参数了。

function add(num1,num2){
    console.log(num1+num2);
}
function show(num1,num2){
    return add.call(null,num1,2);
}
show(2,3); //输出结果为4

function add(num1,num2){
    console.log(num1+num2);
}
function show(num1,num2){
    return add.call(null,num1);
}
show(2,3); //输出结果为NAN

在非严格模式下,call(null) 等价于 call(this) 和 call(undefined)
call()必须把函数参数写全,否则无法正确运行。
apply()可以理解为,第二个参数如果需要,必须传入全部参数组成的一个数组,或者arguments。

bind()

call()和apply()是直接调用,而bind()的作用:创建一个函数的实例,执行环境变为bind的参数。对的,只是创建一个函数实例,因此一般需要以值的形式传递之。

var cat = {color:"blue"};
window.color = "red";
function showColor(){
    console.log(this.color);
}
showColor.bind(cat);   //没有任何输出
showColor.bind(cat)(); //输出blue
var newShowColor = showColor.bind(cat);
newShowColor();        //输出blue

bind()可用于setTimeout()、setInterval()或者事件处理(document),被绑定的函数也会用掉更多的内存。

自定义的bind()

function bind(fn,arg){
    return function(){
        return fn.apply(arg,arguments);
    }
}

这里的arg是执行环境对象,arguments是fn函数本身的参数。
bind(showColor,cat);等价于showColor.bind(cat);

点赞
收藏
评论区
推荐文章
Dax Dax
3年前
JavaScript中call()、apply()、bind()的用法
call()apply()bind()都是用来更改this的指向的其中bind()返回的是一个函数,必须执行才行传参差异:call、bind、apply这三个函数的第一个参数都是this的指向对象,第二个参数差别就来了:call的参数是直接放进去的,第二第三第n个参数全都用逗号分隔,直接放到后面obj.myFun.call(db,'
巴拉米 巴拉米
4年前
bind、call、apply 区别?如何实现一个bind?
一、作用call、apply、bind作用是改变函数执行时的上下文,简而言之就是改变函数运行时的this指向那么什么情况下需要改变this的指向呢?下面举个例子var name"lucy";const obj{    name:"martin",    say:function (){        co
LinMeng LinMeng
4年前
call、apply、bind三者为改变this指向的方法。
共同点:第一个参数都为改变this的指针。若第一参数为null/undefined,this默认指向window差异点如下:1.call(无数个参数)第一个参数:改变this指向第二个参数:实参使用之后会自动执行该函数functionfn(a,b,c){console.log(this,abc);//this指
LinMeng LinMeng
3年前
面试题汇总
2021/10/30pfyh1、举例说几个ES6新特性2、map和filter的区别3、浏览器缓存机制4、vue渲染机制5、生命周期钩子函数6、组件传值7、箭头函数的特点/this指向/有没有arguments/如何获取入参8、虚拟DOM树9、Diff算法10、Vuex11、vue的两种路由模式hash和history的特点12、bind,call,appl
小嫌 小嫌
3年前
bind()与call()和apply()之间的区别
具体内容以及示例可参见网站:需要记住的基本规则1."this"指代一个对象2."this"指的是调用它包含的函数的对象。3.在全局上下文中,“this”指的是窗口对象,或者如果使用“严格模式”则是未定义的。varcarregistrationNumber:"GA12345",brand:"Toyota",dis
Stella981 Stella981
3年前
JS中this和call
首先来了解一下JS中this的原理:要访问自己的属性就必须使用this.属性名1.this总是指向它的直接调用者:vara{user:'Artimis',fn:function(){console.log(this.user)}}a.fn()//Ar
Stella981 Stella981
3年前
Javascript 是如何体现继承的 ?
js继承的概念js里常用的如下两种继承方式:原型链继承(对象间的继承)类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念。所以,要想实现继承,可以用js的原型prototype机制或者用apply和call方法去实现在面向对象的语言中,我们使用类来创建一个自定义对象
Stella981 Stella981
3年前
JS 中的this指向问题和call、apply、bind的区别
this的指向问题一般情况下this对象指向调用函数的对象,全局环境中执行函数this对象指向window。functiona(){console.log(this);//输出函数a中的this对象}functionb(){};varc{name:"call"}
Stella981 Stella981
3年前
Javascript获取数组中最大和最小值方法
1.使用Math中的max/min方法vararr22,13,6,55,30;varmaxMath.max.apply(null,arr);varminMath.min.apply(null,arr);console.log(max,min)//5
Stella981 Stella981
3年前
JavaScript中call()与apply()有什么区别?
今天读《JavaScript权威指南》时发现其中有段代码用到了apply方法用于递归实现数组的展开。可是我不懂这个函数的用法,因此查了一下,将资料整理如下。Javascript的每个Function对象中有一个apply方法:function.apply(thisObj,argArray)还有一个类似功能的call方法:
Stella981 Stella981
3年前
Guava(函数式编程)
函数式编程:使用Function接口(jdk8中已经存在):/  其功能就是将输入类型转换为输出类型 /public interface Function<F, T {  T apply(@Nullable F input);