详解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 相关文章推荐
如何做到打开一个页面,过几分钟自动转到另一页面
Apr 20 Javascript
jQuery中操控hidden、disable等无值属性的方法
Jan 06 Javascript
jQuery队列操作方法实例
Jun 11 Javascript
JavaScript中使用指数方法Math.exp()的简介
Jun 15 Javascript
归纳下js面向对象的几种常见写法总结
Aug 24 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
jQuery、zepto、js常用小技巧
Feb 12 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
JavaScript 保护变量不被随意修改的实现代码
Sep 27 Javascript
浅谈webpack组织模块的原理
Mar 10 Javascript
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
vue 实现滚动到底部翻页效果(pc端)
Jul 31 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
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
在 PHP 中使用随机数的三个步骤
2006/10/09 PHP
不用mod_rewrite直接用php实现伪静态化页面代码
2008/10/04 PHP
php 代码优化之经典示例
2011/03/24 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
php 购物车完整实现代码
2014/06/05 PHP
教你如何解密 “ PHP 神盾解密工具 ”
2014/06/20 PHP
thinkphp5 模型实例化获得数据对象的教程
2019/10/18 PHP
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
js获取当前路径的简单示例代码
2014/01/08 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
Javascript基础教程之if条件语句
2015/01/18 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
2017/01/08 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
详解a++和++a的区别
2017/08/30 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
element-ui table组件如何使用render属性的实现
2019/11/04 Javascript
js实现多个标题吸顶效果
2020/01/08 Javascript
jquery实现垂直手风琴菜单
2020/03/04 jQuery
微信小程序视频弹幕发送功能的实现
2020/12/28 Javascript
Python3读取文件常用方法实例分析
2015/05/22 Python
5款非常棒的Python工具
2018/01/05 Python
简单了解python gevent 协程使用及作用
2019/07/22 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
利用Python实现字幕挂载(把字幕文件与视频合并)思路详解
2020/10/21 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
介绍一下Transact-SQL中SPACE函数的用法
2015/09/01 面试题
双创工作实施方案
2014/03/26 职场文书
文秘个人求职信范文
2014/04/22 职场文书
课外活动总结
2015/02/04 职场文书
python 使用pandas读取csv文件的方法
2022/12/24 Python