详解JavaScript的变量


Posted in Javascript onApril 04, 2019

基本类型和引用类型的值

ECMAScript变量一般有两种数据类型的值:基本类型和引用类型。

  1. 基本类型: 简单的数据段:Undefined, Null, Boolean, Number, String
  2. 引用类型:多个值构成的对象;

1.动态的属性

定义两者的值:创建一个变量并为其变量赋值;

执行两者的值:

  1. 引用类型:可以添加、删除属性和方法;
  2. 基本类型:不能添加、删除属性和方法;

比如:引用类型 a,可以添加属性 name age

var a = new Object();
a.name = "我喂前端袋盐";
a.age = 24;
console.log(a.name);   //我喂前端袋盐

 基本类型 name 无法添加属性 age

var name = "我喂前端袋盐";
name.age = 24;
console.log(name.age);   //undefined

代码中可知:只能给引用类型值动态地添加属性,以便将来使用。

2. 赋值变量值

从一个变量向另一个变量复制基本类型值和引用类型值时:
基本类型:在变量对象上创建一个新值,并将其值复制给新变量分配的位置上;(完全独立的两个变量)
例如

var a = 111;
 var b = a;
 console.log(b);   //111

代码中可知:变量b的值只是变量a的值的一个副本,两者的值111是完全独立的。
引用类型:将存储在变量对象中的值复制一份放到为新变量分配的空间中;(引用同一个对象的两个变量)
引用类型的值的副本实际是一个指针,指向存储在堆中的一个对象。

var obj1 = new Object;
var obj2 = obj1;
obj1.name = "我喂前端袋盐";
console.log(obj2,name);   // Object { name="我喂前端袋盐"} 我喂前端袋盐

代码中可知:obj1和obj2都指向同一个对象Object;所以,为obj1添加的name属性,通过obj2也可以访问的到。

3. 传递参数

我们都知道基本类型是按值访问的,因为可以访问保存在变量中的实际的值。

所有函数的参数都是按值传递的。
基本类型:基本类型值的传递如同基本类型变量的复制一样;
在向参数传递值,被传递的值会被复制给一个局部变量(命名参数),因此这个局部变量的变化不会反映在函数的外部。
例如:

function fn(num) {
 num += 10;
 return num;
}
var a = 10;
var result = fn(a);
console.log(result); //20
console.log(a);  //10

代码中可知:参数num和变量a互不相识,只是有着相同的值而已,用完之后,你还是你,我还是我,互不干政。
引用类型:引用类型的传递如同引用类型变量的复制一样;
在向参数传递值时,会把这个值在内存中的地址复制给一个局部变量,因此这个局部变量的变化会反映在函数的外部。
例如:

function fn(obj) {
 obj.name = '我喂前端袋盐';
}
var person = new Object();
fn(person);
console.log(person.name);  //我喂前端袋盐

代码中可知:在这个函数内部,参数obj和变量person引用的是同一个对象Object,所以,你不动我也不动,你动我也动,你中有我,我中有你,情义绵绵,经久不息……
也就是说:即使变量person是按值传递的,但是参数obj(想象成局部变量)还是会按引用来访问同一个对象。
访问变量有按值和按引用两种方式,参数只能按值传递。

4. 检测类型

基本类型:typeof
引用类型:instanceof(对象或null)
例如:

var a = 'Wo Wei Qian Duan Dai Yan';
var b = 24;
var c = '';
var d = true;
var e;
var g = undefined;
var f = null; // 比较特殊
var h = new Object();
 
console.log(typeof a); //string
console.log(typeof b); //number 
console.log(typeof c); //string
console.log(typeof d); //boolean
console.log(typeof e); //undefined
console.log(typeof g); //undefined
console.log(typeof f); //object
console.log(typeof h); //object

所用引用类型的值都是Object的实例。
如下:

var person = new Object();
var num = [1,2, 3];
var pattern = /.at/i;
console.log(person instanceof Object); //true
console.log(num instanceof Object); //true
console.log(num instanceof Array);  //true
console.log(pattern instanceof Object); //true
console.log(pattern instanceof RegExp); //true

以上所述是小编给大家介绍的JavaScript变量详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
jQuery实现图片信息的浮动显示实例代码
Aug 28 Javascript
js 触发select onchange事件代码
Mar 20 Javascript
javascript 兼容各个浏览器的事件
Feb 04 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
Apr 15 Javascript
javascript实现简单查找与替换的方法
Jul 22 Javascript
js实现将选中内容分享到新浪或腾讯微博
Dec 16 Javascript
jQuery remove()过滤被删除的元素(推荐)
Jul 18 jQuery
在Js页面通过POST传递参数跳转到新页面详解
Aug 25 Javascript
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
利用原生JavaScript实现造日历轮子实例代码
May 08 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
Jul 22 Javascript
vue elementUI table表格数据 滚动懒加载的实现方法
Apr 04 #Javascript
js 计算图片内点个数的示例代码
Apr 04 #Javascript
在node中使用jwt签发与验证token的方法
Apr 03 #Javascript
全面了解JavaScript的作用域链
Apr 03 #Javascript
从理论角度讨论JavaScript闭包
Apr 03 #Javascript
Node.js+Express+Mysql 实现增删改查
Apr 03 #Javascript
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 #Javascript
You might like
PHP循环输出指定目录下的所有文件和文件夹路径例子(简单实用)
2014/05/10 PHP
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
php学习笔记之面向对象
2014/11/08 PHP
PHP获取一年有几周以及每周开始日期和结束日期
2015/08/06 PHP
CodeIgniter框架常见用法工作总结
2017/03/16 PHP
PHP重载基础知识回顾
2020/09/10 PHP
什么是DOM(Document Object Model)文档对象模型
2012/03/05 Javascript
鼠标滚轮改变图片大小的示例代码
2013/11/20 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
2014/04/16 Javascript
学习JavaScript事件流和事件处理程序
2016/01/25 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
vue自定义filters过滤器
2018/04/26 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
[45:46]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS DT
2014/05/23 DOTA
python 从远程服务器下载日志文件的程序
2013/02/10 Python
python实现在每个独立进程中运行一个函数的方法
2015/04/23 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
如何用OpenCV -python3实现视频物体追踪
2019/12/04 Python
python实现按关键字筛选日志文件
2019/12/24 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
浅谈keras通过model.fit_generator训练模型(节省内存)
2020/06/17 Python
html5 分层屏幕适配的方法
2018/03/16 HTML / CSS
html svg生成环形进度条的实现方法
2019/09/23 HTML / CSS
函授毕业生的自我鉴定
2013/11/26 职场文书
护理学专业推荐信
2013/12/03 职场文书
计算机通信工程专业毕业生推荐信
2013/12/24 职场文书
护士自我评价范文
2014/01/25 职场文书
会计人员演讲稿
2014/09/11 职场文书
优秀小学生事迹材料
2014/12/26 职场文书
运动会闭幕词
2015/01/28 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
python中filter,map,reduce的作用
2022/06/10 Python