详解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 相关文章推荐
input输入框鼠标焦点提示信息
Mar 17 Javascript
js实现拉幕效果的广告代码
Sep 02 Javascript
基于jQuery实现自动轮播旋转木马特效
Nov 02 Javascript
jquery特效 点击展示与隐藏全文
Dec 09 Javascript
Bootstrap的Refresh Icon也spin起来
Jul 13 Javascript
基于jQuery实现发送短信验证码后的倒计时功能(无视页面关闭)
Sep 02 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
Oct 21 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
Mar 08 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
结合Vue控制字符和字节的显示个数的示例
May 17 Javascript
Vue基本指令实例图文讲解
Feb 25 Vue.js
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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
一个程序下载的管理程序(三)
2006/10/09 PHP
MySQL GBK→UTF-8编码转换
2007/05/24 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
PHP文件上传小程序 适合初学者学习!
2019/05/23 PHP
Yii框架中用response保存cookie,用request读取cookie的原理解析
2019/09/04 PHP
学习ExtJS(一) 之基础前提
2009/10/07 Javascript
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
如何确保JavaScript的执行顺序 之jQuery.html并非万能钥匙
2011/03/03 Javascript
兼容FF和IE的动态table示例自写
2013/10/21 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
js console.log打印对像与数组用法详解
2016/01/21 Javascript
jQuery EasyUI基础教程之EasyUI常用组件(推荐)
2016/07/15 Javascript
KnockoutJS 3.X API 第四章之表单value绑定
2016/10/10 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
JS 循环li添加点击事件 (闭包的应用)
2016/12/10 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
highCharts提示框中显示当前时间的方法
2019/01/18 Javascript
微信网页登录逻辑与实现方法
2019/04/29 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
举例讲解Python设计模式编程中对抽象工厂模式的运用
2016/03/02 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
python使用Matplotlib画条形图
2020/03/25 Python
python中树与树的表示知识点总结
2019/09/14 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
HTML5 visibilityState属性详细介绍和使用实例
2014/05/03 HTML / CSS
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
德国的各种媒体在线商店:Thalia.de(书籍、电子书、玩具等)
2020/10/08 全球购物
学生爱国演讲稿
2014/01/14 职场文书
2014年廉洁自律承诺书
2014/05/26 职场文书
主要领导对照检查材料
2014/08/26 职场文书
遗失说明具结保证书
2015/02/26 职场文书
vue实现同时设置多个倒计时
2021/05/20 Vue.js
QT与javascript交互数据的实现
2021/05/26 Javascript
MySQL中in和exists区别详解
2021/06/03 MySQL