JS中call apply bind函数手写实现demo

下面是关于“JS中call apply bind函数手写实现demo”的攻略:

理解call、apply、bind函数

在手写这三个函数的过程中,我们必须先清楚地理解这三个函数的作用:

  • call函数:调用一个函数,将一个对象作为第一个参数,以及多个参数传入该函数。
  • apply函数:调用一个函数,将一个对象作为第一个参数,以及一个参数数组传入该函数。
  • bind函数:创建一个新函数,该函数与原始函数具有相同的函数体,但this值被永久地绑定到了bind函数的第一个参数中。

手写call函数

call函数的实现过程如下:

Function.prototype.myCall = function (context) {
  // 首先要获取调用call的函数,用this可以获取
  const calledFunc = this

  // context为传入的需要调用函数的对象
  context = context || window

  // 从arguments中获取到需要传递的参数
  const args = [...arguments].slice(1)

  // 将该函数作为传入的对象的方法调用,以改变函数的this指针
  context.fn = calledFunc

  // 最后把参数传入进去并执行
  const result = context.fn(...args)

  // 删除对象上的方法
  delete context.fn

  return result
}

示例:

function sayName() {
  console.log(this.name)
}

const person = { name: 'Lucas' }

sayName.myCall(person) // 'Lucas'

手写apply函数

apply函数的实现过程如下:

Function.prototype.myApply = function (context) {
  // 首先要获取调用apply的函数,用this可以获取
  const calledFunc = this

  // context为传入的需要调用函数的对象
  context = context || window

  // 从arguments中获取到需要传递的参数
  const args = arguments[1]

  // 将该函数作为传入的对象的方法调用,以改变函数的this指针
  context.fn = calledFunc

  // 最后把参数传入进去并执行
  const result = context.fn(...args)

  // 删除对象上的方法
  delete context.fn

  return result
}

示例:

function sayName(age) {
  console.log(`My name is ${this.name}, and I'm ${age} years old`)
}

const person = { name: 'Lucas' }

sayName.myApply(person, [25]) // 'My name is Lucas, and I'm 25 years old'

手写bind函数

bind函数的实现过程如下:

Function.prototype.myBind = function (context) {
  // 首先要获取调用bind的函数,用this可以获取
  const calledFunc = this

  // context为传入的需要调用函数的对象
  context = context || window

  // 从arguments中获取到需要传递的参数
  const args = [...arguments].slice(1)

  // 返回一个新的函数,此时该函数的this指向已经绑定到了context上
  return function () {
    const newArgs = args.concat([...arguments])
    return calledFunc.apply(context, newArgs)
  }
}

示例:

function sayName(age) {
  console.log(`My name is ${this.name}, and I'm ${age} years old`)
}

const person = { name: 'Lucas' }

const sayNameWithPerson = sayName.myBind(person)

sayNameWithPerson(25) // 'My name is Lucas, and I'm 25 years old'

总结

通过手写call、apply、bind这三个函数,可以更深刻地理解它们的作用,并且掌握函数指针和this的相关知识点。在实际编码中,也可以更加灵活地应用这些函数,让代码实现更加简洁高效。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS中call apply bind函数手写实现demo - Python技术站

(0)
上一篇 2023年6月10日
下一篇 2023年6月10日

相关文章

  • 详解前端安全之JavaScript防http劫持与XSS

    首先,需要明确的是前端安全是一个非常重要的主题。在网络环境日趋复杂的今天,安全问题已经不再是一个简单的概念,而是涉及到许多方面,包括网络攻击、数据泄露、信息窃取等。因此,在开发网站时,需要重视前端安全,采取相应的措施,以保障网站和用户的安全。 其中一项非常重要的前端安全技术就是防止http劫持和XSS攻击。http劫持指的是黑客通过某些手段,劫持用户的请求,…

    JavaScript 2023年6月10日
    00
  • 详解JavaScript实现动态的轮播图效果

    完整攻略:详解JavaScript实现动态的轮播图效果 背景介绍 轮播图是现代网站中常见的交互元素之一,作为一种动态的展示形式,可以吸引用户的注意力,增强用户体验。因此,对于前端开发人员来说,能够熟练掌握实现轮播图的技术是非常重要的。 本篇文章将会详细介绍如何使用JavaScript实现动态的轮播图效果,让读者掌握这项技术。 实现方法 步骤一:HTML结构 …

    JavaScript 2023年6月11日
    00
  • js对象的比较

    JS对象的比较主要是指对象之间的比较。在JS中,两个对象即使生成了相同的属性和方法,也不是同一个对象。所以需要进行对象的比较时,需要使用特定的方法进行比较,以下是详细的攻略。 对象比较的方法 对象比较主要涉及两种方法: 1. 双等号(==)比较 双等号比较只会比较两个对象的值,不会比较它们是否引用同一块内存。 示例代码: const obj1 = { nam…

    JavaScript 2023年5月27日
    00
  • javascript函数以及基础写法100多条实用整理

    JavaScript函数是一段可以被反复调用执行的代码,这种代码的主要作用是完成一个独立的功能。JavaScript函数具有很高的可重用性和灵活性,常被用来封装一些特定的处理逻辑以便于在需要的时候调用。接下来将为大家介绍JavaScript函数的基础写法,包括参数、返回值、作用域、闭包等内容。 Function基础写法 无参函数 无参函数即不接受任何参数的函…

    JavaScript 2023年5月18日
    00
  • js正则表达式验证表单【完整版】

    我来为您详细讲解“js正则表达式验证表单【完整版】”的完整攻略。 1. 概述 在网页表单的开发中,我们经常需要对用户输入的内容进行验证,这样才能确保数据的正确性和合法性。而对于一般的验证需求,正则表达式无疑是最为方便、高效的解决方案之一。所以,本篇文章将会介绍如何使用 JavaScript 正则表达式来验证表单,以及常见的表单验证规则。 2. 表单验证规则 …

    JavaScript 2023年6月10日
    00
  • javascript运动效果实例总结(放大缩小、滑动淡入、滚动)

    下面是 “javascript运动效果实例总结(放大缩小、滑动淡入、滚动)” 的详细攻略: 1. 放大缩小实例 该实例可以通过javascript实现图片的放大和缩小,具体思路如下: 1.1 给图片添加鼠标事件 在html中给需要放大缩小的图片添加mouseenter事件: <img src="picture.jpg" id=&qu…

    JavaScript 2023年6月11日
    00
  • JS中对象与字符串的互相转换详解

    下面是关于JS中对象与字符串的互相转换详解: 对象转字符串 在JS中,对象转成字符串通常使用JSON.stringify()函数,该函数将JavaScript对象转换为字符串,序列化过程中字符串中的对象、数组等会自动转成字符串。 以下是转换过程及示例代码: 基础用法 let obj = {name: ‘Mike’, age: 20, hobby: [‘rea…

    JavaScript 2023年5月27日
    00
  • javascript遍历json对象的key和任意js对象属性实例

    我们来详细讲解JavaScript如何遍历JSON对象的key和任意JS对象属性实例。 遍历JSON对象的key 在JavaScript中,我们可以使用for-in循环来遍历JSON对象的key。示例如下: const obj = {name: ‘张三’, age: 20, gender: ‘男’}; for (let key in obj) { conso…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部