call,apply学习笔记

call,apply

一、三个函数存在意义：改变函数执行时的上下文，改变函数运行时的this指向。

let obj = {name: 'tony'};
  
function Child(name){
  this.name = name;
}
  
Child.prototype = {
  constructor: Child,
  showName: function(){
    console.log(this.name);
  }
}
var child = new Child('thomas');
child.showName(); // thomas
  
//  call,apply,bind使用
child.showName.call(obj);
child.showName.apply(obj);
let bind = child.showName.bind(obj); // 返回一个函数
bind(); // tony

拿别人的showName方法，并动态改变其上下文帮自己输出了信息，说到底就是实现了复用。

二、区别

（一）call、apply与bind的差别

call和apply改变了函数的this指向后便执行该函数，而bind则是返回改变了上下文后的一个函数。

（二）call、apply的区别

1.参数的区别：

（1）call和aplly的第一个参数都是要改变上下文的对象；

（2）而call从第二个参数开始以参数列表的形式展现；

（3）apply则是把除了改变上下文对象的参数放在一个数组里面作为它的第二个参数。

例子：

// 求数组中的最值
let arr1 = [1, 2, 19, 6];
console.log(Math.max.call(null, 1,2,19,6)); // 19
console.log(Math.max.call(null, arr1)); // NaN，这里call传数组就不行
console.log(Math.max.apply(null, arr1)); //  19 直接可以用arr1传递进去

function fn() {
    console.log(this);
}
// apply方法结果同下
fn.call(); // 普通模式下this是window，在严格模式下this是undefined
fn.call(null); // 普通模式下this是window，在严格模式下this是null
fn.call(undefined); // 普通模式下this是window，在严格模式下this是undefined

三、实际使用

0.将伪数组转化为数组

条件：（1）含有length属性的对象，dom节点, 函数的参数arguments

1.数组拼接，添加

let arr1 = [1,2,3];
let arr2 = [4,5,6];

//数组的concat方法：返回一个新的数组
let arr3 = arr1.concat(arr2); 
console.log(arr3); // [1, 2, 3, 4, 5, 6]

console.log(arr1); // [1, 2, 3] 不变
console.log(arr2); // [4, 5, 6] 不变
// 用 apply方法
[].push.apply(arr1,arr2);  // 给arr1添加arr2
console.log(arr1); // [1, 2, 3, 4, 5, 6]
console.log(arr2); // 不变

2.判断变量类型

let arr1 = [1,2,3];
let str1 = 'string';
let obj1 = {name: 'thomas'};
//
function isArray(obj) {
  return Object.prototype.toString.call(obj) === '[object Array]';
}
console.log(fn1(arr1)); // true

//  判断类型的方式，这个最常用语判断array和object，null(因为typeof null等于object)  
console.log(Object.prototype.toString.call(arr1)); // [object Array]
console.log(Object.prototype.toString.call(str1)); // [object String]
console.log(Object.prototype.toString.call(obj1)); // [object Object]
console.log(Object.prototype.toString.call(null)); // [object Null]

3.利用call和apply做继承

function Animal(name){      
    this.name = name;      
    this.showName = function(){      
        console.log(this.name);      
    }      
}      

function Cat(name){    
    Animal.call(this, name);    
}      

// Animal.call(this) 的意思就是使用this对象代替Animal对象，那么
// Cat中不就有Animal的所有属性和方法了吗，Cat对象就能够直接调用Animal的方法以及属性了
var cat = new Cat("TONY");     
cat.showName();   //TONY。

4.多继承

  function Class1(a,b) {
    this.showclass1 = function(a,b) {
      console.log(`class1: ${a},${b}`);
    }
  }

  function Class2(a,b) {
    this.showclass2 = function(a,b) {
      console.log(`class2: ${a},${b}`);
    }
  }

  function Class3(a,b,c) {
    Class1.call(this);
    Class2.call(this);
  }

  let arr10 = [2,2];
  let demo = new Class3();
  demo.showclass1.call(this,1); // class1: 1,undefined
  demo.showclass1.call(this,1,2); // class1: 1,2
  demo.showclass2.apply(this,arr10); // class2: 2,2

感谢作者，转载自：
作者：thomaszhou
链接：https://juejin.im/post/5a9640335188257a7924d5ef