call、apply、bind

call

定義：調用一個對象的一個方法，以另外一個對象替換當前對象，傳遞多個參數

Person.prototype.sayHi=function (x,y) {
      console.log("您好啊:"+this.sex);
      return 1000;
    };
    var per=new Person(10,"男");
    function Student(name,sex) {
      this.name=name;
      this.sex=sex;
    }
    var stu=new Student("小明","人妖");
    var r2=per.sayHi.call(stu,10,20);

apply

定義：應用某一對象的一個方法，用另外一個對象替換當前對象，apply傳遞多個參數的時候第二個參數須要傳遞一個數組

Person.prototype.sayHi=function (x,y) {
      console.log("您好啊:"+this.sex);
      return 1000;
    };
    var per=new Person(10,"男");
    function Student(name,sex) {
      this.name=name;
      this.sex=sex;
    }
    var stu=new Student("小明","人妖");
    var r1=per.sayHi.apply(stu,[10,20]);

區別

call 和 apply 都是爲了解決改變 this 的指向。做用都是相同的，只是傳參的方式不一樣

bind

bind也能改變this的指向，返回一個修改過的函數，但該函數不會被執行

function f1(x, y) {
      console.log((x + y) + ":=====>" + this.age);
    }
function Person() {
     this.age = 1000;
   }
   Person.prototype.eat = function () {
     console.log("這個是吃");
   };
   var per = new Person();

   var ff = f1.bind(per, 10, 20);

• applay、call和bind的卻別在於前者當即執行，後者在須要的時候執行

實現一個call函數

Function.prototype.myCall = function (context) {
  var context = context || window
  // 給 context 添加一個屬性,這裏的this就是new出來的實例化對象
  context.fn = this
  // 將 context 後面的參數取出來
  var args = [...arguments].slice(1)
  var result = context.fn(...args)
  // 刪除 fn
  delete context.fn
  return result
}

實現一個apply函數

Function.prototype.myApply = function (context) {
  var context = context || window
  context.fn = this
  var result
  // 須要判斷是否存儲第二個參數
  // 若是存在，就將第二個參數展開
  if (arguments[1]) {
    result = context.fn(...arguments[1])
  } else {
    result = context.fn()
  }
  delete context.fn
  return result
}

實現一個bind函數

Function.prototype.myBind = function (context) {
  if (typeof this !== 'function') {
    throw new TypeError('Error')
  }
  var _this = this
  var args = [...arguments].slice(1)
  // 返回一個函數
  return function F() {
    // 由於返回了一個函數，咱們能夠 new F()，因此須要判斷
    if (this instanceof F) {
      return new _this(...args, ...arguments)
    }
    return _this.apply(context, args.concat(...arguments))
  }
}