apply call bind的区别与作用

138 阅读1分钟

这是我参与新手入门的第1篇文章

一、作用(与函数有关)

函数有定义时上下文,运行时上下文和上下文可以改变的概念

二、call和apply的区别

  • call接收的是一个一个的参数
  • apply接收的是数组 当传入的参数个数不确定时,用apply

1 call的语法:函数名.call(obj,参数1,参数2,参数3……);

2 apply的语法:函数名.apply(obj,[参数1,参数2,参数3……]);

三、bind call apply比较

bind方法类似于call,在改变上下文后并不是立即执行,就用bind

let oo = {
    x:1
}
let foo = {
    getX : function(){
        console.log(this.x)
    }
}
foo.getX.call(oo);
foo.getX.apply(oo);
foo.getX.bind(oo)(); 注意bind后面加了个括号表示执行

借用别的对象的方法

var Person1 = function(){
    this.name = '小美女';
}
var Person2 = function(){
    this.getName = function(){
        console.log(this.name); // 小美女
    }
    // console.log(this);   // Person2中所有的
    Person1.call(this); // 使用Person1对象代替this,相当于Person2继承了Person1的属性好方法
}
var person = new Person2(); 
person.getName();
// person 是Person2的一个实例
// person继承了Person2所有的属性和方法getName

四、例子

1. 求数组的最大值和最小值

/*
* 获取数组的最大值和最小值
* Math.max(a,b,c...):一组数的最大值
* Math.min(a,b,c...):一组数的最小值
*
* 这两个函数对于数字组成的数组没法用
* 使用apply传入数组后,等于使用数组中的所有值作为函数的参数
*
* nums数组本身没有maxmin方法,但是Math有此方法,所以借助call和apply来计算
方法一:借助Math的maxmin方法
let nums = [100,20,-199,33];
let maxNum = Math.max.apply(null,nums);
let minNum = Math.min.apply(null,nums);
console.log(maxNum);    // 100
console.log(minNum);    // -199

方法二:es6的扩展运算符
console.log(Math.max(...nums)); // 100
console.log(Math.min(...nums))  // -199