bind&call&apply

Posted 2021-01-29 -梦珀-

call & apply & bind方法，调用一个函数，并具有一个指定的this值。

不同点：

1、call和bind 第一个参数为this，后面跟一个传值列表。

2、apply第一个参数为this，第二个参数为传值数组。

3、call和apply 直接执行，bind返回一个函数，需手动执行。

使用选择：

1、参数为数组格式时，用apply方法。

2、需要延后执行时，用bind方法。

基础用法：

var a = {};
var b = {};
var c = {};

function d(x, y) {
    this.x = x;
    this.y = y;
}

d.call(a, 1, 2);        // 列表
d.apply(b, [3, 4]);    // 数组
d.bind(c, 5, 6)();    // 不直接执行

console.log(a);    // {x: 1, y: 2}
console.log(b);    // {x: 3, y: 4}
console.log(c);    // {x: 5, y: 6}

 

 

用途：

1、类的继承

function Life(status) {        // 生命
    this.status = status;
}
function Proson(name, age, status) {    // 人
    this.name = name;
    this.age = age;
    Life.call(this, status);
}
function Student(name, age, status, grade) {    // 学生
    this.grade = grade;
    Proson.call(this, name, age, status);
}
var xiaoMing = new Student(‘小明‘, 18, ‘活着‘, ‘大一‘);

// "活着的小明，他今年18岁，上大一了。"
console.log(xiaoMing.status+‘的‘+xiaoMing.name+‘，他今年‘+xiaoMing.age+‘岁，上‘+xiaoMing.grade+‘了。‘);

 

2、回掉函数（定时器 | ajax | ... ）

var a = {
    ‘x‘ : 1,
    ‘y‘ : function () {
        setTimeout(function() {
            console.log(this.x);    // this指向window
        });
    },
    ‘z‘ : function () {
        setTimeout(function() {
            console.log(this.x);    // this指向a
        }.call(this));
    }
}
console.log(a.y());        // undefined
console.log(a.z());        // 1

 

3、内置函数

var arr = [5,9,2,7,12,3];
Math.min.apply(null, arr);        // 2
Math.max.apply(null, arr);        // 12

 

注意： 当参数过多（比如超过1w个），可能会参数个数越界，建议切块后执行。（js中最大参数个数65536个）

function minOfArray(arr) {
  var min = Infinity;
  var QUANTUM = 32768;

  for (var i = 0, len = arr.length; i < len; i += QUANTUM) {
    var submin = Math.min.apply(null, arr.slice(i, Math.min(i + QUANTUM, len)));
    min = Math.min(submin, min);
  }

  return min;
}

var min = minOfArray([5, 6, 2, 3, 7]);

 

4、伪数组转数组

var a = {
    0: 1,
    1: 2,
    length: 2
}

Array.prototype.slice.call(a);        // [1, 2]

var b = [];
b.slice.call(a);        // [1, 2]

Array.from(a);        // [1, 2]     Es6

 我的博客