奇妙JS代码系列call,apply,bind用处整理

Posted

    tags:

    篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了奇妙JS代码系列call,apply,bind用处整理相关的知识,希望对你有一定的参考价值。

    延续系列一:链接,此次主要整理JS里面很常见的三个函数call,apply,bind的妙用。(apply和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传入。

    以上是关于奇妙JS代码系列call,apply,bind用处整理的主要内容,如果未能解决你的问题,请参考以下文章

    javascript学习系列(20):数组中的bind,apply,call

    前端随心记---------call,bind,apply

    JS之call/apply/bind

    js学习总结----call和apply和bind的区别

    js中的call,apply,bind区别

    JS中的call,apply和bind及记忆方式