call,apply,bind的区分

• apply吸收数组 func.apply(obj, [arus])
• call一连串参数 func.call(obj, param1, param2….)
• bind返回一个函数 func.bind(obj,param…)(parms…)

call,apply,bind的运用场景

• 将类数组/含有length属性的对象转化为数组

  类数组：(比方经由过程document.getElementsByTagName猎取的元素、含有length属性的对象)具有length属性，而且可以经由过程0、1、2…下标来访问个中的元素，然则没有Array中的push、pop等要领。

  注重：然则这个不适用于IE6~8，会报错，只能运用轮回来处理

  // 类数组
  let trueArr = Array.prototype.slice.call(arrayLike)
  // 含有length属性的对象
  let obj4 = {
      0: 1,
      1: 'thomas',
      2: 13,
      length: 3 // 肯定要有length属性
  };
  console.log(Array.prototype.slice.call(obj4)); // [1, "thomas", 13]

• 求数组中的最大和最小值

  注重：边界题目，临界值大概在 [ 参数个数限定在65536]

  let arr = [1,2,3,89,46]
  let max = Math.max.apply(null,arr)//89
  let min = Math.min.apply(null,arr)//1

• 数组追加

  数组要领contact比较：contact返回新数组，不修正原数组

  let arr1 = [1,2,3]
  let arr2 = [4,5,6]
  let total = [].push.apply(arr1, arr2) //6

• 应用call和apply做继续

  function Person(name,age){
      // 这里的this都指向实例
      this.name = name
      this.age = age
      this.sayAge = function(){
          console.log(this.age)
      }
  }
  function Female(){
      Person.apply(this,arguments)//将父元素一切要领在这里实行一遍就继续了
  }
  let dot = new Female('Dot',2)

• 推断变量范例

  function isArray(obj){
      return Object.prototype.toString.call(obj) == '[object Array]'
  }
  isArray([]) // true
  isArray('dot') // false

• 其他：运用 log 代办 console.log

  function log(){
    console.log.apply(console, arguments);
  }
  // 固然也有更轻易的 let log = console.log()

bind 完成

• 特性：

  1. 返回一个函数
  2. 可以传入参数（运用bind时和bind新天生的函数都可以传参）

  3. 当 bind 返回的函数作为组织函数的时刻，bind 时指定的 this 值会失效，但传入的参数依旧见效

     var bindFoo = bar.bind(foo, 'daisy');
     var obj = new bindFoo('18');

• 注重：bind这个要领在IE6~8下不兼容

// 运用apply和call来完成this指向题目
Function.prototype.bind2 = function (context) {
    if (typeof this !== "function") {
      throw new Error("what is trying to be bound is not callable");
    }
    var self = this;
   // 取得bind的参数从第二个参数到最后一个参数
    var args = Array.prototype.slice.call(arguments, 1);
    var fNOP = function () {};
    var fBound = function () {
        // 指bind返回的函数传入的参数
        var bindArgs = Array.prototype.slice.call(arguments);
       // 当作为组织函数时，this 指向实例，此时效果为 true，将绑定函数的 this 指向该实例，可以让实例取得来自绑定函数的值
        // 以上面的是 demo 为例，假如改成 `this instanceof fBound ? null : context`，实例只是一个空对象，将 null 改成 this ，实例会具有 habit 属性
        // 当作为一般函数时，this 指向 window，此时效果为 false，将绑定函数的 this 指向 context
        // new bind返回的函数,this失效，但传入的参数见效
        return self.apply(this instanceof fNOP ? this : context,                                args.concat(bindArgs));
    }
    
    // fBound.prototype = this.prototype;
    // 保证继续，原型链，让 fBound 组织的实例可以继续绑定函数的原型中的值,下面两行代码等同于Object.creater()  fbound.prototype = Object.create(this.prototype);
    // 我们直接修正 fBound.prototype 的时刻，也会直接修正绑定函数的 prototype。这个时刻，我们可以经由过程一个空函数来举行中转
    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();
    return fBound;
}

// es6完成
Function.prototype.bind = function(context) {
    if(typeof this !== "function"){
       throw new TypeError("not a function");
    }
    let self = this;
    let args = [...arguments].slice(1);
    function Fn() {};
    Fn.prototype = this.prototype;
    let bound = function() {
        let res = [...args, ...arguments]; //bind通报的参数和函数挪用时通报的参数拼接
        context = this instanceof Fn ? this : context || this;
        return self.apply(context, res);
    }
    //原型链
    bound.prototype = new Fn();
    return bound;
}

call 完成

• 完成思绪

  1. 将函数设为对象的属性 foo.fn = bar
  2. 实行该函数 foo.fn()
  3. 删除该函数 delete foo.fn

• 注重的点

  1. 接收不定长参数 – Arguments 对象中取值，第二个到最后一个参数，然后放到一个数组里
  2. this 参数可以传 null，当为 null 的时刻，视为指向 window
  3. 函数是可以有返回值的！

• 难点剖析 – 接收不定长参数

  var args = [];
  // 为了拼出一个参数字符串,arguments类数组,不能运用
  for(var i = 1, len = arguments.length; i < len; i++) {
        // args: ["arguments[1]", "arguments[2]", .....]
      args.push('arguments[' + i + ']');
  }
  // 1. context.fn(args.join(',')) es6语法完成es3的call要领不合适
  // 2. 这里 args 会自动挪用 Array.toString() 这个要领
  // 3. eval作用：看成是<script>标签，只接收原始字符串作为参数，用JavaScript的剖析引擎来剖析这一堆字符串内里的内容
  var result = eval('context.fn(' + args +')');
  
  

• call团体完成

  Function.prototype.call2 = function (context) {
    // 首先要猎取挪用call的函数，用this可以猎取
      var context = context || window;
      context.fn = this;
      var args = [];
      for(var i = 1, len = arguments.length; i < len; i++) {
          args.push('arguments[' + i + ']');
      }
      var result = eval('context.fn(' + args +')');
      delete context.fn
      return result;
  }
  
  // 测试
  bar.call2(null); // 2
  console.log(bar.call2(obj, 'kevin', 18));
  
  // es6
  Function.prototype.call = function (context) {
      if (!context) {
          context = typeof window === 'undefined' ? global : window;
      }
      context.fn = this;
      let rest = [...arguments].slice(1);// 空数组slice后返回的仍然是空数组
      let result = context.fn(...rest); 
      delete context.fn;
      return result;
  }
  

apply完成

Function.prototype.apply = function (context, arr) {
    var context = Object(context) || window;
    context.fn = this;
    var result;
    if (!arr) {
        result = context.fn();
    }
    else {
        var args = [];
        for (var i = 0, len = arr.length; i < len; i++) {
            args.push('arr[' + i + ']');
        }
        result = eval('context.fn(' + args + ')')
    }
    delete context.fn
    return result;
}

// es6:
Function.prototype.apply = function (context, rest) {
    if (!context) {
        //context为null或许是undefined时,设置默认值
        context = typeof window === 'undefined' ? global : window;
    }
    context.fn = this;
    let result;
    if(rest === undefined || rest === null) {
        //undefined 或许 是 null 不是 Iterator 对象，不能被 ...
        result = context.fn(rest);
    }else if(typeof rest === 'object') {
        result = context.fn(...rest);
    }
    delete context.fn;
    return result;
}

补充：

• new完成
• 继续和原型链学问