理解 Array.prototype.slice.apply
1. 首先,我们都理解在js中改变this引用有三种方法,call(), apply(), bind();
2. bind方法是改变函数内this引用,简单不再描述;
3. 至于 call() 和 apply() 两个方法,区别在于,前者是不定长的入参,后者是一个数组;下边重点说apply方法使用;
原理:
我们知道js中存在一种类数组对象,比如 {0:1,length:1}
或者 DOM 对象,或者 arguments 对象;
数组只是一种特殊的对象,数组的特殊性体现在,它的键默认是按次序排列的整数(0,1,2...),所以数组不用为每个元素指定键名,而对象的每个成员都必须指定键名。
所以 JavaScript中的数组也可以看成是这样的对象
var array = [1, 2, 3];
var obj = {0: 1,1: 2,2: 3,length:3}
注意了,这个length属性很重要,有了length就可以像数组一样遍历这个对象了。
再来实现一个简单的slice方法,
function slice(start, end) {var array = [];start = start ? start : 0;end = end ? end : this.length;for (var i = start, j = 0; i < end; i++, j++) {array[j] = this[i];}return array;
}
举例:Array.prototype.slice.apply({0:1,length:1});
通过apply,将slice方法中的this指向该对象,遍历生成新的数组对象。
注意点:
1. 使用apply 时要注意:apply或call 只是切换了函数内部 this 的调用,但是执行的方法依然是原始对象上的方法, 即使你在 Array.prototype.slice.call(obj)的 obj 上 覆盖了slice 方法 ,依然会执行 Array 上的 slice 方法;
2. 由于apply方法(或者call方法)也可以绑定函数执行时所在的对象,但是会立即执行函数,因此不得不把绑定语句写在一个函数体内。建议使用函数改变this指向时使用 bind 方法。
3.
bind方法每运行一次,就返回一个新函数,这会产生一些问题。比如,监听事件的时候,不能写成下面这样。
element.addEventListener('click', o.m.bind(o));
上面代码表示,click事件绑定bind方法生成的一个匿名函数。这样会导致无法取消绑定,所以,下面的代码是无效的。
element.removeEventListener('click', o.m.bind(o));
正确的方法是写成下面这样:
var listener = o.m.bind(o);
element.addEventListener('click', listener);
// ...
element.removeEventListener('click', listener);
理解 Array.prototype.slice.apply相关推荐
- [转] 理解 JavaScript 中的 Array.prototype.slice.apply(arguments)
假如你是一个 JavaScript 开发者,你可能见到过 Array.prototype.slice.apply(arguments) 这样的用法,然后你会问,这么写是什么意思呢? 这个语法其实不难理 ...
- Array.prototype.slice.apply(arguments)和[].slice.apply(arguments)解析
我们知道,函数内部 arguments 是一个类数组对象,不是真正的数组,因此也无法使用数组的各种方法.想详细了解 argument 对象可以前往函数中的 arguments. (function f ...
- js Array.prototype.slice.call(arguments,0) 理解
Array.prototype.slice.call(arguments,0) 经常会看到这段代码用来处理函数的参数 网上很多复制粘帖说:Array.prototype.slice.call(argu ...
- Array.prototype.slice.call()方法详解
在很多时候经常看到Array.prototype.slice.call()方法,比如Array.prototype.slice.call(arguments),下面讲一下其原理: 1.基本讲解 1.在 ...
- 详解 Array.prototype.slice.call(arguments)
首先,slice有两个用法,一个是String.slice,一个是Array.slice,第一个返回的是字符串,第二个返回的是数组 在这里我们看第二个方法 1.在JS里Array是一个类 slice是 ...
- Array.prototype.slice.call(arguments)
Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组,除了IE下的节点集合(因为ie下的dom对象是以com对象的形式实现的,js对象与co ...
- Array.prototype.slice.call 将伪数组转成真数组的原理是什么?
好久没上SF,昨天上来看到一个问题,引起了我的兴趣.一番探索和研究后,有了此篇文章,也算是对该问题的解答. let pretendArr = {0:0,1:1,2:2,length:3}; [].sl ...
- Array.prototype.slice Array.prototype.splice 用法阐述
目的 对于这两个数组操作接口,由于不理解, 往往被误用, 或者不知道如何使用.本文尝试给出容易理解的阐述. 数组 什么是数组? 数组是一个基本的数据结构, 是一个在内存中依照线性方式组织元素的方式, ...
- Array.prototype.slice.call()如何工作?
本文翻译自:how does Array.prototype.slice.call() work? 我知道它用于使参数成为一个真正的数组,但我不明白使用Array.prototype.slice.ca ...
最新文章
- Redis 的机制为什么不会产生 ABA 问题
- mybatis insert 返回主键_面试准备季——MyBatis 面试专题(含答案)
- 日志模板html源码,HTML红色欧美形式教堂动态日志网页模板代码
- 神策数据入选 Facebook 全球合作计划,助力出海客户拥抱全球化广告生态
- 如何检查防火墙引起的端口不通
- 微服务架构下 CI/CD 如何落地
- commons-lang的FastDateFormat性能测试
- 容器的主要目的是什么,Wise2C睿云智合的实战
- ACP 学习-07-CDN
- 什么是JSONP及其实现原理
- H264解码之PES流解析
- Pajek常用方法保姆级操作指南——社会网络分析
- 本体技术视点 | 为什么 BIP - 340 选择引入 Schnorr 签名算法?
- css中找不到bordercolor,CSS里bordercolor要怎样使用
- 三维图像专业处理软件Dragonfly的快捷键设置
- 恒指赵鑫:8.7恒指德指喊单记录与晚盘前瞻
- Redis有效时间设置及时间过期处理
- 三年白干!程序员因违反《竞业协议》赔偿腾讯 97.6 万元,返还 15.8 万元
- git合并分支相关操作
- About the ball Technical support
热门文章
- JavaSE Day14 异常 泛型
- JavaScript语言精粹-毒瘤、糟粕(应对)
- 个人永久性免费-Excel催化剂功能第55波-Excel批注相关的批量删除作者、提取所有批注信息等...
- 基于元路径的利用多级社会背景信息的虚假新闻检测
- 理解Sharding jdbc原理,看这一篇就够了
- numpy.corrcoef()函数讲解
- 区块链软件公司:五大行落地的难题在哪
- 首发!最详细慧联TWS106-A6蓝牙耳机对比洛达1562A评测
- Flink(十):TaskManager 内存简介
- 2019高教社杯全国大学生数学建模竞赛论文展示