美文网首页
call apply 和 bind 的区别

call apply 和 bind 的区别

作者: 樱桃小白菜 | 来源:发表于2021-06-15 17:55 被阅读0次

    call() 方法

    基本用法

    function add(a,b){
      return a+b;
    }
    function sub(c,d){
      return c-d;
    }
    function result(){
      this.addValue = null;
      this.subValue = null;
      this.showResult=function(){
        alert(this.addValue);
        alert(this.subValue);
      }
    }   
    function myCallTest(){  //此处this指向了add,如果不使用call则this指向window对象
      return add.call(this,7,2);
    }
    var r = new result();
    console.log(myCallTest());//9
    r.addValue = add.call(sub,4,2); //6,将add方法应用到sub上,即sub的指针指向add方法
    r.subValue = sub.call(add,4,2); //2,用add对象替换sub对象,并调用sub对象的方法asqqqqqqqqqqqq
    r.showResult(); //在js中函数也是一个Function对象,函数名即是对象引用
    

    继承特性

    function add(a,b){
      return a+b;
    }
    function sub(c,d){
      return c-d;
    }
    function result(){
      this.addValue = null;
      this.subValue = null;
      this.showResult=function(){
        alert(this.addValue);
        alert(this.subValue);
      }
    }
    var r = new result();
    r.addValue = add.call(r,4,2);   //6,r继承add函数的所有特性
    r.subValue = sub.call(r,4,2);   //2,r集成sub函数的所有特性
    r.showResult();
    

    apply() 方法

    apply() 方法的作用
    • 改变函数内的 this 指向
    • 调用其他对象的方法
    • 实现继承

    call() 方法与 apply() 方法的区别

    • 相同点:调用当前函数的方法,给另一个函数。 第一个参数是 this 要指向的对象。
    • 不同点:

    call 方法是将参数使用逗号分隔
    apply 方法是将参数写在数组里面

    bind() 方法

    • 改变函数内的 this 指向
    • 调用其他对象的方法
    • 实现继承
    bind() 方法的作用
    var obj = {}
    function fn(){
      console.log('是否调用',this)
    }
    var fnObj = fn.bind(obj)  //`不会执行
    fnObj()  
    

    call() 和 bind() 方法的区别

    相同点:都是用来改变 this 的指向

    不同点:call() 方法更改 this 的指向后,会再执行函数,bind() 方法更改 this 后,不会执行函数,会返回一个绑定新this的函数。

    实际应用

    利用 call() 方法来进行数据类型的判断

    console.log(Object.prototype.toString.call("123"))            //  [Object String]
    console.log(Object.prototype.toString.call(123))              //  [object Number]
    console.log(Object.prototype.toString.call(true))           //  [object Boolean]
    console.log(Object.prototype.toString.call(undefined))       //  [object Undefined]
    console.log(Object.prototype.toString.call(null))            //  [object Null]
    console.log(Object.prototype.toString.call(function(){}))    //  [object Function]
    console.log(Object.prototype.toString.call([]))              //  object Array]
    console.log(Object.prototype.toString.call({}))              //  [object Object]
    

    利用 call() 方法翻转字符串

    //思路:  借用数组中的reverse,将字符串翻转过来
     var str = "abc"
    var arr = Array.prototype.reverse.call(str.split("")).join("");
    console.log(arr)          //  cba
    console.log(typeof arr)      //  string
    //  当然也可以使用 Array.from 来将 字符串转化为数组
    //  var arr =  Array.from(str)
    

    利用 apply() 方法求最大值

    var arr = [1,2,4,22,77,75,9]
    var num  = Math.max.apply(arr,arr)
    console.log(num)    //  77
    

    参考

    CSDN - js中的call()和apply()方法

    相关文章

      网友评论

          本文标题:call apply 和 bind 的区别

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