首先,三者第一个参数都为this指向

区别

bind返回的是一个函数体

call和apply会直接执行,但是call参数需要一个一个进行传递,apply的第二个参数是一个数组

实现

bind

简单实现

Function.prototype.myBind = function(context){
self = this; //保存this,即调用bind方法的目标函数
return function(){
return self.applay(context, [...arguments]);
};
};

考虑到函数柯里化的实现

Function.prototype.myBind = function(context){
// 使用闭包存下初始参数
var args = Array.prototype.slice.call(arguments, 1),
self = this;
return function() {
// 再次调用时
var innerArgs = Array.prototype.slice.call(arguments);
var finalArgs = args.concat(innerArgs);
return self.apply(context,finalArgs);
};
};

考虑构造函数的实现

Function.prototype.myBind = function(context){
// 判断是否为函数
if(typeof this !== 'function') {
throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
}
var args = Array.prototype.slice(arguments, 1);
self = this;
bound = function() {
var innerArgs = Array.prototype.slice.call(arguments);
var finalArgs = args.concat(innerArgs);
// 判断this,如果是,则传递this即实例化的对象。
return self.apply((this instanceof F ? this : context), finalArgs);
};
// 处理原型链
let F = function(){};
F.prototype = self.prototype;
bound.prototype = new F(); retrun bound;
};

call

思路

// 要实现这个效果
var foo ={
value:1
}
function bar(){
console.log(this.value)
}
bar.call(foo);// // 相当于做如下事情
var foo = {
value: 1,
bar: function() {
console.log(this.value)
}
};
foo.bar(); //

​实现

Function.Prototype.myCall = function(context) {
// this 参数可以传 null,当为 null 的时候,视为指向 window
var context = context || window;
context.fn = this;
// 对参数进行处理
var args = [];
for(var i = 1, len = arguments.length; i < len; i++) {
args.push(arguments[i]);
}
let result = arguments.length>0 ? context.fn(...args) : context.fn();
delete context.fn;
return result;
}

apply

Function.Prototype.myApply = function(context, arr) {
// this 参数可以传 null,当为 null 的时候,视为指向 window
var context = context || window;
context.fn = this;
let result = arr.length>0 ? context.fn(...arr) : context.fn();
delete context.fn;
return result;
}

参考自

MDN中对bind的实现

https://blog.csdn.net/weixin_34250709/article/details/92426126

https://zhuanlan.zhihu.com/p/48081913

bind,call,apply模拟实现的更多相关文章

  1. 自己动手用原生实现 bind/call/apply

    大家好!!!注册一年多的第一篇博客. 自我介绍: 本人非计算机专业出身,转行进入前端半年时间,写的东西可能观赏性不强,一起进步吧道友们... 接下来的一段时间, 我都会不定期整理自己理解的js知识点, ...

  2. bind、apply与call

    bind.apply与call 先说观点:不论是bind.apply还是call,最大的好处就是代码复用. bind 在开发中,我们只有复用代码时,才会出现this指向需要改动的情况. 纵观bind的 ...

  3. Bind、Apply、Call三者的区别

    1)bind与apply.call 的最大区别就是:bind不会立即调用,其他两个会立即调用 var fn = { _int: function(){return 3}, fun: function( ...

  4. 深入理解this和call、bind、apply对this的影响及用法

    首先看一道网易的面试题: var a = { a:"haha", getA:function(){ console.log(this.a); } } var b = { a:&qu ...

  5. bind call apply 的区别和使用

    bind call apply 的区别和使用:https://www.jianshu.com/p/015f9f15d6b3 在讲这个之前要理解一些概念,这些概念很重要,有人说过学会了javascrip ...

  6. 自己手动用原生实现bind/call/apply

    自己手动用原生实现bind/call/apply:https://www.cnblogs.com/LHLVS/p/10595784.html

  7. 面试官:能解释一下javascript中bind、apply和call这三个函数的用法吗

    一.前言    不知道大家还记不记得前几篇的文章:<面试官:能解释一下javascript中的this吗> 那今天这篇文章虽然是介绍javascript中bind.apply和call函数 ...

  8. 也谈如何实现bind、apply、call

    也谈如何实现bind.apply.call 我们知道,JavaScript的bind.apply.call是三个非常重要的方法.bind可以返回固定this.固定参数的函数包装:apply和call可 ...

  9. javascript 面向对象学习(三)——this,bind、apply 和 call

    this 是 js 里绕不开的话题,也是非常容易混淆的概念,今天试着把它理一理. this 在非严格模式下,总是指向一个对象,在严格模式下可以是任意值,本文仅考虑非严格模式.记住它总是指向一个对象对于 ...

  10. js修改函数内部的this指向(bind,call,apply)

    js修改函数内部的this指向 在调用函数的时候偶尔在函数内部会使用到this,在使用this的时候发现并不是我们想要指向的对象.可以通过bind,call,apply来修改函数内部的this指向. ...

随机推荐

  1. C#LeetCode刷题之#705-设计哈希集合​​​​​​​(Design HashSet)

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4114 访问. 不使用任何内建的哈希表库设计一个哈希集合 具体地说 ...

  2. 数值分析案例:Newton插值预测2019城市(Asian)温度、Crout求解城市等温性的因素系数

    数值分析案例:Newton插值预测2019城市(Asian)温度.Crout求解城市等温性的因素系数 文章目录 数值分析案例:Newton插值预测2019城市(Asian)温度.Crout求解城市等温 ...

  3. 虚拟化技术之kvm虚拟机创建工具qemu-kvm

    在前边的博客中我们介绍了如何创建kvm虚拟机,以及一些常用的工具的介绍和使用,今天我们来了解下kvm原始工具qemu-kvm:为什么说qemu-kvm是一个原始的工具呢,如果你用kvm虚拟机,心细的你 ...

  4. linux 修改 mac

    ifconfig eth0 hw ether fa::3d:c3:: 或 ip link set dev eth0 address fa::3d:c3::

  5. latex:公式的上下标

    1.行内公式的上下标 在行间公式中,例如\[\max_{i}\]的排版结果是 而在行内公式中,$max_{i}$的排版结果为 ,如果要使其仍在正下方,可插入字体尺寸档次命令 $\displaystyl ...

  6. 牛客网PAT-练兵场-挖掘机技术哪家强

    题目地址:https://www.nowcoder.com/pat/6/problem/4058 题解:用数组下标当学校编号.输入一次数据的时候,直接在相应数组下标位置累加内容,同时更新最大的总分的学 ...

  7. nodejs打包成桌面程序(exe)的进阶之路

    nodejs打包成桌面程序(exe)的进阶之路 node js bat 前端 计划任务 前言:最近的研究,请大佬们细品 第一篇 - 任务计划程序篇 说真的研究到将nodejs打包成可执行的exe文件是 ...

  8. 23种设计模式(C++)

    每一种都有对应理解的相关代码示例 → Git原码 一. GOF-23 模式分类 从目的来看 • 创建型(Creational)模式:将对象的部分创建工作延迟到子类或者其他对象,从而应对需求变化为对象创 ...

  9. 利用OpenCV进行H264视频编码的简易方式

    在Python下,利用pip安装预编译的opencv库,并实现h264格式的视频编码. 1. 安装OpenCV $ pip install opencv-python 建议在python虚拟环境下安装 ...

  10. 跟我一起学.NetCore之中间件(Middleware)简介和解析请求管道构建

    前言 中间件(Middleware)对于Asp.NetCore项目来说,不能说重要,而是不能缺少,因为Asp.NetCore的请求管道就是通过一系列的中间件组成的:在服务器接收到请求之后,请求会经过请 ...