详解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 相关文章推荐
利用JQuery为搜索栏增加tag提示
Jun 22 Javascript
jQuery 使用手册(五)
Sep 23 Javascript
javascript调试说明
Jun 07 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
IE 当eval遇上function的处理
Aug 09 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
js闭包实现按秒计数
Apr 23 Javascript
jquery实现适用于门户站的导航下拉菜单效果代码
Aug 24 Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 Javascript
浅谈JS如何实现真正的对象常量
Jun 25 Javascript
Angular中的ng-template及angular 使用ngTemplateOutlet 指令的方法
Aug 08 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中使用灵巧的体系结构
2006/10/09 PHP
php数组函数序列 之shuffle()和array_rand() 随机函数使用介绍
2011/10/29 PHP
一个PHP并发访问实例代码
2012/09/06 PHP
[原创]静态页面也可以实现预览 列表不同的显示方式
2006/10/14 Javascript
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
如何用js控制frame的隐藏或显示的解决办法
2013/03/20 Javascript
js创建对象的区别示例介绍
2014/07/24 Javascript
javascript实现10个球随机运动、碰撞实例详解
2015/07/08 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
Javascript中apply、call、bind的巧妙使用
2016/08/18 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
JavaScript标准对象_动力节点Java学院整理
2017/06/27 Javascript
vue实现样式之间的切换及vue动态样式的实现方法
2017/12/19 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
vue props对象validator自定义函数实例
2019/11/13 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
小程序实现多个选项卡切换
2020/06/19 Javascript
[04:19]DOTA2亚洲邀请赛 现场花絮
2015/03/11 DOTA
在Django的form中使用CSS进行设计的方法
2015/07/18 Python
利用python实现命令行有道词典的方法示例
2017/01/31 Python
python cx_Oracle模块的安装和使用详细介绍
2017/02/13 Python
Python操作Redis之设置key的过期时间实例代码
2018/01/25 Python
python实现图片中文字分割效果
2019/07/22 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
Lookfantastic德国官网:英国知名美妆购物网站
2017/06/11 全球购物
expedia比利时:预订航班+酒店并省钱
2018/07/13 全球购物
Holland & Barrett爱尔兰:英国领先的健康零售商
2019/03/31 全球购物
大学生2014全国两会学习心得体会
2014/03/10 职场文书
股权投资意向书
2014/04/01 职场文书
欢迎领导检查标语
2014/06/27 职场文书
2014年安全保卫工作总结
2014/11/13 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏