韩顺平_轻松搞定网页设计(html+css+javascript)_第30讲_类和对象细节_创建对象的几种方式_js对象内存分析_学习笔记_源代码图解_PPT文档整理

最新推荐文章于 2022-02-19 13:55:49 发布

wenximalong

最新推荐文章于 2022-02-19 13:55:49 发布

阅读量3.8k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： PHP

本文链接：https://blog.youkuaiyun.com/wenximalong/article/details/8268847

PHP 专栏收录该内容

43 篇文章

订阅专栏

本文详细介绍了JavaScript中对象的创建、使用及内存管理机制。解释了如何通过构造函数创建对象实例，以及如何访问这些实例的属性。此外，还探讨了变量声明对作用域的影响，并深入分析了JavaScript的垃圾回收机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文西马龙：http://blog.youkuaiyun.com/wenximalong/

对象——function特别说明
1.在js中一切都是对象
2.类（原型对象）其实也是对象，它实际上是Function类的一个实例，通过类我们可以创建自己的对象实例，可以通过下面的代码来说明

function Person(){
}
var a=new Person();
window.alert(Person.constructor);//Person的构造函数

对象实例——如何创建对象实例
var 对象名=new 类名/原型对象名();

对象实例——如何访问（使用）对象实例的成员变量
（1）对象实例名.属性名;
（2）对象实例名["属性名"];

对象实例名["变量名"]的方式可以实现动态的访问变量，如：

function Person(){
}
var p1=new Person();
p1.name="顺平";
window.alert(pa['name']+" "+p1.name);

带var和不带var的区别
看注释
deom1.html

<html>
	<head>
		<script language="javascript">
			//全局变量
			var abc=89;
			function test(){
				//在函数里，如果你不带var，则表示定义一个新的abc变量
				//如果你带上var，则表示使用全局的abc变量
				//在函数内部，加var就是局部变量，不加就是全局变量
				abc=900;
			}
			test();
			window.alert(abc); //输出900

			var def=35;
			function test2(){
				var def=700;
			}
			test2();
			window.alert(def); //输出35
		</script>
	</head>
	<body></body>
</html>

如果带var可以理解为一个全局变量

动态访问变量的意义：当串拼接访问，具体看如下代码
demo2.html

<html>
	<head>
		<script language="javascript">
			function Person(){
			}
			var p1=new Person();
			p1.name="顺平";
			//拼接字符串，动态访问
			var val="na"+"me";
			window.alert(p1[val]);
		</script>
	</head>
	<body></body>
</html>

加深理解
为了让大家加深印象，我们定义一个人类（Person）（包括名字，年龄）
我们看看下面的一段代码
var a=new Person();
a.age=10;
a.name="小明";
var b=a;

alert(b.age);
请问：b.age究竟是多少？10
demo3.html

<html>
	<head>
		<script language="javascript">
			function Person(){
			}
			var a=new Person();
			a.age=10;
			a.name="小明";
			var b=a;
			b.name="小白";
			window.alert(b.age+"名字 "+b.name+" 名字"+a.name);
		</script>
	</head>
	<body></body>
</html>

输入结果如下图所示：

内存分析，js引擎中也有堆和栈的概念，对象的引用传递
var a=new Person();// new Person()是一个真正的数据，a是指向它的一个引用

图片大，在新窗口中打开图片，观看完整图片。

深入理解：什么时候才会把堆里的内容回收了呢
对象回收机制（GC），垃圾回收（GC）是怎样确定堆里的内容是垃圾的呢，内存被js引擎管理，js引擎是浏览器的一部分，js引擎维护了一张表

图片大，在新窗口中打开图片，观看完整图片。

在上图中，

（1）当执行①后，被引用的次数计为1；
（2）当执行②后，被引用的次数计为2；
（3）垃圾回收机制（GC）会扫描这张表，发现不能这个堆0x1234不能被回收，已经有两个引用了。
（4）当执行③后，则b被置空，b就不指向堆0x1234了，则（2）断掉，同时会把堆0x1234的被引用次数由2变为1；如果再执行window.alert(b.age);就会报错了，b已经不指向堆0x1234了。
（5）当执行④后，则a被置空，a就不指向堆0x1234了，则（1）断掉，同时会把堆0想234的被引用次数由1变为0，此时此刻堆0x1234里的数据就变为垃圾了，垃圾回收机制（GC）一扫描这个维护表，发现堆0x1234的被引用次数变为0了，立马就把它清掉。

主动删除：delete a.age;直接把age属性删掉了，即使b没有置空，b.age也访问不到了。
delete直接删除掉某个对象的属性
delete 对象名.属性//这样就会立即释放对象的这个属性空间

思考题：
在明白对象是如何在内存中存在后，请看下面的题，请问会输出什么信息？
var a=new person();
a.age=10;
a.name="小明";
var b=a;
document.write(b.name); // 输出小明
b.age=200;
document.write(a.age); // 输出200

韩顺平_php从入门到精通_视频教程_学习笔记_源代码图解_PPT文档整理_目录