• [].slice.call(arguments)


    目录

    前言

    解析

    【】创建数组

    slice截取数组

    call改变this

     arguments类数组

    总结


    前言

    这段代码的意思是能够将具有length属性的arguments转换为数组

    解析

    【】创建数组

    [] 数组,意思是创建一个空的数组对象

    slice截取数组

    slice()通过索引位置获取新的数组,该方法不会修改原数组,只是返回一个新的子数组。

    • 作用:从原有的数组中选中特定的内容
    • 参数:slice(n,m):选中从索引n(包含n)开始---索引m的项(不包含m)
    • 返回值:返回值是一个数组,返回的每一项是复制的项
    • 是否改变原数组:不改变
    1. 1:获取仅包含最后一个元素的子数组
    2. var arr=[1,2,3,4,5];
    3. arr.slice(-1);//[5]
    4. 2:获取不包含最后一个元素的子数组
    5. var arr=[1,2,3,4,5];
    6. arr.slice(0, -1);//[1,2,3,4]
    7. 3:获取包含 从第二个元素开始的所有元素的子数组
    8. var arr=[1,2,3,4,5];
    9. arr.slice(1);//[2,3,4,5]

    slice底层实现就是使用循环实现的

    1. var arr = [];
    2. let arrayLike={
    3. 0:'a',
    4. 1:'b',
    5. 2:'c',
    6. length:3
    7. }
    8. for (var i = 0; i < arrayLike.length; i++) {
    9. arr.push(arrayLike[i]);
    10. }
    11. console.log('原理=>',arr);
    12. //等价写法
    13. console.log('快捷=>',[].slice.call(arrayLike));

    call改变this

    在JavaScript中,每个函数对象都带有call()和apply()方法,即Function.prototype.call()和Function.prototype.apply(),这两个方法都是挂载在原型上的。

    call() 方法使用一个指定的this值和单独给出的一个或多个参数来调用一个函数。

    1. let obj1 = {
    2. name: "张三",
    3. age: 24,
    4. user: function (args) {
    5. console.log("姓名:", this.name);
    6. console.log("年龄:", this.age);
    7. console.log("参数", args);
    8. }
    9. }
    10. let obj2 = {
    11. name: "李四",
    12. age: 30,
    13. user: function (args) {
    14. console.log("姓名:", this.name);
    15. console.log("年龄:", this.age);
    16. console.log("参数", args);
    17. }
    18. }
    19. // 正常的调用
    20. obj1.user('我是参数');
    21. // 改变this指向
    22. obj1.user.call(obj2, "我是参数"); // 使用call方法改变

     arguments类数组

    arguments 是属于函数内部的变量,其值是函数参数列表,一个类数组对象,是具有长度属性的,却并不是数组,不具备slice()这个方法,那就意味着 arguments.slice()行不通

    总结

    slice方法内部实现,V8源码第587行,其基本原理就类似我们上面开头写的for循环遍历原数组,根据start和end的值再复制一份到新数组并返回。所以当我们使用[].slice.call(arguments),slice方法内部的this就会被替换成arguments,并循环遍历arguments,复制到新数组返回,这样就得到了一个复制arguments类数组的数组对象。



     

  • 相关阅读:
    什么是 Kubernetes HPA
    【实战技能】如何撰写敏捷开发文档
    防火墙内容安全笔记
    CSS学习基础知识
    《优化接口设计的思路》系列:第六篇—接口防抖(防重复提交)的一些方式
    富格林金业:认识分批建仓重要性
    “JavelinRecordDistance“ app Tech Support(URL)
    RHCA之路---EX280(8)
    【MySQL调优(二)】性能监控分析 - Show Profile
    在线密码破解medusa
  • 原文地址:https://blog.csdn.net/qq_63358859/article/details/127994184