详解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打印iframe内容示例代码
Aug 20 Javascript
ExtJS DOM元素操作经验分享
Aug 28 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
如何使用headjs来管理和异步加载js
Nov 29 Javascript
bootstrap+jQuery 实现下拉菜单中复选框全选和全不选效果
Jun 12 jQuery
js构造函数创建对象是否加new问题
Jan 22 Javascript
vue通过路由实现页面刷新的方法
Jan 25 Javascript
AngularJS 将再发布一个重要版本 然后进入长期支持阶段
Jan 31 Javascript
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 jQuery
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
Vue项目中使用jsonp抓取跨域数据的方法
Nov 10 Javascript
JavaScript实现飞舞的泡泡效果
Feb 07 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实现的通过参数生成MYSQL语句类完整实例
2016/04/11 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
论坛里点击别人帖子下面的回复,回复标题变成“回复 24# 的帖子”
2009/06/14 Javascript
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
2010/12/25 Javascript
js循环改变div颜色具体方法
2013/06/25 Javascript
Node.js实现简单聊天服务器
2014/06/20 Javascript
AngularJS语法详解
2015/01/23 Javascript
JavaScript的Polymer框架中dom-repeat与VM的相关操作
2015/07/29 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
Javascript中的迭代、归并方法详解
2016/06/14 Javascript
js完整倒计时代码分享
2016/09/18 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
详解vue-cli项目中用json-sever搭建mock服务器
2017/11/02 Javascript
详解基于Koa2开发微信二维码扫码支付相关流程
2018/05/16 Javascript
JavaScript实现的鼠标跟随特效示例【2则实例】
2018/12/22 Javascript
详解VS Code使用之Vue工程配置format代码格式化
2019/03/20 Javascript
vue2.0项目集成Cesium的实现方法
2019/07/30 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
python 中文字符串的处理实现代码
2009/10/25 Python
Python温度转换实例分析
2018/01/17 Python
python tkinter界面居中显示的方法
2018/10/11 Python
JupyterNotebook设置Python环境的方法步骤
2019/12/03 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
Python tkinter制作单机五子棋游戏
2020/09/14 Python
matplotlib阶梯图的实现(step())
2021/03/02 Python
CSS3线性渐变简单实现以及该属性在浏览器中的不同
2012/12/12 HTML / CSS
WWE美国职业摔角官方商店:WWE Shop
2018/11/15 全球购物
秋季运动会广播稿大全
2014/02/17 职场文书
如何写辞职书
2015/02/26 职场文书
班主任开场白
2015/06/01 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
python中的3种定义类方法
2021/11/27 Python
python flappy bird小游戏分步实现流程
2022/02/15 Python
MySQL数据库安装方法与图形化管理工具介绍
2022/05/30 MySQL