大家好,我是IT修真院的学员,一枚正直纯洁善良的web前端程序员
今天给大家分享一下基本类型和引用类型分别指的是什么?有何区别??
1.背景介绍
先了解一下 JAVASCRIPT 是什么
JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能, 为用户提供更流畅美观的浏览效果。JavaScript可以嵌入在 HTML 中,或者作为单独的文件被 HTML 引用, 用以实现某种动态的功能。
ECMAScript数据类型
ECMAScript是JavaScript在语法和语义上的标准、规范。JavaScript是基于ECMAScript标准实现的。 Javascript包括ECMAScript、DOM、BOM。 在日常场合,这两个词是可以互换的。
在 ECMAScript 规范中,共定义了 7 种数据类型,
Number:包含整数和浮点数
String:字符串用双引号或者单引号,有length属性
Boolean:只有true和false两个值
Null:被看作是空的对象引用,只有一个值,null
Undefined:未定义
Symbol:表示独一无二的值
Object:对象
2、知识剖析
ECMAScript数据类型分为基本类型和引用类型两大类 (简单点说就是拥有方法的类型和不能拥有方法的类型)
基本类型:按值访问,可操作保存在变量中的实际的值。基本类型值指的是简单的数据段。
基本类型:number,string,boolean,null,undefined
引用类型:当复制保存着对象的某个变量时,操作的是对象的引用,但在为对象添加属性时,操作的是实际的对象。 引用类型值指那些可能为多个值构成的对象。
引用类型:object(Date、Array、RegExp、Function),特殊的基本包装类型(String、Number、Boolean) 以及单体内置对象(Global、Math)。
3、常见问题
基本类型和引用类型的不同之处有哪些
4、解决方案
基本类型的值是不可变的,引用类型的值是可变的;
基本类型的变量是存放在栈区的(栈区指内存里的栈内存),引用类型的值是同时保存在栈内存和堆内存中的对象;
基本类型的比较是值的比较,引用类型的比较是引用的比较;
1-1、基本类型的值是不可变的:
任何方法都无法改变一个基本类型的值,比如一个字符串:
var name = "mary";
name.toUpperCase(); //"MARY"
console.log(name); //"mary"
var person = "mary";
person.age = 22;
person.method = function () {
return 100;
};
console.log(person.age);//undefined
console.log(person.method);//提示错误
第一个例子:会发现原始的name并未发生改变,而是调用了toUpperCase()方法后返回的是一个新的字符串。
第二个例子:我们不能给基本类型添加属性和方法。
1-2、引用类型的值是可变的:
我们可为引用类型添加属性和方法,也可以删除其属性和方法
var person = {};
person.name = 'jozo';
person.age = 22;
person.sayName = function(){console.log(person.name);}
person.sayName();// 'jozo'
delete person.name; //删除person对象的name属性
person.sayName(); // undefined
上面代码说明引用类型可以拥有属性和方法,并且是可以动态改变的。
2-1、基本类型的变量是存放在栈区的(栈区指内存里的栈内存)
假如有以下几个基本类型的变量:
var name = 'jozo';
var city = 'guangzhou';
var age = 22;
2-2、引用类型的存储需要内存的栈区和堆区(堆区是指内存里的堆内存)共同完成, 栈区内存保存变量标识符和指向堆内存中该对象的指针, 也可以说是该对象在堆内存的地址。
var person1 = {name:'jozo'};
var person2 = {name:'xiaom'};
var person3 = {name:'xiaoq'};
3-1、基本类型的比较是值的比较
只有在它们的值相等的时候它们才相等。
var a = 1;
var b = true;
console.log(a == b);//true
在用==比较两个不同类型的变量时会进行一些类型转换。像上面的比较先会把true 转换为数字1再和数字1进行比较,结果就是true了。
3-2、引用类型的比较是引用的比较
var person1 = {};
var person2 = {};
console.log(person1 == person2); // false
引用类型是按引用访问的,换句话说就是比较两个对象的堆内存中的地址是否相同,那很明显, person1和person2在堆内存中地址是不同的
5、编码实战
6、扩展思考
基本类型和引用类型分别是怎么传递参数的?
基本数据类型传递参数
function addTen(num){
num+=10;
return num;
}
var count=20;
var result=addTen(count);
console.log(count);
console.log(result);
执行结果是:20和30。在这段代码中,将变量count当做参数传递给了函数addTen, 也就是相当于将变量count的值复制给了函数addTen的参数。这时addTen的参数num可以看做是函数内部的一个变量。 在上段代码中,就相当于两个基本数据类型变量之间的值复制。而基本数据类型都有自己独立的内存地址, 所以num和count是没有任何关系的,他们只是值相等而已,函数执行完毕后,count的值并没有改变。 而函数外面的result是被直接赋值的,所以result的值就是函数的结果30。
引用类型传递参数
function setName(obj){
obj.name="LSN";
}
var person=new Object();
setName(person);
console.log(person.name);//LSN
执行结果是:LSN。在这段代码中,函数setName的作用是给obj对象添加了一个属性name并给该属性赋值为"LSN", 因为obj是引用类型,所以这里属于是将引用类型person赋值给了obj,也就是说person和obj引用了一个内存地址, 所以当给obj新加了属性name时,在函数外面的person也跟着改变,最后person.name的结果为LSN。
7、参考文献
参考一:js基本类型和引用类型的区别
参考二:W3school
参考三:指针的理解
8、更多讨论
两种类型的检测方法是什么
答:Typeof操作符是检测基本类型的最佳工具
var num = 1;
var a = 'a';
var b;
var flag = true;
var c = null;
alert(typeof num); //number
alert(typeof a); //string
alert(typeof b); //undefined
alert(typeof flag); //boolean
alert(typeof c); //object
instanceof :判断是否是某个引用类型。
var a = [1,2,3];
alert(a instanceof Object); //true
alert(a instanceof Array); //true
alert(a instanceof RegExp); //false
问题:
1.数据类型怎么转换?
答:请点击
2.引用类型的值是可变的吗?怎么改变?
答:引用类型的值是可变的
3. Null 和 undefined有什么区别?
两者是==的吗?为什么
答:null表示"没有对象",即该处不应该有值。典型用法是:
(1) 作为函数的参数,表示该函数的参数不是对象。
(2) 作为对象原型链的终点。
Object.getPrototypeOf(Object.prototype)// null
undefined表示"缺少值",就是此处应该有一个值,但是还没有定义。典型用法是:
(1)变量被声明了,但没有赋值时,就等于undefined。
(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。
(3)对象没有赋值的属性,该属性的值为undefined。
(4)函数没有返回值时,默认返回undefined。
null==undefined(因为转换),但是两者不全等