详解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 相关文章推荐
深入理解JavaScript系列(8) S.O.L.I.D五大原则之里氏替换原则LSP
Jan 15 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
Oct 17 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
jquery判断iPhone、Android设备类型
Sep 14 Javascript
使用jquery.qrcode.js生成二维码插件
Oct 17 Javascript
Puppet的一些技巧
Sep 17 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
详解vue的数据劫持以及操作数组的坑
Apr 18 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 Javascript
JavaScript如何判断对象有某属性
Jul 03 Javascript
基于postman获取动态数据过程详解
Sep 08 Javascript
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
PHP学习笔记之二
2011/01/17 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
PHP下SSL加密解密、验证、签名方法(很简单)
2020/06/28 PHP
yii2整合百度编辑器umeditor及umeditor图片上传问题的解决办法
2016/04/20 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
php无限级评论嵌套实现代码
2018/04/18 PHP
thinkphp5框架调用其它控制器方法 实现自定义跳转界面功能示例
2019/07/03 PHP
js 刷新页面的代码小结 推荐
2010/04/02 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
jquery的live使用注意事项
2014/02/18 Javascript
Jquery中offset()和position()的区别分析
2015/02/05 Javascript
Bootstrap每天必学之进度条
2015/11/30 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
2016/08/23 Javascript
Jquery针对tr td的一些实用操作方法(必看篇)
2016/10/05 Javascript
JavaScript之filter_动力节点Java学院整理
2017/06/28 Javascript
微信禁止下拉查看URL的处理方法
2017/09/28 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
2017/10/30 Javascript
详解webpack4多入口、多页面项目构建案例
2018/05/25 Javascript
详解webpack打包vue项目之后生成的dist文件该怎么启动运行
2019/09/06 Javascript
用云开发Cloudbase实现小程序多图片内容安全监测的代码详解
2020/06/07 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
[14:25]教你分分钟做大人:主宰(HEROS)
2014/12/08 DOTA
[02:41]《西雅图我们来了》2015国际邀请赛出征全记录
2015/07/23 DOTA
python实现爬虫下载漫画示例
2014/02/16 Python
Windows系统下安装Python的SSH模块教程
2015/02/05 Python
Python实现繁体中文与简体中文相互转换的方法示例
2018/12/18 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
Python中Selenium模块的使用详解
2020/10/09 Python
用python读取xlsx文件
2020/12/17 Python
欧洲最大的美妆零售网站:Feelunique
2017/01/14 全球购物
.net面试题
2015/12/22 面试题
公司新员工的演讲稿注意事项
2014/01/01 职场文书
信用社主任竞聘演讲稿
2014/05/23 职场文书
食堂厨师岗位职责
2014/08/25 职场文书
大学生军训心得体会5篇
2019/08/15 职场文书