详解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 相关文章推荐
ie 调试javascript的工具
Apr 29 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
jQuery数组处理代码详解(含实例演示)
Feb 03 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
Oct 11 Javascript
JavaScript获取Url里的参数
Dec 18 Javascript
JS实现动态给图片添加边框的方法
Apr 01 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
去除html代码里面的script正则方法
May 19 Javascript
zTree jQuery 树插件的使用(实例讲解)
Sep 25 jQuery
vue跨域解决方法
Oct 15 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
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入门
2006/10/09 PHP
php中转义mysql语句的实现代码
2011/06/24 PHP
php 判断数组是几维数组
2013/03/20 PHP
PHP简单选择排序算法实例
2015/01/26 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
用javascript实现计算两个日期的间隔天数
2007/08/14 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
jquery图片延迟加载 前端开发技能必备系列
2012/06/18 Javascript
javascript中cookie对象用法实例分析
2015/01/30 Javascript
15款jQuery分布引导插件分享
2015/02/04 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
Vue实现路由跳转和嵌套
2017/06/20 Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
2017/12/26 Javascript
js正则相关知识点专题
2018/05/10 Javascript
微信小程序自定义导航教程(兼容各种手机)
2018/12/12 Javascript
mpvue开发音频类小程序踩坑和建议详解
2019/03/12 Javascript
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
python实现支付宝转账接口
2019/05/07 Python
使用Python画股票的K线图的方法步骤
2019/06/28 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
python实现文法左递归的消除方法
2020/05/22 Python
python程序如何进行保存
2020/07/03 Python
python如何爬取动态网站
2020/09/09 Python
利用python查看数组中的所有元素是否相同
2021/01/08 Python
俄罗斯护发和专业化妆品购物网站:Hihair
2019/09/28 全球购物
什么是组件架构
2016/05/15 面试题
《埃及的金字塔》教学反思
2014/04/07 职场文书
电子商务专业求职信
2014/07/10 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
2014大学校园光棍节活动策划书
2014/09/29 职场文书
2014年学校禁毒工作总结
2014/12/23 职场文书
会计求职信怎么写
2015/03/20 职场文书
Vue的过滤器你真了解吗
2022/02/24 Vue.js
CSS 鼠标选中文字后改变背景色的实现代码
2023/05/21 HTML / CSS