call、apply、以及bind的用法

最新推荐文章于 2024-05-10 10:21:09 发布

原创最新推荐文章于 2024-05-10 10:21:09 发布 · 245 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

JavaScript 专栏收录该内容

5 篇文章

订阅专栏

本文深入解析JavaScript中call(), apply()和bind()三种函数调用方式的特点与应用场景。通过实例展示如何利用这些方法实现对象间的方法借用，以及在不同上下文中调整函数执行的this指向。同时，探讨了bind()在预设参数方面的独特用途。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、call（）方法使用一个指定的this值和一个或多个参数来调用一个函数。
简单来举个例子就是一个对象可以通过call去调用另外一个对象的构造函数或者属性或者方法.如果这个函数处于非严格模式下，this则指定为 null 或 undefined 时会自动替换为指向全局对象

function School(schoolname){
    this.schoolname = schoolname;
      this.changeSchool = (schoolname,name='')=>{
          console.log(name+'转校成功','转校后的学校是'+schoolname);
          this.schoolname = schoolname;
      }
  }
  function People(name,schoolname){
      this.name = name;
      School.call(this,schoolname);
      this.change = function(){
          this.changeSchool(schoolname,name);
      }
  }
  let xiaomi = new People('小米','青大');
  console.log(xiaomi.name);//小米
  console.log(xiaomi.schoolname);//青大
  xiaomi.change('清华');//小米转校成功 转校后的学校是青大

2、apply()
func.apply(thisArg, [argsArray])
作用和用法和call相类似，区别在于apply的第二个参数是使用参数数组而不是接受一组参数列表,还可以是一个类数组对象：
可以用于初始化一个指定的数组，但不仅仅只有length属性，没有实际元素

Array.apply(null, {length: 6})
//[undefined, undefined, undefined, undefined, undefined, undefined]

期初不太理解这个传{length:6}为什么就能初始化长度为6的undefined呢，于是找资料找到了答案
因为第二个参数可以传一个类数组对象，传{length:6}相当于传[undefined, undefined, undefined, undefined, undefined, undefined]，所以就变成
Array.apply(null,[undefined, undefined, undefined, undefined, undefined, undefined])，然后再可以变成
Array(undefined, undefined, undefined, undefined, undefined, undefined)。

3、bind()
创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。

this.name = '全局变量';
 let obj = {
     name: '苹果',
     getName: function(){
         var func = function(){
             console.log(this.name);
         }
         func()
     }
 };
 obj.getName();//全局变量
 //如果想要拿到苹果
 let obj2 = {
     name:'苹果',
     getName: function(){
         let that = this;
         var func = function(){
             console.log(that.name);
         }
         func()
     }
 }
 obj2.getName();//苹果
 // 用bind写法
 let obj3 = {
     name:'苹果',
     getName: function(){
         var func = function(){
             console.log(this.name);
         }.bind(this);
         func()
     } 
 }
 obj3.getName();//苹果

bind() 的另一个最简单的用法是使一个函数拥有预设的初始参数

function sum(a1,b2){
            return a1+b2;
}
console.log(sum(1,3));//4
let sumBind = sum.bind(null,3);
console.log(sumBind(1,4));//4   后面传的4就是无效参数了

参考链接：
Array.apply()新建空数组