详解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 相关文章推荐
javascript学习笔记(七) js函数介绍
Jun 19 Javascript
javascript阻止scroll事件多次执行的思路及实现
Nov 08 Javascript
javascript得到当前页的来路即前一页地址的方法
Feb 18 Javascript
推荐一个自己用的封装好的javascript插件
Jan 29 Javascript
js游戏人物上下左右跑步效果代码分享
Aug 28 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
AngularJS自定义指令实现面包屑功能完整实例
May 17 Javascript
JS返回顶部实例代码
Aug 09 Javascript
详解JS数值Number类型
Feb 07 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
Javascript实现鼠标点击冒泡特效
Dec 24 Javascript
JavaScript函数柯里化
Nov 07 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 JWT在web端中的使用方法教程
2018/09/06 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
用Jquery.load载入页面实现局部刷新
2014/01/22 Javascript
jQuery遍历Table应用示例
2014/04/09 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
从零开始学习Node.js系列教程之基于connect和express框架的多页面实现数学运算示例
2017/04/13 Javascript
jQuery鼠标移动图片上实现放大效果
2017/06/25 jQuery
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
2018/03/01 Javascript
Vue中使用clipboard实现复制功能
2018/09/05 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
深入理解vue中的slot与slot-scope
2019/04/22 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
下载糗事百科的内容_python版
2008/12/07 Python
python获取糗百图片代码实例
2013/12/18 Python
用python代码做configure文件
2014/07/20 Python
Python编写屏幕截图程序方法
2015/02/18 Python
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
深入理解python try异常处理机制
2016/06/01 Python
python+opencv 读取文件夹下的所有图像并批量保存ROI的方法
2019/01/10 Python
Python容器类型公共方法总结
2020/08/19 Python
使用css3 属性如何丰富图片样式(圆角 阴影 渐变)
2012/11/22 HTML / CSS
荷兰家电销售网站:Welhof
2020/12/08 全球购物
内部类的定义、种类以及优点
2013/10/16 面试题
九年级历史教学反思
2014/01/27 职场文书
工作时间上网检讨书
2014/02/03 职场文书
学生逃课万能检讨书2000字
2015/02/17 职场文书
2015年学生会干事工作总结
2015/04/09 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
创业计划书之家教中心
2019/09/25 职场文书
Python re.sub 反向引用的实现
2021/07/07 Python
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫