apply、call、bind(js基础)

apply、call

描述：是函数内置的方法
作用：动态设置函数体内this对象的值

应用场景：

• 获取数组的最大最小值

var nums=[1,4,-1,10]
var maxNum=Math.max.apply(Math,numbers)

• 验证是否数组

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

• 类（伪）数组方法

var domNodes=Arrary.prototype.slice.call(arguments)

伪数组的对象结构：arguments,getElementBytagName等

bind

 var a = {
    num: 1,
    eventBind: function () {
     var _this=this
      document.querySelector('#box').addEventListener('click', function (event) {
        console.log(_this.num)      //1
      }.bind(this))
    }
  }

使用bind()更加优雅的解决这个问题

 var a = {
    num: 1,
    eventBind: function () {
      document.querySelector('#box').addEventListener('click', function (event) {
        console.log(this.num)      //1
      }.bind(this))
    }
  }

apply、call、bind比较

var a={
x:11
}
var b={
getX:function(){
  return this.x;
  }
}
console.log(b.getX.bind(a)()) // 11
console.log(b.getX.apply(a)) //11
console.log(b.getX.call(a)) //11

区别：当你希望改变上下文环境之后并非立即执行，而是回调执行的时候，使用bind()方法。而apply/bind则会立即执行函数

实现一个call,apply,bind

• apply(es5中文文档)
  原理：
  apply 原理

  Function.prototype.applyX = function apply(thisArg, argArray) {
    // 第一条：如果调用者不是一个方法
    if (typeof this !== 'function') {
      throw new TypeError("调用者不是一个方法")
    }
    // 第二条：判断参数是null 或者是undefined
    if (typeof argArray === 'undefined' || typeof argArray === null) {
      argArray = []
    }
    // 第三条：判断参数是不是一个对象
    if (!argArray instanceof Object) {
      throw new TypeError('参数要是对象')
    }
    // this未传入，则取window
    thisArg = thisArg || window
    let __fn = Symbol()
    thisArg[__fn] = this
    let result = thisArg[__fn](...argArray)
    delete thisArg[__fn]
    return result
  }

测试

  var x = 1111

  var a = {
    x: 1212
  }

  function b() {
    console.log('info', this.x,)
  }

   b()  // 1111

  b.applyX(a) // 1212

• call
  原理：

call

Function.prototype.callX=function call(thisArg){
var argArray=[]
var argLen=arguments.length;
for(var i=0;i<argLen-1;i++){
  argArray[i]=arguments[i+1]
  }
return this.applyX(this.arg,argArray)
}

• bind

  
  bind

 Function.prototype.bindX = function (thisArg, ...i) {
    var _this = this
    return function (...f) {
      console.log('f', ...f, 'inner', ...i)
      return _this.applyX(thisArg || this, [...f, ...i])
    }
  }

---

Function 是对象

函数内部特殊对象：arguments 和this

arguments保存函数参数

argument.callee 属性：是一个指针，指向拥有这个arguments对象的函数。严格模式下报错

caller:保存调用当前行数的函数的引用