JavaScript对象创建方式详解——常用的五种方式

最新推荐文章于 2022-04-11 21:10:20 发布

一瓣向日葵

最新推荐文章于 2022-04-11 21:10:20 发布

阅读量171

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/huijiazhaomama/article/details/98074840

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript自定义对象

对象：在JavaScript中，对象是拥有属性和方法的数据。
JavaScript自定义对象方式有以下7种：直接创建方式、对象初始化器方式、构造函数方法、prototype原型方式、混合的构造函数/原型方式、动态原型方式和工厂模式，这里为大家讲解常用的5种：

1、直接创建方式

直接创建方式，创建语法：

var 对象变量名 = new Object();
对象变量名. property1 = value1;
…;
对象变量名. propertyN = valueN;
对象变量名. methodName1 = function([参数列表]){
	//函数体
}
…;
对象变量名. methodNameN = function([参数列表]){
	//函数体
}

示例：

结果：

2、对象初始化器方式

对象初始化器方式，创建语法：

var 对象变量名 = {
	property1 : value1,
	property2 : value2,
	…, 
	propertyN : valueN,
	methodName1 : function([parameter_list]){
		//函数体
	},
	…, 
	methodNameN : function([parameter_list]){
		//函数体
	}
}

示例：

var student = {            
	name : "小王",        
	age : 20,

	getName : function(){
	//this不能缺省
	return this.name;
        },
	doHomework : function(name){
	    console.log(name+"正在学习......");
	}
}
var age = student.age;
var name = student.getName();
console.log(name+":"+age);
student.doHomework(name);//调用方法

结果：

3、构造函数方式

构造函数方式，创建语法：

function 构造函数([参数列表]){ 
	this.属性 = 属性值; 
	…
	this.属性N = 属性值N;
	this.函数1 = method1; 
	…
	this.函数N = methodN; 
}
function method1([参数列表]){
	//函数体
}
…
function methodN([参数列表]){
	 //函数体
}

或

function  构造函数([参数列表]){ 
	this.属性 = 属性值; 
	…
	this.属性N = 属性值N;
    this.函数1 = function([参数列表]){
		//函数体
    } ;
	…
    this.函数N = function([参数列表]){
		//函数体
    } ;
}

总结：

和上面两种方式对比，采用构造函数方式创建对象能够有效的节省代码；
采用构造函数方式创建对象，则this不能省略，这是也普通函数的区别；
采用构造函数方式创建对象，左边的方式更可取，提高了代码的复用；

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>构造函数方式</title>
	</head>
	<body>
		<script>
			function Student(age){
				this.name = "小王";
				this.age = age;
				this.doHomework = doHomework;
			}

			function doHomework(name){
				console.log(name+"正在学习......");
			}

			var student = new Student(89);
			var name = student.name;//调用属性
			var age = student.age;
			console.log(name+":"+age);
			student.doHomework(name);//调用方法
		</script>
	</body>
</html>

结果：

或

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>构造函数方式</title>
	</head>
	<body>
		<script>
			function Student(age){
				this.name = "小王";
				this.age = age;
				this.doHomework = function (name){
					console.log(name+"正在学习......");
				}
			}

			var student = new Student(89);
			var name = student.name;//调用属性
			var age = student.age;
			console.log(name+":"+age);
			student.doHomework(name);//调用方法
		</script>
	</body>
</html>

结果：

4、prototype原型方式

prototype原型方式，创建语法：

function 对象构造器( ){
} 
对象构造器.prototype.属性名=属性值;
对象构造器.prototype.函数名 = function([参数列表]){
 	//函数体
}

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>prototype原型方式</title>
	</head>
	<body>
		<script>
			function Student(){
			}
			Student.prototype.name = "小王";
			Student.prototype.age = 21;
			Student.prototype.doHomework = function (name){
				console.log(this.age+"岁的"+name+"正在学习......");
			}

			var student = new Student();
			var name = student.name;//调用属性
			var age = student.age;
			console.log(name+":"+age);
			student.doHomework(name);//调用方法
		</script>
	</body>
</html>

结果：

5、混合的构造函数/原型方式

混合的构造函数/原型方式：

构造函数方式便于动态为属性赋值，但是这种方式将方法也定义在了构造方法体中，使得代码比较杂乱；而原型方式不便于为属性动态赋值，但是这种方式定义的属性和方法实现了分离；所以取长补短——构造函数定义属性，原型方式定义方法。

创建语法：

function 对象构造器([参数列表]){
} 
对象构造器.prototype.函数名 = function([参数列表]){
	//函数体
}

示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>混合的构造函数/原型</title>
	</head>
	<body>
		<script>
			function Student(age){
				this.name = "小王";
				this.age = age;
				this.doHomework = function (name){
					console.log(this.age+"岁的"+name+"正在学习......");
				}
			}

			//prototype函数是类级别的
			Student.prototype.read = function(){ 
				//this表示调用该函数的对象
				console.log(this.age+"岁的"+this.name+"正在读书......"); 
			}

			var student = new Student(23);
			var name = student.name;//获取属性
			var age = student.age;
			console.log(age+":"+name);
			student.doHomework(name);//调用方法
			student.read();
		</script>
	</body>
</html>

结果：

一瓣向日葵

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript对象创建方式详解——常用的五种方式

目录JavaScript自定义对象1、直接创建方式2、对象初始化器方式3、构造函数方式4、prototype原型方式5、混合的构造函数/原型方式JavaScript自定义对象对象：在JavaScript中，对象是拥有属性和方法的数据。 JavaScript自定义对象方式有以下7种：直接创建方式、对象初始化器方式、构造函数方法、prototype原型方式、混合的构造...
复制链接

扫一扫