三者的异同

三者的作用：都是 Function 对象自带的方法，作用都是用来改变函数内的 this 指向，传递的第一个参数都是 this 所要指向的对象，而且它们三个都可以传递参数。
三者的区别：

  • call：传递参数的时候需要一个一个进行传递，而且定义完立即执行，返回值为调用方法的返回值，如果调用的方法没有返回值，则返回 undefined
  • apply：和 call 类似，都是立即执行，返回值为调用方法的返回值，如果调用方法没有返回值，则返回 undefined ，唯一不同的是， apply 在传递参数的时候需要以数组的形式
  • bind：除了返回值是函数以外，它在传递参数的时候和 call 一样，都是一个一个传递，它在调用之后返回一个新的函数，不会立即执行

call 和 apply 都是为了改变某个函数运行时的上下文而存在的。换句话说，就是为了改变函数体内部 this 的指向。
对 apply 和 call 而言，二者作用完全一样，只是接收参数的方式不太一样。call 需要把参数按顺序传递进去，而 apply 则是把参数放在数组里。

内部实现

call

  1. Function.prototype.myCall = function(context = window, ...args) {
  2.     if (this === Function.prototype) {
  3.         return undefined;   //判断当前this是否为函数，用于防止Function.prototype.myCall()直接调用
  4.     }
  5.     context = context || window;   //context为可选参数，如果不传的话，默认指向window
  6.     const fn = Symbol();    //利用symbol进行定义，可以保证不会重名
  7.     context[fn] = this;    //将当前函数赋给这个属性，这样之后执行context[fn]的时候，fn里面的this指向就为context了
  8.     const result = context[fn](...args);
  9.     delete context[fn];  //调用完后立即删除symbol属性
  10.     return result;
  11. }
  13. //调用
  14. let person1 = {
  15.     name:'王',
  16.     age:18,
  17.     say(...args){
  18.         console.log(`名字为${this.name},年龄为${this.age},参数为${args}`);
  19.     }
  20. }
  21. let person2 = {
  22.     name:'李',
  23.     age:20
  24. }
  25. person1.say.myCall(person2,1,2,3);
  27. //输出  名字为李,年龄为20,参数为1,2,3

apply

  1. Function.prototype.myApply = function(context = window,args){
  2.     if(this === Function.prototype){
  3.         return undefined;
  4.     }
  5.     context = context || window;
  6.     const fn = Symbol();
  7.     context[fn] = this;
  8.     let result;
  9.     if(Array.isArray(args)){
  10.         result = context[fn](...args);
  11.     }else{
  12.         result = context[fn]();
  13.     }
  14.     delete context[fn];
  15.     return result;
  16. }
  18. //调用
  19. let person1 = {
  20.     name:'王',
  21.     age:18,
  22.     say(...args){
  23.         console.log(`名字为${this.name},年龄为${this.age},参数为${args}`);
  24.     }
  25. }
  26. let person2 = {
  27.     name:'李',
  28.     age:20
  29. }
  30. person1.say.myApply(person2,[1,2,3]);
  32. //输出  名字为李,年龄为20,参数为1,2,3

bind

  1. Function.prototype.myBind = function(obj){
  2.   if (typeof this !== "function") {
  3.       throw new TypeError(`${this} is not callable`);
  4.   }
  5.     let self = this;
  6.   const args = [...arguments].slice(1);
  7.     return function F(){
  8.         // 因为返回了一个函数，我们可以 new F()，所以需要判断
  9.     if(this instanceof F) {
  10.       return new self(...args, ...arguments);
  11.     }
  12.         return self.apply(obj, args.concat(...arguments));
  13.     }
  14. }
  16. //调用
  17. let person1 = {
  18.     name:'王',
  19.     age:18,
  20.     say(...args){
  21.         console.log(`名字为${this.name},年龄为${this.age},参数为${args}`);
  22.     }
  23. }
  24. let person2 = {
  25.     name:'李',
  26.     age:20
  27. }
  28. person1.say.myBind(person2,1,2,3)(4,5);
  30. //输出  名字为李,年龄为20,参数为1,2,3,4,5

ES6 的 bind() 方法可以顺带用做构造函数。如果 bind() 返回的函数用做构造函数，将忽略传入 bind() 的 this ，原始函数就会以构造函数的形式调用，其实参也已经绑定（即在运行时将 bind() 所返回的函数用做构造函数时，所传入的实参会原封不动的传入原始函数）。由 bind() 方法所返回的函数并不包含 prototype 属性（普通函数固有的 prototype 属性是不能删除的），并且将这些绑定的函数用做构造函数时所创建的对象从原始的未绑定的构造函数中继承 prototype 。同样，在使用 instanceof 运算符时，绑定构造函数和未绑定构造函数并无两样。

应用

将伪数组转化为数组

  1. function fn() {
  2.   return Array.prototype.slice.call(arguments);
  3. }
  4. console.log(fn(1, 2, 3, 4, 5)); // [1, 2, 3, 4, 5]

数组拼接

  1. let arr1 = [1, 2, 3];
  2. let arr2 = [4, 5, 6];
  3. let arr3 = arr1.concat(arr2);
  4. console.log(arr3); // [1, 2, 3, 4, 5, 6]
  5. console.log(arr1); // [1, 2, 3]
  6. console.log(arr2); // [4, 5, 6]
  8. [].push.apply(arr1, arr2);
  9. console.log(arr1); // [1, 2, 3, 4, 5, 6]
  10. console.log(arr2); // [4, 5, 6]

判断变量类型

  1. let arr1 = [1,2,3];
  2. let str1 = 'string';
  3. let obj1 = {name: 'thomas'};
  5. function isArray(obj) {
  6.   return Object.prototype.toString.call(obj) === '[object Array]';
  7. }
  8. console.log(fn1(arr1)); // true
  11. //  判断类型的方式，这个最常用语判断array和object，null(因为typeof null等于object)  
  12. console.log(Object.prototype.toString.call(arr1)); // [object Array]
  13. console.log(Object.prototype.toString.call(str1)); // [object String]
  14. console.log(Object.prototype.toString.call(obj1)); // [object Object]
  15. console.log(Object.prototype.toString.call(null)); // [object Null]