JS中call(),apply(),bind()函数的区别与用法详解

call()

介绍

通过提供一个新的this值给当前调用的函数/方法，从而改变this指向。

语法

fn.call(this.Arg, arg1, arg2,...)

thisArg：当前调用函数this指向的对象
arg1, arg2：传递的其他参数（直接传给形参可不写）

特点

  • 可以直接调用函数—fn.call()
  • 可以改变被调用函数的this指向为指定的— fn.call(this.Arg)

返回值

使用调用者提供的值和参数调用该函数的返回值，也就是函数的返回值。若该方法没有返回值，则返回undefined。

使用(主要应用)

通过使用call()来实现继承

// 借用父构造函数继承属性
// 父构造函数
function Father(name, age) {
    this.uname = name
    this.age = age
}
// 子构造函数
function Son(name, age) {
    Father.call(this, name, age)
}
var son = new Son('小明', 10)
console.log(son); // Son {uname: '小明', age: 10}

apply()

介绍

apply-应用、运用的意思。
apply()-调用一个具有给定值的函数，以及以一个数组（或一个类数组对象）的形式提供的参数this，简单理解为调用函数的，fang'shi但是它可以改变this指向。

语法

fn.apply(this.Arg, [argsArray])

thisArg：在fn函数运行时指定的this值，当不需要改变this指向时这里可以填null 。
argsArray：传递的值，必须包含在数组里面。

特点

  • 也是调用函数—fn.apply()
  • 可以改变函数内部的this指向—fn.apply(this)但是它的参数必须是数组（伪数组）

返回值

apply()的返回值就是函数的返回值，因为它就是调用函数。
使用调用者提供的值和参数调用该函数的返回值。若该方法没有返回值，则返回undefined。

使用

var a = {
    name: '小红'
}
function fn(arr) {
    console.log(this); // {name: '小红'}
    console.log(arr); // blackpink 传字符串就输出字符串传数字就输出数字
}
fn.apply(a, ['blackpink'])
// fn.apply() // this->window arr->undefined

典型应用： 借助于数学内置对象求值。

var arr = [1, 66, 3, 99, 4]
// var max = Math.max.apply(null, arr) // 虽然这里的this指向不需要改变填null没有错
var max = Math.max.apply(Math, arr) // 但是这里最好是让this指向函数的调用者是最合适的
var min = Math.min.apply(Math, arr)
console.log(max); // 99
console.log(min); // 1

bind()

介绍

bind：绑定、捆绑
bind()：不会调用函数，但是也能改变函数内部的this指向

语法

fn.bind(thusArg, arg1, arg2, ...)

thisArg：在fn函数运行时指定的this值
arg1, arg2：传递的其他参数

特点

  • 不会调用原来的函数，不会立即调用；
  • 可以改变原来函数内部的this指向；
  • 返回的是原函数改变this之后产生的新函数；

返回值

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

使用

var c = {
    name: '大华'
}
function fn() {
    console.log(this); // {name: '大华'}
    console.log(a + b); // 3
}
// fn.bind(c) // 这里不会有输出值
var f = fn.bind(c, 1, 2)
f() // 拷贝函数所以输出值用函数调用

典型应用：
如果有的函数我们不需要立即调用，但是又想改变这个函数内部this指向，此时用bind()，eg：点击发送验证码60秒后才能二次点击

    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>

var btns = document.querySelectorAll('button')
for (var i = 0; i < btns.length; i++) {
    btns[i].onclick = function() {
        this.disabled = true // 这个this指向的是调用者btn
        setTimeout(function() {
            // this.disabled = false; // 只用这一个不加bind的话会不管用，因为定时器里面的this指向的是window
            this.disabled = false // 此时这里的this指向的是当前点击的那个btn
        }.bind(this), 3000) // 这个this指向的是btn这个对象
    }
}

call(),apply(),bind()的区别

三者相同点

  • 都可以改变函数内部的this指向

不同点

  • call 和 apply 会调用函数，并且改变函数内部this指向；
  • call 和 apply 的传参不一样，call 传参aru1, aru2...形式，apply 必须为数组形式 [arg] ；
  • bind 不会直接调用函数，但是可以改变函数内部this指向；

应用场景不同：

  • call 经常做继承；
  • apply 经常跟数组有关系，比如借助于数学对象实现数组最大最小值；
  • bind 不调用函数，但是还想改变this指向，比如改变定时器内部this指向；

以上既是JS中call(),apply(),bind()函数的区别与使用方法，更多关于这3个函数的使用方法请查看下面的相关链接

赞 (0)

相关推荐

  • 一文搞懂JavaScript中bind,apply,call的实现

    一文搞懂JavaScript中bind,apply,call的实现

    目录 bind.call和apply的用法 bind call&apply 实现bind 实现call和apply 总结 bind.call和apply都是Function原型链上面的方法,因此不管是使用function声明的函数,还是箭头函数都可以直接调用.这三个函数在使用时都可以改变this指向,本文就带你看看如何实现bind.call和apply. bind.call和apply的用法 bind bind()方法可以被函数对象调用,并返回一个新创建的函数. 语法: function.bin

  • 一文了解JavaScript中call/apply/bind的使用

    目录 前言 1. call 1.1 语法 1.2 流程图 1.3 代码实现 2. apply 2.1 语法 2.2 流程图 2.3 代码实现 3. bind 3.1 语法 3.2 流程图 3.3 代码实现 4.全文总结 call.apply与bind有什么区别? 前言 在JavaScript中,经常会通过call / apply / bind 函数来改变this的指向,详情可看一文带你了解this指向,今天我们来研究下这三个函数的实现. 1. call call()函数是什么? call() 方

  • JS 函数的 call、apply 及 bind 超详细方法

    目录 JS 函数的 call.apply 及 bind 方法 一.call() 方法 1.call()方法的模拟实现 二.apply() 方法 1.apply()方法的模拟实现 三.bind() 方法 1.bind() 方法的模拟实现 四.总结 JS 函数的 call.apply 及 bind 方法 一.call() 方法 调用 call() 方法会立即执行目标函数,同时改变函数内部 this 的指向.this 指向由方法的第一个参数决定,后面逐个列举的任意个参数将作为目标函数的参数一一对应传入

  • javascript中call,apply,bind函数用法示例

    本文实例讲述了javascript中call,apply,bind函数用法.分享给大家供大家参考,具体如下: 一.call函数 a.call(b); 简单的理解:把a对象的方法应用到b对象上(a里如果有this,会指向b) call()的用法:用在函数上面 var Dog=function(){ this.name="汪星人"; this.shout=function(){ alert(this.name); } }; var Cat=function(){ this.name=&qu

  • JavaScript函数之call、apply以及bind方法案例详解

    总结 1.相同点 都能够改变目标函数执行时内部 this 的指向 方法的第一个参数用于指定函数执行时内部的 this 值 支持向目标函数传递任意个参数 若不向方法的第一个参数传值或者传递 undefined.null,则在 JavaScript 正常模式下,目标函数内部的 this 指向 window 对象,严格模式下,分别指向 undefined.null. 2.区别 apply() 方法可接收两个参数,而 call() 和 bind() 方法则可接收多个参数. apply() 方法向目标函数

  • 详解JS中的this、apply、call、bind(经典面试题)

    这又是一个面试经典问题~/(ㄒoㄒ)/~~也是 ES5中众多坑中的一个,在 ES6 中可能会极大避免 this 产生的错误,但是为了一些老代码的维护,最好还是了解一下 this 的指向和 call.apply.bind 三者的区别. this 的指向 在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象,来,跟着我朗读三遍:this 永远指向最后调用它的那个对象,this 永远指向最后调用它的那个对象,this 永远指向最后调用它的那个对象.记住这句话

  • JavaScript手写call,apply,bind方法

    目录 前言 改写this实现思路 前期准备 手写call方法 手写apply方法 手写bind方法 前言 改变this指向在书写业务的时候经常遇到,我们经常采用以下方法进行改写 使用作用声明变量存储this 使用jJavaScript的原生方法call,apply,以及bind进行改写 第一种方法就不说了,就是一个变量存储的问题,主要说第二种如何实现的 call,bind,apply方法都是JavaScript原生的方法,挂载在Function原型上,使得所有函数都可以调用,今天我们来实现一下c

  • 浅谈JavaScript中的apply/call/bind和this的使用

    fun.apply(context,[argsArray]) 立即调用fun,同时将fun函数原来的this指向传入的新context对象,实现同一个方法在不同对象上重复使用. context:传入的对象,替代fun函数原来的this: argsArray:一个数组或者类数组对象,其中的数组参数会被展开作为单独的实参传给 fun 函数,需要注意参数的顺序. fun.call(context,[arg1],[arg2],[-]) 同apply,只是参数列表不同,call的参数需要分开一个一个传入.

  • JS中call(),apply(),bind()函数的区别与用法详解

    call() 介绍 通过提供一个新的this值给当前调用的函数/方法,从而改变this指向. 语法 fn.call(this.Arg, arg1, arg2,...) thisArg:当前调用函数this指向的对象arg1, arg2:传递的其他参数(直接传给形参可不写) 特点 可以直接调用函数—fn.call() 可以改变被调用函数的this指向为指定的— fn.call(this.Arg) 返回值 使用调用者提供的值和参数调用该函数的返回值,也就是函数的返回值.若该方法没有返回值,则返回un

  • JS中call/apply、arguments、undefined/null方法详解

    JS中call/apply、arguments、undefined/null方法详解

    a.call和apply方法详解 -------------------------------------------------------------------------------- call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指

  • JavaScript中的普通函数和箭头函数的区别和用法详解

    最近被问到了一个问题: javaScript 中的箭头函数 ( => ) 和普通函数 ( function ) 有什么区别? 我当时想的就是:这个问题很简单啊~(flag),然后做出了错误的回答-- 箭头函数中的 this 和调用时的上下文无关,而是取决于定义时的上下文 这并不是很正确的答案--虽然也不是完全错误 箭头函数中的 this 首先说我的回答中没有错误的部分:箭头函数中的 this 确实和调用时的上下文无关 function make () { return ()=>{ consol

  • JS中showModalDialog关闭子窗口刷新主窗口用法详解

    本文实例讲述了JS中showModalDialog关闭子窗口刷新主窗口用法.分享给大家供大家参考,具体如下: 网上找了好长时间 大都是window.opener.location.reload(),等等 都不是我想要的 最后终于发现了一个 想知道的就往下看看吧 showModalDialog和showModelessDialog 一.showModalDialog和showModelessDialog有什么不同? showModalDialog:被打开后就会始终保持输入焦点.除非对话框被关闭,否

  • Python中几种属性访问的区别与用法详解

    起步 在Python中,对于一个对象的属性访问,我们一般采用的是点(.)属性运算符进行操作.例如,有一个类实例对象foo,它有一个name属性,那便可以使用foo.name对此属性进行访问.一般而言,点(.)属性运算符比较直观,也是我们经常碰到的一种属性访问方式. python的提供一系列和属性访问有关的特殊方法: __get__ , __getattr__ , __getattribute__ , __getitem__ .本文阐述它们的区别和用法. 属性的访问机制 一般情况下,属性访问的默认

  • Asp.Net Core中服务的生命周期选项区别与用法详解

    Asp.Net Core中服务的生命周期选项区别与用法详解

    前言 最近在做一个小的Demo中,在一个界面上两次调用视图组件,并且在视图组件中都调用了数据库查询,结果发现,一直报错,将两个视图组件的调用分离,单独进行,却又是正常的,寻找一番,发现是配置依赖注入服务时,对于服务的生命周期没有配置得当导致,特此做一次实验来认识三者之间(甚至是四者之间的用法及区别). 本文demo地址(具体见WebApi控制器中):https://gitee.com/530521314/koInstance.git (本地下载)  一.服务的生命周期 在Asp.Net Core

  • js中使用使用原型(prototype)定义方法的好处详解

    经常在前端面试或是和其他同行沟通是,在谈到构造在JS定义构造函数的方法是最好使用原型的方式:将方法定义到构造方法的prototype上,这样的好处是,通过该构造函数生成的实例所拥有的方法都是指向一个函数的索引,这样可以节省内存. 当然,这种说法没有任何问题,只是在实现上,并非只有使用prototype的方式才能达到这样的效果,我们可以将方法以函数的形式定义在构造函数之外,然后在构造函数中通过this.method = method的方式,这样生成的实例的方法也都通过索引指向一个函数,具体如下:

  • JS中数据结构与算法---排序算法(Sort Algorithm)实例详解

    排序算法的介绍 排序也称排序算法 (Sort Algorithm),排序是将 一组数据 , 依指定的顺序 进行 排列的过程 . 排序的分类 1)  内部排序 : 指将需要处理的所有数据都加载 到 内部存储器(内存) 中进行排序. 2) 外部排序法: 数据量过大,无法全部加载到内 存中,需要借助 外部存储(文件等) 进行 排序. 常见的排序算法分类 算法的时间复杂度 度量一个程序(算法)执行时间的两种方法 1.事后统计的方法 这种方法可行, 但是有两个问题:一是要想对设计的算法的运行性能进行评测,

  • Node.js基础入门之回调函数及异步与同步详解

    Node.js基础入门之回调函数及异步与同步详解

    目录 回调函数 1. 什么是回调函数? 2. 回调函数实现机制 3. 回调函数用途 4. 回调函数示例 异步与同步 1. 什么是异步与同步? 2. 同步示例 3. 异步示例一 4. 异步示例二 异步的实现 1. 回调函数的同步示例 2. 异步事件示例 3. 异步示例截图 Promise基础 1. 什么是Promise ? 2. Promise特点 3. 异步的缺点 4. Promise保证异步顺序 经过前面两天的学习,已经对Node.js有了一个初步的认识,今天继续学习其他内容,并加以整理分享,

随机推荐