iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > html >原生js代码能不能实现call和bind
  • 190
分享到

原生js代码能不能实现call和bind

2024-04-02 19:04:59 190人浏览 安东尼
摘要

这篇文章给大家分享的是有关原生js代码能不能实现call和bind的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。js手动实现call和bind都是谎言网上有很多关于说自己实现ca

这篇文章给大家分享的是有关原生js代码能不能实现call和bind的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

js手动实现call和bind都是谎言

网上有很多关于说自己实现call和bind的原理的文章,然而call和bind的原理真如他们所说的那样吗?今天就让我来推翻这些所谓的”原理“,揭开谎言下的真相。

首先看看网上对call的实现:

// 手写 call
Function.prototype.mycall = function (context) {
  context = context || window;
  context.fn = this;
  const args = [...arguments].slice(1);
  const result = context.fn(...args);
  // 执行fn时上下文context已被修改,不是我们所期望的call 
  delete context.fn;
  return result;
}
function show() {
  console.log(this);
}
show.mycall({haha:122});

以上代码的执行结果是

原生js代码能不能实现call和bind

如你所见,这样实现的call并不是我们所期望的那样。

对比于函数自带的call:

show.call({haha:122})

其结果为

原生js代码能不能实现call和bind

分析其原因不难发现,根据函数mycall,执行context.fn(...args)之前修改了上下文context,所以执行fn时所使用的上下文是修改后的上下文,导致与预期结果相差甚远。

核心

而且,往更深的层次去思考,call绝不是这样(或类似这样)实现的,call是底层语言为浏览器封装好的函数,是绝对不能也没必要用js强行模仿的。

综上,js模仿call和bind绝对没有get到底层原理,这样的模仿只能用于娱乐而已,没有实际价值。bind和call类似,这里就不赘述了。

感谢各位的阅读!关于“原生js代码能不能实现call和bind”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

--结束END--

本文标题: 原生js代码能不能实现call和bind

本文链接: https://www.lsjlt.com/news/71049.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 原生js代码能不能实现call和bind
    这篇文章给大家分享的是有关原生js代码能不能实现call和bind的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。js手动实现call和bind都是谎言网上有很多关于说自己实现ca...
    99+
    2022-10-19
  • 原生js如何实现call,apply以及bind
    1、实现call 步骤: 将函数设为对象的属性; 指定this到函数,并传入给定参数执行函数; 执行之后删除这个函数; 如果不传入参数,默认指向w...
    99+
    2022-11-12
  • 使用JS简单实现apply、call和bind方法的实例代码
    目录1.方法介绍2.apply、call和bind方法的实现2.1.apply的实现2.2.call的实现2.3.bind的实现总结1.方法介绍 apply、call和bind都是系...
    99+
    2022-11-13
  • 原生Js实现的画廊功能
    目录第一种第二种   原生Js实现画廊功能,点击图片,在下方出现相应放大图片。给a标签绑定onclick点击事件。这里上方的小图和下方将要展示大图,都是同一张...
    99+
    2022-11-12
  • 原生js实现购物车逻辑和功能
    本文实例为大家分享了js实现购物车逻辑和功能的具体代码,供大家参考,具体内容如下 1、购物车的主体内容布局尽量用表格的布局模式 2、判断用户是否登录 代码如下,可以根据自己头部的布局...
    99+
    2022-11-12
  • js原生代码如何实现轮播图
    这篇文章主要介绍js原生代码如何实现轮播图,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、现在我们来看看它是什么样的效果,截一张图给大家看:二、无论我们做什么特效,都要记住一个原则...
    99+
    2022-10-19
  • 原生JS实现简单计算器功能
    本文实例为大家分享了JS实现简单计算器功能的具体代码,供大家参考,具体内容如下 使用html和css写出计算器的基本结构和样式,用原生JS实现计算器的加减乘除运算功能,只能计算简单的...
    99+
    2022-11-13
  • 原生js怎样实现倒计时功能
    这篇文章主要介绍原生js怎样实现倒计时功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!思路:(1)获取日期对象、现在距离1970年的毫秒数、2018年距离1970年的毫秒数、201...
    99+
    2022-10-19
  • 原生js怎么实现购物车功能
    本篇内容介绍了“原生js怎么实现购物车功能”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!* 实现购物车商品数量的加减,注意数量最少为1,数量...
    99+
    2023-06-30
  • 原生JS实现拖拽排序的示例代码
    目录HTML中的拖拽事件(drag & drop)Coding完整代码说到拖拽,应用场景不可谓不多。无论是打开电脑还是手机,第一眼望去的界面都是可拖拽的,靠拖拽实现...
    99+
    2022-12-08
    JS实现拖拽排序 JS拖拽排序 JS 排序
  • 原生js+cookie如何实现购物车功能
    这篇文章主要介绍原生js+cookie如何实现购物车功能,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体如下:这里使用js+cookie实现简单的购物车功能。首先是简单的HTML结...
    99+
    2022-10-19
  • 原生js如何实现无缝轮播功能
    小编给大家分享一下原生js如何实现无缝轮播功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!具体内容如下说明:这是一个使用原生js、es5语法写出的无缝轮播程序,...
    99+
    2023-06-15
  • 原生JS实现H5转盘游戏的示例代码
    目录1.基础的页面布局(index.html)1.1html布局1.2css布局(style.css)2.工具函数(用于调整概率)3.传参及接收值配置4.dom操作方法及具体逻辑处理...
    99+
    2022-11-13
  • 40行原生js代码实现前端简易路由
    目录前言路由到底是一个什么东西实现一个 hashRouterhistoryRoutermemoryRouter最后做个总结前言 在使用Vue或者是React 的路由的时候,不是很清楚...
    99+
    2022-11-13
  • 如何使用原生js实现倒计时功能
    这篇文章给大家分享的是有关如何使用原生js实现倒计时功能的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。<!DOCTYPE html><html&nbs...
    99+
    2022-10-19
  • 如何利用原生js实现选项卡功能
    这篇文章主要为大家展示了“如何利用原生js实现选项卡功能”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何利用原生js实现选项卡功能”这篇文章吧。效果图:代码如...
    99+
    2022-10-19
  • 原生JS怎么实现简单计算器功能
    本篇内容主要讲解“原生JS怎么实现简单计算器功能”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“原生JS怎么实现简单计算器功能”吧!使用html和css写出计算器的基本结构和样式,用原生JS实现计...
    99+
    2023-06-29
  • 基于原生JS实现分页效果的示例代码
    这个只是一个分页的demo,主要是思路整理(很久之前项目用的东西) 分页实现的效果 主要是 左侧上一页 右侧是下一页 中间显示主要是超过5个显示 省略号 然后是可配置选项 实现之后的...
    99+
    2022-11-13
  • 怎么用原生js代码实现前端简易路由
    这篇文章主要讲解了“怎么用原生js代码实现前端简易路由”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么用原生js代码实现前端简易路由”吧!路由到底是一个什么东西路由(routing)就是通...
    99+
    2023-06-30
  • 原生js实现简单滑动解锁功能 js实现滑动拼图解锁
    本文实例为大家分享了js实现简单滑动解锁功能以及滑动拼图解锁的具体代码,供大家参考,具体内容如下 简单实现滑动解锁,效果图是这样的 <!DOCTYPE html> &l...
    99+
    2022-11-13
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作