zoukankan      html  css  js  c++  java
  • 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
  • 相关阅读:
    code review
    设计原则
    知识点介绍
    REST API
    第四章 模块化React和Redux应用
    第3章 从Flux到Redux
    第二章 设计高质量的React组件
    React和Jquery比较
    第一章 React新的前端思维方式
    封装一个获取module.exports内容的方法
  • 原文地址:https://www.cnblogs.com/seeks/p/10177008.html
Copyright © 2011-2022 走看看