首先,三者第一个参数都为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. 2020-07-11:session和cookie的区别是什么?

    福哥答案2020-07-11: 1.保存位置:session服务端.cookie客户端.2.安全性:session相对安全,cookie相对不安全.3.存储类型:session能够存储任意的对象,co ...

  2. 利用遗传算法求解TSP问题

    转载地址 https://blog.csdn.net/greedystar/article/details/80343841 目录 一.问题描述 二.算法描述 三.求解说明 四.参考资料 五.源代码 ...

  3. HTML实例-02-京东顶部导航条

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. 题解 BZOJ4709

    题目描述 一道简单DP优化调了好久qwq 首先分析题目,发现每次从一边取贝壳是完全没用的,此题本质就是将区间分成数个区间,使区间价值和最大. 可以发现一个性质,那就是最优解的每个区间的两端点一定相同且 ...

  5. 目录扫描、Nmap

    一.基本定义 1.目录扫描: 扫描站点的目录,寻找敏感文件(目录名.探针文件.后台.robots.txt.备份文件等). 2.目录:站点结构,权限控制不严格. 3.探针文件:服务器配置信息,例:php ...

  6. Go:排序算法

    一.冒泡排序 package main import "fmt" func BubbleSort(arr []int) { /* 思路:将大的元素一步一步"冒泡" ...

  7. 从零开始的SpringBoot项目 ( 一 ) Spring、SpringMVC和SpringBoot

    要想开始一个SpringBoot项目 , 首先要知道SpringBoot是什么 , 可以做什么 , 再去研究怎么用 . 一.概念 1.Spring Spring是一个开源容器框架,可以接管web层,业 ...

  8. Pycharm2019.3永久激活

    1. 下载破解补丁,https://pan.baidu.com/s/1mcQM8CLUnweY02ahKEr4PQ ,下载最新上传的压缩包 2. 将压缩包解压,里面有激活文件ACTIVATION_CO ...

  9. 面试:为了进阿里,死磕了ThreadLocal内存泄露原因

    前言 在分析ThreadLocal导致的内存泄露前,需要普及了解一下内存泄露.强引用与弱引用以及GC回收机制,这样才能更好的分析为什么ThreadLocal会导致内存泄露呢?更重要的是知道该如何避免这 ...

  10. 《Head First 设计模式》:模板方法模式

    正文 一.定义 模板方法模式在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以在不改变算法结构的情况下,重新定义算法中的某些步骤. 要点: 模板方法定义了一个算法的步骤,每 ...