js变量添加属性、复制变量?函数传参(下)

对不同数据类型变量动态添加属性?基本类型变量、引用类型变量复制变量?函数传参是按值传递还是引用传递?(这个问题应该不少人有疑惑)
之前在学习过程中没有重视变量而且觉得js变量类型多没有一个大体的框架,这几天在看书重温了这方面的知识,对变量有了更多的认识,下面这篇白话文章会解答上面那几个问题。总之,变量很基础也很重要。
看这篇文章之前要先理清楚变量的类型有哪些。画了一些简单的图帮助理解。

一、添加属性:

只能给引用类型动态地添加属性,不能给基本类型添加属性。

1、给引用类型添加属性:
var person = new Object();
person.name = "Nicholas";
alert(person.name); //"Nicholas"

为person对象添加了name属性,并赋值"Nicholas"。

2、给基本类型添加属性:
var name = "Nicholas";
name.age = 27;
alert(name.age); //undefined

给基本类型添加属性,没有导致任何错误,但是访问这个属性时,发现该属性不见了

所以,只能给引用类型动态地添加属性,不能给基本类型添加属性。

二 、复制:

1、对基本类型变量复制:

A复制了一个副本A’在这里插入图片描述
好比如我们平时在写文档的时候,把文档1中important这个单词复制到文档2中,两个important单词在文档1和文档2中互不相关,修改文档2中的important单词不会对文档1important单词造成影响

var num1=5;
var num2=num1;
num2=num2+1;
console.log(num1); //5
console.log(num2); //6
2、对引用类型变量复制:

A复制了一个指向同一个地方的A’(指针) (指向的地方是存放对象的地址)
在这里插入图片描述

var obj1=new Object();
var obj2=obj1;
obj1.name="Jeo";
console.log(obj2.name) //Jeo

可以看到只设置了obj1的name为Jeo,obj2的name也为Jeo。画了张图来方便理解
在这里插入图片描述

三、传递参数:

这部分内容很重要,搞清楚了做一些笔试题的时候就容易分析了

1、传递基本类型给参数

传递基本类型给参数——>基本类型复制
用一张简略的图来理解
在这里插入图片描述
传递的值会复制给一个局部变量,在函数内部修改不会影响外部的变量的值

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

分析:
把count传递给num,函数内部修改num(加10),外部count没有影响(还是20),函数执行完会销毁num

扫描二维码关注公众号,回复: 5784601 查看本文章
2、传递引用类型给参数

重头戏来了,《js高程》(3)文中一开头说:
函数的参数都是按值传递的。基本类型值的传递如同基本类型变量的复制一样,而引用类型值的传递,则如同引用类型变量的复制一样。(这里产生疑惑,又说函数的参数都是按值传递,后面又说传递引用类型如同复制那不就是引用传递嘛??)这个内容有点疑惑也看了好多遍。
引用类型传递参数究竟是按值传递还是引用传递,上网查了也没有看到统一的说法。好吧,我在这里也不下定论,不管是什么,重要的是学会分析
先看下面这个代码

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

看下面的图来分析
在这里插入图片描述
分析:
在函数内部obj添加name属性后,外部的person也有反映,obj和person指向的是同一个(堆内存中的)对象

要注意!!!!!!
思考一下,如果在函数内部把变量重写(赋一个新对象),会不会改变外部的值呢?
再看看下面代码

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

用图进行分析:
即使在函数内部修改了参数的值,原始的引用依然保持不变。
在这里插入图片描述
在这里插入图片描述
这个例子比前面那个例子多了两行代码,第一行代码让变量引用了一个新的对象,第二行代码为对象添加了name属性并设置为"Greg"。然而这两行代码对原来的对象(person指向的对象)并没有造成影响。实际上,当函数颞部重写obj时,这个变量引用的就是一个局部对象,这个局部对象在函数执行完毕后立即被销毁。

看一道面试题吧

var setPerson=function(person){ 
 	person.name="kevin";
 	person={name:"nick"}; 
}; 
var person={name:"alan"}; 
setPerson(person); 
alert(person.name);

答案:kevin
为什么会这个答案呢?相信看完刚刚上面例子的图解应该就能知道吧~

本文是自己看书过程中写下的读书笔记,文中加入了自己的理解,如有错误欢迎大家指出。
参考:《JavaScript高级程序设计》(第三版)

猜你喜欢

转载自blog.csdn.net/i_ViOLeT_i/article/details/86575969