详解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 相关文章推荐
输入框过滤非数字的js代码
Sep 18 Javascript
jQuery+Ajax+PHP弹出层异步登录效果(附源码下载)
May 27 Javascript
Angular.js 实现数字转换汉字实例代码
Jul 14 Javascript
JavaScript数组和对象的复制
Mar 21 Javascript
EasyUI的TreeGrid的过滤功能的解决思路
Aug 08 Javascript
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
vue 多入口文件搭建 vue多页面搭建的实例讲解
Mar 12 Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 Javascript
微信小程序tabBar 返回tabBar不刷新页面
Jul 25 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
vue prop属性传值与传引用示例
Nov 13 Javascript
Node绑定全局TraceID的实现方法
Nov 14 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
PHPThumb PHP 图片缩略图库
2012/03/11 PHP
php防止sql注入代码实例
2013/12/18 PHP
PHP实现的mysql主从数据库状态检测功能示例
2017/07/20 PHP
PHP读取Excel内的图片(phpspreadsheet和PHPExcel扩展库)
2019/11/19 PHP
基于JQuery的数字改变的动画效果--可用来做计数器
2010/08/11 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
2013/08/01 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
移动端点击图片放大特效PhotoSwipe.js插件实现
2016/08/25 Javascript
JS设置时间无效问题的解决办法
2017/02/18 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
angularjs中的$eval方法详解
2017/04/24 Javascript
详解如何用webpack打包一个网站应用项目
2017/07/12 Javascript
使用vue 国际化i18n 实现多实现语言切换功能
2018/10/11 Javascript
JS实现简易留言板增删功能
2020/02/08 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
2020/10/16 Javascript
详解微信小程序(Taro)手动埋点和自动埋点的实现
2021/03/02 Javascript
python获取当前时间对应unix时间戳的方法
2015/05/15 Python
Python实时获取cmd的输出
2015/12/13 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
详解Python3操作Mongodb简明易懂教程
2017/05/25 Python
Python实现读取及写入csv文件的方法示例
2018/01/12 Python
攻击者是如何将PHP Phar包伪装成图像以绕过文件类型检测的(推荐)
2018/10/11 Python
Python多进程编程常用方法解析
2020/03/26 Python
Django之富文本(获取内容,设置内容方式)
2020/05/21 Python
很酷的HTML5电子书翻页动画特效
2016/02/25 HTML / CSS
伦敦所有西区剧院演出官方票务代理:Theatre Tickets Direct
2017/05/26 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
考试作弊被抓检讨书
2014/01/10 职场文书
高一地理教学反思
2014/01/18 职场文书
销售队伍口号
2014/06/11 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
拔河比赛队名及霸气口号
2015/12/24 职场文书
如何使用CocosCreator对象池
2021/04/14 Javascript
详解Python魔法方法之描述符类
2021/05/26 Python
python pygame入门教程
2021/06/01 Python
Elasticsearch 基本查询和组合查询
2022/04/19 Python