模拟实现call、apply
1. 知识点补充:
首先在模拟实现前,先Mark一些我之前不知道的知识:
a. eval(string)函数:可计算某个字符串,并执行其中的JavaScript代码
其中,string是必需传入的待计算或待执行的语句,并且必须是原始字符串的形式!
eval(string)相当于<script> string </script>
b. 类数组对象(Array-like Object)
类数组对象是一个对象,比如:arguments、DOM API返回的NodeList对象都属于类数组对象,具有指向对象元素的数组index下标和length属性,但是它们不能使用push/pop/shift/unshift等数组方法!
但是如何能将类数组转换为真正的数组呢?有如下方法:
- Array.prototype.slice.call( arguments ) // 在低版本IE下不支持
- [].slice.call( arguments ) // 等同于1
- let arr = Array.from( arguments ) // ES6,可将类数组对象和可遍历对象转为真正的数组
- let arr = [ ...arguments ]
以下例为例演示:
var foo = {
value: 1
}; function bar(name, age) {
console.log(this.value);
console.log(name)
console.log(age)
} bar.call(foo, 'ning', 20);
这里可以考虑将bar这个函数作为foo的一个方法,然后在外层执行这个函数,然后再删掉该函数即可!
2. call的模拟实现
Function.prototype.call2 = function (context) {
context.fn = this; // context是foo,this是bar也就是调用call的那个函数
context.fn();
delete context.fn;
} // 使用下例来验证call2是否可行
var foo = {
value: 1
}
function bar() {
console.log(this.value);
} bar.call2(foo);
content.fn = this;这句首先获取到了调用call的函数,本例这里也就是bar;
context.fn();即执行bar这个函数;
delete删掉该函数。
但是现在的模拟中有几个问题:
- 不能传入参数,因此我们将利用arguments,从Arguments对象中从第二个参数(因为第一个参数是this)开始取值,放到一个数组里,再把这个数组放到要执行的函数的参数里
- this参数传入null或者undefined时,我们需要将this指向window
- 当call2()内传的不是一个对象,而是一个基本数据类型时,如何处理?(在call实现时会自动调用Object()转换)
- 函数可以有返回值
所以我们得到以下call2()代码:
Function.prototype.call2 = function (context) {
context = context ? Object(context) : window;
context.fn = this; var arr = [];
for (var i = 1, len = arguments.length; i < len; i++) {
arr.push('arguments[' + i + ']');
} var result = eval('context.fn(' + arr + ')');
delete context.fn;
return result;
}
下面我们测试一下:
var value = 'global';
var foo = {
value: 1
}
function bar(name, age) {
console.log(this.value)
return {
value: this.value,
name: name,
age: age
}
} bar.call2(null) // global console.log(bar.call2(foo, 'ning', 20))
//
// {value: 1, name: "ning", age: 20}
说明两点:
- arr.push('arguments['+ i +']');这句得到的是(2) ["arguments[1]", "arguments[2]"]一个新数组,是我们想要的
- eval('context.fn('+ arr +')');这句中arr会自动调用arr.toString()得到一个字符串:arguments[1],arguments[2],然后进行字符串拼接
下面给出ES6版本的:
Function.prototype.call2 = function (context) {
context = context ? Object(context) : window;
context.fn = this; let arr = [...arguments].slice(1);
let result = context.fn(' + arr + '); delete context.fn;
return result;
}
3. apply的模拟实现:
Function.prototype.apply2 = function (context, arr) {
context = context ? Object(context) : window;
context.fn = this; var result = [];
// 没有arr参数直接执行
if (!arr) {
result = context.fn();
// 有arr参数则将参数拼接后执行
} else {
var args = [];
for (var i = 0; i < arr.length; i++) {
args.push('arr[' + i + ']')
}
result = eval('context.fn(' + args + ')')
} delete context.fn;
return result;
}
下面给出ES6版本的:
Function.prototype.apply2 = function (context, arr) {
context = context ? Object(context) : window;
context.fn = this; let result = [];
if (!arr) {
result = context.fn();
} else {
// ...arr的使用
result = context.fn(...arr)
} delete context.fn;
return result;
}
模拟实现call、apply的更多相关文章
- js 模拟call、apply、bind实现
1.模拟call实现 Function.prototype.myCall = function (context) { var context = context || window // 给 con ...
- JavaScript模拟call和apply的实现
参考: call和apply的模拟实现 1. call:调用一个对象的一个方法,用另一个对象替换当前对象.例如:B.call(A, args1,args2);即A对象调用B对象的方法. /*call( ...
- call、apply、bind的区别,模拟call、apply和bind的实现
bind:bind绑定完this的指向后会返回一个新的函数体,不会被立即调用 call&apply:绑定完this的指向后会立即调用 call与apply的区别: call:第 ...
- call, apply, bind 区别
#call, apply, bind 区别及模拟实现call apply bind 三者都可以用来改变this的指向,但是在用法上略有不同 首先说一下call和apply的区别 call和apply ...
- Vue.js组件之间的通信
导语:组件之间的关系不外乎两种, 父子组件和非父子组件,本文将对两类组件之间的通信方式进行详细阐述. 父子组件间的通信 通信方式1(单向绑定): Props down, Events up (建议使用 ...
- vue以及js的一些坑或常用技巧
判断空object Object.getOwnPropertyNames(obj).length === 0 模拟range Array.apply(null, Array(5)).map(funct ...
- 22 道高频 JavaScript 手写面试题及答案
实现防抖函数(debounce) 防抖函数原理:在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时. 那么与节流函数的区别直接看这个动画实现即可. 手写简化版: // 防抖函数 cons ...
- JS中this的指向问题&使用call或apply模拟new
this的指向由调用时决定而不是定义时决定,定义的方式: //直接定义在函数里 var a="window中的a"; var name="window"; fu ...
- JavaScript深入之call和apply的模拟实现
call 一句话介绍 call: call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法. 举个例子: var foo = { value: 1 }; func ...
- call和apply的模拟实现
call 一句话介绍 call: call() 方法在使用一个指定的 this 值和若干个指定的参数值的前提下调用某个函数或方法. 举个例子: var foo = { value: 1 }; func ...
随机推荐
- NX二次开发-UFUN圆弧矩阵标记、起始角和结束角(弧度测量)、圆弧中心坐标和圆弧半径UF_CURVE_ask_arc_data(边可以用)
1 NX11+VS2013 2 3 #include <uf.h> 4 #include <uf_ui.h> 5 #include <uf_modl.h> 6 #i ...
- D语言简介
D语言,一种通用计算机程序语言,威力强大.功能丰富,支持多种编程范式,例如面向对象.[1] D语言最初由Digital Mars公司就职的Walter Bright于2001年发布,意图改进C++语 ...
- python 使用abc实现接口类/虚类(2.2)
python 使用abc实现接口类/虚类 具体类 class BaseA: def run(self): print('base A running') class ChildA(BaseA): de ...
- Dll注入技术之注册表注入
DLL注入技术之REG注入 DLL注入技术指的是将一个DLL文件强行加载到EXE文件中,并成为EXE文件中的一部分,这样做的目的在于方便我们通过这个DLL读写EXE文件内存数据,(例如 HOOK EX ...
- Windows内存管理(3)--检查内存可用性,结构化异常处理 和 ASSERT
1. 检查内存可用性 在驱动程序开发中,对内存的操作要格外小心.如果某段内存是只读的,而驱动程序试图去写操作,会导致系统的崩溃. DDK提供了两个函数,帮助程序员在不知道某段内存是否可读写的 ...
- Java 网络编程(1):使用 NetworkInterface 获得本机在局域网内的 IP 地址
原文地址:https://segmentfault.com/a/1190000007462741 1.问题提出 在使用 Java 开发网络程序时,有时候我们需要知道本机在局域网中的 IP 地址.很常见 ...
- LeetCode刷题笔记-回溯法-组合总和问题
题目描述: <组合总和问题>给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. cand ...
- centOs 查看系统cpu使用率等--top
原文:centOs 查看系统cpu使用率等--top 在系统维护的过程中,随时可能有需要查看 CPU 使用率,并根据相应信息分析系统状况的需要.在 CentOS 中,可以通过 top 命令来查看 CP ...
- Ajax加载数据的使用
需求就是不能再进入页面时加载数据,只能在点击其中一个按钮时把数据加载呈现出来.具体效果如最下面的图. 1.前台页面 <h1 " onclick="GetData(1)&quo ...
- MAMP 安装 php 扩展
1.官网下载所对应的php 版本http://php.net/get/php-5.3.29.tar.gz/from/a/mirror 2.解压 找到需要的扩展目录 例如我要的是shmopcd ~/Do ...