bind&call&apply

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

 我的博客

bind&call&apply

上一篇:Notes on learning RT-Thread——线程的工作机制


下一篇:Android Studio 在安装中遇gradle-4.6-all.zip下载问题