『Javascript基础重点』7.函数进阶之call()和apply()与arguments

---

欢迎关注 『Javascript基础重点』 专栏，持续更新中
欢迎关注 『Javascript基础重点』 专栏，持续更新中
介绍一些Javascript的基础重点知识，包括并不限于函数作用域与提前声明和对象的构造函数等问题。

1. 函数指定对象调用之call()和apply()

省流助手：call()和apply()用于让函数调用时的this改为自定义的对象，两者自身的区别在于参数传入时一个用逗号间隔传入参数，一个用参数的数组传入。高阶用法是用对象1的方法，使用对象2的属性作为参数。

• 细节详解

• call()和apply()
• • 这两个方法都是函数对象的方法，需要通过函数对象来调用
• • 当对函数调用call()和apply()都会调用函数执行
• • 在调用call()和apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this
• • call()方法可以将实参在对象之后依次传递
• • apply()方法需要将实参封装到一个数组中统一传递
• • this的情况：

•   1.以函数形式调用时，this永远都是window
  

•   2.以方法的形式调用时，this是调用方法的对象
  

•   3.以构造函数的形式调用时，this是新创建的那个对象
  

•   4.使用call和apply调用时，this是指定的那个对象
  

下面我们用随便定义的一个fun()函数和随便定义的obj对象为展开例子简易分析异同点

1. 调用无形参函数时效果相同

call()和apply()和fun()在调用无形参函数时效果差不多。

    <script type="text/javascript">
      function fun() {
        alert("11111");
      }
      fun(); //11111
      fun.call(); //11111
      fun.apply(); //11111
    </script>

2. 调用有形参函数时三者各有区别

• 关于call()和apply()带参数调用的一个错误写法

    <script type="text/javascript">
      //如果函数有参数，那么三者就会出现不同
      function fun(message) {
        alert(message + "11111");
      }
      fun("fun+"); //fun+11111
      fun.call("call+"); //undefined11111
      fun.apply("apply+"); //undefined11111
    </script>

• 正确写法，call 参数用逗号间隔，而apply必须把参数放入一个数组传入

 <script type="text/javascript">
      //如果函数有参数，那么三者就会出现不同
      function fun(message1, message2) {
        alert(message1 + message2 + "11111");
      }
      var obj = {}; //随便定义一个对象，call和apply需要用对象作为第一个参数
      fun("fun", "+"); //fun+11111
      fun.call(obj, "call", "+"); //call+11111
      fun.apply(obj, ["apply", "+"]); //apply+11111
    </script>

3. 高阶用法，调用对象1的方法，但是参数使用对象2的属性

虽然用的是obj对象里的sayName方法，但是得到的是obj2的name

    <script type="text/javascript">
      var obj = {
        name: "obj",
        sayName: function () {
          alert(this.name);
        },
      };
      var obj2 = {
        name: "obj2",
      };
      obj.sayName.apply(obj2, ["apply", "+"]); //obj2
    </script>

---

2. 函数调用时传入的隐含参数 arguments

• 在调用函数时，浏览器每次都会传递进两个隐含的参数：
• 1.函数的上下文对象 this
• 2.封装实参的对象 arguments
• • arguments是一个类数组对象,它也可以通过索引来操作数据，也可以获取长度
• • 在调用函数时，我们所传递的实参都会在arguments中保存
• • arguments.length可以用来获取实参的长度
• • 我们即使不定义形参，也可以通过arguments来使用实参，只不过比较麻烦，

•    arguments[0] 表示第一个实参
  

•    arguments[1] 表示第二个实参 。。。
  

• • 它里边有一个属性叫做callee，这个属性对应一个函数对象，就是当前正在指向的函数的对象

    <script type="text/javascript">
      /*
       * 在调用函数时，浏览器每次都会传递进两个隐含的参数：
       * 	1.函数的上下文对象 this
       * 	2.封装实参的对象 arguments
       * 		- arguments是一个类数组对象,它也可以通过索引来操作数据，也可以获取长度
       * 		- 在调用函数时，我们所传递的实参都会在arguments中保存
       * 		- arguments.length可以用来获取实参的长度
       * 		- 我们即使不定义形参，也可以通过arguments来使用实参，
       * 			只不过比较麻烦
       * 			arguments[0] 表示第一个实参
       * 			arguments[1] 表示第二个实参 。。。
       *		- 它里边有一个属性叫做callee，
       * 			这个属性对应一个函数对象，就是当前正在指向的函数的对象
       *
       */

      function fun(a, b) {
        console.log(arguments instanceof Array); //false 类数组但不是数组，也可以索引操作数据
        console.log(Array.isArray(arguments)); //false  类数组但不是数组，也可以索引操作数据
        console.log(arguments[0], arguments[1]); // qwer,true  输出了2个传入的参数->"qwer", true
        console.log(arguments.length); //2 输出了传入参数的长度为2
        console.log(arguments.callee == fun); //true 输出了当前指向的对象是函数本身
      }

      fun("qwer", true);

---

总结

大家喜欢的话，给个👍，点个关注！给大家分享更多计算机专业学生的求学之路！

版权声明：

发现你走远了@mzh原创作品，转载必须标注原文链接

Copyright 2023 mzh

Crated：2023-3-1

欢迎关注 『Javascript基础重点』 专栏，持续更新中
欢迎关注 『Javascript基础重点』 专栏，持续更新中
『1.提前声明问题，你苦恼写了js函数代码但是不会生效的问题吗？』
『2.易错点之函数形参与函数作用域的坑』
『3.了解原型对象优雅地构造函数の“JS中的Java继承” 提高运行效率，优雅地使用对象』
『4.JS垃圾回收机制简析』
『5.以toString()为例学习JS中的java方法重写』
『6.数组的常用方法与数组遍历』
『7.函数进阶之call()和apply()与arguments』
『8.Date类与利用时间戳来测试代码的执行的性能』
『9.Math类方法』
『10.包装类』
『11.字符串的方法』
『12.正则表达式介绍 邮件正则表达式写法』
『13.dom的应用』
『未完待续』

---