从零开始学习JavaScript:轻松掌握编程语言的核心技能⑤

news2024/11/24 20:58:44

从零开始学习JavaScript:轻松掌握编程语言的核心技能⑤

  • 1. JavaScript 函数定义
  • 2. JavaScript 函数参数
    • 2.1 函数显式参数(Parameters)与隐式参数(Arguments)
      • 2.1.1 显式参数(Parameters)
      • 2.1.2 隐式参数(Arguments)
    • 2.2 arguments 对象
  • 3. JavaScript 函数调用
    • 3.1 this 关键字
    • 3.2 全局对象
  • 4. 使用构造函数调用函数
  • 5. JavaScript 闭包

🏘️🏘️个人简介:以山河作礼。
🎖️🎖️:Python领域新星创作者,CSDN实力新星认证,阿里云社区专家博主
🎁🎁:Web全栈开发专栏:《Web全栈开发》免费专栏,欢迎阅读!



在这里插入图片描述

1. JavaScript 函数定义

📑📑在 JavaScript 中,函数可以通过 function 关键字来定义
📌函数定义的一般语法如下:

function functionName(parameters) {
  // 函数体
  return returnValue; // 可选
}

其中,functionName 是函数的名称,parameters
是函数的参数列表,可以是多个参数,用逗号分隔。函数体是函数执行的代码块,可以包含任意数量的语句。returnValue
是函数的返回值,可以省略。

📌以下是一个简单的例子,定义了一个接收两个参数并返回它们之和的函数:

function add(num1, num2) {
  return num1 + num2;
}

📌可以通过以下方式调用该函数:

var sum = add(2, 3); // sum 的值为 5

📌函数也可以使用匿名函数的形式定义,例如:

var add = function(num1, num2) {
  return num1 + num2;
}

📌这种方式定义的函数可以通过变量名来调用,例如:

var sum = add(2, 3); // sum 的值为 5

2. JavaScript 函数参数

2.1 函数显式参数(Parameters)与隐式参数(Arguments)

📑📑在 JavaScript 中,函数的参数有两种类型:显式参数和隐式参数

2.1.1 显式参数(Parameters)

📌显式参数是在函数定义时声明的参数,它们的值在函数调用时通过传递实参来确定。
例如:

function add(x, y) {
  return x + y;
}

add(2, 3); // 5

在上面的例子中,x 和 y 就是函数 add 的显式参数。在函数调用时,实参 2 和 3 会分别赋值给 x 和 y。

2.1.2 隐式参数(Arguments)

📌隐式参数是在函数内部自动创建的一个对象,它包含了所有传递给函数的实参。它是一个类数组对象,可以通过下标访问其中的元素。
例如:

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

sum(1, 2, 3, 4); // 10

arguments 就是函数 sum 的隐式参数。在函数调用时,实参 1、2、3 和 4 会被存储在 arguments
对象中,然后通过循环遍历 arguments 对象来计算它们的总和。

📌隐式参数 arguments 是一个类数组对象,它没有数组的所有方法,如果需要使用数组方法,需要将其转换成真正的数组。
例如:

function toArray() {
  return Array.prototype.slice.call(arguments);
}

toArray(1, 2, 3); // [1, 2, 3]

在上面的例子中,使Array.prototype.slice.call(arguments) 将 arguments
对象转换成了一个真正的数组,然后返回该数组。

2.2 arguments 对象

📌在 JavaScript 中,每个函数都有一个内部对象 arguments,它表示函数的实参集合。arguments 对象是一个类数组对象,可以通过下标访问其中的元素。

例如,下面的函数可以计算任意数量的实参的总和:

function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

sum(1, 2, 3, 4); // 10

arguments 对象包含了所有传递给函数 sum 的实参,通过循环遍历 arguments 对象,可以计算出它们的总和。

📌arguments 对象不是一个真正的数组,它没有数组的所有方法,如果需要使用数组方法,需要将其转换成真正的数组。
例如:

function toArray() {
  return Array.prototype.slice.call(arguments);
}

toArray(1, 2, 3); // [1, 2, 3]

使用 Array.prototype.slice.call(arguments) 将 arguments
对象转换成了一个真正的数组,然后返回该数组。

3. JavaScript 函数调用

3.1 this 关键字

📑📑在 JavaScript 中,关键字 this 通常用于引用当前函数所属的对象。this 的值在函数调用时确定,并且取决于调用函数的方式
下面是一些常见的 this 使用方式:

📌全局环境中的 this:在全局环境中,this 指向全局对象(在浏览器中是 window 对象)。
例如:

console.log(this); // 输出 window 对象

📌对象方法中的 this:在对象方法中,this 指向调用该方法的对象。
例如:

let person = {
  name: 'Tom',
  sayHi: function() {
    console.log('Hi, my name is ' + this.name);
  }
};

person.sayHi(); // 输出 Hi, my name is Tom

📌构造函数中的 this:在构造函数中,this 指向新创建的对象。
例如:

function Person(name) {
  this.name = name;
  this.sayHi = function() {
    console.log('Hi, my name is ' + this.name);
  }
}

let person1 = new Person('Tom');
let person2 = new Person('Jerry');

person1.sayHi(); // 输出 Hi, my name is Tom
person2.sayHi(); // 输出 Hi, my name is Jerry

📌apply 和 call 方法中的 this:在 apply 和 call 方法中,this 可以指向任意对象。
例如:

function sayHi() {
  console.log('Hi, my name is ' + this.name);
}

let person1 = {name: 'Tom'};
let person2 = {name: 'Jerry'};

sayHi.call(person1); // 输出 Hi, my name is Tom
sayHi.call(person2); // 输出 Hi, my name is Jerry
  • 当函数作为普通函数调用时,this 指向全局对象;
  • 当函数作为对象方法调用时,this 指向调用该方法的对象;
  • 当函数作为构造函数调用时,this 指向新创建的对象;
  • 当函数使用 apply 或 call 方法调用时,this 可以指向任意对象。

3.2 全局对象

  • 在 JavaScript 中,全局对象是一个特殊的对象,它是全局作用域中所有变量和函数的宿主对象。在浏览器中,全局对象是 window对象,它包含了所有浏览器窗口的全局变量和函数。在 Node.js 中,全局对象是 global 对象,它包含了所有 Node.js程序的全局变量和函数。
  • 全局对象可以通过 this 关键字来引用。在全局作用域中,this 指向全局对象本身。 例如,在浏览器中,可以通过window.alert() 来弹出一个对话框,也可以通过 this.alert() 来实现同样的效果。
  • 全局对象还包含了一些内置的属性和方法,例如在浏览器中,window 对象包含了document、consolesetTimeout、setInterval 等属性和方法,可以通过window.document、window.console、window.setTimeout、window.setInterval等来访问它们。

全局对象的属性和方法可以被程序中的任何代码访问,因此应该避免在全局作用域中定义过多的变量和函数,以免造成命名冲突和不必要的安全风险。

4. 使用构造函数调用函数

📑📑在 JavaScript 中,函数可以通过构造函数的方式调用,这种方式被称为构造函数调用。当使用 new 操作符调用一个函数时,该函数会被作为构造函数来使用,它将返回一个新创建的对象

下面是一个使用构造函数调用函数的示例:

function Person(name, age) {
  this.name = name;
  this.age = age;
}

let person1 = new Person('Tom', 18);
let person2 = new Person('Jerry', 20);

console.log(person1); // {name: "Tom", age: 18}
console.log(person2); // {name: "Jerry", age: 20}

Person 函数被作为构造函数来使用,通过 new 操作符创建了两个新的对象 person1 和 person2。在构造函数中,使用
this 关键字来指向新创建的对象,并将属性赋值给它们。最后,构造函数返回新创建的对象。

构造函数的名称通常以大写字母开头,这是一种约定俗成的写法,用来区分普通函数和构造函数。

另外,使用构造函数调用函数时,如果构造函数中没有显式地返回一个对象,则构造函数会默认返回新创建的对象。如果构造函数中显式地返回一个对象,则该对象将会被返回,而新创建的对象将被忽略。

5. JavaScript 闭包

📑📑在 JavaScript 中,闭包是指一个函数可以访问其词法作用域之外的变量。换句话说,闭包可以访问在函数定义时处于父级作用域中的变量,即使在函数调用时,这些变量已经不在父级作用域中了
下面是一个使用闭包的例子:

function outer() {
  var count = 0;

  function inner() {
    count++;
    console.log(count);
  }

  return inner;
}

var counter = outer();
counter(); // 输出 1
counter(); // 输出 2

outer 函数返回了一个内部函数 inner,该函数可以访问 outer 函数中的 count 变量。当 outer函数被调用时,它创建了一个新的词法作用域,并在其中定义了 count 变量和 inner 函数。然后,outer 函数返回 inner 函数,使其可以在外部作用域中被调用。

当 counter 函数被调用时,它会访问 outer 函数中的 count 变量,并将其递增。由于 inner 函数是一个闭包,它可以访问outer 函数中的 count 变量,即使 outer 函数已经执行完毕并且 count变量已经不在 outer 函数的作用域中了。

闭包在 JavaScript 中有广泛的应用,例如在模块化编程中、实现私有变量和方法、以及在异步编程中保存状态等。但是,由于闭包可以访问外部作用域中的变量,如果不妥善地使用闭包,可能会导致内存泄漏和性能问题。因此,在使用闭包时,需要谨慎考虑其影响,并避免滥用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/614763.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

HVV的艺术系列 之 上线的艺术

上线的艺术 很多时候&#xff0c;拿下的机器情况复杂多样。判断其出网性应该是首要工作。 01 到底该不该上线 承认的是&#xff0c;MSF和CS都是及其出色的后渗透工具。但是面对这种复杂多样的环境&#xff0c;上不上线是个我们要去认真考虑的问题&#xff0c;CS和MSF究竟能给我…

报表自动生成软件有哪些?热门报表自动生成软件推荐

随着数字化时代的到来&#xff0c;数据分析和处理变得越来越重要。在商业领域中&#xff0c;每个公司都需要制作各种类型的报表&#xff0c;以了解他们的运营情况、市场趋势和其他有关业务的信息。但是&#xff0c;手动创建这些报表是非常耗时且容易出错的。因此&#xff0c;报…

Vue3+Three.js+antvG2实战项目 智慧城市(五)

前言 在网上找了很久都没有找到使用Three.js开发智慧城市的免费文章或者免费视频,自己花了一点时间做了一个纯前端的智慧城市项目。 技术栈都是最新的:vue3vitetypeScriptThreeantv G2 源码分享 源码 模型,天空图盒子链接分享(不想下载源码可以只用下这个)提取码1234 20230424_…

报表开发工具Stimulsoft Report新增“用户参数”新功能,来看如何使用?

Stimulsoft Reports 是一款报告编写器&#xff0c;主要用于在桌面和Web上从头开始创建任何复杂的报告。可以在大多数平台上轻松实现部署&#xff0c;如ASP.NET, WinForms, .NET Core, JavaScript, WPF, Angular, Blazor, PHP, Java等&#xff0c;在你的应用程序中嵌入报告设计器…

PN/Modbus协议下,PLC与IO模块能否建立无线通讯?

在实际系统中&#xff0c;一个车间内PLC与多个IO信号点需要建立通讯&#xff0c;从而提高工作效率&#xff0c;通常距离在几十米到上百米不等。在有通讯需求的时候&#xff0c;如果布线的话&#xff0c;工程量较大且不美观&#xff0c;这种情况下比较适合采用无线通信方式。本方…

chatgpt赋能python:Python字符串截取指南:如何截取指定位置字符串

Python字符串截取指南&#xff1a;如何截取指定位置字符串 在Python中&#xff0c;字符串截取是一项非常常见的操作。当我们需要从一个字符串中提取特定位置的字符或子串时&#xff0c;我们可以使用Python内置的截取函数和切片操作来实现。在本文中&#xff0c;我们将介绍如何…

为什么上了ERP,效率反而更低?

业界一直有句老话&#xff1a;“不上ERP等死&#xff0c;上了ERP找死”&#xff0c;可把ERP的尴尬处境说透了。 有人把ERP奉为信仰&#xff1a;“那些说ERP不好用的根本是没用明白”&#xff0c;有人则认为ERP只是卖概念&#xff0c;冷嘲&#xff1a;“实施ERP的企业&#xff…

Measurement Studio 2019 f3 Crack

Measurement Studio是Microsoft Visual Studio的扩展软件&#xff0c;提供了用于创建测试和测量应用程序的.NET工具。 了解Measurement Studio的功能 Measurement Studio是​唯一​一​款.NET​工具​套​件&#xff0c;专为在Microsoft Visual Studio中构建工程应用&#xff0…

2023年,知识付费行业呈现哪些发展趋势?

艾媒咨询数据显示&#xff0c;2022年中国知识付费市场规模达1126.5亿元&#xff0c;较2015年增长约70倍&#xff0c;预计将在2025年超过2800亿元。随着疫情形势持续好转&#xff0c;知识付费的“居家红利”或将逐渐消退&#xff0c;但三年来用户的付费求知和在线学习习惯已经养…

C# WPF读取文本内容的7种方式

文章目录 前言一、界面展示二、使用步骤1.引入库2.界面代码3.后台代码&#xff08;1&#xff09;打开文件&#xff08;2&#xff09;第一种&#xff1a;基于FileStream&#xff0c;并结合它的Read方法读取指定的字节数组&#xff0c;最后转换成字符串进行显示。&#xff08;3&a…

迎战算力黄金时代,惠普Z系列工作站焕新升级

作者伍杏玲 随着今年 AIGC 浪潮席卷全球&#xff0c;AI应用的迅速增长对算力提出更多挑战。据《全球计算力指数评估报告》显示&#xff0c;未来5年&#xff0c;全球算力规模将以超过50%的速度飞速增长&#xff0c;预计到2024年&#xff0c;中国将生产出高达36ZB的数据量&#…

盲区死角「暗藏」风险隐患,哪些智能化方案或将前装「标配」

因车辆盲区死角而引发的交通事故&#xff0c;近年来呈现高发态势。上周一则《交警实测SUV视野盲区有多大&#xff0c;75个孩子藏在盲区&#xff0c;一点看不见》的视频火爆社交网络。 视频中&#xff0c;交警让幼儿园老师坐进一辆SUV警车的驾驶位并戴上眼罩&#xff0c;然后引导…

uniapp可视化操作-diygw

uniapp可视化操作:DIY可视化-拖拽设计1天搞定主流小程序环境安装 提示&#xff1a;写完文章后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 uniapp可视化操作:DIY可视化-拖拽设计1天搞定主流小程序环境安装前言一、DIY可视化桌面客户端安装…

Linux--ServerProgramming--(2)socket

1. 主机字节序和网络字节序 下面以32位机为前提&#xff1a;CPU累加器一次能装载至少 4 字节&#xff0c;即一个整数。字节序分为&#xff1a;1.大端字节序&#xff08;big endian&#xff09;指一个整数的高位字节&#xff08;23~32 bit &#xff09;存储在内存的低地址处&am…

Nat Biotechnol -- 生成式AI进军更高效价抗体

类似于ChatGPT的语言模型已被应用于改进针对COVID-19、埃博拉和其他病毒的抗体疗法。 代码看不懂&#xff1f;ChatGPT 帮你解释&#xff0c;详细到爆&#xff01; 单克隆抗体&#xff08;Y形&#xff09;与SARS-CoV-2病毒纤突蛋白&#xff08;红色&#xff09;上的结合位点&…

长光程气体吸收池的真空压力精密控制解决方案

摘要&#xff1a;目前用于气体吸收池真空压力控制的压力控制器存在有残留气体和无法进行高真空测量的问题&#xff0c;无法进行微量气体的光谱分析。为此&#xff0c;本文提出了动态平衡法的解决方案&#xff0c;即采用两个高速真空低漏率的电子针阀分别调节进气和出气流量&…

02_类加载子系统

目录 1、Jvm内存结构概述二、类加载器与类的加载过程1、类加载器子系统的作用2、类的加载过程 三、类加载器的分类1、启动类加载器2、扩展类加载器3、应用程序类加载器4、用户自定义加载器5、获取ClassLoader的几种方式 五、双亲委派机制1、什么是双亲委派机制2、双亲委派机制的…

Windows上SVN迁移至Linux

1.从windows导出svn文件 bat脚本 echo offsvnadmin dump E:\Repositories\3goodsoft_carbon_admin > D:/test/3goodsoft_carbon_admin.dump svnadmin dump E:\Repositories\3goodsoft_android > D:/test/3goodsoft_android.dump svnadmin dump E:\Repositories\3g…

chatgpt赋能python:Python如何在指定目录下创建文件

Python如何在指定目录下创建文件 Python是一种流行的编程语言&#xff0c;因为它易于学习、易于使用和非常灵活。其中一个常见的任务是在指定目录下创建文件&#xff0c;这在编写应用程序或脚本时经常需要。在本文中&#xff0c;我们将介绍使用Python在指定目录下创建文件的方…

第05章 数组

一 数组的概述 1.1 为什么需要数组 需求分析1&#xff1a; 需要统计某公司50个员工的工资情况&#xff0c;例如计算平均工资、找到最高工资等。用之前知识&#xff0c;首先需要声明50个变量来分别记录每位员工的工资&#xff0c;这样会很麻烦。因此我们可以将所有的数据全部…