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[, ...
随机推荐
- 多线程TCP的socket通信
应用多线程来实现服务器与多客户端之间的通信. 基本步骤: 1.服务器端创建ServerSocket,循环调用accept()等待客户端的连接 2.客户端创建一个socket并请求和服务器端的连接 3. ...
- TypeScript 入门笔记
1.原始数据类型 JavaScript 的类型分为两种:原始数据类型和对象数据类型.原始数据类型包括布尔值.数值.字符串.null.undefined 以及 ES6 中的 Symbol. 前五种数据类 ...
- html5 填表 表单 form label input button legend fieldset
<form>本身没有什么意义, 但是某些依赖form的标签元素一旦没有了form就不能生效. 所以form是提供一个定义环境给form的插件元素去生效的. 1.method 属性pos ...
- 为mongodb添加账号
进入切换到某一个数据库,我这里是位每个模块分配一个DataBase use 0 执行添加账号命令 db.createUser( { user: "*****", pwd: &quo ...
- Strom入门
Worker.Executor.Task详解: Storm在集群上运行一个Topology时,主要通过以下3个实体来完成Topology的执行工作:1. Worker Process(工作进程)——S ...
- LDA概率图模型之贝叶斯理解
贝叶斯.概率分布与机器学习 转自:http://www.cnblogs.com/LeftNotEasy/archive/2010/09/27/1837163.html 本文由LeftNotEasy原 ...
- 模拟Spring框架
BeanFactory package com.bjsxt.spring; public interface BeanFactory { public Object getBean(String na ...
- c#中 定时器周期执行某事件 以及,重置 定时器重新计时的方法
static void Main(string[] args) { System.Timers.Timer timer = new System.Timers.Timer(); timer.Enabl ...
- Selenium2学习(十八)-- js处理内嵌div滚动条
前言 前面有篇专门用js解决了浏览器滚动条的问题,生活总是多姿多彩,有的滚动条就在页面上,这时候又得仰仗js大哥来解决啦. 一.内嵌滚动条 1.下面这张图就是内嵌div带有滚动条的样子,记住它的长相. ...
- KMP算法的工作流程介绍
最近又想起了KMP算法,原来一直没搞明白工作原理,现在总算是开点窍了,推荐大家看这篇文章,写的很简单易懂 推荐理由:简单明了,是我看过介绍KMP算法流程的所有文章中,最易懂的一篇(这篇文章仅仅是介绍了 ...