详解JavaScript 的变量


Posted in Javascript onMarch 08, 2019

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

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

1. 动态的属性

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

执行两者的值:

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

比如:引用类型 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 = 'Yang Zilong';
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

使用instanceof检测基本类型,会返回false,基本类型不是对象。

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

Javascript 相关文章推荐
createElement动态创建HTML对象脚本代码
Nov 24 Javascript
javascript几个易错点记录
Nov 26 Javascript
Jquery网页内滑动缓冲导航的实现代码
Apr 05 Javascript
PageSwitch插件实现100种不同图片切换效果
Jul 28 Javascript
js实现圆盘记速表
Aug 03 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
ES6学习笔记之Set和Map数据结构详解
Apr 07 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
Angular5.0 子组件通过service传递值给父组件的方法
Jul 13 Javascript
微信小程序ibeacon三点定位详解
Oct 31 Javascript
vant实现购物车功能
Jun 29 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 #Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 #Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 #Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 #Javascript
详解小程序循环require之坑
Mar 08 #Javascript
详解js 创建对象的几种方法
Mar 08 #Javascript
浅谈Javascript常用正则表达式应用
Mar 08 #Javascript
You might like
关于Intype一些小问题的解决办法
2008/03/28 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
php用户注册时常用的检验函数实例总结
2014/12/22 PHP
php实现utf-8转unicode函数分享
2015/01/06 PHP
php将数组转换成csv格式文件输出的方法
2015/03/14 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
tp5(thinkPHP5框架)时间查询操作实例分析
2019/05/29 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
js getBoundingClientRect() 来获取页面元素的位置
2010/11/25 Javascript
jquery插件珍藏(图片局部放大/信息提示框)
2013/01/08 Javascript
js特殊字符过滤的示例代码
2014/03/05 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
基于原生JS实现图片裁剪
2016/08/01 Javascript
JQuery遍历元素的父辈和祖先的方法
2016/09/18 Javascript
理解javascript中的闭包
2017/01/11 Javascript
无法获取隐藏元素宽度和高度的解决方案
2017/03/07 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
angular2路由之routerLinkActive指令【推荐】
2018/05/30 Javascript
[01:09:01]完美世界DOTA2联赛循环赛 Magma vs PXG BO2第一场 10.28
2020/10/28 DOTA
Python中将字典转换为列表的方法
2016/09/21 Python
Python基础之高级变量类型实例详解
2020/01/03 Python
Python中如何引入第三方模块
2020/05/27 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
Python项目打包成二进制的方法
2020/12/30 Python
PyQt实现计数器的方法示例
2021/01/18 Python
总经理秘书工作职责
2013/12/26 职场文书
营销与策划专业求职信
2014/06/20 职场文书
教育专业毕业生推荐信
2014/07/10 职场文书
公司领导九九重阳节发言稿2014
2014/09/25 职场文书
婚礼长辈答谢词
2015/09/29 职场文书
社区干部培训心得体会
2016/01/06 职场文书
Python爬虫实战之爬取京东商品数据并实实现数据可视化
2021/06/07 Python