bind,call,apply模拟实现
首先,三者第一个参数都为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
bind,call,apply模拟实现的更多相关文章
- 自己动手用原生实现 bind/call/apply
大家好!!!注册一年多的第一篇博客. 自我介绍: 本人非计算机专业出身,转行进入前端半年时间,写的东西可能观赏性不强,一起进步吧道友们... 接下来的一段时间, 我都会不定期整理自己理解的js知识点, ...
- bind、apply与call
bind.apply与call 先说观点:不论是bind.apply还是call,最大的好处就是代码复用. bind 在开发中,我们只有复用代码时,才会出现this指向需要改动的情况. 纵观bind的 ...
- Bind、Apply、Call三者的区别
1)bind与apply.call 的最大区别就是:bind不会立即调用,其他两个会立即调用 var fn = { _int: function(){return 3}, fun: function( ...
- 深入理解this和call、bind、apply对this的影响及用法
首先看一道网易的面试题: var a = { a:"haha", getA:function(){ console.log(this.a); } } var b = { a:&qu ...
- bind call apply 的区别和使用
bind call apply 的区别和使用:https://www.jianshu.com/p/015f9f15d6b3 在讲这个之前要理解一些概念,这些概念很重要,有人说过学会了javascrip ...
- 自己手动用原生实现bind/call/apply
自己手动用原生实现bind/call/apply:https://www.cnblogs.com/LHLVS/p/10595784.html
- 面试官:能解释一下javascript中bind、apply和call这三个函数的用法吗
一.前言 不知道大家还记不记得前几篇的文章:<面试官:能解释一下javascript中的this吗> 那今天这篇文章虽然是介绍javascript中bind.apply和call函数 ...
- 也谈如何实现bind、apply、call
也谈如何实现bind.apply.call 我们知道,JavaScript的bind.apply.call是三个非常重要的方法.bind可以返回固定this.固定参数的函数包装:apply和call可 ...
- javascript 面向对象学习(三)——this,bind、apply 和 call
this 是 js 里绕不开的话题,也是非常容易混淆的概念,今天试着把它理一理. this 在非严格模式下,总是指向一个对象,在严格模式下可以是任意值,本文仅考虑非严格模式.记住它总是指向一个对象对于 ...
- js修改函数内部的this指向(bind,call,apply)
js修改函数内部的this指向 在调用函数的时候偶尔在函数内部会使用到this,在使用this的时候发现并不是我们想要指向的对象.可以通过bind,call,apply来修改函数内部的this指向. ...
随机推荐
- 2020-07-11:session和cookie的区别是什么?
福哥答案2020-07-11: 1.保存位置:session服务端.cookie客户端.2.安全性:session相对安全,cookie相对不安全.3.存储类型:session能够存储任意的对象,co ...
- 利用遗传算法求解TSP问题
转载地址 https://blog.csdn.net/greedystar/article/details/80343841 目录 一.问题描述 二.算法描述 三.求解说明 四.参考资料 五.源代码 ...
- HTML实例-02-京东顶部导航条
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 题解 BZOJ4709
题目描述 一道简单DP优化调了好久qwq 首先分析题目,发现每次从一边取贝壳是完全没用的,此题本质就是将区间分成数个区间,使区间价值和最大. 可以发现一个性质,那就是最优解的每个区间的两端点一定相同且 ...
- 目录扫描、Nmap
一.基本定义 1.目录扫描: 扫描站点的目录,寻找敏感文件(目录名.探针文件.后台.robots.txt.备份文件等). 2.目录:站点结构,权限控制不严格. 3.探针文件:服务器配置信息,例:php ...
- Go:排序算法
一.冒泡排序 package main import "fmt" func BubbleSort(arr []int) { /* 思路:将大的元素一步一步"冒泡" ...
- 从零开始的SpringBoot项目 ( 一 ) Spring、SpringMVC和SpringBoot
要想开始一个SpringBoot项目 , 首先要知道SpringBoot是什么 , 可以做什么 , 再去研究怎么用 . 一.概念 1.Spring Spring是一个开源容器框架,可以接管web层,业 ...
- Pycharm2019.3永久激活
1. 下载破解补丁,https://pan.baidu.com/s/1mcQM8CLUnweY02ahKEr4PQ ,下载最新上传的压缩包 2. 将压缩包解压,里面有激活文件ACTIVATION_CO ...
- 面试:为了进阿里,死磕了ThreadLocal内存泄露原因
前言 在分析ThreadLocal导致的内存泄露前,需要普及了解一下内存泄露.强引用与弱引用以及GC回收机制,这样才能更好的分析为什么ThreadLocal会导致内存泄露呢?更重要的是知道该如何避免这 ...
- 《Head First 设计模式》:模板方法模式
正文 一.定义 模板方法模式在一个方法中定义一个算法的骨架,而将一些步骤延迟到子类中.模板方法使得子类可以在不改变算法结构的情况下,重新定义算法中的某些步骤. 要点: 模板方法定义了一个算法的步骤,每 ...