详解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 相关文章推荐
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
Dec 02 Javascript
jquery ezUI 双击行记录弹窗查看明细的实现方法
Jun 01 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
JS与jQuery实现子窗口获取父窗口元素值的方法
Apr 17 jQuery
原生JS实现日历组件的示例代码
Sep 22 Javascript
基于datepicker定义自己的angular时间组件的示例
Mar 14 Javascript
浅析Vue项目中使用keep-Alive步骤
Jul 27 Javascript
解决layer弹层遮罩挡住窗体的问题
Aug 17 Javascript
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
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
日本收入最高的漫画家:海贼王作者版税年收入高达8.45亿元
2020/03/04 日漫
提升PHP执行速度全攻略(下)
2006/10/09 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
PHP实现中文圆形印章特效
2015/06/19 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
详解php反序列化
2020/06/10 PHP
JavaScript修改css样式style
2008/04/15 Javascript
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
2012/01/13 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
JQuery实现鼠标滚轮滑动到页面节点
2015/07/28 Javascript
使用jquery.qrcode.min.js实现中文转化二维码
2016/03/11 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
解决JSON.stringify()自动将中文转译成unicode的问题
2018/01/05 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
Python 时间处理datetime实例
2008/09/06 Python
Python中使用第三方库xlrd来写入Excel文件示例
2015/04/05 Python
Python修改文件往指定行插入内容的实例
2019/01/30 Python
Python minidom模块用法示例【DOM写入和解析XML】
2019/03/25 Python
Pandas操作CSV文件的读写实现方法
2019/11/13 Python
解决jupyter notebook 前面书写后面内容消失的问题
2020/04/13 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
5分钟快速掌握Python定时任务框架的实现
2021/01/26 Python
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
家得宝墨西哥官网:The Home Depot墨西哥
2019/11/18 全球购物
安全协议书
2014/04/23 职场文书
学校关爱留守儿童活动方案
2014/08/27 职场文书
卖车协议书范例
2014/09/16 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
2014年技术工作总结范文
2014/11/20 职场文书
校运会通讯稿
2015/07/18 职场文书
Python中Selenium对Cookie的操作方法
2021/07/09 Python