• call 和 apply


    call和apply作用一样,都是为了转移this,区别在于传入参数的方式不同。

     this指当前方法所在的对象,如果方法的外面没有对象,则默认是window。由于闭包虽在调用的方法中,但是在创建的时候就被声明到window下,因此闭包中的this指window。

     1     <script>
     2         var test1 = function(_param1, _param2){
     3             console.log("_param1 : " + _param1 + "   _param2: " + _param2);
     4         }
     5         
     6         var test2 = function(_param1){
     7             console.log("_param1 : " + _param1);
     8         }
     9         
    10             $(function(){
    11                 // apply和call为方法借用,但不改变this。即test1方法调用test2方法暂时使用,有点像子类和父类,子类调用父类方法super一样
    12                 test2.apply(test1, ['23445','678888']); //apply为参数数组和call实现一致  --执行test2 
    13                 test2.call(test1, '23445','67888');    //call为参数罗列,和apply实现一致  --执行test2
    14             });
    15     </script>

    call和apply方法是通过调用其它类的方法来为自己服务,多见于子类和父类之间。子类调用父类的方法为自己服务。this此时已然为自己。

        <script>
            var Animal = function(){
                this.name = "Animal";
                this.action = function(){
                    console.log("this...." + this.name);
                }
            }
            var Sheep = function(){
                this.name = "Sheep";
            }
            
                $(function(){
                    var sheep = new Sheep();
                    var animal = new Animal();
                    animal.action.call(sheep);
                });
        </script>

    结果为: Sheep。

    call和apply也可用于方法中this的对象转移,默认情况下this是window。而在对象中使用方法时,其this指向为本对象。

    var name = "window";
            var obj = {
                name : "OBJ",
                getNameFn : function(){
                    return this.name;
                }
            }
            
            var testFn = function(){
                console.log(this.name);
            }
            
            testFn();
            testFn.call(obj);

    结果为:

    window
    OBJ

    从以上可知:call中如果是对象则这个对象会作为this而存在,如果为function则使用function所在的对象。

  • 相关阅读:
    PostBUILD Event Command Line
    vue 中 $set与$delete的使用
    前端动画必知必会:React 和 Vue 都在用的 FLIP 思想实战
    根据JSON自动构建的vue筛选框组件
    手摸手带你理解Vue的Computed原理
    Flutter开发初探
    实战技巧,Vue原来还可以这样写
    你应该知道的Vue高级特性
    如何去除vue项目中的console内容
    vue: 组件之间传值
  • 原文地址:https://www.cnblogs.com/DennyZhao/p/7650143.html
Copyright © 2020-2023  润新知