首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

关于JavaScript中apply、call、bind的详细使用讲解

在JavaScript中我们对函数的执行通常是直接用函数的名称加个括号就可以进行调用了,但是这样调用有一个缺点,就是函数中的this指向是默认绑定的,有时候this的指向不太符合我们的预期。...至于JavaScript中this的指向可以看我这篇文章《在JavaScript中,this的指向详细讲解》那我们想要把函数的this指向变成我们预期想的那样有什么方法吗?...这时候JavaScript中的函数apply、call、bind调用就起到作用了applyapply接受两个参数,第一个参数是this的指向,第二个参数是函数接受的参数,以==数组==的形式传入,==且当第一个参数为...null、undefined的时候,默认指向window(在浏览器中),使用apply方法改变this指向后原函数会立即执行,且此方法只是临时改变this指向一次==。...调用后的结果"}obj.myfoo() //zayyoobj.myfoo.call(obj2, '123', '234')//call调用后的结果除了 bind 方法后面多了个 ()外 ,结果返回都一致

13810

关于 JavaScript 中的 reduce() 方法

reduce() 方法对数组中的每个元素执行一个升序执行的 reducer 函数,并将结果汇总为单个返回值 const array1 = [1, 2, 3, 4]; const reducer = (accumulator...reduce 方法的参数 1、第一个参数:reducer 函数 其中,reducer 函数又有四个参数: Accumulator (acc) (累计器) Current Value (cur) (当前值...可以看到如果不传第二个参数 initialValue,则函数的第一次执行会将数组中的第一个元素作为 total 参数返回。...如果传了第二个参数 initialValue,那么第一次执行的时候 total 的值就是传递的参数值,然后再依次遍历数组中的元素。...reduce( function(a, b) { return a.concat(b); }, [] ); // flattened is [0, 1, 2, 3, 4, 5] 4、计算数组中每个元素出现的次数

1.4K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JavaScript中call,apply,bind方法的使用及原理

    在JavaScript里,call(),apply(),bind()都是Function内置的三个方法, 它们的作用都是显示的绑定this的指向,三个方法的第一个参数都是this指向的对象,也就是函数在运行时执行的上下文...) call:调用一个对象(obj)的方法(func),并使用新的对象(thisArg)代替该对象,参数是列表 obj.func.call(thisArg, arg1, arg2, ...) bind:...bind()方法创建一个新的函数,在bind()被调用时,这个新函数的this被bind的第一个参数指定,其余的参数将作为新函数的参数供调用时使用,第一个thisArg在setTimeout中创建一个函数时传递的原始值都会转化成...特点: apply,call,bind三个方法第一个参数都是函数在调用时this指向的对象,也就是运行时的上下文(this显示绑定的原理) apply,call第一个参数为空,null,undefined...,this指向的是window apply,call两个方法只是参数形式有所不同,apply参数是一个数组,call则是参数列表版本 apply,call 则是立即调用,bind 是则返回对应函数 常见的一些应用

    1.1K20

    JavaScript中的 Call 和 Apply

    1. call 和 apply的区别 Function.prototype.call 和 Function.prototype.apply都是非常常用的方法,它们的作用一模一样,区别仅在于传入参数形式的不同...当调用一个函数时,JavaScript的解释器并不会计较形参和实参在数量、类型以及顺序上的区别,JavaScript的参数在内部就是用一个数组来表示的,从这个意义上来说,apply比call的使用率更高...当使用call 或者 apply 的时候,如果我们传入的第一个参数为null,函数体内的this会指向默认的宿主对象,在浏览器中为window。 ?...有时候我们使用call或者apply的目的不在于指定this指向,而是另有有途,比如借用其也对象的方法,那么我们可以传入null来代替某个具体的对象: ? 2. call和apply的用途 (1)....这个时候我们可以用call来修正func函数的指向this,使其依然指向div。 ? 另外在本博客的"JavaScript中this的理解"也用apply来修正this,代码如下: ? (2).

    59810

    JavaScript 中 call()、apply()、bind() 的用法

    obj.objAge; // 17 比较一下这两者 this 的差别,第一个打印里面的 this 指向 obj,第二个全局声明的 shows() 函数 this 是 window ; 1,call()...99 以上出了 bind 方法后面多了个 () 外 ,结果返回都一致!...由此得出结论,bind 返回的是一个新的函数,你必须调用它才会被执行。 2,对比call 、bind 、 apply 传参情况下 ?...从上面四个结果不难看出: call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象,第二个参数差别就来了: call 的参数是直接放进去的,第二第三第 n 个参数全都用逗号分隔...bind 除了返回是函数以外,它 的参数和 call 一样。 当然,三者的参数不限定是 string 类型,允许是各种类型,包括函数 、 object 等等!

    83230

    JavaScript 中 call()、apply()、bind() 的用法

    在JavaScript 中,call、apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数调用过程中的 this 指向 1 apply Function.apply...call方法接收两个参数 obj:这个对象将代替Function类里this对象 args:这个是一个参数列表 不带第一个参数 var person = { fullName: function...(person1, "Seattle", "USA"); 3 bind Function.bind(obj[,params...]) bind是ES5 新增的一个方法,它的传参和call类似,也是接收两个参数...(person1, "Seattle", "USA")(); 可以从上面看出,使用方法基本和call一致,只是后面多了(),其实是bind不会立即执行对应的函数,只是返回对函数的引用。...那为什么要引入bind呢,是因为call和apply会自动执行目标函数,从而无法绑定在事件上,因为事件是我们手动触发的,而bind不会自动执行目标函数。

    7771211

    JavaScript之call()和apply()方法详解

    简介:apply()和call()都是属于Function.prototype的一个方法属性,它是JavaScript引擎内在实现的方法,因为属于Function.prototype,所以每个Function...(需要理解JavaScript的执行环境和作用域的概念) 介绍完这两个方法后,说下它们的异同点: 相同点:这两个方法都是劫持另外一个对象的方法,继承另外一个对象的属性. 怎样理解这句话呢?...); //这里使用call()方法的作用是,当前this对象(xiaohua对象),劫持了people对象,所以people中的this指向了xiaohua对象,所以xiaohua对象拥有了...obj = {a: 2}; var testB = testA.myBind(obj, 1); alert(testB); 问题是:怎样实现myBind()方法,才能使testB的值3...所有的方法实例都能通过fun1.(Function.prototype的中定义方法和属性)的形式调用。

    63560

    浅谈JavaScript中的apply,call和bind

    an array (or an array-like object). apply() 方法调用一个函数,指定该函数的 this 值并将一个数组(或类数组对象)作为该函数的参数。...call call() 与 apply() 类似,区别在于 apply() 的第二个参数为数组,而 call() 把参数跟在第一个参数后面,并且可以跟多个参数。...原因在于,arguments 并不是真正的数组对象,只是 array-like object ,所以它并没有 slice 这个方法。...而 Array.prototype.slice.call(arguments) 可以理解为把 slice 的对象指向 arguments ,从而让 arguments 可以使用 slice 方法。...不过 bind() 所提供的预设参数功能与此不同。 在我们的印象中, list3 应该输出 [1, 2, 3] 但实际输出的却是 [37, 1, 2, 3]。

    55830

    理解JavaScript中的This,Bind,Call和Apply

    this关键词在JavaScript中是个很重要的概念,也是一个对初学者和学习其他语言的人来说晦涩难懂。在JavaScript中,this是一个对象的引用。...this指向的对象可以是基于全局的,在对象上的,或者在构造函数中隐式更改的,当然也可以根据Function原型方法的bind,call和apply使用显示更改的。...在这篇文章中,你将学习到基于上下文隐式表示的含义,并将学习如何使用bind,call和apply方法来显示确定this的值。...在Understanding Classes in JavaScript中,你可以了解到更多的关于构造函数和ES6类的相似和不同的地方。...总结 在这篇文章中,你学到了关于JavaScript的this,和基于隐式运行时绑定的可能具有的不同值,以及通过bind,call和apply的显示绑定。

    35840

    谈谈JavaScript中的call、apply和bind

    在JavaScript中,如果想要改变当前函数调用的上下文对象的时候,我们都会联想到call、apply和bind。比如下面?...手写call, apply, bind方法 这里是简单的实现下相关方法的封装,为了简洁,我这里尽量使用了ES6的语法进行编写,详细的参考代码可以直接戳airuikun大牛的airuikun/Weekly-FE-Interview...call方法实现 在上面的了解中,我们很清楚了call的传参格式和调用执行方式,那么就有了下面的实现方法: Function.prototype.call2 = function(context, .....问:call中为什么说 context.fn = this; // 让fn的上下文为context 呢?...答: 这是为了包含返回函数也能传参的情况,也就是bind()()中的第二个括号可以传递参数。 call和apply哪个好?

    36340

    JS中的call()和apply()方法

    JS中的call()和apply()方法 1、方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,...说明: call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。...(sub,3,1); 这个例子中的意思就是用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4); // 注意:js 中的函数其实是对象...(this) 的意思就是使用 Animal对象代替this对象,那么 Cat中不就有Animal的所有属性和方法了吗,Cat对象就能够直接调用Animal的方法以及属性了....(this); 20 Class11.call(this); 21 } 很简单,使用两个 call 就实现多重继承了 当然,js的继承还有其他方法,例如使用原型链,这个不属于本文的范畴

    2.2K30

    【译】理解JavaScript中的This,Bind,Call和Apply

    this关键词在JavaScript中是个很重要的概念,也是一个对初学者和学习其他语言的人来说晦涩难懂。在JavaScript中,this是一个对象的引用。...this指向的对象可以是基于全局的,在对象上的,或者在构造函数中隐式更改的,当然也可以根据Function原型方法的bind,call和apply使用显示更改的。...在这篇文章中,你将学习到基于上下文隐式表示的含义,并将学习如何使用bind,call和apply方法来显示确定this的值。...在Understanding Classes in JavaScript中,你可以了解到更多的关于构造函数和ES6类的相似和不同的地方。...总结 在这篇文章中,你学到了关于JavaScript的this,和基于隐式运行时绑定的可能具有的不同值,以及通过bind,call和apply的显示绑定。

    80020

    JavaScript中apply、call、bind的区别与用法

    apply()、call()和bind()方法都是Function.prototype对象中的方法,而所有的函数都是Function的实例。三者都可以改变this的指向,将函数绑定到上下文中。 1....用法 这三个方法的用法非常相似,将函数绑定到上下文中,即用来改变函数中this的指向。 2.1 普通写法 ? 2.2 call 与apply方法的用法 ?...结果相同,call()和apply(),第一个参数都是要绑定上下文,后面的参数是要传递给调用该方法的函数的。...不同之处在于,在给调用函数传递参数时,apply()是数组,call()参数是逐个列出的。 2.3 bind()的用法 ? bind方法传递给调用函数的参数可以逐个列出,也可以写在数组中。...应用场景 3.1 求数组中的最大和最小值 ? 3.2将类数组转化为数组 ? 3.3 数组追加 ? 3.4 判断变量类型 ? 3.5 利用call和apply做继承 ?

    1.2K20

    关于JavaScript性能问题的误解

    因为 JavaScript 是单线程的,所以只能从上到下一行一行去执行代码,如果遇到大的数据量计算就会比较耗时,也就是我们大部分人理解的性能有问题。...JavaScript 中计算代码执行耗时的方法测试 JavaScript 代码执行时间主要有3种方法,最容易想到的应该就是直接获取前后的时间戳相减。...,获取到的值无法赋值给代码中的变量。...3、performance.nowperformance.now 是一个用于获取高精度时间戳的 JavaScript API,返回包括小数点的毫秒时间。...,不过像示例中的1000次遍历大概耗时也就0.1毫秒左右,用Date.now的方式由于精度问题会是0,所以平时测试也不推荐这种方式,推荐使用performance.now来计算耗时。

    9610

    【面试需要】掌握JavaScript中的this,call,apply的原理

    中的this,call,apply,因为面试官会问啊!...那么this是什么,Function.prototype.call和 Function.prototype.apply这两个方法又是如何使用在JavaScript中的呢。...调用一个对象的方法,以另一个对象替换当前对象,call方法用来代替另一个对象调用一个方法,该方法可以将一个函数对象的上下文改变为由this obj指定的新对象。...call方法的参数,如果是不传,或是null,undefined的情况下,函数中的this指向就是指window对象,如果传递的是另一个函数的函数名,函数中的this指向就是这个函数的引用,如果参数传递的是基本类型数据时...在JavaScript中,call和apply作用是一样的 为了改变某个函数运行时的上下文(context)而存在的,就是为了改变函数体内部this的指向。

    51910

    关于 JavaScript 中的 Promise

    Part 2创建 Promise 后,可以使用该方法附加一个回调函数,在JavaScript中,Promise对象的.then()方法用于附加一个或多个回调函数,以处理Promise对象的解析值(resolved...Promise 取消在现代 JavaScript 中 - 不可以,一旦 Promise 创建,就无法取消它。它将执行其代码并解析或拒绝,并且没有内置的方法来取消操作。...Promise.all() 方法在 JavaScript 中,可以使用 Promise.all() 方法来并行处理多个 Promise。...这样,使用 Promise.all() 方法可以很方便地在 JavaScript 中并行处理多个 Promise,提高了异步操作的效率。...更好的异步错误堆栈: Promise 在发生错误时会生成更详细的错误堆栈信息,有助于更容易追踪和调试异步代码中的问题。

    73262
    领券