详解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 篱式条件判断
Aug 22 Javascript
js抽奖实现随机抽奖代码效果
Dec 02 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
js脚本实现数据去重
Nov 27 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
JavaScript事件委托技术实例分析
Feb 06 Javascript
JavaScript实现图片DIV竖向滑动的方法
Apr 25 Javascript
JS实现点击复选框将按钮或文本框变为灰色不可用的方法
Aug 11 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
Aug 31 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
实例详解JSON取值(key是中文或者数字)方式
Aug 24 Javascript
鸿蒙系统中的 JS 开发框架
Sep 18 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数组函数
2008/08/18 PHP
php 修改zen-cart下单和付款流程以防止漏单
2010/03/08 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
php数组实现根据某个键值将相同键值合并生成新二维数组的方法
2017/04/26 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
又一个小巧的图片预加载类
2007/05/05 Javascript
js bind 函数 使用闭包保存执行上下文
2011/12/26 Javascript
基于jquery编写的横向自适应幻灯片切换特效的实例代码
2013/08/06 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
jQuery通过ajax方法获取json数据不执行success的原因及解决方法
2016/10/15 Javascript
微信小程序  audio音频播放详解及实例
2016/11/02 Javascript
jQuery实现删除li节点的方法
2016/12/06 Javascript
深入解析js轮播插件核心代码的实现过程
2017/04/14 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
解决vue跨域axios异步通信问题
2019/04/17 Javascript
Vue组件通信入门之Provide和Inject机制
2019/12/29 Javascript
Python中函数的参数传递与可变长参数介绍
2015/06/30 Python
Python pass详细介绍及实例代码
2016/11/24 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
基于python的列表list和集合set操作
2019/11/24 Python
Python drop方法删除列之inplace参数实例
2020/06/27 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
公司合作协议书范本
2014/04/18 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
区长工作作风个人整改措施
2014/10/01 职场文书
公务员个人考察材料
2014/12/23 职场文书
公务员个人总结
2015/02/12 职场文书
房屋所有权证明
2015/06/19 职场文书
2015年清剿火患专项行动工作总结
2015/07/27 职场文书
2016年七夕情人节宣传语
2015/11/25 职场文书
go开发alertmanger实现钉钉报警
2021/07/16 Golang