JavaScript学习笔记（八）

最新推荐文章于 2024-09-14 18:52:56 发布
最新推荐文章于 2024-09-14 18:52:56 发布
阅读量737 收藏 11
点赞数 24
分类专栏： JavaScript 文章标签： javascript 学习 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wz_1992/article/details/140270154
版权

49、JavaScript 函数定义

  • JavaScript 函数是通过 function 关键词定义的。
  • 您可以使用函数声明或函数表达式。

49.1 函数声明

  • 语法：
function functionName(parameters) {
   要执行的代码
}

示例：

<body>
    <p id="demo"></p>
    <script>
      var x = myFunction(3, 6);
      document.getElementById("demo").innerHTML = x;
      function myFunction(a, b) {
        return a * b;
      }
    </script>
  </body>

输出：18

49.2 函数表达式

  • JavaScript 函数也可以使用表达式来定义。

  • 函数表达式可以在变量中存储：

 <body>
    <p id="demo"></p>
    <script>
      var x = function (a, b) {
        return a * b;
      };
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>

输出：function (a, b) { return a * b; }

  • 在变量中保存函数表达式之后，此变量可用作函数：
  <body>
    <p id="demo"></p>
    <script>
      var x = function (a, b) {
        return a * b;
      };
      document.getElementById("demo").innerHTML = x(3, 4);
    </script>
  </body>

输出：12

49.3 Function() 构造器

  • 正如您在之前的例子中看到的，JavaScript 函数是通过 function 关键词定义的。

  • 函数也可以通过名为 Function() 的内建 JavaScript 函数构造器来定义。

 <body>
    <p id="demo"></p>
    <script>
      document.getElementById("demo").innerHTML = myFunction(3, 6);
      function myFunction(a, b) {
        return a * b;
      }
    </script>
  </body>

输出：18

或者：

<body>
    <p id="demo"></p>
    <script>
      var myFunction = function (a, b) {
        return a * b;
      };
      document.getElementById("demo").innerHTML = myFunction(3, 6);
    </script>
  </body>

输出：18

49.4 自调用函数

  • 函数表达式可以作为“自调用”。

  • 自调用表达式是自动被调用（开始）的，在不进行调用的情况下。

  • 函数表达式会自动执行，假如表达式后面跟着 ()。

  • 您无法对函数声明进行自调用。您需要在函数周围添加括号，以指示它是一个函数表达式：

<body>
    <p id="demo"></p>
    <script>
      (function () {
        document.getElementById("demo").innerHTML = "自调用内容";
      })();
    </script>
  </body>

输出：自调用内容

49.5 函数可用作值

  • JavaScript 函数可被用作值：
<body>
    <p id="demo"></p>
    <script>
      var myFunction = function (a, b) {
        return a * b;
      };
      document.getElementById("demo").innerHTML = myFunction(3, 6);
    </script>
  </body>

输出：18

  • JavaScript 函数可用在表达式中：
  <body>
    <p id="demo"></p>
    <script>
      function myFunction(a, b) {
        return a * b;
      }
      var x = myFunction(3, 4) * 5;
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>

输出：60

49.6 函数是对象

  • JavaScript 中的 typeof 运算符会为函数返回 “function”。但是最好是把 JavaScript 函数描述为对象。

  • JavaScript 函数都有属性和方法。

  • arguments.length 会返回函数被调用时收到的参数数目：

 <body>
    <p id="demo"></p>
    <script>
      function myFunction(a, b) {
        return arguments.length;
      }
      var x = myFunction(3, 4);
      document.getElementById("demo").innerHTML = x;
    </script>
  </body>

输出：2

  • toString() 方法以字符串返回函数：
<body>
    <p id="demo"></p>
    <script>
      function myFunction(a, b) {
        return a * b;
      }
      document.getElementById("demo").innerHTML = myFunction.toString();
    </script>
  </body>

输出：function myFunction(a, b) { return a * b; }

  • 定义为对象属性的函数，被称为对象的方法。

  • 为创建新对象而设计的函数，被称为对象构造函数（对象构造器）。

49.7 箭头函数

  • 箭头函数允许使用简短的语法来编写函数表达式。

  • 您不需要 function 关键字、return 关键字和花括号。

  <body>
    <p id="demo"></p>
    <script>
      // function myFunction(a, b) {
      //   return a * b;
      // }

      //可简化为：
      // var x = (a, b) => a * b;
      //或者
      var x = (a, b) => {
        return a * b;
      };
      document.getElementById("demo").innerHTML = x(5, 6);
    </script>
  </body>

输出：30

50、 JavaScript 函数参数

  • JavaScript 函数不会对参数值进行任何检查。

50.1 函数参数

  • 函数参数（parameter）指的是在函数定义中列出的名称。

  • 函数参数（argument）指的是传递到函数或由函数接收到的真实值。

functionName(parameter1, parameter2, parameter3) {
    要执行的代码
}

50.2 参数规则

  • JavaScript 函数定义不会为参数（parameter）规定数据类型。

  • JavaScript 函数不会对所传递的参数（argument）实行类型检查。

  • JavaScript 函数不会检查所接收参数（argument）的数量。

50.3 参数默认

  • 如果调用参数时省略了参数（少于被声明的数量），则丢失的值被设置为：undefined。
  <body>
    <p id="demo"></p>
    <script>
      function myFunction(a, b) {
        if (b === undefined) {
          b = 0;
        }
        return a * b;
      }

      document.getElementById("demo").innerHTML = myFunction(5);
    </script>
  </body>

输出：0

  • 如果函数调用的参数太多（超过声明），则可以使用 arguments 对象来达到这些参数。（如下）

50.4 arguments 对象

  • JavaScript 函数有一个名为 arguments 对象的内置对象。

  • arguments 对象包含函数调用时使用的参数数组。

示例：使用函数来查找（例如）数字列表中的最高值：

  <body>
    <p id="demo"></p>
    <script>
      function findMax() {
        var i;
        var max = -Infinity;
        for (i = 0; i < arguments.length; i++) {
          if (max < arguments[i]) {
            max = arguments[i];
          }
        }
        return max;
      }
      document.getElementById("demo").innerHTML = findMax(4, 5, 6);
    </script>
  </body>

输出：6

示例：创建一个函数来总和所有输入值：

<body>
    <p id="demo"></p>
    <script>
      function findMax() {
        var i;
        var sum = 0;
        for (i = 0; i < arguments.length; i++) {
          sum += arguments[i];
        }
        return sum;
      }
      document.getElementById("demo").innerHTML = findMax(4, 5, 6);
    </script>
  </body>

输出：15

51、JavaScript 函数调用

  • JavaScript 函数内部的代码会在“某物”调用它时执行。

51.1 以函数形式调用函数

  <body>
    <p id="demo"></p>
    <script>
      function myFunction(a, b) {
        return a * b;
      }
      document.getElementById("demo").innerHTML = myFunction(10, 2);
    </script>
  </body>

或者：

  <body>
    <p id="demo"></p>
    <script>
      function myFunction(a, b) {
        return a * b;
      }
      document.getElementById("demo").innerHTML = window.myFunction(10, 2);
    </script>
  </body>

输出：20

51.2 this 关键词

  • 全局对象：
 <body>
    <p id="demo"></p>
    <script>
      function myFunction() {
        return this;
      }
      document.getElementById("demo").innerHTML = myFunction();
    </script>
  </body>

输出：
[object Window]

  • 作为方法来调用函数：
  <body>
    <p id="demo"></p>
    <script>
      var myObject = {
        firstName: "文",
        lastName: "阿花",
        fullName: function () {
          return this.firstName + this.lastName;
        },
      };
      document.getElementById("demo").innerHTML = myObject.fullName();
    </script>
  </body>

输出：文阿花

或者：

  <body>
    <p id="demo"></p>
    <script>
      var myObject = {
        firstName: "文",
        lastName: "阿花",
        fullName: function () {
          return this;
        },
      };
      document.getElementById("demo").innerHTML = myObject.fullName();
    </script>
  </body>

输出：[object Object]

52、JavaScript 函数 Call

52.1 方法重用

  • 使用 call() 方法，您可以编写能够在不同对象上使用的方法。

52.2 函数是对象方法

  • 在 JavaScript 中，函数是对象的方法。

  • 如果一个函数不是 JavaScript 对象的方法，那么它就是全局对象的函数。

示例：下面的例子创建了带有三个属性的对象（firstName、lastName、fullName）：

fullName 属性是一个方法。person 对象是该方法的拥有者。

fullName 属性属于 person 对象的方法。

<body>
    <p id="demo"></p>
    <script>
      var myObject = {
        firstName: "文",
        lastName: "阿花",
        fullName: function () {
          return this.firstName + this.lastName;
        },
      };
      document.getElementById("demo").innerHTML = myObject.fullName();
    </script>
  </body>

输出：文阿花

52.3 JavaScript call() 方法

  • call() 方法是预定义的 JavaScript 方法。

  • 它可以用来调用所有者对象作为参数的方法。

  • 通过 call()，您能够使用属于另一个对象的方法。

示例：本例调用 person 的 fullName 方法，并用于 person1：

 <body>
    <p id="demo"></p>
    <p id="demo1"></p>
    <script>
      var person = {
        fullName: function () {
          return this.firstName + this.lastName;
        },
      };

      var person1 = {
        firstName: "文",
        lastName: "阿花",
      };

      var person2 = {
        firstName: "肖",
        lastName: "战",
      };
      document.getElementById("demo").innerHTML = person.fullName.call(person1);
      document.getElementById("demo1").innerHTML =
        person.fullName.call(person2);
    </script>
  </body>

输出：文阿花

肖战

52.4 带参数的 call() 方法

call() 方法可接受参数：

 <body>
    <p id="demo"></p>
    <script>
      var person = {
        fullName: function (city, country) {
          return this.firstName + this.lastName + " " + city + " " + country;
        },
      };

      var person1 = {
        firstName: "文",
        lastName: "阿花",
      };

      var person2 = {
        firstName: "肖",
        lastName: "战",
      };
      document.getElementById("demo").innerHTML = person.fullName.call(
        person1,
        "郑州",
        "中国"
      );
    </script>
  </body>

输出：文阿花 郑州 中国

53、JavaScript 函数 Apply

53.1 方法重用

  • 通过 apply() 方法，您能够编写用于不同对象的方法。

53.2 JavaScript apply() 方法

  • apply() 方法与 call() 方法非常相似：

示例：在本例中，person 的 fullName 方法被应用到 person1：

 <body>
    <p id="demo"></p>
    <script>
      var person = {
        fullName: function () {
          return this.firstName + this.lastName;
        },
      };

      var person1 = {
        firstName: "文",
        lastName: "阿花",
      };

      var person2 = {
        firstName: "肖",
        lastName: "战",
      };
      document.getElementById("demo").innerHTML =
        person.fullName.apply(person1);
    </script>
  </body>

输出：文阿花

53.3 call() 和 apply() 之间的区别

不同之处是：

  • call() 方法分别接受参数。

  • apply() 方法接受数组形式的参数。

  • 如果要使用数组而不是参数列表，则 apply() 方法非常方便。

53.4 带参数的 apply() 方法

  • apply() 方法接受数组中的参数。
 <body>
    <p id="demo"></p>
    <script>
      var person = {
        fullName: function (city, country) {
          return this.firstName + this.lastName + " " + city + " " + country;
        },
      };

      var person1 = {
        firstName: "文",
        lastName: "阿花",
      };

      var person2 = {
        firstName: "肖",
        lastName: "战",
      };
      document.getElementById("demo").innerHTML = person.fullName.apply(
        person1,
        ["郑州", "中国"]
      );
    </script>
  </body>

输出：文阿花 郑州 中国

53.5 在数组上模拟 max 方法

您可以使用 Math.max() 方法找到（数字列表中的）最大数字：

document.getElementById("demo").innerHTML = Math.max(1,2,3);

或者：

Math.max.apply(null, [1,2,3]); // 也会返回 3

第一个参数（null）无关紧要。在本例中未使用它。

或者：

document.getElementById("demo").innerHTML = Math.max.apply(Math, [1,2,3]);

或者：

Math.max.apply(" ", [1,2,3]); // 也会返回 3

或者：

Math.max.apply(0, [1,2,3]); // 也会返回 3

输出：3

54、函数借用：JavaScript Function bind()

函数借用（Function Borrowing）

  • 通过使用 bind() 方法，一个对象可以从另一个对象借用一个方法。

示例：下面的例子创建了 2 个对象（person 和 member），member 对象借用了 person 对象的 fullname 方法：

  <body>
    <p id="demo"></p>
    <script>
      var person = {
        firstName: "钟",
        lastName: "离",
        fullName: function () {
          return this.firstName + this.lastName;
        },
      };

      var person1 = {
        firstName: "文",
        lastName: "阿花",
      };

      var person2 = {
        firstName: "肖",
        lastName: "战",
      };
      var fullName = person.fullName.bind(person1);
      document.getElementById("demo").innerHTML = fullName();
    </script>
  </body>

输出：文阿花

更多内容:JavaScript Function bind()

55、JavaScript 闭包

JavaScript 闭包

文阿花
关注
专栏目录
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1072
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
Javascript入门学习笔记
weixin_61370021的博客
04-27 4644
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
JavaScript学习笔记
qq_53388077的博客
03-30 1581
JavaScript是一门跨平台、面向对象的脚本语言，是用来控制网页行为的。脚本语言通常直接解释执行，不需要编译，缩短了传统编程语言的运行过程/*定义格式：var 对象名={属性名1：属性值1，属性名2：属性值2，属性名3：属性值3，函数名称：function(形参列表){}*/var user={age:20,alert("用膳");//简化方法：eat(){alert("用膳");
《高性能JavaScript》学习笔记
Leon_Chenl的博客
05-21 1078
当DOM的变化影响了元素的几何属性（宽和高）——比如改变边框宽度或给段落增加文字，导致行数增加——浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会因此受到影响。一旦空闲，队列中的下一个任务就被重新提取出来并运行。并不是所有的DOM变化都会影响几何属性，例如改变一个元素的背景色不会影响它的宽和高，这种情况下只会发生一次重绘，因为元素的布局并没有改变。对象成员包括属性和方法，当一个被命名的成员引用了一个函数，该成员就被称为一个“方法”，相反，引用了非函数类型的成员就被称为“属性”。
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
小白JavaScript学习笔记----JavaScript 进阶
weixin_51877011的博客
05-05 1814
垃圾回收机制(Garbage Collection) 简称 GCJS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收。正因为垃圾回收器的存在，许多人认为JS不用太关心内存管理的问题但如果不了解JS的内存管理机制，我们同样非常容易成内存泄漏（内存无法被回收）的情况不再用到的内存，没有及时释放，就叫做内存泄漏面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。举个栗子：蛋炒饭。
学习笔记2 JavaScript
qwe121381122的博客
01-08 432
【学习笔记】JavaScript的作用域
ming的博客
07-29 935
作用域（scope）规定了变量能够被访问的“范围”，离开了这个“范围”变量便不能被访问，作用域也可以堆叠成层次结构，子作用域可以访问父作用域，反过来则不行。
JavaScript 学习笔记 超详细（b站pink老师）
weixin_59531237的博客
05-10 1万+
1. JavaScript （是什么？是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。2. 作用（做什么？– 网页特效 (监听用户的一些行为让网页作出对应的反馈)– 表单验证 (针对表单数据的合法性进行判断)– 数据交互 (获取后台的数据, 渲染到前端)– 服务端编程 (node.js)3. JavaScript的组成（有什么？
JavaScript新手入门学习笔记
qq_43389754的博客
12-04 4万+
JavaScript介绍 1.1 前端三要素 HTML 超文本标记语言 决定了网页中的视图内容 CSS 层叠样式表 决定了网页中的视图效果 JavaScript 赋予网页动态功能 1.2 JavaScript简介 JavaScript是一种基于对象的事件驱动型、弱类型的脚本语言 基于对象：区别于Java中的面向对象，遵循对象.方法的规则，但是没有类的概念 事件驱动：脚本语言代码需要由网页中的事件来触发执行 脚本语言：JS作为寄生语言，写在HTML网页中 JavaScript在1995年
javascript学习笔记
11-24
学习JavaScript时，了解这些基础知识是至关重要的。随着深入学习，你将接触到更高级的概念，如闭包、异步编程（回调函数、Promise、async/await）、模块系统以及现代框架如React、Vue和Angular的使用。JavaScript的...
javascript 学习笔记（八）javascript对象
12-02
1、javascript中的内置对象 javascript中除了本身的内置对象，如以下我们所熟悉的对象： •Array •Date •Math •String •RegExp •…… 各个对象都有自己的属性及方法，比如我们经常使用属性及方法 属性：string...
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 856
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
【JavaScript】LeetCode：707设计链表
最新发布
weixin_45980065的博客
09-14 493
【代码】【JavaScript】LeetCode：707设计链表。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 448
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 876
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1302
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
jEasyUI 创建带复选框的树形菜单
wjs2024的博客
09-10 363
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
JavaScript学习笔记：从基础到DOM编程
"这是一份全面的JavaScript学习笔记，涵盖了从CSS样式表基础到JavaScript语法、DOM编程等多个方面，旨在帮助读者深入理解并掌握JavaScript语言。" 在这份笔记中，作者首先介绍了CSS样式表的基本概念，包括什么是CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值