1.JavaScript中的变量类型有哪些?

(1)值类型(基本类型):字符串(string)、数值(number)、布尔值(boolean)、undefined、null  、symbol 

(2)引用类型:对象(Object)、数组(Array)、函数(Function) 

2.值类型和引用类型的区别

(1)值类型:

1、占用空间固定,保存在栈中(当一个方法执行时,每个方法都会建立自己的内存栈,在这个方法内定义的变量将会逐个放入这块栈内存里,随着方法的执行结束,这个方法的内存栈也将自然销毁了。因此,所有在方法中定义的变量都是放在栈内存中的;栈中存储的是基础变量以及一些对象的引用变量,基础变量的值是存储在栈中,而引用变量存储在栈中的是指向堆中的数组或者对象的地址,这就是为何修改引用类型总会影响到其他指向这个地址的引用变量。)

2、保存与复制的是值本身

3、使用typeof检测数据的类型

4、基本类型数据是值类型

(2)引用类型:

1、占用空间不固定,保存在堆中(当我们在程序中创建一个对象时,这个对象将被保存到运行时数据区中,以便反复利用(因为对象的创建成本通常较大),这个运行时数据区就是堆内存。堆内存中的对象不会随方法的结束而销毁,即使方法结束后,这个对象还可能被另一个引用变量所引用(方法的参数传递时很常见),则这个对象依然不会被销毁,只有当一个对象没有任何引用变量引用它时,系统的垃圾回收机制才会在核实的时候回收它。)

2、保存与复制的是指向对象的一个指针

3、使用instanceof检测数据类型

4、使用new()方法构造出的对象是引用型

实例:

// 值类型:Number、string、bollean、undefined
var a = 100
var b = a
a = 200
console.log(b) // 100 保存与复制的是值本身
  
  
// 引用类型:对象、数组、函数、null(空指针)
// 可以扩展属性
var a = {age:20}
var b = a
b.age = 21
console.log(a.age) // 21
 
// 利用typeof来区分
typeof undefined // undefined
typeof 'abc' // string
typeof 123 // number
typeof true // boolean
// typeof 区分不出来引用类型(除了函数)
typeof {} // object
typeof [] // object
typeof null // object
typeof console.log //function
 
// 用instanceof来区分引用类型
 
// 如果变量是给定引用类型(根据它的原型链来识别)的实例,那么instanceof 操作符就会返回 true。

console.log(person instanceof Object); // 变量 person 是 Object 吗?

console.log(colors instanceof Array); // 变量 colors 是 Array 吗?

console.log(pattern instanceof RegExp); // 变量 pattern 是 RegExp 吗?

3. 几方面的区别举例:

(1)动态的属性: 定义基本类型值和引用类型值的方式是类似的。但是,当这个值保存到变量中以后,对不同类型值可以执行的操作则大相径庭。对于引用类型的值,我们可以为其添加属性和方法,也可以改变和删除其属性和方法,但是,我们不能给基本类型的值添加属性,只能给引用类型值动态地添加属性,以便将来使用。例如

var person = new Object();
person.name = "Nicholas";
alert(person.name); //"Nicholas"

(2)复制变量值: 如果从一个变量向另一个变量复制基本类型值,会在变量对象上创建一个新值,然后把该值复制到为新变量分配的位置上。

上述例子中,num1保存的值是5,当使用 num1 的值来初始化 num2 时,num2 中也保存了值 5。但 num2中的 5 与 num1 中的 5 是完全独立的,该值只是 num1 中 5 的一个副本。此后,这两个变量可以参与任何操作而不会相互影响。

var num1 = 5;
var num2 = num1

复制基本类型的过程:

当从一个变量向另一个变量复制引用类型的值时,同样也会将存储在变量对象中的值复制一份放到为新变量分配的空间中。不同的是,这个值的副本实际上是一个指针,而这个指针指向存储在堆中的一个对象。复制操作结束后,两个变量实际上引用同一个对象。因此,改变其中一个变量,就会影响另外一个变量:例

var obj1 = new Object();
var obj2 = obj1;
obj1.name = "Nicholas";
alert(obj2.name); //"Nicholas"

首先,变量 obj1 保存了一个对象的新实例。然后,这个值被复制到了 obj2 中;换句话说,obj1和 obj2 都指向同一个对象。这样,当为 obj1 添加 name 属性后,可以通过 obj2 来访问这个属性,因为这两个变量引用的都是同一个对象。
复制值类型的过程如下图:

(3)传递参数:在向参数传递基本类型的值时,被传递的值会被复制给一个局部变量(即命名参数,或者用ECMAScript 的概念来说,就是 arguments 对象中的一个元素)。在向参数传递引用类型的值时,会把这个值在内存中的地址复制给一个局部变量,因此这个局部变量的变化会反映在函数的外部。

function addTen(num) {
num  = 10;
return num;
}
var count = 20;
var result = addTen(count);
alert(count); //20,没有变化
alert(result); //30

在函数内部,参数 num 的值被加上了 10,但这一变化不会影响函数外部的 count 变量。参数num 与变量 count 互不相识,它们仅仅是具有相同的值。

function setName(obj) {
obj.name = "Nicholas";
}
var person = new Object();
setName(person);
alert(person.name); //"Nicholas"

为了证明对象是按值传递的,我们再看一看下面这个经过修改的例子:

function setName(obj) {
obj.name = "Nicholas";
obj = new Object();
obj.name = "Greg";
}
var person = new Object();
setName(person);
alert(person.name); //"Nicholas"

如果 person 是按引用传递的,那么 person 就会自动被修改为指向其 name 属性值为"Greg"的新对象。但是,当接下来再访问 person.name 时,显示的值仍然是"Nicholas"。

这说明即使在函数内部修改了参数的值,但原始的引用仍然保持未变。实际上,当在函数内部重写 obj 时,这个变量引用的就是一个局部对象了。而这个局部对象会在函数执行完毕后立即被销毁。

4. 变量计算--强制类型转换

// 字符串拼接
var a = 100   10 //110
var b = 100   '10' //10010
// == 运算符
100 == '100' //true
0 == '' //true
null == undefined //true
// 语句
var a = true
if(a){}
var b = 100
if(b){} // 把数字转换为true
var c = ''
if(c){} // 把空字符串转换为false
// 逻辑运算
console.log(10&&0); // 0 把10转换成true
console.log('' || 'abc'); // 'abc' 把空字符串转换为false
console.log(!window.abc); // window.abc是undefined 把非undefined转换成true
  
//判断一个变量会被当做true还是false
var a = 100
console.log(!!a); // true

到此这篇关于js中值类型和引用类型区别的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持Devmax。

js中值类型和引用类型的区别介绍的更多相关文章

  1. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. amaze ui 的使用详细教程

    这篇文章主要介绍了amaze ui 的使用详细教程,本文通过多种方法给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. Swift基础语法: 23 - Swift的Trailing闭包, 捕获, 闭包是引用类型

    其使用求余运算符计算最后一位数字并利用digitNames字典获取所映射的字符串.2.字典digitNames下标后跟着一个叹号(!

  4. swift皮筋弹动发射飞机ios源码

    这是一个款采用swift实现的皮筋弹动发射飞机游戏源码,游戏源码比较详细,大家可以研究学习一下吧。

  5. swift 值类型和引用类型

    1.Struct是值类型,拷贝是值拷贝,Class是引用类型,拷贝是引用拷贝

  6. Swift:什么时候使用结构体和类

    发布于2015年8月14日世界上对swift持续不断的讨论话题中有一个就是什么时候使用结构体什么时候使用类。这个例子对应下面Swift的举例:和之前的打印结果一样:值类型的体验值类型不是一个新的概念,但是对于很多人来说他们觉得这是新的。很多认为“一切皆对象”的语言如Python、JavaScript等也都只有引用类型。Swift对此说“yes”,那也就意味着Array,Dictionary和String都是结构体而不是类。

  7. 何时使用Swift Structs和Classes

    struct在绝大部分Objective-C代码中并不是很常用.我们偶尔以CGRect和CGPoint等方式接触到它们,但很少会自己去写.首先,它们不是很实用.用Objective-C在struct中正确地存储对象的引用的确很难,尤其是使用ARC的时候.很多其他语言干脆没有类似struct的东东.许多语言如同Python和JavaScript一样”万物皆对象”,只有引用类型.如果你是从这类语言转型到Swift的,你可能对struct的概念就更陌生了.等一下!

  8. Swift学习笔记—— 类和结构体

  9. 关于Swift中的值类型(Value Types)与引用类型(Reference Type)

    Swift里面的类型分为两种:●值类型:每个实例都保留了一分独有的数据拷贝。如结构体、枚举和元组。值类型与引用类型的区别在于:值类型和引用类型最基本的区别在于复制之后的结果。引用类型示例代码如下:值类型较引用类型来说,会让你更容易在大量代码中理清状况。因此可能会造成严重的程序错误,这在调试过程中非常难以排除。

  10. Swift面向协议编程初探

    最近有时间,挑了几个今年WWDC中比较感兴趣的Session视频来学习,今天就抽时间整理一下关于Swift2.0中一个比较新的概念面向协议编程。苹果官方那么正式的称Swift是一门支持面向协议编程的语言,难道就是这么简单的内容?而在Swift语言中,协议被赋予了更多的功能和更广阔的使用空间,在Swift2.0中,更为协议增加了扩展功能,使其能够胜任绝大多数情况下数据类型的抽象,所以苹果开始声称Swift是一门支持面向协议编程的语言。

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部