原生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});
以上代码的执行结果是
如你所见,这样实现的call并不是我们所期望的那样。
对比于函数自带的call:
show.call({haha:122})
其结果为
分析其原因不难发现,根据函数mycall,执行context.fn(...args)之前修改了上下文context,所以执行fn时所使用的上下文是修改后的上下文,导致与预期结果相差甚远。
核心
而且,往更深的层次去思考,call绝不是这样(或类似这样)实现的,call是底层语言为浏览器封装好的函数,是绝对不能也没必要用js强行模仿的。
综上,js模仿call和bind绝对没有get到底层原理,这样的模仿只能用于娱乐而已,没有实际价值。bind和call类似,这里就不赘述了。
相关推荐
-
Javascript中call,apply,bind方法的详解与总结
以下内容会分为如下小节: 1.call/apply/bind方法的来源 2.Function.prototype.call() 3.Function.prototype.apply() 3.1:找出数组中的最大数 3.2:将数组的空元素变为undefined 3.3:转换类似数组的对象 4.Function.prototype.bind() 5.绑定回调函数的对象 6.call,apply,bind方法的联系和区别 1.call/apply/bind方法的来源 首先,在使用call,apply,
-
跟我学习javascript的call(),apply(),bind()与回调
一.call(),apply(),bind()方法 JavaScript 中通过call或者apply用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象.简单的说就是改变函数执行的上下文,这是最基本的用法.两个方法基本区别在于传参不同. call(obj,arg1,arg2,arg3); call第一个参数传对象,可以是null.参数以逗号分开进行传值,参数可以是任何类型. apply(obj,[arg1,arg2,arg3]); appl
-
js apply/call/caller/callee/bind使用方法与区别分析
一.call 方法 调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即改变对象的this指向的内容). Js代码 call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 参数 thisObj 可选项.将被用作当前对象的对象. arg1, arg2, , argN 可选项.将被传递方法参数序列. 说明 call 方法可以用来代替另一个对象调用一个方法.call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对
-
详解JS中的this、apply、call、bind(经典面试题)
这又是一个面试经典问题~/(ㄒoㄒ)/~~也是 ES5中众多坑中的一个,在 ES6 中可能会极大避免 this 产生的错误,但是为了一些老代码的维护,最好还是了解一下 this 的指向和 call.apply.bind 三者的区别. this 的指向 在 ES5 中,其实 this 的指向,始终坚持一个原理:this 永远指向最后调用它的那个对象,来,跟着我朗读三遍:this 永远指向最后调用它的那个对象,this 永远指向最后调用它的那个对象,this 永远指向最后调用它的那个对象.记住这句话
-
JS中改变this指向的方法(call和apply、bind)
this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } function Child(age){ Parent.call(this,age);
-
原生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 = [...arg
-
原生js如何实现call,apply以及bind
1.实现call 步骤: 将函数设为对象的属性: 指定this到函数,并传入给定参数执行函数: 执行之后删除这个函数: 如果不传入参数,默认指向window: Function.prototype.mycall = function (context, ...args) { //判断是否为函数,如果不是函数,则报错 if (typeof this !== "function") { throw new Error("不是函数"); } context = conte
-
40行原生js代码实现前端简易路由
目录 前言 路由到底是一个什么东西? 实现一个 hashRouter historyRouter memoryRouter 最后做个总结 前言 在使用Vue或者是React 的路由的时候,不是很清楚他们的思路,导致在理解这些思想上出现了很多问题,于是自己实现了一个简易的原生js实现的前端路由,并整理了一下前端会遇到的集中路由模式和区别, 来帮助学习路由 路由到底是一个什么东西? 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动.路由发生在OSI网络参考模型中的第三层即网
-
原生js代码实现图片放大境效果
今天我给大家分享一下自己用js写的一个图片放大器效果,我做了两种效果的放大,其实它们的原理都差不多,都是采用了两张图片给两张图片设定相应的尺寸,最后显示在不同位置,最终实现放大效果. 第一种是我仿照淘宝购物页面的一个放大镜效果,当鼠标移动到商品图片上时,图片上会出现一个矩形区域,而这个区域就是你要放大的区域,然后商品图片的右侧会出现一个放大后的商品图片.这种放大方式只需要你计算好放大的比例,然后通过修改放大区域的scrollLeft和scrollTop值实现相应的放大效果. <!DOCTYPE
-
原生JS实现手动轮播图效果实例代码
手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一种轮播方式,既能左右翻页,还能通过悬浮按钮,快速预览图片,所以今天就给大家写一个原生js手动轮播图. 一,利用JavaScript制作手动轮播图,首先排版. 引入默认样式表(可以手写): <link rel="stylesheet" href="css/Default st
-
原生JS版和jquery版实现checkbox的全选/全不选/点选/行内点选(Mr.Think)
日常项目中, 对于列表类文章或数据, 大概都会用到checkbox的全选或全不选的功能, 以前的项目中也写过checkbox的选择js, 但都没有整理过. 正好前几天一个兄弟遇到了这个问题, 索性, 我花了点时间, 用原生JS与jQuery分别写了一个版本, 考虑到使用时灵活性问题, 未封装, 需要的童鞋使用时自行改下相关参数. 功能介绍点此查看DEMO演示 1. 全选/全不选 选框一体实现, 即列表中选框的状态与全选/全不选框前的选框状态一致; 2. 自动更改 全选/全不选 选框的状态, 即列
-
原生JS实现隐藏显示图片 JS实现点击切换图片效果
今天要说的内容,看标题就都能知道了!所有知识点一览无遗啊!咱们今天的东西,是纯纯的原生JS代码, 我先说一下要求, 1.有两个按钮,内容为显示,和换, 2.当点击显示的时候,按钮文字变成隐藏,同时图片显示出来,同理,当点击隐藏的时候,按钮文字变成显示,图片隐藏起来 3.当点击换的时候,图片会变成另外一张,当再次点击的时候,图片又会变回来, 4.当图片隐藏的时候,图片不可变换 这就是要求,下面来看代码: <!DOCTYPE html> <html> <head> <
-
原生JS实现美图瀑布流布局赏析
自pinterest网站爆红以来,国内一度掀起"仿PIN"狂潮,诸如花瓣.蘑菇街等等.正是如此,"瀑布流"式布局受到广大网民的青睐.众多知名JS库,也相继出现"瀑布流"布局插件,譬如jQuery的Masonry插件.KISSY的waterfall插件等.今天闲来无聊,我也自己动手弄了段原生JS代码,实现了简单的"瀑布流"布局效果,当然肯定不能和以上那些优秀插件相提并论,有兴趣的朋友,可以去看看,希望能带给你或多或少的收获. 1
-
原始的js代码和jquery对比体会
Even a task as simple as this can be complicated without jQuery at our disposal. In plain JavaScript, we could add the highlightedclass as shown in the following code snippet: 复制代码 代码如下: window.onload = function() { var divs = document.getElementsByT
-
原生js实现抽奖小游戏
这个小游戏可以设置为抽奖小游戏,也可以设置为随机点名器,这个软件实现可以多次获取同一个元素的 1.HTML结构代码如下: <div class="wrapper"> <ul class="box"></ul> <button class="start">开始点名</button> <button class="stop">停止</button>
随机推荐
- jquery live()重复绑定的解决方法介绍
- 详解angularJs中自定义directive的数据交互
- php中使用exec,system等函数调用系统命令的方法(不建议使用,可导致安全问题)
- 朴素贝叶斯算法的python实现方法
- Python实现针对含中文字符串的截取功能示例
- mysql常见问题解决第1/2页
- 微信小程序 页面之间传参实例详解
- SQLServer日志清空语句(sql2000,sql2005,sql2008)
- ubuntu13.10编译安装mono环境(一)
- JavaScript取得WEB安全颜色列表的方法
- Jquery实现自定义tooltip示例代码
- Java pdu短信解码全面解析
- Linux下虚拟域名的实现(2)
- php简单的分页程序第1/5页
- 快速了解Java中NIO核心组件
- 小程序实现授权登陆的解决方案
- Spring中的InitializingBean接口的使用
- iOS下拉、上拉刷新控件的封装
- Android实现apk插件方式换肤的实例讲解
- 快速查找Python安装路径方法