详解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处理table表格的代码
Dec 06 Javascript
Jquery带搜索框的下拉菜单
May 06 Javascript
JS获取单击按钮单元格所在行的信息
Jun 17 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
Aug 05 Javascript
JavaScipt选取文档元素的方法(推荐)
Aug 05 Javascript
JS中with的替代方法与String中的正则方法详解
Dec 23 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
webpack2.0搭建前端项目的教程详解
Apr 05 Javascript
jQuery实现动态生成年月日级联下拉列表示例
May 11 jQuery
微信小程序利用云函数获取手机号码
Dec 17 Javascript
vue实现列表滚动的过渡动画
Jun 29 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数组的概述及分类与声明代码演示
2013/02/26 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
PHP类继承 extends使用介绍
2014/01/14 PHP
php设置session值和cookies的学习示例
2014/03/21 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
Javascript 类与静态类的实现
2010/04/01 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
2010/04/02 Javascript
Javascript创建Silverlight Plugin以及自定义nonSilverlight和lowSilverlight样式
2010/06/28 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
2013/10/22 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
JavaScript中的变量作用域介绍
2014/12/31 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
JavaScript操作URL的相关内容集锦
2015/10/29 Javascript
JavaScript操作class和style样式代码详解
2016/02/13 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
2016/05/19 Javascript
原生JS京东轮播图代码
2017/03/22 Javascript
webpack学习教程之前端性能优化总结
2017/12/05 Javascript
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
2018/03/28 jQuery
详解如何在nuxt中添加proxyTable代理
2018/08/10 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
Vue路由守卫之路由独享守卫
2019/09/25 Javascript
Python中运算符"=="和"is"的详解
2016/10/08 Python
python对DICOM图像的读取方法详解
2017/07/17 Python
python交互式图形编程实例(三)
2017/11/17 Python
pandas数值计算与排序方法
2018/04/12 Python
flask框架自定义url转换器操作详解
2020/01/25 Python
详解KMP算法以及python如何实现
2020/09/18 Python
世界上最大的折扣香水店:FragranceNet.com
2016/10/26 全球购物
ORACLE第二个十问
2013/12/14 面试题
酒店前台接待岗位职责
2013/12/03 职场文书
《小动物过冬》教学反思
2014/04/17 职场文书
2014年销售工作总结
2014/12/01 职场文书
2015年保险公司个人工作总结
2015/05/22 职场文书
2016年第29个世界无烟日宣传活动总结
2016/04/06 职场文书
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技