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>

 

相关文章
|
26天前
|
前端开发 Java 开发工具
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
70 18
【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
|
3月前
|
安全 关系型数据库 测试技术
学习Python Web开发的安全测试需要具备哪些知识?
学习Python Web开发的安全测试需要具备哪些知识?
51 4
|
3月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1天前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
19 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
14天前
|
安全 Java 数据安全/隐私保护
springSecurity学习之springSecurity过滤web请求
通过配置 Spring Security 的过滤器链,开发者可以灵活地管理 Web 请求的安全性。理解核心过滤器的作用以及如何配置和组合这些过滤器,可以帮助开发者实现复杂的安全需求。通过具体的示例代码,可以清晰地了解 Spring Security 的配置方法和实践。
56 23
|
3月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
3月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
86 5
|
3月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
122 1
|
3月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
72 4
|
3月前
|
SQL 安全 前端开发
Web学习_SQL注入_联合查询注入
联合查询注入是一种强大的SQL注入攻击方式,攻击者可以通过 `UNION`语句合并多个查询的结果,从而获取敏感信息。防御SQL注入需要多层次的措施,包括使用预处理语句和参数化查询、输入验证和过滤、最小权限原则、隐藏错误信息以及使用Web应用防火墙。通过这些措施,可以有效地提高Web应用程序的安全性,防止SQL注入攻击。
93 2

热门文章

最新文章

  • 1
    【Java若依框架】RuoYi-Vue的前端和后端配置步骤和启动步骤
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 4
    docker安装nginx,前端项目运行
  • 5
    【01】vs-code如何配置flutter环境-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈-供大大的学习提升
  • 6
    详解智能编码在前端研发的创新应用
  • 7
    【03】完整flutter的APP打包流程-以apk设置图标-包名-签名-APP名-打包流程为例—-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈 章节内容【03】
  • 8
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 9
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 10
    【04】flutter补打包流程的签名过程-APP安卓调试配置-结构化项目目录-完善注册相关页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程