• JS中的call(),apply(),bind()方法


    call,apply和bind到底有何用?

    改变函数的this对象的指向

    相似之处

    1.都是用来改变函数的this对象指向

    2.第一个参数都是this要指向的对象

    3.都可以利用后续参数传参

    先看下面例子:

    例1;

    var name = "小王", age = 17;
    var obj = {
          name:"小张",
          objAge:this.age,
          myFun:function(){
                console.log(this.name + "年龄" + this.age)
          }  
    }    
    obj.objAge;   //17
    obj.myFun();  //小张年龄undefined  

    例2

    var fav = "盲僧";
    function shows(){
       console.log(this.fav)
    }
    shows();  //"盲僧"
    

    比较一下这两者 this 的差别,第一个打印里面的 this 指向 obj,第二个全局声明的 shows() 函数 this 是 window ;  

    1.call,apply,bind都是用来重定义this这个对象的!

    var name = "小王",age = 17;
    var obj = {
         name:"小张",
         objAge:this.age,
         myFun:function(){
             console.log(this.name + "年龄" + this.age)
         }
    }  
    var db = {
        name:"德玛",
        age:99
    }  
    
    obj.myFun.call(db);    //德玛年龄 99
    obj.myFun.apply(db);   //德玛年龄 99
    obj.myFun.bidn(db)();   //德玛年龄 99 

    以上就是call,apply和bind的区别,call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()调用

    那么call和apply的区别呢?

    把上面例子稍微修改一下

    var name = "小王",age = 17;
    var obj = {
         name:"小张",
         objAge:this.age,
         myFun:function(fm,t){
             console.log(this.name + "年龄" + this.age,"来自" + fm + "去往" + t)
         }
    }  
    var db = {
        name:"德玛",
        age:99
    }  
    
    obj.myFun.call(db,"成都","上海");    //德玛年龄 99,来自成都,去往上海
    obj.myFun.apply(db,["成都","上海"]);   //德玛年龄 99,来自成都,去往上海
    obj.myFun.bidn(db,"成都","上海")();   //德玛年龄 99 ,来自成都,去往上海
    obj.myFun.bind(db,["成都","上海"])();   //德玛年龄 99,来自成都,去往上海
    obj.myFun.bind(db)("成都","上海"); //德玛年龄 99,来自成都,去往上海

    微妙的差距!

    从上面结果不难看出:call,bind,apply这三个函数的第一个参数都是this的指向对象,第二个参数差别就来了,

    call的参数是直接放进去的,第二个第三个第n个参数全部都用都好分隔,直接放到后面 obj.myFun.call(db,'成都', ... ,'string' )。

    apply的所有参数都必须放在一个数组里面传进去,obj.myFun.apply(db,['成都', ..., 'string' ])。

    当然,第三个参数不限定string类型,允许各种类型,包括函数,object 等等!

    由于bind返回的仍然是一个函数,所以我们还可以在调用的时候再进行传参。  

  • 相关阅读:
    vue-webpack介绍
    vue-ES6模块化的导入和导出
    vue-前端模块化
    vue-插槽作用域的使用
    vue-具名插槽的使用
    vue-插槽的基本使用
    vue-父组件获取子组件对象实例
    IO(六)
    IO(五)
    关于overflow:hidden
  • 原文地址:https://www.cnblogs.com/woshidouzia/p/11799373.html
Copyright © 2020-2023  润新知