js学习-apply,call,bind的实现
目录
apply
简单说:构建一个和调用aplly函数一样的字符串,用eval执行,完了之后删除掉,最后返回执行的结果。
Function.prototype.applyCopy = function() {
var obj = arguments[0];
obj.fn = this;
var args = arguments[1];
if(!args || args.length == 0) return obj.fn();
// obj.fn参数
var argsStr = '';
for(var i in args) {
argsStr += '"' + arguments[1][i] + '",';
}
var result = eval('obj.fn('+argsStr.replace(/,$/, '')+')');
delete obj.fn;
return result;
};
call
Function.prototype.callCopy = function() {
var obj = [].shift.applyCopy(arguments);
return this.applyCopy(obj, arguments);
}
bind
Function.prototype.bindCopy = function() {
var _this = this;
var obj = arguments[0];
return function() {
return _this.applyCopy(obj, arguments);
}
}
demo
var s = {
desc: 's.desc',
name: '你好',
}
var name = 'window';
var desc = 'window => this'
function sayHi(age, type) {
return {
name: this.name,
desc: this.desc,
age: age,
type: type
}
}
console.log(sayHi(12,'sayHi'));
console.log(sayHi.applyCopy(s, [12, 'applyCopy']));
console.log(sayHi.callCopy(s, 12, 'callCopy'));
console.log(sayHi.bindCopy(s)(12, 'bindCopy'));
总结:apply是基础,call,bind都是在apply的基础上实现的。
js学习-apply,call,bind的实现的更多相关文章
- JS之apply,call,bind区别
为了加深对基础知识的理解,今天再复习下js中的apply,call,bind的区别和用法.整理笔记的过程也是一个再次学习的过程. apply和call js中的调用apply和call方法可以改变某个 ...
- JS中用apply、bind实现为函数或者类传入动态个数的参数
为纪念10年没写blog,第一篇博文就以这样一个有趣的窍门开始吧 -___- 在ES5中,当我们调用一个函数时,如果要传入的参数是根据其他函数或条件判断生成的,也就是说不确定会传入多少个参数时,在不改 ...
- js学习进阶中-bind()方法
有次面试遇到的,也是没说清楚具体的作用,感觉自己现在还是没有深刻的理解! bind():绑定事件类型和处理函数到DOM element(父元素上) live():绑定事件到根节点上,(document ...
- 使用call、apply和bind解决js中烦人的this,事件绑定时的this和传参问题
1.什么是this 在JavaScript中this可以是全局对象.当前对象或者任意对象,这完全取决于函数的调用方式,this 绑定的对象即函数执行的上下文环境(context). 为了帮助理解,让我 ...
- JS核心系列:浅谈 call apply 与 bind
在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这 ...
- js里function的apply vs. bind vs. call
js里除了直接调用obj.func()之外,还提供了另外3种调用方式:apply.bind.call,都在function的原型里.这3种方法的异同在stackoverflow的这个答案里说的最清楚, ...
- JS中的call、apply、bind方法
JS中的call.apply.bind方法 一.call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]] ...
- js中call、apply、bind那些事
前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...
- 前端总结·基础篇·JS(三)arguments、callee、call、apply、bind及函数封装和构造函数
前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·JS(一)原型.原型链.构造函数和字符串(String) 前 ...
随机推荐
- YOLOV4各个创新功能模块技术分析(一)
YOLOV4各个创新功能模块技术分析(一) 简 介 yolov4论文:YOLOv4: Optimal Speed and Accuracy of Object Detection arxiv:http ...
- ieda引入jstl后报错解决办法
报错如下: HTTP Status 500 - The absolute uri: http://java.sun.com/jsp/jstl/core cannot be resolved in ei ...
- 端午总结Vue3中computed和watch的使用
1使用计算属性 computed 实现按钮是否禁用 我们在有些业务场景的时候,需要将按钮禁用. 这个时候,我们需要使用(disabled)属性来实现. disabled的值是true表示禁用.fals ...
- pytest命令行参数
1.-v:可以输出用例更加详细的执行信息,如下图 C:\Users\cale\checkapi\test_cc>pytest test_m1.py -v ==================== ...
- 老公 今晚还玩“丝袜哥”Swagger 么?
大家都知道Swagger是一个常用的Spring Boot接口文档生成工具,但是我们今天再介绍另外一个无需额外注解的 Spring Boot API文档生成神器,非常方便好用! JApiDocs是一个 ...
- Centos7搭建内网DNS服务器
一.配置阿里云yum源 执行脚本配置阿里云的yum源,已配置yum源的可以忽略 #!/bin/bash # ******************************************** ...
- Excel选择区域一次性替换小于200的数值
1.ctrl+F,点击"选项",在出来的扩展框选择"格式"后小三角,选择"从单元格选择格式": 2.选择要进行替换小于200的区域: . 3 ...
- 通过jquery创建节点以及节点属性处理
<!DOCTYPE html><html> <head> <meta http-equiv="Content-type" conte ...
- 10、nginx+uwsgi+django部署(动静分离)
10.1.说明: 1.介绍: 创建Django项目,可以通过 pyhon3 manage.py runserver 0.0.0.0:8080 & 命令更方便地调试程序,但是如果当一个项目完成了 ...
- 洞悉Redis技术内幕:缓存,数据结构,并发,集群与算法
"为什么这个功能用不了?" 程序员:"清一下缓存" 上篇洞悉系列文章给大家详细介绍了MySQL的存储内幕:洞悉MySQL底层架构:游走在缓冲与磁盘之间.既然聊过 ...