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[, ...
随机推荐
- artDialog组件应用学习(三)
一.可以加载url的对话框 预览: 对话框编写代码 //弹出一个对话框,加载页面 function OpenBox(url, title, width, height) { seajs.use(['j ...
- Java内部类详解 2
Java内部类详解 说起内部类这个词,想必很多人都不陌生,但是又会觉得不熟悉.原因是平时编写代码时可能用到的场景不多,用得最多的是在有事件监听的情况下,并且即使用到也很少去总结内部类的用法.今天我们就 ...
- SVN服务器在Ubuntu16.04下搭建多版本库详细教程
1 介绍 Subversion是一个自由,开源的版本控制系统,这个版本库就像一个普通的文件服务器,不同的是,它可以记录每一次文件和目录的修改情况.这样就可 以很方面恢复到以前的版本,并可以查看数据 ...
- scss-!default默认变量
在变量赋值之前, 利用!default为变量指定默认值. 也就是说,如果在此之前变量已经赋值,那就不使用默认值,如果没有赋值,则使用默认值. 代码实例如下: $content: "antzo ...
- MockPlus的使用方法简介
不废话直接上图,不明白的留言.
- gamemakerstudio:加载精灵
如果精灵图片不是单一图片(拥有子图)可以称它为长条图,当gamemakerstudio加载这类精灵图片时,我们给图片名字命名为*_strip列数.*,这样当加载图片时gamemakerstudio会自 ...
- Python——追加学习笔记(二)
文件处理 # 文件内移动 seek()方法可以在文件中移动文件指针到不同的位置,offset字节代表相对于某个位置偏移量,默认为0,代表从文件开头算起,1代表从当前位置算起,2代表从文件末尾算起. s ...
- vue v-on 带参事件
1.js代码 var list=[ //定义一个数组 {title:} ] var box=new Vue({ el:'.box', data:{ list:list }, methods:{ //d ...
- zip4j之加压解压
最近看同事搞个文件打包,搞了大半天,还是有问题!嗨~~ 网上明明有现成的,偏偏要自己写! 下面是基于zip4j实现加压解决的简单工具类 package com.learcher.zip; import ...
- March 31 2017 Week 13 Friday
Sometimes, you think the sky is falling down, actually, that is just because you stand slanting. 有时候 ...