暴打javascript语法之变量详解

2023-05-16

欢迎来到javascript频道🐵

  • 变量讨论
    • 全局与局部
    • 基本类型与引用类型
    • 动态属性
    • 关于复制问题
      • 传递的是基本类型
      • 传递的是引用类型
      • 小栗子
  • 对象
    • 内建对象
    • 宿主对象

变量讨论

全局与局部

当我们在讨论一个变量的时候,最重要的就是对这个变量进行声明,声明它到底是全局,还是局部,那么我们这么讨论其实也就是对变量的作用域进行讨论,这里给出这两者的作用和区别:

全局变量(global variable),该变量可以在脚本任何位置被引用,包括有关函数的内部引用,它的作用域是整个脚本
局部变量(global variable),该变量只存在对它作出声明的函数内部,它的作用域仅限于某个特定函数

这样在某一个函数,我们可以既使用全局变量,也可以使用局部变量,这个时候可能会引起一些问题,比如说想使用局部变量,但是不小心用了全局变量的名字,这个时候javascript也会认为是在引用全局变量
在这里插入图片描述
解决方法:
如果在某个函数中使用了"var",那么这个变量将被视为一个局部变量🍔,并且它只存在于这个函数的上下文中,反之,如果说没有使用"var"的话,那么这个变量就会被视为一个全局变量,举个小栗子:

如果说我想要num的值变成2:

function add(num){
    total = num+num;
    return total;
}
var total = 4;
var num = add(1);
alert(total);

那么这段代码不用说,肯定会不可避免的引起全局变量total的值发生变化,变成2,但是我的本意是利用add()函数计算的结果给num,但是将total的值也改变了,正确的代码:

function add(num){
  var total = num+num;
  return total;
}
//现在全局变量就安全了🍟

基本类型与引用类型

变量除了上述的区别,还有一个更重要的区别就是该变量的类型问题,大致上分为两类:基本类型值和引用类型值🍳基本类型的值大家都懂,现在主要讨论一下引用类型值
在这里插入图片描述
🌮引用类型的值是保存在内存中的,这里有一点要注意,在JavaScript中,是不允许直接访问内存中的东西的,也就是不能直接操作对象的内存空间,所以在操作对象的时候,实际上访问的是操作对象的引用而不是实际的对象,往下看再继续了解引用类型吧

动态属性

在定义引用类型的值的时候,我们可以为其添加属性和方法,也可以为其改变和删除其属性和方法:

var person = new Object();
person.name="X monster";
alert(person.name);//"X monster"

如果说对象不被摧毁或者这个属性不被删除,那么这个属性将会一直存在(保存在变量person中),当然了,基本类型是不能做到这一点的

关于复制问题

🍙基本类型的复制:如果说从一个变量向另一个变量复制基本类型的值,则会在变量对象上创建一个新值,然后将该值复制到为新变量分配的位置上

var num_1 = 1;
var num_2 = num_1;

内存分析:此时,num_1保存的值为5,num_2的值当然也是5,但是num_2的5和num_1的5是完全独立的,可以想象是num_1的一个副本,此后这两者互不影响🍜
在这里插入图片描述

🍘但是当从一个变量向另一个变量复制引用类型的值时,虽然说同样也会将存储在变量当中的变量对象的值复制一份到新变量分配的空间中,但是但是🤔这个复制过来的值实际上是一个指针,这个指针指向存储在堆中的一个对象,也就是说,两个变量实际上将引用同一个对象,所以这个时候,改变其中一个变量,就会影响到另一个变量,下面一张图是想将obj1复制到obj2的过程:

在这里插入图片描述

好了,吹了那么久的水就是为了引入"传递参数"问题,因为函数的参数和这个的性质非常相似,都是函数外部的值复制给函数内部的参数,就像从一个变量复制到另一个变量一样🧈这里我要提醒一点:那就是访问变量有按值和按引用两种方式,但是参数只能按值传递🍧那么现在也分为两种传递类型:传递的是基本类型或者是引用类型

传递的是基本类型

此时被传递的值会被复制到一个局部变量当中(就是命名参数,也就是我们常见的arguments对象中的一个元素)

传递的是引用类型

如果传递的是引用类型,那么会把这个值在内存中的地址复制给一个局部变量,所以说这个局部变量的变化也会反映在函数的外部

小栗子

function add(num){
   num+=10;
   return num;
}
var count=20;
var result=add(count);
alert(count);//20
alert(result);//30

分析:

可以看到我们定义了一个函数add,然后有两个全局变量,而函数的参数实际上是函数的局部变量,所以说在调用这个函数的时候,变量count作为参数被传递给该函数,这个变量的值是20,20会被复制给函数参数num,在函数的内部,参数num的值被加上10,但是并不会影响到函数外部的count,这就有一中基本类型复制的过程啦🌯,参数num和变量count互不影响、互不认识,只是有相同的值而已,那么现在换一个情况:如果说对用对象的话,情况就会改变

function Name(obj){
    obj.name="X monster";
}
var person = new Object();
Name(person);
alert(person.name);//"X monster"

分析:

结合上述引用类型复制过程的来理解这部分代码,首先以上代码创建了一个对象,并且保存在变量person中,然后这个对象被传递到Name()函数中被复制给了obj,在函数的内部,obj和person其实是引用同一个对象,即使这个对象是按照值传递,但是obj也会按值引用来访问同一个对象当然了,在函数外部person也会有name这一个属性了,那么再来:

function Name(obj){
  obj.name = "X monster";
  obj = new Object();
  obj.name = "Jon";
}
var person = new Object();
Name(person);
alert(person.name);//"X monster"

这段代码在函数内部多了两行,也就是定义了一个新对象,这里值得好好领悟,不做更多的解释🥞
在这里插入图片描述
这里我补一个"对象"知识点~~🍦

对象

之前的博客里讲过一个类型就是object类型,它是非常重要的一个类型,对象就是自我包含的数据集合,那么包含在对象里的数据可以通过:属性和方法 进行访问,在JavaScript中,都用“点”语法来访问,JavaScript中对象可以分为三种类型🍿
🍖属性是隶属于某个特定对象的变量
🍗方法是某个特定对象才能调用的函数

创建的方法:new方法
var num = new Number;

内建对象

内建对象非常常见,比如说数组就是JavaScript的内建对象,包括JavaScript本身提供的像Math对象啊,Date对象啊这些🌭

宿主对象

在JavaScript脚本中还有其他的一些已经预先定义好的对象,这个不是由JavaScript语言本身决定而是由它的运行环境提供,具体来说呢就是在应用到web上,环境就是各种不同的web浏览器,由浏览器提供的预定对象被称为"宿主对象"🧂

宿主对象主要包括:Form、Image、Element

有关这一块后续再聊🥓

好喽,今天就聊到这里啦,有任何问题欢迎评论和私信,我们下期再见🍭🍭🍭
在这里插入图片描述

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

暴打javascript语法之变量详解 的相关文章

  • 如何确定并打印 jQuery 版本?

    是否有一个 jQuery 函数可以返回当前加载的 jQuery 版本 你可以使用这个 fn jquery or if you re using noConflict jQuery fn jquery 当 jQuery 构建时它会自动更新 定
  • 使用 jQuery 更改父元素样式

    我有下一个 html 设置 div class one div class two a href class three Click a div div 我想更改具有类的元素的背景颜色 one当我点击元素时 three使用 jQuery 这
  • axios 请求中未发送正文数据

    我试图通过 axios 请求将数据发送到我的后端脚本 但正文看起来是空的 这是前端发送的请求 axios request method GET url http localhost 4444 next api headers Authori
  • MailTo 从 Javascript

    我有一个链接按钮 用于从页面内容构建邮件 从 javascript 启动它而不打开空白窗口或干扰调用它的窗口的最佳方法是什么 function Email var sMailTo mailto var sBody var alSelecte
  • 类型错误:类扩展值未定义不是函数或 null

    尝试创建这些实体时出现以下错误 TypeError Class extends value undefined is not a function or null 我假设这与循环依赖有关 但是在使用表继承和一对多关系时应该如何避免这种情况
  • 使用 Firefox 插件 sdk 的 nsISocketTransportService

    我正在尝试使用 Firefox 来读取 SSH 横幅 IE 当您最初连接到 SSH 服务器时 服务器会向您发送其横幅 标识服务器软件 并且您向 SSH 服务器发送您的横幅 标识您的客户端软件 为此 我使用以下 URL 中的示例 firefo
  • JQuery datepickers-从开始日期设置结束日期

    使用了两个 Jquery 日期选择器 StartDate 和 EndDate
  • Mapbox GL 中的 MaxBounds 和自定义非对称填充

    我有一个 Mapbox GL JS 应用程序 在地图上显示一些小部件 为了确保地图上的任何内容都不会被它们隐藏 我使用以下命令添加了一些填充map setPadding 这是一个不对称的 在我的例子中左边比右边大 它按预期工作 例如fitB
  • 在 R 传单中添加不透明度滑块

    如何在 R leaflet 应用程序中添加滑块来控制特定图层的不透明度 对于这个应用程序 我不想使用闪亮 这里建议 在 R 传单应用程序中添加滑块 https stackoverflow com questions 37682619 add
  • 如何在不阻止触摸启动的情况下防止“过度滚动历史导航”?

    我正在实现基于滑动的导航 但我在使用 Chrome 时遇到了麻烦 当页面向右拖动时 会触发新实现的功能 过度滚动历史导航 从而导致跳回 到 历史 1 为了防止这种情况 我必须打电话 preventDefault on touchstart
  • 访问 nuxt 配置文件中的存储

    我想添加通过 Nuxt 静态生成的动态路由 我定义了一个客户端 服务器端存储asyncData方法 我想将这个存储值 一个数组 映射到我的nuxt config js文件使其成为 动态 静态 路线图nuxt generate命令 但如何访问
  • JS 保留以零结尾的小数[重复]

    这个问题在这里已经有答案了 在JavaScript中 是否可以 锁定 十进制数 以保留以零结尾的 浮点数 例如 我有 2 个不同的数字 如下所示 伪代码 let a 1 0 let b 1 00 a b true should be fal
  • 如何在 React Native 上显示 SVG 文件?

    我想显示 svg 文件 我有一堆 svg 图像 但我找不到显示的方式 我尝试使用Image and Use的组成部分反应本机 svg https github com magicismight react native svg但他们不这样做
  • 模板中带有 ng-if 的 angularjs 指令

    我正在构建一个在模板内使用 ng if 的指令 奇怪的是 提供给链接函数的元素没有扩展ng if代码 它只是ng if的注释行 经过一番尝试 我发现通过将链接代码包装在 timeout 中似乎可以使其正常工作 但我想知道这是否不是正确的处理
  • webpack中动态加载外部模块失败

    我正在尝试建立以下架构 一个核心 React 应用程序 它具有一些基本功能 并且能够在运行时加载其他 React 组件 这些额外的 React 组件可以按需加载 并且它们在构建核心应用程序时不可用 因此它们不能包含在核心应用程序的捆绑包中
  • 如何使用新的analytics.js跟踪多个帐户?

    我需要使用 Google 的新的analytics js 跟踪一个页面上两个帐户的综合浏览量 有大量教程和示例如何使用较旧的 ga js 进行操作 但我发现的只是这个分析文档页面 https developers google com an
  • 类中可以有生成器 getter 吗?

    我的意思是吸气剂是发电机 我相信这一切都是 ES6 也许像这样 class a get count let i 10 while i yield i let b new a for const i of b count console lo
  • 摩纳哥:如何添加内联自动完成/代码建议?

    我找不到任何有关如何添加内联自动完成功能的示例 如下图所示 有人可以指导我如何在摩纳哥做到这一点吗 这可以在 v1 66 中启用 现在在 Insiders 中 The editor quickSuggestions设置现在接受内联为 配置值
  • PDF 在 Safari 中隐藏 Jquery Modal

    这是与我有关的事情this https stackoverflow com questions 24052681 pdf hide jquery modal in ie问题 在 IE 中 我在对话框中使用 iframe 解决了问题 所以它工
  • Chrome 扩展:强制 popup.html 关闭

    我想知道是否可以强制 popup html 关闭 在弹出的 javascript 中 window close

随机推荐

  • 机器学习如何处理和清洗数据?

    数据处理和清洗是机器学习中非常重要的步骤 由于现实世界中的数据通常是杂乱无章的 xff0c 可能包含缺失值 异常值 重复值 不一致的数据格式 不完整的数据等 xff0c 这些数据可能会对模型的准确性产生负面影响 因此 xff0c 在机器学习
  • 作为大二大学生,对自己接触到的语言的用途总结和自我反思

    不知不觉 xff0c 我已经大二下学期了 xff0c 自我接触计算机这个领域已经差不多两年了 x1f31a x1f31a x1f31a xff0c 在很多的良师益友的陪伴帮助以及自我学习下 xff0c 我收获了很多知识 xff0c 也打出了
  • 测试必备技能之C语言文件函数(超级全能篇)——FILE函数

    之前出过的文件FILE函数的小白篇 xff0c 现在出一个全面一些的 以下讲解直接分为函数原型 43 函数作用 43 测试用例 让大家真真正正的理解和感受这几个FILE函数的作用 二话不说 xff0c 开冲 xff01 额 先来个小表格 x
  • Logisim之——1位比较器设计

    任务描述 本关任务 xff1a 在Logisim中完成1位比较器电路的绘制并完成测试 相关知识 在数字电路中 xff0c 经常需要对两个位数相同的二进制数进行比较 xff0c 以判断它们的相对大小或者是否相等 xff0c 用来实现这一功能的
  • Logisim之——2位比较器

    任务描述 本关任务 xff1a 在Logisim中完成2位比较器电路的绘制并完成测试 相关知识 在数字电路中 xff0c 经常需要对两个位数相同的二进制数进行比较 xff0c 以判断它们的相对大小或者是否相等 xff0c 用来实现这一功能的
  • Logisim之——16位无符号比较器

    任务描述 本关任务 xff1a 利用在第3关中已经设计完成的4位无符号比较器 xff08 4个 xff09 级联构建16位无符号比较器 相关知识 比较器级联扩展的基本原理 4个4位比较器的比较结果记为 xff1a Li1 xff08 大 x
  • 夏季来临啦,快来换浏览器界面吧——动画背景版本(二)

    炎炎夏日来袭啦 xff0c 你的浏览器界面也换成夏天的吧 xff01 上效果图啦啦啦 依旧是秉承简约的风格浏览器 xff0c 底部采用列表做的动画 xff0c 这里做部分代码解释 xff0c 具体代码在下方 xff0c 需要的朋友可以自行下
  • 网络层习题专项一“子网划分”及“聚合“习题(超强个人理解)

    网络层习题专项 有关最大聚合问题划分子网问题1 普通 的划分 反问 你自己2 等长子网划分问题 题目来自于 计算机网络基础第7版 xff08 谢希仁 编著 xff09 以及我本人结合自身想法题目 网络上一些经典题目 xff08 算是自己的一
  • PyGame “超级玛丽”游戏专题开篇——“变态超级玛丽”的诞生

    欢迎来到PyGame频道 x1f431 x1f453 开篇介绍源码获取 开篇介绍 哈喽 xff0c 又是我 xff0c 一个很久又不更新博客的苦逼大二学生 xff0c 哈哈哈哈哈前段时间学习了PyGame xff0c 自己也做了很多游戏啦
  • 2个74151实现16位数据选择器以及在Multisim的演示

    不说废话了 xff0c 开冲开冲 x1f431 x1f680 74151是八位数据选择器 xff0c 其实实现起来也很简单 xff0c 主要就是最高位的问题嘛 xff0c 比如说 0000 那直接都用不上2个74151 xff0c 像111
  • (无敌解释)Python 字符串、列表、字典之间的相互转换方法总结

    欢迎来到Python频道 x1f933 列表转字符串方法方法一方法二 字符串转列表方法一 xff1a 刚好 长得一样 方法二 xff1a 将字符串中每个字符转成列表中的值方法三 xff1a 分割 列表转字典方法一 xff1a 用zip 方法
  • 华为云 OBS 海思交叉编译

    https github com huaweicloud huaweicloud sdk c obs blob master Readme txt 内描述如下 xff1a 1 第三方依赖 xff1a openssl 1 0 2r zlib
  • 超级玛丽封面完工制作,谁说新手不能学哒??!

    超级玛丽之工具 环境的搭建 所用参考文档 x1f40d 项目搭建的目录列表 x1f98b 本次博客内容主要呈现的效果图展示 x1f36c 文件代码分析 x1f93e tools py内容和说明 x1f63c 说明代码 setup py内容和
  • 计算机网络期末实验考试题目+总结(用的是CISCO软件~~)

    欢迎来到计算机网络频道 x1f987 前言 x1f973 实验题目 x1f63c 实验拓扑图 x1f648 实验分析交换机S3配置IP地址和默认网关信息 xff1a DHCP Server的配置 xff1a PC5 PC6 xff1a 交换
  • 可爱滴css滑动导航条

    欢迎来到HTML频道 x1f408 效果代码分析 今天看到了一个还蛮可爱的滑动导航条 xff0c 在这里分享一下做法 xff0c 也同时感谢一下原作者 xff0c 写的特别好 x1f60e 效果 这里没有录动态的了 xff0c 大家脑补一下
  • 暴打JavaScript语法之语法糖第一弹

    欢迎来到JavaScript频道 x1f407 基本语句 statement 43 注释 x1f3cc 变量 xff08 量量子鲜森 xff09 x1f9d7 var的小tips关键字和保留字 x1f9dc 数据类型 x1f3ca type
  • CSS之可爱的伪元素::maker详解

    欢迎来到HTML部件频道 x1f9ae 这里是x魔王 xff0c 今天分享一个非常有用的部件以及它的用处 xff0c 先来看看它的效果吧 点击是会变图案滴 xff0c 那么这个的做法就得益于CSS 伪元素 marker 就像这个大家一定熟悉
  • CSS之帅气朋克字体效果以及“故障风”按钮的实现(图片+按钮)

    欢迎来到HTML部件频道 x1f430 前言 x1f4eb 今天来实现一个帅气的朋克效果 xff0c 这个效果是我很早之前就想出的一篇博客 xff0c 今天补上 xff0c 先来欣赏一下朋克的效果感 x1f60b 不知道各位看官感觉如何呢
  • jQuery+风琴拉伸效果唯美少女滴风格菜单的做法

    欢迎来到HTML部件频道 x1f49e 今天记录一款非常常见的菜单做法 xff0c 具体效果看下图 xff1a x1f9d0 好啦如果说对今天的分享感兴趣的话就继续往下看吧 x1f4a8 lt doctype html gt lt html
  • 暴打javascript语法之变量详解

    欢迎来到javascript频道 x1f435 变量讨论全局与局部基本类型与引用类型动态属性关于复制问题传递的是基本类型传递的是引用类型小栗子 对象内建对象宿主对象 变量讨论 全局与局部 当我们在讨论一个变量的时候 xff0c 最重要的就是