专栏首页贺贺的前端工程师之路JavaScript 之 Object.apply()与Object.call()和Object.bind()

JavaScript 之 Object.apply()与Object.call()和Object.bind()

1. apply()

apply()调用一个方法,其具有一个指定的this 值,以及作为一个数组(或类似于数组的参数)。

注意:apply()和call()方法的作用很类似,只有一个区别,那就是call()方法接受的是若干个参数的列表,而apply()接受的是包含多个参数的数组。 apply可以用来“展开”一个数组。

语法

fun.apply(thisArg, [argsArray])

参数

  • thisArg

fun 函数运行时指定的 this值。需要注意的是,指定的 this值并不一定是该函数执行时真正的 this值,如果这个函数处于非严格模式下,则指定为 null或 undefined 时会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的 this会指向该原始值的自动包装对象。

  • argsArray

一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 fun函数。如果该参数的值为null 或 undefined ,则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。浏览器兼容性请参阅本文底部内容。

实例

function add(x,y) {return x+y;}
function mul(x,y) {return x * y;}

> add.apply(mul, [5,6]); // mul调用add的方法来执行
< 11

> add.call(mul, 5,6); // mul调用add的方法来执行
< 11

2. call()

call() 方法调用一个函数, 其具有一个指定的this值和分别地提供的参数(参数的列表)。

语法

fun.call(thisArg[, arg1[, arg2[, ...]]])

参数

  • thisArg

fun函数运行时指定的this值。 需要注意的是,指定的this值并不一定是该函数执行时真正的this 值,如果这个函数处于非严格模式下,则指定为null和undefined的this值会自动指向 全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this会指向该原始值的自动包装对象。

  • arg1, arg2, ...

指定的参数列表。

3. bind()

bind()方法创建一个新的函数, 当被调用时,将其this关键字设置为提供的值,在调用新函数时,在任何提供之前提供一个给定的参数序列。

语法

fun.bind(thisArg[, arg1[, arg2[, ...]]])

参数

  • thisArg

当绑定函数被调用时,该参数会作为原函数运行时的 this 指向。当使用new操作符调用绑定函数时,该参数无效。

  • arg1, arg2, ...

当绑定函数被调用时,这些参数将置于实参之前传递给被绑定的方法。

返回值

返回由指定的this值和初始化参数改造的原函数拷贝

描述

bind() 函数会创建一个新函数(称为绑定函数),新函数与被调函数(绑定函数的目标函数)具有相同的函数体(在 ECMAScript 5 规范中内置的call属性)。当目标函数被调用时 this 值绑定到 bind() 的第一个参数,该参数不能被重写。

绑定函数被调用时,bind() 也接受<u>预设的参数提供给原函数</u>。一个绑定函数也能使用new操作符创建对象:这种行为就像把原函数当成构造器。提供的 this 值被忽略,同时调用时的参数被提供给模拟函数。

例子

 del = {a: 3, get: function(x){return x - this.a}}

> var del3 = del.get.bind(del); // 产生一个新的函数
> del3(5)
< 2

> del3(8)
< 5

var del6 = del.get.bind({a: 6}, 5); // 有预设参数的新的函数
> del6()
< -1
var numbers = [2,3,4,5,6,7,8];


var max = Math.max.call(this, 2,3,4,5,6,7,8);
var min = Math.min.apply(this, numbers);

console.log(`max=${max}`);
console.log(`min=${min}`);

柯里化

bind(...)可以对参数进行柯里化。

结合犀牛书中bind()方法实现, 是说把bind()方法第一个参数以后的所有参数作为返回函数的起始实参)首先bind不同于call和apply只是单纯地设置this的值后传参,它还会将所有传入bind()方法中的实参(第一个参数之后的参数)与this一起绑定。

var sum = function(x,y) { return x + y }; 

var succ = sum.bind(null, 1); //让this指向null,其后的实参也会作为实参传入被绑定的函数sum

succ(2) // => 3:  可以看到1绑定到了sum函数中的x

注意

当bind()所返回的函数用作构造函数的时候, 传入bind()的this将被忽略,实参会全部传入原函数,这样说很抽象, 举个栗子?

function original(x){
  this.a=1;
  this.b =function(){return this.a + x}
}
var obj={
  a:10
}
var  newObj = new (original.bind(obj,2)) //传入了一个实参2
console.log(newObj.a)  //输出 1, 说明返回的函数用作构造函数时obj(this的值)被忽略了

console.log(newObj.b()) //输出3 ,说明传入的实参2传入了原函数original

写在后面

GitHub上集大家之力搞了一个前端面试题的项目,里面都是大家面试时所遇到的题以及一些学习资料,有兴趣的话可以关注一下。如果你也有兴趣加入我们的话,请在项目中留言。项目同时也可以在gitbook上查看。

InterviewLibrary-GitHub InterviewLibrary-gitbook

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React Advanced Topics

    大家都在试用React,之前呢,也给大家分享过一次主题为“浅谈Hooks&&生命周期”的内容,今天呢,作为延伸,来继续给大家介绍一些React的Advanced...

    贺贺V5
  • Angular2 之 属性型指令Angular指令可分为三种创建一个属性型指令 -- 初级应用响应用户引发的事件 -- 高级应用

    绑定宿主元素的事件,事件绑定的时候捕捉到这个事件源$event(table指令,这是属性型指令的重点)。

    贺贺V5
  • 学习图谱

    学习,不是罗列知识点,而是要学。你不需要把所有东西都列出来,你只需要想清楚自己现阶段的学习就好,慢慢学习,慢慢进步。

    贺贺V5
  • 逆强化学习几篇论文笔记

    用户1908973
  • javascript 函数详解

    一、函数的一些基础概念: 1.js中的函数使用function来声明。 2.关于return: 2.1  函数在执行到return语句后悔立即停止并退出,ret...

    柴小智
  • JVM详解之:HotSpot VM中的Intrinsic methods

    内置方法是什么呢?它和inline method有什么关系呢?内置方法是怎么实现的呢?所有的问题都可以在本文找到答案。

    程序那些事
  • 那个男人再发力,原来我以前学的 Lambda 都是假的

    大家好,我是扔物线朱凯。Kotlin 很方便,但有时候也让人头疼,而且越方便的地方越让人头疼,比如 Lambda 表达式。很多人因为 Lambda 而被 Kot...

    用户1907613
  • 【码上开学】Kotlin 的高阶函数、匿名函数和 Lambda 表达式

    大家好,我是扔物线朱凯。Kotlin 很方便,但有时候也让人头疼,而且越方便的地方越让人头疼,比如 Lambda 表达式。很多人因为 Lambda 而被 Kot...

    扔物线
  • 轻松学习C语言编程之函数知识详解

    函数是一组一起执行任务的语句。每个C程序至少有一个函数,即main,所有最简单的程序都可以定义其他函数。您可以将代码划分为单独的函数。如何在不同的函数之间划分代...

    猫咪爱分享
  • aardio v13.6 更新

    用户2135432

扫码关注云+社区

领取腾讯云代金券