美文网首页
JS系列(四):apply与call

JS系列(四):apply与call

作者: 青叶小小 | 来源:发表于2021-04-01 10:47 被阅读0次

    这两个都属于Function.prototype中扩展的方法,有些许不同。这两个方法都会改变this的指向(在之后的this指向讲解中,会深入研究)。

    如果想实现对象属性的继承(或者说是对象属性的完成拷背),一般最原始的方法如下:

     Object.extend = function(dest, src) {
        if (!dest || !src) {
            return;
        }
        for (key in src) {
            dest[key] = src[key];
        }
    }
    

    有没有更好更简单的办法?当然有!
    Function.prototype.apply / call 就为我们实现了!
    两者只是在调用时,传递的参数方式不一样!(详看后面)

    • 来个简单的例子说明 apply / call
    function Person(name, age) {
        this.name = name;
        this.age = age;
        this.intro = function() {
            console.log(this.name + " and " + this.age);
        }
    }
    
    function Student(studentId, name, age) {
        this.studentId = studentId;
        // 以下方式二选一
        Person.apply(this, [name, age]);
        Person.call(this, name, age);
    }
    
    var student = new Student("1", "chris", 18);
    console.log(student); // Student {id:"1",name:"chris",age:18,intro:ƒ}
    

    我们可以看到,用apply和call,都实现了将Person中的属性和方法拷背至Student中,但是在调用时(先暂时不考虑第一个参数this),除了第一个参数相同:\color{red}{apply的第二个参数是数组,而call参数列表!}这就是它俩的唯一区别!!!

    根据文档(ECMAScript-262):

    • apply只接受两个入参:this,数组or类数组;
    • call可以接受N个入参:this, ...args

    数组容易理解,那什么是类数组?类数组实际上是个对象,满足以下特性:

    1. key是非负整数,即key = 0,1,2...N,且是连续的;
    2. 这个对象还含有一个特殊的key为length,其值为 max(key)+1;

    例如:

    var likeArray = {0: 'a', 1: 'b', 2: 'c', length: 3}
    for(var i = 0; i < likeArray.length; i ++) {
         console.log(likeArray[i]);
    }
    

    是不是和遍历数组一样?
    当然,也可以使用 Array.prototype 中的一些方法,如 Array.prototype.join.call(likeArray)

    相关文章

      网友评论

          本文标题:JS系列(四):apply与call

          本文链接:https://www.haomeiwen.com/subject/hsftkltx.html