• call和apply方法的异同


    基本作用:改变对象的执行上下文。

    this指向执行上下文。(执行环境)

    this指向的永远是调用该方法的对象

    function func(){
         this.a=1;
         console.log(this.a);    
    }
    

    代码中方法执行后控制台输出1,由于func是全局对象window下的一个方法,那么调用该方法的对象就应该是全局对象window,所以this理论上指向的对象就应该是window

    如果理论成立,而this.a==1,也就是说变量a是一个全局变量。在控制台上直接输入awindow.a后回车,会发现输出了1,所以在func这个方法中,this的指向就是window。

    eg:
    var person = {
        name: 'xiao ming',
        age: 18,
        who: function () {
            console.log( 'my name is ' + this.name + ' , ' + this.age + ' years old' );
            console.log( person === this);
        }
    }
    
    person.who();
    

    上面这段代码中who方法是person对象的一个属性,被person对象调用,所以this的指向也就是person。

    call和apply的基本使用
    call()
    function.call(obj, args1,args2,...)
    
    • 调用call的对象必须是个函数function
    • call的第一个参数将会是function改变上下文后指向的对象,如果不传,默认为全局对象window
    • 第二个参数开始可以接收任意个参数,这些参数将会作为function的参数传入function
    • 调用call的方法会立即执行

    apply()

    function.apply(obj,args[...])
    

      只接收两个参数,其中第二个参数必须是一个数组或者类数组,这也是这两个方法很重要的一个区别

    数组与类数组小科普

    数组我们都知道是什么,它的特征都有哪些呢?

    1. 可以通过角标调用,如 array[0]
    2. 具有长度属性length
    3. 可以通过 for 循环和forEach方法进行遍历

    类数组顾名思义,具备的特征应该与数组基本相同,那么可以知道,一个形如下面这个对象的对象就是一个类数组

    var arrayLike = {
        0: 'item1',
        1: 'item2',
        2: 'item3',
        length: 3
    }
    

      类数组arrayLike可以通过角标进行调用,具有length属性,同时也可以通过 for 循环进行遍历

    我们经常使用的获取dom节点的方法返回的就是一个类数组,在一个方法中使用 arguments关键字获取到的该方法的所有参数也是一个类数组

    但是类数组却不能通过forEach进行遍历,因为forEach是数组原型链上的方法,类数组毕竟不是数组,所以无法使用。

    异同

    相同点

    都能够改变方法的执行上下文(执行环境),将一个对象的方法交给另一个对象来执行,并且是立即执行

    不同点

    call方法从第二个参数开始可以接收任意个参数,每个参数会映射到相应位置的func的参数上,可以通过参数名调用,但是如果将所有的参数作为数组传入,它们会作为一个整体映射到func对应的第一个参数上,之后参数都为空

    function func (a,b,c) {}
    
    func.call(obj, 1,2,3)
    // function接收到的参数实际上是 1,2,3
    
    func.call(obj, [1,2,3])
    // function接收到的参数实际上是 [1,2,3],undefined,undefined
    

      apply方法最多只有两个参数,第二个参数接收数组或者类数组,但是都会被转换成类数组传入func中,并且会被映射到func对应的参数上。

    func.apply(obj, [1,2,3])
    // function接收到的参数实际上是 1,2,3
    
    func.apply(obj, {
        0: 1,
        1: 2,
        2: 3,
        length: 3
    })
    // function接收到的参数实际上是 1,2,3
    

      

    两个方法该如何选择?

    跟简单,根据你要传入的参数来做选择,不需要传参或者只有1个参数的时候,用call,当要传入多个对象时,用apply

    或者,如果需要传入的参数已经是一个数组或者类数组了,就用apply,如果还是单独的需要逐个传入的,可以考虑使用call

    【其他用途——对象继承】

    由于可以改变this的指向,所以也就可以实现对象的继承。

    function superClass () {
        this.a = 1;
        this.print = function () {
            console.log(this.a);
        }
    }
    
    function subClass () {
        superClass.call(this);
        this.print();
    }
    
    subClass();
    // 1
    

      subClass通过call方法,继承了superClassprint方法和a变量,同时subClass还可以扩展自己的其他方法。

  • 相关阅读:
    PowerDesigner_15连接Oracle11g,反向工程导出模型图
    angular学习
    GoEasy消息推送
    Spring 工作原理
    JAVA解析HTML,获取待定元素属性
    设计模式之工厂方法模式
    设计模式之单例模式
    通过Java代码获取系统信息
    centos7下NAT模式下设置静态ip
    关于在Spring项目中使用thymeleaf报Exception parsing document错误
  • 原文地址:https://www.cnblogs.com/PearlRan/p/9684024.html
Copyright © 2020-2023  润新知