[JavaScript知识库]call apply bind -高级JS

call 方法

使用一直指定的this值 和单独给出一个或多个参数来调用一个函数

 		function fn(a, b) {
            console.log(this);
            console.log(a, b);
            return a+b
        }
        fn(20, 30)
        fn.call({name: 'zs'}, 20, 30)

打印结果
第一次this的值 是 window 第二次是 {name: ‘zs’}

window
20 30
{name: "zs"}
20 30

借用构造函数实现继承
在子类的构造函数里面将父类的 this 改为子类的 this实现继承

 		function  Father (name, age) {
            this.name = name
            this.age = age
        }

        function Son (name, age, like) {
            Father.call(this, name, age)
            this.like = like

        }

        let p = new Son('zs', 18, '乒乓球')
        console.log(p);

判断数据类型

Object.prototype.toString.call()

借用call方法 实现伪数组借用数组的方法

   let lis = document.getElementsByTagName("li")
   // lis 是一个伪数组
   Array.prototype.forEach.call(lis, (e, i)=> {
       console.log(e, i);
   })

apply 方法

修改this
调用函数

求最大值

 	let  max = [1,2,3,4,5,600]
    let numMax = Math.max.apply(null, max)
    console.log(numMax);
    
	let  max = [1,2,3,4,5,600]
    let numMax = Math.max(1,2,3,4,100)
    console.log(numMax);

	let  max = [1,2,3,4,5,600]
    let numMax = Math.max(...max )
    console.log(numMax);

改变this的值

	function fn(a, b) {
           console.log(this);
           console.log(a, b);
           return a+b
    }
    fn(20, 30)
    fn.apply({name: 'zs'}, [20, 30])

借用构造函数实现继承

	function  Father (name, age) {
        this.name = name
        this.age = age
    }

    function Son (name, age, like) {
         Father.apply(this, arguments )
         this.like = like

     }

    let p = new Son('zs', 18, '乒乓球')
     console.log(p);

这个代码有必要看下

这个文章可以看下
JavaScript在方法中使用apply(this,arguments)

var A={
    name:"我是小A",
    fun:function(sex,age){
        console.log("大家好！ "+this.name+" 我是个"+sex+" 今年"+age+"岁")
    }
}

var B = {
    name:"我是小B"
};
var monies = ["男生",20];
A.fun.apply(B, monies); 

打印结果： 大家好！ 我是小B 我是个男生 今年20岁 
  
/**
A.fun.apply(B, monies);  之后
var A= {
    name:"我是小A",
    fun:function(sex,age){
        console.log("大家好！ "+this.name+" 我是个"+sex+" 今年"+age+"岁")
    }
}
 上面代码全等于下面代码
 var A= {
    name:"我是小A",
    fun:function(sex,age){
    this = {name: "我是小B"}
        console.log("大家好！ "+this.name+" 我是个"+sex+" 今年"+age+"岁")
    }
}
*/

bind 方法

修改this
创建一个新的函数，不会自动调用的

下面是一个面试题

     const obj = {
          x: 42,
          getX: function() {
              return this.x
          }
      }

      console.log(obj.getX()); // 42

      let fn  = obj.getX
      // fn = function() { return this.x }
      console.log(fn()); // undefined

      const callFn = fn.bind(obj)
      console.log(callFn()); // 42

创作打卡挑战赛

赢取流量/现金/CSDN周边激励大奖