call ,apply和bind方法详解

文章目录

前言

call()、apply()和bind()方法三者作用都是 改变this指向。

本文旨在探讨三者之间的区别和作用。

call, apply, bind 三者的区别在哪里
什么情况下用apply,什么情况下用call
apply的其他巧妙用法（一般在什么情况下可以使用apply）

bind、call、apply都是用来指定一个函数内部的this的值，先看看bind、call、apply的用法

var year =2021
function getDate(month, day){return this.year +'-'+ month +'-'+ day
}

let obj ={year:2022}
getDate.call(null,3,8)//2021-3-8
getDate.call(obj,3,8)//2022-3-8
getDate.apply(obj,[6,8])//2022-6-8
getDate.bind(obj)(3,8)//2022-3-8

一、 call和apply

1. call() 方法

call()方法接受的语法和作用与apply()方法类似，只有一个区别就是call()接受的是一个参数列表，而apply()方法接受的是一个包含多个参数的数组。

二者都是函数对象Function的方法，且第一个参数都是要绑定对象的上下文
例如：

let obj ={
    a:1,
    get:function(){return2}}
let g = obj.get
g.call({},1,2,3)
g.apply({},[1,2,3])

call方法调用父构造函数

function Product(name, price){
    this.name = name;
    this.food = food;}// 调用父构造函数的call方法来实现继承
function Food(name, price){
    Product.call(this.name, toy);
    this.category ='food';}

function Toy(name, price){
    Product.call(this, name, price);
    this.category ='toy';}

var cheese = new Food('feta',5);
var fun = new Toy('robot',40);

call方法调用匿名函数

var animals =[{species:'Lion', name:'King'},{species:'Whale', name:'Fail'}];for(var i =0; i < animals.length; i++){(function(i){
        this.print =function(){
            console.log('#'+ i +' '+ this.species +': '+ this.name);}
        this.print();}).call(animals[i], i);//call调用匿名函数}

call方法调用函数并且指定上下文的this

var obj ={
    animal:'cats', sleepDuration:'12 and 16 hours'};

function greet(){
    var reply =[this.animal,'typically sleep between', this.sleepDuration].join(' ');
    console.log(reply);}

greet.call(obj);//"cats typically sleep between 12 and 16 hours"

call方法调用函数并且不指定第一个参数(argument)

在这个例子中，我们没有传递第一个参数，this的值将被绑定为全局对象。

var sData ='marshall';

function display(){
    console.log("sData's value is %s",this.sData);}

display.call();// sData value is marshall

但是在严格模式下，this 的值将会是undefined

var sData ='marshall';

function display(){
    console.log("sData's value is %s",this.sData);}

display.call();// Cannot read the property of 'sData' of undefined

2. apply() 方法

使用 apply，我们可以只写一次这个方法然后在另一个对象中继承它，而不用在新对象中重复写该方法。

apply 与 call() 非常相似，不同之处在于提供参数的方式。apply 使用参数数组而不是一组参数列表。apply 可以使用数组字面量（array literal），如 fun.apply(this, [‘eat’, ‘bananas’])，或数组对象，如 fun.apply(this, new Array(‘eat’, ‘bananas’))。

apply方法调用一个具有给定this值的函数，以及以一个数组的形式提供参数。

var array =['marshall','eminem'];
var elements =[0,1,2];
array.push.apply(array,elements);
console.log(array);//['marshall','eminem',0,1,2]

使用apply和内置函数

对于一些需要写循环以遍历数组各项的需求，我们可以用apply完成以避免循环。

//找出数组中最大值和最小值
var numbers =[5,6,2,3,7];//使用Math.min和Math.max以及apply函数时的代码
var max = Math.max.apply(null, numbers);
var min = Math.min.apply(null, numbers);

上边这种调用apply的方法，有超出JavaScript引擎参数长度上限的风险。
如果我们的参数数组非常大，推荐使用下边这种混合策略：将数组切块后循环传入目标方法

function minOfArray(arr){
    var min = Infinity;
    var QUANTUM =32768;for(var i =0, len = arr.length; i < len; i += QUANTUM){
      var submin = Math.min.apply(null, arr.slice(i, Math.min(i + QUANTUM, len)));
      min = Math.min(submin, min);}return min;}
  
  var min =minOfArray([5,6,2,3,7]);

3. apply与call的实现

具体代码如下：

// call和apply实现方式类似，只是传参的区别// 基本思想是把fn.call(obj,args)中的fn赋值为obj的属性，然后调用obj.fn即可实现fn中this指向的改变
Function.prototype.myCall =function(context = window){//myCall函数的参数，没有传参默认是指向window
  context.fn = this //为对象添加方法（this指向调用myCall的函数）
  let args =[...arguments].slice(1)// 剩余的参数
  let res = context.fn(...args)// 调用该方法，该方法this指向context
  delete context.fn //删除添加的方法return res
}

Function.prototype.myApply =function(context = window){//myCall函数的参数，没有传参默认是指向window
  context.fn = this //为对象添加方法（this指向调用myCall的函数）
  let res
  if(arguments[1]){//判断是否有第二个参数
    res = context.fn(...arguments[1])// 调用该方法，该方法this指向context}else{
    res = context.fn()// 调用该方法，该方法this指向context}
  delete context.fn //删除添加的方法return res
}// 验证
function sayName(name='wwx',age=18){
  this.name = name
  this.age = age
  console.log(this.name)return this.age
}
var obj ={
  name :'zcf',
  age:24}
var age = sayName.myCall(obj,"wxxka",19)// 19
var age1 = sayName.myApply(obj,["wwxSSS",20])//20

二、bind

1. bind 简介

bind()函数会创建一个新的绑定函数，这个绑定函数包装了原函数的对象。调用绑定函数通常会执行包装函数。
绑定函数内部属性：

包装的函数对象
在调用包装函数时始终作为this传递的值
在对包装函数做任何调用时都会优先用列表元素填充参数列表。

而原函数 retrieveX 中的 this 并没有被改变，依旧指向全局对象 window。

this.x =9;//this指向全局的window对象
var module ={
    x:81,
    getX:function(){return this.x;}};

console.log(module.getX());//81

var retrieveX = module.getX;
console.log(retrieveX());//9,因为函数是在全局作用域中调用的// 创建一个新函数，把this绑定到module对象// 不要将全局变量 x 与 module 的属性 x 混淆
var boundGetX = retrieveX.bind(module);
console.log(boundGetX());//81

bind传递参数问题：
在通过bind改变this指向的时候所传入的参数会拼接在调用返回函数所传参数之前，多余参数不起作用。

var newShowName = showName.bind(newThis,'hello');//在通过bind改变this指向的时候只传了“hello”一个参数，//在调用newShowName这个返回参数的时候，bind传参拼接在其前newShowName('world');//输出：newThis hello world

var newShowName = showName.bind(newThis,'hello');//在通过bind改变this指向的时候只传了“hello”一个参数，//在调用newShowName这个返回参数的时候，bind传参拼接在其前，//这时newShowName的参数为“hello”，“a”，“world”//而该函数只需要两个参数，则第三个参数被忽略newShowName('a','world');//输出：newThis hello a

bind传入的参数和newShowName方法传入的参数会拼接在一起，一齐传给showName方法。

bind无法改变构造函数的this指向

var name ='window';
var newThis ={ name:'newThis'};
function showName(info1, info2){
    console.log(this.name, info1, info2);}showName('a','b');//输出：window a b// 通过bind改变this指向
var newShowName = showName.bind(newThis,'hello','1','2');newShowName('a','world');//输出：newThis hello world

console.log(new newShowName().constructor);//输出：showName函数体

可以看出，通过bind改变this指向返回函数的构造器还是最开始的showName函数。

new newShowName()实例化了一个新的方法，这个方法的this也不再指向newThis。

2. bind的实现

通过apply模拟bind源码实现：

Function.prototype.myBind =function(context = window){
  let fn = this // 调用bind的函数
  let args =[...arguments].slice(1)// myBind的参数
  let bind =function(){
    let args1 =[...arguments].slice()// bind的参数return fn.apply(context,args.concat(args1))}return bind
}// 测试
var obj ={
  name :'zcf',
  age:24}
function sayName(name='wwx',age=18){
  this.name = name
  this.age = age
  console.log(this.name)return this.age
}
var mb = sayName.myBind(obj)mb()// obj = {name:"wwx",age:18}mb("acfwwx",1819)// obj = {name:"acfwwx",age:1819}};

三、 call ,apply 和bind方法应用

1. 什么情况下用apply,什么情况下用call

在给对象参数的情况下：

如果参数的形式是数组的时候，比如apply示例里面传递了参数arguments，这个参数是数组类型，并且在调用Person的时候参数的列表是对应一致的(也就是Person和Student的参数列表前两位是一致的) 就可以采用 apply。

如果我的Person的参数列表是这样的(age,name)，而Student的参数列表是(name,age,grade)，这样就可以用call来实现了，也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade));

call方法：call(obj,x,y,z,…)
apply方法：apply(obj,[x,y,z])

<script type="text/javascript">/*定义一个人类*/  
    function Person(name,age){  
        this.name=name;  
        this.age=age;}/*定义一个学生类*/functionStudent(name,age,grade){  
        Person.apply(this,arguments);//Person.call(this,name,age);
        this.grade=grade;}//创建一个学生类  
    var student=new Student("zhangsan",21,"一年级");//测试  alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade);//大家可以看到测试结果name:zhangsan age:21  grade:一年级  //学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处.  </script>

2. call和apply 应用场景

a. 函数之间的相互调用

function add(a,b){alert(a+b);}
function sub(a,b){alert(a-b);}
add.call(sub,5,6); 
add.apply(sub,[5,6]);//弹出11，对象替换，等等这不是函数吗？？  其实函数名是Function对象的引用。

b. 构造函数之间的调用

function Person(){
     this.age =50;
     this.showAge=function(){alert(this.age);}}
function Son(){
    this.age  =20;}// 让Son也具有Person的方法// function Son(){//     this.age  = 20;//     Person.call(this);//    //Person.apply(this)// }

var father  = new Person();
var xiaoming = new Son();

father.showAge.apply(xiaoming)//立即执行显示20
father.showAge.call(xiaoming)//立即执行显示20
xiaoming.showAge();//报错，showAge() is not a function

c. 多重继承

使用多个call 或者apply 即可。

场景1：找出一个数组的最大值或最小值，数组长度不确定

var arr  =[1,2,3,.......n]
Math.min.apply(this,arr)// this可随便换，但需是一个对象

场景2：两数组合并

var arr1=new Array("1","2","3");  
var arr2=new Array("4","5","6");  
  
Array.prototype.push.apply(arr1,arr2);

d. 类数组共用数组方法


function add(){// 第一次执行时，定义一个数组专门用来存储所有的参数
    var _args = Array.prototype.slice.call(arguments);// 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值
    var _adder =function(){
        _args.push(...arguments);return _adder;}

function add(){// 第一次执行时，定义一个数组专门用来存储所有的参数
        var _args =[].slice.call(arguments);// 在内部声明一个函数，利用闭包的特性保存_args并收集所有的参数值,执行时已经收集所有参数为数组
        var adder =function(){
            var _adder =function(){// 执行收集动作，每次传入的参数都累加到原参数[].push.apply(_args,[].slice.call(arguments));return _adder;};// 利用隐式转换的特性，当最后执行时隐式转换，并计算最终的值返回
            _adder.toString =function(){return _args.reduce(function(a, b){return a + b;});}return _adder;}returnadder(_args);}}

标签： javascript 前端 es6

本文转载自: https://blog.csdn.net/qq_43000315/article/details/125360096
版权归原作者 Summer_dog 所有，如有侵权，请联系我们删除。