详解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 getElementsByClassName实现代码
Oct 11 Javascript
Jquery 动态循环输出表格具体方法
Nov 23 Javascript
javascript框架设计之种子模块
Jun 23 Javascript
javascript的几种写法总结
Sep 30 Javascript
微信小程序上滑加载下拉刷新(onscrollLower)分批加载数据(二)
May 11 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
Express结合Webpack的全栈自动刷新
May 23 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
ant design中upload组件上传大文件,显示进度条进度的实例
Oct 29 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 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
多重?l件?合查?(一)
2006/10/09 PHP
php下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
JoshChen_php新手进阶高手不可或缺的规范介绍
2013/08/16 PHP
Linux下php5.4启动脚本
2014/08/03 PHP
PHP判断json格式是否正确的实现代码
2017/09/20 PHP
PHP开发中解决并发问题的几种实现方法分析
2017/11/13 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
多广告投放代码 推荐
2006/11/13 Javascript
jquery之Document元素选择器篇
2008/08/14 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
2011/02/24 Javascript
jqgrid 简单学习笔记
2011/05/03 Javascript
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
2015/09/18 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
Javascript实现前端简单的路由实例
2016/09/11 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
iview同时验证多个表单问题总结
2018/09/29 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
es6中new.target的作用和使用场景简单示例分析
2020/03/14 Javascript
详解uniapp的全局变量实现方式
2021/01/11 Javascript
使用grappelli为django admin后台添加模板
2014/11/18 Python
Python模拟登陆淘宝并统计淘宝消费情况的代码实例分享
2016/07/04 Python
Django Celery异步任务队列的实现
2019/07/24 Python
Python函数的默认参数设计示例详解
2019/12/01 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
美国知名的百货清仓店:Neiman Marcus Last Call
2016/08/03 全球购物
建议书的格式
2014/05/12 职场文书
党的群众路线教育实践活动宣传标语口号
2014/06/06 职场文书
模具设计与制造专业自荐书
2014/07/01 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
原告离婚代理词
2015/05/23 职场文书
SQL实现LeetCode(178.分数排行)
2021/08/04 MySQL
通过T-SQL语句创建游标与实现数据库加解密功能
2022/03/16 SQL Server