JavaScript面向对象编程-对象构建

最新推荐文章于 2025-07-10 16:07:01 发布

六月是你的谎言

最新推荐文章于 2025-07-10 16:07:01 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/Slayer456/article/details/81222817

javascript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了JavaScript对象的概念及其创建方法，包括基于Object对象扩展、字面量构建法、工厂模式创建法及构造方法创建等，同时对比了不同创建方式的特点。

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

好了，前面我们了解了JavaScript的数据类型以及基本数据包装类，那现在我们来谈一下JavaScript中的对象数据类型，我们将谈到什么是对象、对象构建的演化（还记得吧，函数本身也是JavaScript中的对象哦！）

一：什么是JavaScript对象

我们来谈一下什么是JavaScript对象。JavaScript对象中的属性与值是符合于（key，value）键值对结构的，类似于java中的hashmap，每当对象中创建属性并赋值，就相当于java中HashMap的put。（再次强调一下，函数是对象，也是value）下面是比较简单的实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		
		//ES OBJECT: 其实就是一种key:value结构的数据存在，类似于java的hashmap.
		//Object能够记得住多种key:value结构，但是基本类型做不到。
		//在ES中，我们使用key:value数据组来模拟一个对象。

		var obj = new Object(); //创建了一个能够保存key:value结构的数据结构，HashMap map = new HashMap();
		obj.userName = "mary";  //map.put("userName","mary");
		obj.userAge = 12; //map.put("userAge",12);
		obj.sayHello = function(){
           console.log(this.userName+": hello world!");
		};
 
		console.log(obj.userName);
		console.log(obj["userName"]); //map.get("userName")
		console.log(obj.sayHello instanceof Object); //函数本身就是对象

		var str = "abcd";
		str.userName = "mary";
		console.log(str.userName);
	</script>
</head>
<body>
	
</body>
</html>

稍微解释一下为什么基本类型记不住。当你用str创建属性并赋值时，这个时候基本类型包装类起作用了，将你的变量str转成对象，并添加userName这个属性并赋值mary，但是在下面你再次使用str.userName的时候，基本类型包装类又起作用了，又给你创建了新的对象，现在str指向了新的对象，从而导致没办法记忆，找不到之前定义的属性了

结果：

二：怎么创建JavaScript对象

前面讲了什么是JavaScript对象，那我们现在要开始创建JavaScript对象了。那怎么创建JavaScript对象呢？有以下几种方法：

（这里将谈到对象创建的演化史）

方法一：基于Object对象基础上进行属性扩展

我们都知道Object是所有js对象的父类，那我们可以创建一个空的Object对象，并在上面进行扩展，这样就能够达到我们的目的。但是这样是很繁琐的，且没有结构化，对象方法得不到复用，每一个新的对象都要重新写一套，非常繁琐，性能比较差。

代码事例：

//基于Object对象基础上进行属性扩展
		var obj = new Object();
		obj.userName = "mary"; 
		obj.userAge = 12;
		obj.sayHello = function(){
           console.log(this.userName+": hello world!");
		};

方法二：字面量构建法

就是字面上的意思，但与方法一比，比较直观，结构化，key-value结构，但还是不能解决对象方法得不到复用的问题，什么都不说了，上代码：（JavaScript中，{}是一个空对象，可以往里面添加key-value结构的对象属性与方法）

//字面量构建法 
		var obj2 = {
			userName:"mary",
			userAge:12,
			sayHello:function(){
                       console.log(this.userName+": hello world!");
		             }
		};

方法三：工厂模式创建法

相比于前面的方法，工厂方法有一定的提升。通过将属性值以参数的方式传入工厂，工厂打包组装后在把组装好的对象抛出来，这样就大大提高了对象的创建效率。但是还是有个问题，工厂抛出来的对象就只是Object的类型，没办法说明到第是什么样子的对象，也没办法去new一个对象出来。代码：

function createStudent(stuNo,stuName,stuAge) {
			
			//构建空白对象
			var stu = {};

            //设置属性和方法 （key-value存储)
			stu.stuNo = stuNo;
			stu.stuAge = stuAge;
			stu.stuName = stuName;
			stu.sayHello = function(){
               console.log(this.stuName+": I'm "+this.stuAge+", my stuNo:"+this.stuNo);
			};

            //返回对象
			return stu;

		}

		var stu1 = createStudent(10,"mary",9);
		var stu2 = createStudent(11,"jenny",11);

		stu1.sayHello();
		stu2.sayHello();

		console.log(stu1 instanceof   Object);

方法四：构造方法创建

与前面的工厂方法很像，但是却有很大的进步。同样传入初始化参数，构造函数里进行key-value数据绑定。这样以后，我们就能通过new一个构造函数名从而得到该函数的对象（函数也是对象哦，多讲几遍）。但是这边有个小点要讲一下，JavaScript中，所有的属性和函数的调用都有一个调用者，一个函数在调用的时候，没有说明其调用者，这个函数就属于全局对象，在浏览器环境中，全局对象就是window.，而我们在new一个对象的时候，编辑器又开始偷偷摸摸的在构造函数开头将this从window改成Object，在尾部又偷偷的将this抛出，这是编辑器自己做的，我们不需要去写。代码：

 //一个函数在调用的时候，没有说明其调用者，这个函数就属于全局对象，在浏览器环境中，全局对象就是window.
		
		function Student(stuNo,stuName,stuAge) {

			//this = new Object();

			//console.log(this);
					
			this.stuNo = stuNo;
			this.stuAge = stuAge;
			this.stuName = stuName;
			this.sayHello = function(){
               console.log(this.stuName+": I'm "+this.stuAge+", my stuNo:"+this.stuNo);
			};

			//return this;

		}

        //函数调用的时候，如果使用new来调用，这个函数就是一个构造函数，否则就是普通的函数。
		// var stu1 = new Student(12,"mary",9);
		// stu1.sayHello();

		// console.log(stu1 instanceof Object);
		// console.log(stu1 instanceof Student);

		//var stu2 = Student(12,"mary",9);
		// //stu2.sayHello();	

		// console.log(this.stuAge);	

		var stu1 = new Student(12,"mary",9);
		var stu2 = new Student(12,"jenny",8);

		stu1.sayHello();
		stu2.sayHello();

		console.log(stu1.sayHello == stu2.sayHello); //false 函数对象无法复用，性能存在问题！！

以上就是JavaScript对象的所有创建方法了，但是就算是最后的方法，也还是存在问题的，函数没办法复用，这也是一个很大的问题，那么JavaScript是如何去解决这个问题的呢？那就需要引入JavaScript对象内置属性原型（prototype）的概念了，下一篇会接着继续讲述。