学习JS面向对象基础(1)

93 阅读2分钟

在学习JS的面向对象内容时,需要复习之前的一篇文章Javascript基础(1)-基本数据类型中学习的JS基础数据类型,并且在之后的更新中会加上之前学习过的内容以及涉及面向对象的新增的内容。

一、值类型和引用类型

在之前学习的基础数据类型中,已经知道JS的基础数据类型包括NumberStringBooleanUndefinedNull五种。但是JS的数据类型除了基础数据类型之外,还有一种对象类型,也叫引用类型,对应的基础数据类型也就是值类型

值类型:五种JS基础数据类型

引用类型:对象类型,包括Object和Array

两者的区别就是存储数据和获取数据的区别。

值类型的存储是每次赋值会新开辟一个存储空间存值,值类型获取或修改时都不会互相影响。举例:

var str1 = 'zhangsan';
var str2 = str1;
str2 = 'lisi';
console.log(str1);//zhangsan
console.log(str2);//lisi

而引用类型的每次赋值,则是开辟一个存储地址并指向该地址,获取或修改时就是通过指向的地址对数据进行修改,如果是引用对象之间的赋值,则只是更改地址的指向,并不会新增一个存储空间。举例:

var obj1 = {name: 'zhangsan'};
var obj2 = obj1;
obj2.name = 'lisi';
console.log(obj1.name);//lisi
console.log(obj2.name);//lisi
值类型和引用类型在函数中的使用

举例:

function fun1(x,y) {
    return x + y;
}
var result = fun1(1,2);
console.log(result); // 3

在上面例子中,x,y是形参,函数调用时使用的1,2是实参

值类型

修改例子:

var num = 10;
function fun2(num) {
    num = 20;
    console.log(num); // 20
}
fun2(num);
console.log(num); // 10

在修改后的例子中,由于在函数fun2中修改的只是形参,且形参使用的值是外部全局变量num的值的副本,所以在函数内部修改后,打印出来的就是20,而外部的全局变量num并没有影响,所以打印出来的仍是10。

引用类型
var obj = {name:"zhangsan",age:10};
function fun3(obj) {
    console.log(obj.name); // zhangsan
    obj.name = 'lisi';
    console.log(obj.name); // lisi
}
fun3(obj);
console.log(obj.name); // lisi

在修改后的例子中,fun3使用的虽是形参,但是数据类型却是引用类型,在上文提过,正常情况下,引用类型进行赋值时,是将地址指向进行复制/更改,并非新增一个存储空间,因此在函数fun3中对obj.name进行修改时,就是对全局变量的obj.name进行修改,所以,在调用fun3函数后,打印出来的obj.name就是在函数内部修改后的值。