zoukankan      html  css  js  c++  java
  • how does Array.prototype.slice.call() work?

    763
    down vote
    accepted
    +50
    What happens under the hood is that when .slice() is called normally, this is an Array, and then it just iterates over that Array, and does its work.

    How is this in the .slice() function an Array? Because when you do:

    object.method();
    ...the object automatically becomes the value of this in the method(). So with:

    [1,2,3].slice()
    ...the [1,2,3] Array is set as the value of this in .slice().

    But what if you could substitute something else as the this value? As long as whatever you substitute has a numeric .length property, and a bunch of properties that are numeric indices, it should work. This type of object is often called an array-like object.

    The .call() and .apply() methods let you manually set the value of this in a function. So if we set the value of this in .slice() to an array-like object, .slice() will just assume it's working with an Array, and will do its thing.

    Take this plain object as an example.

    var my_object = {
    '0': 'zero',
    '1': 'one',
    '2': 'two',
    '3': 'three',
    '4': 'four',
    length: 5
    };
    This is obviously not an Array, but if you can set it as the this value of .slice(), then it will just work, because it looks enough like an Array for .slice() to work properly.

    var sliced = Array.prototype.slice.call( my_object, 3 );
    Example: http://jsfiddle.net/wSvkv/

    As you can see in the console, the result is what we expect:

    ['three','four'];
    So this is what happens when you set an arguments object as the this value of .slice(). Because arguments has a .length property and a bunch of numeric indices, .slice() just goes about its work as if it were working on a real Array.

    https://stackoverflow.com/questions/7056925/how-does-array-prototype-slice-call-work

  • 相关阅读:
    summernote 上传图片到图片服务器的解决方案(springboot 成功)
    rabbitmq 命令行与控制台
    redis 集群
    rabbitmq快速安装(实测有效)(新版)
    设计模式-5适配器模式
    Nginx做缓存
    Redis的高可用
    正则表达式
    常用的实例场景(.net js jq)
    sentry的安装
  • 原文地址:https://www.cnblogs.com/joe-yang/p/9001421.html
Copyright © 2011-2022 走看看