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

来源:脚本之家  责任编辑:小易  

总结

1、相同点

    都能够改变目标函数执行时内部 this 的指向 方法的第一个参数用于指定函数执行时内部的 this 值 支持向目标函数传递任意个参数 若不向方法的第一个参数传值或者传递 undefined、null,则在 JavaScript 正常模式下,目标函数内部的 this 指向 window 对象,严格模式下,分别指向 undefined、null。

2、区别

    apply() 方法可接收两个参数,而 call() 和 bind() 方法则可接收多个参数。 apply() 方法向目标函数传递参数时只需将参数数组或 arguments 对象作为方法的第二个参数即可,而 call() 和 bind() 方法则需要将传参逐个列举在方法的一个参数后面。 调用 call() 和 apply() 方法时会立即执行目标函数,而 bind() 方法则不会,它将返回一个新函数——目标函数的拷贝,该函数内部的 this 指向 bind() 方法的第一个参数,之后执行新函数相当于执行了目标函数。 只有 bind() 方法实现了函数柯里化,因此可以分两次向目标函数传递参数。

call() 方法

    调用 call() 方法会立即执行目标函数,同时改变函数内部 this 的指向。this 指向由方法的第一个参数决定,后面逐个列举的任意个参数将作为目标函数的参数一一对应传入。 对于开头总结中相同点的最后一点,示例如下:
/* 正常模式 */

let obj = {
  sum(a, b) {
    console.log(this)
    return a + b
  }
}

// 执行 sum 函数的 apply、bind 方法,打印的 this 同下
obj.sum.call()  // 打印 window
obj.sum.call(undefined, 1, 2)  // 打印 window
obj.sum.call(null, 1, 2)  // 打印 window
/* 严格模式 */
'use strict'

// 执行 sum 函数的 apply、bind 方法,打印的 this 同下
obj.sum.call()  // 打印 undefined
obj.sum.call(undefined, 1, 2)  // 打印 undefined
obj.sum.call(null, 1, 2)  // 打印 null

模拟实现

1、关键点

    myCall() 方法被添加在 Function 原型对象上,目标函数调用该方法时,myCall() 方法内部的 this 将指向目标函数。 将目标函数作为 context 对象的方法来执行,由此目标函数内部的 this 将指向 context 对象。. 从 context 对象中删除目标函数 使用扩展运算符 ... 处理传入目标函数的参数

2、call()、apply()、bind() 方法的模拟实现中,对于不传第一个参数或者传递 undefined、null 时,这里在 JS 正常模式和严格模式下做了统一处理,即目标函数内部的 this 均指向 window 对象。

3、代码如下

Function.prototype.myCall = function (context, ...args) {
  if (context === undefined || context === null) {
    context = window
  }
  // 下面这行为核心代码
  context.fn = this
  const result = context.fn(...args)
  delete context.fn
  return result
}

let obj1 = {
  basicNum: 1,
  sum(a, b) {
    console.log(this)
    return this.basicNum + a + b
  }
}
let obj2 = {
  basicNum: 9
}
console.log(obj1.sum.call(obj2, 2, 3))  // 14
console.log(obj1.sum.myCall(obj2, 2, 3))  // 14

apply() 方法

调用 apply() 方法会立即执行目标函数,同时改变函数内部 this 的指向。this 指向由方法的第一个参数决定,第二个参数是一个参数数组或 arguments 对象,各数组元素或 arguments 对象表示的各参数将作为目标函数的参数一一对应传入。

模拟实现

1、关键点

    myApply() 方法被添加在 Function 原型对象上,目标函数调用该方法时,myApply() 方法内部的 this 将指向目标函数。 将目标函数作为 context 对象的方法来执行,由此目标函数内部的 this 将指向 context 对象。 从 context 对象中删除目标函数 使用扩展运算符 ... 处理传入目标函数的参数

2、代码如下

Function.prototype.myApply = function (context, args) {
  if (context === undefined || context === null) {
    context = window
  }
  // 下面这行为核心代码
  context.fn = this
  const result = context.fn(...args)
  delete context.fn
  return result
}

console.log(obj1.sum.apply(obj2, [2, 3]))  // 14
console.log(obj1.sum.myApply(obj2, [2, 3]))  // 14

bind() 方法

    调用 bind() 方法将返回一个新函数——目标函数的拷贝,该函数内部的 this 指向方法的第一个参数,后面逐个列举的任意个参数将作为目标函数的参数一一对应传入。之后执行新函数相当于执行了目标函数。 bind() 方法实现了函数柯里化,因此可以分两次向目标函数传递参数,第一次的参数列举在 bind() 方法首参后面,第二次的参数列举在新函数中。

模拟实现

1、关键点

    myBind() 方法被添加在 Function 原型对象上,目标函数调用该方法时,myBind() 方法内部的 this 将指向目标函数。 将目标函数作为 context 对象的方法来执行,由此目标函数内部的 this 将指向 context 对象。 从 context 对象中删除目标函数 使用扩展运算符 ... 处理传入目标函数的初始参数、后续参数。

2、代码如下

Function.prototype.myBind = function (context, ...initArgs) {
  if (context === undefined || context === null) {
    context = window
  }
  // 缓存 this 值
  const _this = this
  return function (...args) {
    // 下面这行为核心代码
    context.fn = _this
    const result = context.fn(...initArgs, ...args)
    delete context.fn
    return result
  }
}

console.log(obj1.sum.bind(obj2, 2)(3))  // 14
console.log(obj1.sum.myBind(obj2, 2)(3))  // 14

相关知识点

关于 JavaScript 中 this 的指向

到此这篇关于JavaScript函数之call、apply以及bind方法案例详解的文章就介绍到这了,更多相关JavaScript函数之call、apply以及bind方法内容请搜索真格学网以前的文章或继续浏览下面的相关文章希望大家以后多多支持真格学网!

您可能感兴趣的文章:JavaScript中call、apply、bind实现原理详解浅谈JavaScript中的apply/call/bind和this的使用Javascript中call,apply,bind方法的详解与总结实例讲解JavaScript中call、apply、bind方法的异同全面解析JavaScript中apply和call以及bind(推荐)

  • 本文相关:
  • 奇妙的js
  • js装饰者模式和typescript装饰器
  • javascript 函数节流详解及方法总结
  • javascript 是你的高阶函数(高级应用)
  • js调用后台servlet方法实例
  • js 实现的可折叠留言板(附源码下载)
  • javascript 强制类型转换函数
  • js 精确统计网站访问量的实例代码
  • js模式之单例模式基本用法
  • jointjs javascript流程图绘制框架解析
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascriptjavascript技巧javascript中call、apply、bind实现原理详解浅谈javascript中的apply/call/bind和this的使用javascript中call,apply,bind方法的详解与总结实例讲解javascript中call、apply、bind方法的异同全面解析javascript中apply和call以及bind(推荐)奇妙的jsjs装饰者模式和typescript装饰器javascript 函数节流详解及方法总结javascript 是你的高阶函数(高级应用)js调用后台servlet方法实例js 实现的可折叠留言板(附源码下载)javascript 强制类型转换函数js 精确统计网站访问量的实例代码js模式之单例模式基本用法jointjs javascript流程图绘制框架解析js刷新页面方法大全js删除数组里的某个元素方法js中settimeout()的用法详解js页面跳转常用的几种方式js截取字符串常用方法详细整理js数组与字符串的相互转换方法js打开新窗口的2种方式js设置cookie、读取cookie、删除js保留两位小数方法总结js 将json字符串转换为json对象的jquery设置和获取select、checkbox、radijs中使用 after 伪类清除浮动实例js实现鼠标划过给div加透明度的方法js返回上一页并刷新的多种实现方法解决layui动态添加的元素click等事件触发javascript函数的4种调用方法详解微信小程序跳转到其他网页(外部链接)的实bootstrap模态框案例解析javascript 读后台cookie代码nodejs读取memcache示例分享
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved