奇妙JS代码系列(二)call,apply,bind用处整理
2018-02-17 16:57
435 查看
延续系列一:链接,此次主要整理JS里面很常见的三个函数call,apply,bind的妙用。(apply和call差不多,只是参数的区别)(下面有些这三个可能只是辅助,但是只要用到,我就在这里整理)
但是在es5,我们使用Function.prototype.apply(null,数组名),
es6:
1. 具有length属性
2. 按索引方式存储数据
3. 不具有数组的push,pop等方法 如
function内的arguments
document.forms,Form.elements,Select.options,document.getElementsByName() ,document.getElementsByTagName(),childNodes/children 等方式获取的集合(HTMLCollection,NodeList)等。
特殊写法的对象 :
但是从本质上来分辨伪数组的话:
如果一个数组的 proto 直接或间接指向 Array.prototye(用到了数组的共用属性),那么就是真数组
如果一个数组的 proto 没有直接或间接指向 Array.prototye,那么就是伪数组。
将伪数组转换成数组的方式:
使用Array的原型对象中的的方法slice(),用Function.prototype.call传入。
1.类型检测
上一篇最后一个已经讲到,Object.prototype.toString.call()。犹豫上一篇说了,这里就不多说了。2.解参,等同于ES6中的…扩展运算符
es6中提出了一种很方便解构字符串数组的运算符,这提供了一种简便机制,可以将任何部署了 Iterator 接口的数据结构,转为数组。只要某个数据结构部署了 Iterator 接口,就可以对它使用扩展运算符,将其转为数组。但是在es5,我们使用Function.prototype.apply(null,数组名),
function myFunction(x, y, z) { } var args = [0, 1, 2]; myFunction.apply(null, args);
es6:
function myFunction(x, y, z) { } var args = [0, 1, 2]; myFunction(...args);
3.转换伪数组
伪数组的定义:1. 具有length属性
2. 按索引方式存储数据
3. 不具有数组的push,pop等方法 如
function内的arguments
document.forms,Form.elements,Select.options,document.getElementsByName() ,document.getElementsByTagName(),childNodes/children 等方式获取的集合(HTMLCollection,NodeList)等。
特殊写法的对象 :
var obj={}; obj[0] = "1"; obj[1] = "2"; obj[2] = "3"; obj.length = 3;
但是从本质上来分辨伪数组的话:
如果一个数组的 proto 直接或间接指向 Array.prototye(用到了数组的共用属性),那么就是真数组
如果一个数组的 proto 没有直接或间接指向 Array.prototye,那么就是伪数组。
将伪数组转换成数组的方式:
Array.prototype.slice.call(obj,0);
使用Array的原型对象中的的方法slice(),用Function.prototype.call传入。
相关文章推荐
- 前端知识点整理系列(二)—— apply() call() bind()
- JavaScript 上下文环境和作用域,以及 call、apply 和 bind【转载+翻译+整理】
- js中apply、call和bind的区别
- javascript中apply、call和bind的区别
- apply、call和bind的区别
- js笔记——call,apply,bind使用笔记
- JavaScript中的call、apply、bind方法的区别
- js中call()、apply()、bind()方法的区别
- javascript中的作用域 (apply、call、.bind)
- bind,apply,call的区别
- call、apply、bind的区别
- 浅谈javascript中的call、apply、bind
- 浅谈javascript中call()、apply()、bind()的用法
- JavaScript方法call,apply,caller,callee,bind的使用详解及区别
- js apply/call/caller/callee/bind使用方法与区别分析
- call()、apply()、bind()
- js apply/call/caller/callee/bind使用方法与区别分析
- JavaScript中call,apply,bind方法的总结。
- bind,call,apply/setTimeout, setInterval传递参数和取消
- 浅谈JavaScript的bind()、apply()、call()