web前端学习(三十四)——JavaScript对象、函数及作用域(全局变量、局部变量)的相关设置

简介: web前端学习(三十四)——JavaScript对象、函数及作用域(全局变量、局部变量)的相关设置

1.JS对象


JavaScript对象是拥有属性和方法的数据。在JavaScript中,几乎所有的事物都是对象。(这和Java一样啊,万物皆对象!!!)

可以使用字符来定义和创建 JavaScript 对象,定义 JavaScript 对象可以跨越多行,空格跟换行不是必须的。

可以说 "JavaScript 对象是变量的容器"。但是,我们通常认为"JavaScript 对象是键值对的容器"

键值对通常写法为name : value (键与值以冒号分割)。键值对在 JavaScript 对象通常称为 对象属性

这里的键值对的写法类似于:C语言中的哈希表、Java中的哈希映射、Python中的字典。


1.1 访问对象属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>JS简单学习</title>
  </head>
  <body>
    <p>创建 JavaScript 对象</p>
    <p id="demo"></p>
    <script>
      var person={
        hisName: "zhangsan",
        hisSex: "男",
        hisAge: 25,
        hisHobby: "sleep"
      };
      document.getElementById("demo").innerHTML=
        "姓名:" + person.hisName + ",性别:" + person.hisSex + ",年龄:" + person.hisAge + ",爱好:" + person.hisHobby + "。";
      //也可以写为 person["hisName"],后面的属性类似
    </script>
  </body>
</html>

1.2 访问对象方法


对象的方法定义了一个函数,并作为对象的属性存储。对象方法通过添加 () 调用 (作为一个函数)

调用方法时,如果是对象.方法(),此时正常返回方法执行的结果;如果是对象.方法,此时返回方法的定义。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <p>创建和使用对象方法。</p>
    <p>对象方法作为一个函数定义存储在对象属性中。</p>
    <p id="demo1"></p>
    <p id="demo2"></p>
    <script>
      var person={
        hisName: "zhangsan",
        hisSex: "男",
        hisAge: 25,
        hisHobby: "sleep",
        fullInformation: function() {
          return this.hisName + "," + this.hisSex;
        }
      };
      document.getElementById("demo1").innerHTML="不加括号输出函数表达式:" + person.fullInformation;
      document.getElementById("demo2").innerHTML="加括号输出函数执行结果:" + person.fullInformation();
    </script>
  </body>
</html>

2.JS函数


函数就是包裹在花括号中的代码块,前面使用了关键词 function

当调用该函数时,会执行函数内的代码。可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。


2.1调用带参数的函数 

在调用函数时,可以向其传递值,这些值被称为参数,这些参数可以在函数中使用,也可以发送任意多的参数,由逗号 (,) 分隔。 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <p>点击下面这个按钮,来调用带参数的函数。</p>
    <button type="button" onclick="myFunction('我爱编程','Hello World!!!')">按钮</button>
    <script>
      function myFunction(first,second) {
        alert("主信息:" + first + ",附加信息:" + second);
      }
    </script>
  </body>
</html>

2.2 带有返回值的函数


有时,我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。

在使用 return 语句时,函数会停止执行,并返回指定的值。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <p>本例调用的函数会执行一个计算,然后返回结果:</p>
    <p id="demo"></p>
    <script>
      function myFunction(a,b) {
        return a*b;
      }
      document.getElementById("demo").innerHTML=myFunction(5,6);
    </script>
  </body>
</html>

当仅仅希望退出函数时,也可使用 return 语句。返回值是可选的。

如果 a 大于 b,则下面的代码将退出函数,并不会计算 a b 的总和。

function myFunction(a,b) {
    if (a>b) {
        return;
    }
    x=a+b;
}

3.JS作用域


作用域是可访问变量的集合。

JavaScript , 对象和函数同样也是变量,作用域为可访问变量,对象,函数的集合,函数作用域:作用域在函数内修改。


3.1 JS局部变量 

JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。

可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。局部变量会在函数运行以后被删除。因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <p>局部变量在声明的函数外不可以访问。</p>
    <p id="demo"></p>
    <script>  
      function myFunction() {
        var color="red";
      }
      document.getElementById("demo").innerHTML="局部变量color的类型是:" + typeof color;
    </script>
  </body>
</html>

3.2 JS全局变量


在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。全局变量会在页面关闭后被删除。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <p>全局变量在任何脚本和函数内均可访问。</p>
    <p id="demo"></p>
    <script>
      var color="red";
      function myFunction() {
        document.getElementById("demo").innerHTML=
          "函数体内部可以访问到全局变量color:" + color;
      }
      myFunction();
    </script>
  </body>
</html>

3.3 未声明的JS变量将自动转为全局变量

如果您把值赋给尚未声明的变量,该变量将被自动作为 window 的一个属性。 

如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <p>如果你的变量没有声明,它将自动成为全局变量:</p>
    <p id="demo"></p>
    <script>
      function myFunction() {
        color="red";
      }
      myFunction();
      document.getElementById("demo").innerHTML="可以访问到全局变量color:" + color;
    </script>
  </body>
</html>

3.4 HTML中的全局变量


HTML , 全局变量是 window 对象: 所有数据变量都属于 window 对象。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>JS简单学习</title>
  </head>
  <body>
    <p>在HTML中, 所有全局变量都会成为window变量。</p>
    <p id="demo"></p>
    <script>
      function myFunction() {
        color="red";
      }
      myFunction();
      document.getElementById("demo").innerHTML="可以访问到全局变量color:" + window.color;
    </script>
  </body>
</html>

 

相关文章
|
18天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
31 3
|
15天前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
19天前
|
前端开发 JavaScript
Bootstrap Web 前端 UI 框架
Bootstrap 是快速开发 Web 应用程序的前端工具包。
30 3
|
1月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
130 2
|
1月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
38 0
|
1月前
|
人工智能 自然语言处理 运维
前端大模型应用笔记(一):两个指令反过来说大模型就理解不了啦?或许该让第三者插足啦 -通过引入中间LLM预处理用户输入以提高多任务处理能力
本文探讨了在多任务处理场景下,自然语言指令解析的困境及解决方案。通过增加一个LLM解析层,将复杂的指令拆解为多个明确的步骤,明确操作类型与对象识别,处理任务依赖关系,并将自然语言转化为具体的工具命令,从而提高指令解析的准确性和执行效率。
|
1月前
|
存储 弹性计算 算法
前端大模型应用笔记(四):如何在资源受限例如1核和1G内存的端侧或ECS上运行一个合适的向量存储库及如何优化
本文探讨了在资源受限的嵌入式设备(如1核处理器和1GB内存)上实现高效向量存储和检索的方法,旨在支持端侧大模型应用。文章分析了Annoy、HNSWLib、NMSLib、FLANN、VP-Trees和Lshbox等向量存储库的特点与适用场景,推荐Annoy作为多数情况下的首选方案,并提出了数据预处理、索引优化、查询优化等策略以提升性能。通过这些方法,即使在资源受限的环境中也能实现高效的向量检索。
|
1月前
|
机器学习/深度学习 弹性计算 自然语言处理
前端大模型应用笔记(二):最新llama3.2小参数版本1B的古董机测试 - 支持128K上下文,表现优异,和移动端更配
llama3.1支持128K上下文,6万字+输入,适用于多种场景。模型能力超出预期,但处理中文时需加中英翻译。测试显示,其英文支持较好,中文则需改进。llama3.2 1B参数量小,适合移动端和资源受限环境,可在阿里云2vCPU和4G ECS上运行。
|
1月前
|
前端开发 算法 测试技术
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
本文对比测试了通义千文、文心一言、智谱和讯飞等多个国产大模型在处理基础计数问题上的表现,特别是通过链式推理(COT)提示的效果。结果显示,GPTo1-mini、文心一言3.5和讯飞4.0Ultra在首轮测试中表现优秀,而其他模型在COT提示后也能显著提升正确率,唯有讯飞4.0-Lite表现不佳。测试强调了COT在提升模型逻辑推理能力中的重要性,并指出免费版本中智谱GLM较为可靠。
前端大模型应用笔记(五):大模型基础能力大比拼-计数篇-通义千文 vs 文心一言 vs 智谱 vs 讯飞vsGPT
|
2月前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架