JS apply 和 call 的实现
很早之前的一篇博客写了bind的实现,是基于apply的,感兴趣的朋友看完这篇文章可以接着看看bind的实现。
apply 和 call 主要就是传参的区别。这里就不多说了,直接看代码。
//call 实现
Function.prototype.myCall = function(context) { context.fn = this var args = [...arguments].slice(1) var result = context.fn(...args) delete context.fn return result
}
实例
var obj = {
name: 'hx'
} function foo(sex, age) {
console.log(sex + ' ' + this.name + ' ' + age);
} foo.myCall(obj, 'boy', '25');// boy hx 25
实现原理:其实就是把fn放在obj下面执行(后面得把obj.fn从obj上删除了,保持obj的孑然之身嘛!),context.fn = this,obj这个对象就不止name属性了吧,多了fn属性,就是函数 foo。然后context.fn()执行的时候,由于fn是context也就 是obj调用的,那么在foo内部执行的时候, this.name就会找到obj的name,变相达成了实现this指向的更改或者说是其他对象的劫持。
如果上面关于context.fn还不明白的话,那看下面这个
var a = {
b:'11',
c:function () {
console.log(this,this.b)
}
}
a.c() // 11
接着,apply跟call就是在参数arguments上的处理有一点区别而已
Function.prototype.myApply = function(context) { var context = context || window context.fn = this var result; // 需要判断是否存储第二个参数,如果存在,就将第二个参数展开 if(arguments[1]) {
result = context.fn(...arguments[1])
} else{
result = context.fn()
} delete context.fn return result
}
传送门:bind的实现
JS apply 和 call 的实现的更多相关文章
- 由js apply与call方法想到的js数据类型(原始类型和引用类型)
原文地址:由js apply与call方法想到的js数据类型(原始类型和引用类型) js的call方法与apply方法的区别在于第二个参数的不同,他们都有2个参数,第一个为对象(即需要用对象a继承b, ...
- [荐]Js apply()和call()方法详解 - http://www.w3cfuns.com/article-5596443-1-1.html
本帖最后由 默默DE人生 于 2013-3-19 13:22 编辑 Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文 ...
- Js apply 方法 详解
Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
- Js apply() call()使用详解
Js apply方法详解我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里 ...
- Js apply 方法 具体解释
Js apply方法具体解释 我在一開始看到javascript的函数apply和call时,很的模糊,看也看不懂,近期在网上看到一些文章对apply方法和call的一些演示样例,总算是看的有点眉目了 ...
- Js apply call方法详解
Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
- Js apply()使用详解
Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
- Js apply方法详解,及其apply()方法的妙用
Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...
- Js apply方法与call方法详解 附ES6新写法
我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...
- js apply/call/caller/callee/bind使用方法与区别分析
一.call 方法 调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即改变对象的this指向的内容). Js代码 call([thisObj[,arg1[, arg2[, ...
随机推荐
- C++里将string类字符串(utf-8编码)分解成单个字(可中英混输)
最近在建词典,使用Trie字典树,需要把字符串分解成单个字.由于传入的字符串中可能包含中文或者英文,它们的字节数并不相同.一开始天真地认为中文就是两个字节,于是很happy地直接判断当前位置的字符的A ...
- JavaScirpt(JS)——BOM浏览器对象模型
一.BOM概念 BOM(Browser Object Model)即浏览器对象模型.可以对浏览器窗口进行访问和操作.使用 BOM,开发者可以移动窗口.改变状态栏中的文本以及执行其他与页面内容不直接相关 ...
- The twentyth day
10th Dec 2018 Cause It's hard for me to lose in my life I've found 因为失去你是一种煎熬 Only time will tell a ...
- ie7下属性书写不规范造成的easyui 弹窗布局紊乱
(一)在ie7下 弹窗只是普通页面 (二)控制台报错 (三)原因: (四)解决 去掉 data-options 属性里的 , 就可以了
- 多线程(二)~Thread类相关的API介绍
一.线程安全问题: 当我们使用多个线程操作统一方法内的局部变量的时候,每个局部变量在当前线程里都有自己的副本,这种情况是不会出现线程安全问题的.当我们两个线程同时操作全局变量的时候,有可能 ...
- Informatica学习笔记
Informatica学习笔记1:UPDATE AS INSERT 问:要求实现每天抽取数据,而且是如果有改变才抽取更新,没有就不更新,因为源表中有最后修改时间的字段,我让它 和SESSION上次运行 ...
- jmeter中CSV Data Set Config各项说明
Config the CSV Data Source: 1)Filename:csv文件的名称(包括绝对路径,当csv文件在bin目录下时,只需给出文件名即可) 2)File encoding:csv ...
- 怎样下载YouTube播放列表视频
YouTube上面的视频种类丰富多彩,要是你想利用上面的资源来学习的话,足够你钻研很长时间了.如果你想在YouTube上面学习一门教程,比如Python,通常这些内容一个视频肯定装不下,会分为好多个视 ...
- LeetCode: Recover Binary Search Tree [099]
[题目] Two elements of a binary search tree (BST) are swapped by mistake. Recover the tree without cha ...
- 《编程导论(Java)·9.3.1回调·3》回调的实现
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/yqj2065/article/details/31441221 接<9.3.1Java回调 · ...