callapplybind的区别

Posted 2023-04-21 Full-Stack-python

title: 06-call、apply、bind的区别
publish: true

call()和apply()

介绍

这两个方法都是函数对象的方法，需要通过函数对象来调用。

当函数调用call()和apply()时，函数都会立即执行。

• 都可以用来改变函数的this对象的指向。

• 第一个参数都是this要指向的对象（函数执行时，this将指向这个对象），后续参数用来传实参。

显式绑定this

JS提供的绝大多数函数以及我们自己创建的所有函数，都可以使用call 和apply方法。

它们的第一个参数是一个对象。因为你可以直接指定 this 绑定的对象，因此我们称之为显式绑定。

例1：

    function foo() 
        console.log(this.a);
    

    var obj = 
        a: 2
    ;

    // 将 this 指向 obj
    foo.apply(obj); //打印结果：2

第一个参数的传递

1、thisObj不传或者为null、undefined时，函数中的this会指向window对象（非严格模式）。

2、传递一个别的函数名时，函数中的this将指向这个函数的引用。

3、传递的值为数字、布尔值、字符串时，this会指向这些基本类型的包装对象Number、Boolean、String。

4、传递一个对象时，函数中的this则指向传递的这个对象。

call()和apply()的区别

call()和apply()方法都可以将实参在对象之后依次传递，但是apply()方法需要将实参封装到一个数组中统一传递（即使只有实参只有一个，也要放到数组中）。

比如针对下面这样的代码：

    var persion1 = 
        name: "小王",
        gender: "男",
        age: 24,
        say: function (school, grade) 
            alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);
        
    
    var person2 = 
        name: "小红",
        gender: "女",
        age: 18
    

如果是通过call的参数进行传参，是这样的：

	persion1.say.call(persion2, "实验小学", "六年级");

如果是通过apply的参数进行传参，是这样的：

	persion1.say.apply(persion2, ["实验小学", "六年级"]);

看到区别了吗，call后面的实参与say方法中是一一对应的，而apply传实参时，要封装成一个数组，数组中的元素是和say方法中一一对应的，这就是两者最大的区别。

call()和apply()的作用

• 改变this的指向

• 实现继承。Father.call(this)

bind()

• 都能改变this的指向

• call()/apply()是立即调用函数

• bind()是将函数返回，因此后面还需要加()才能调用。

bind()传参的方式与call()相同。

参考链接：

• https://www.jianshu.com/p/56a9c2d11adc

• https://github.com/lin-xin/blog/issues/7

• https://segmentfault.com/a/1190000007402815

• JS中改变this指向的方法

callapplybind的应用和区别

call、apply、bind的应用和区别

首先，要明白这三个函数的存在意义是什么？答案是改变函数执行时的上下文，再具体一点就是改变函数运行时的this指向。有了这个认识，接下来我们使用实例来看一下,怎么使用这三个函数。

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

首先大家来思考下,上面代码执行后打印的结果如何?

我们拿Child的showName方法，并通过执行call、apply、bind的方法动态改变其上下文帮自己输出了改变上下文之后的信息.

1.区别

bind方法是事先把fn的this改变为我们要想要执行的上下文的结果，并且把对应的参数值准备好，以后要用到了，直接的执行即可，也就是说bind同样可以改变this的指向，但和apply、call不同就是不会马上的执行

• call、apply与bind的差别

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

• call、bind和apply的区别

  call、bind和apply的第一个参数都是要改变上下文的对象，而call、bind从第二个参数开始以参数列表的形式展现.
  apply则是把除了改变上下文对象的参数放在一个数组里面作为它的第二个参数。
  

2.应用

• 将伪数组转化为数组（含有length属性的对象，dom节点, 函数的参数arguments）
  javascript中的伪数组(例如通过document.getElementsByTagName获取的元素、含有length属性的对象)具有length属性，并且可以通过0、1、2…下标来访问其中的元素，但是没有Array中的push、pop等方法。就可以利用call，apply来转化成真正的数组，就可以使用数组的方法了

1.dom节点中类数组结构

<div class="div1">1</div>
<div class="div1">2</div>
<div class="div1">3</div>

let div = document.getElementsByTagName('div');
console.log(div); // HTMLCollection(3) [div.div1, div.div1, div.div1] 里面包含length属性

let arr2 = Array.prototype.slice.call(div);
console.log(arr2); // 数组 [div.div1, div.div1, div.div1]

2.fn内的arguments

function fn10() 
    return Array.prototype.slice.call(arguments);

console.log(fn10(1,2,3,4,5)); // [1, 2, 3, 4, 5]

注意slice方法,在不传递任何参数的情况下,是会返回整个数组的

3.含有length属性的对象

let obj4 = 
	0: 1,
	1: 'thomas',
	2: 13,
	length: 3 // 一定要有length属性
;

console.log(Array.prototype.slice.call(obj4)); // [1, "thomas", 13]

• 数组拼接，添加

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); // [4, 5, 6] 不变

• 判断变量类型

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]

对于类型判断更多细节可参考这篇文章,总结了JavaScript中四种类型判断的方式:JavaScript中判断数据类型的四种方法

• 利用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

• 多继承

  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