JavaScript常用五种对象创建方式小结

对象：在JavaScript中，对象是拥有属性和方法的数据。

1、直接创建式

                    <script>
                        //直接创建方式
			var student = new Object();
			student.name = "Jim";
			student.doHomeWork=function(){
				console.log(this.name+"正在作业");
			}
			student.doHomeWork();
			student.name = "Kate";
			student.doHomeWork();
                    </script>

 

 

2、初始化

 

                   <script>
                        //初始化
			var student = {
				name:"Jim",
				age:12,
				doHomework:function(){
					console.log(this.name+"正在作业");
				},
				eat:function(){
					console.log(this.name+"正在吃");
				}
			};
                    </script>

 

3、构造方法式

 

                   <script>
                        //构造方法式
			function Student(name){
				this.name=name;
				this.dohomework=function(){
					console.log(this.name+"正在作业......");
				}
			}
			var student = new Student("Lilly");
			student.dohomework();
                     </script>

 总结：a.和上面两种方式对比，采用构造函数方式创建对象能够有效的节省代码；

b.采用构造函数方式创建对象，则this不能省略，这是也普通函数的区别；

c.采用构造函数方式创建对象，左边的方式更可取，提高了代码的复用；

4、原型式

                    <script>
                        //原型式
			function Student(){
			}
			Student.prototype.name="Lilly";
			Student.prototype.dohomework=function(){
				console.log(this.name+"正在作业。。。。。。");
			};
			var student = new Student("Lilly");
	    		student.dohomework();
                    </script>

 注意：

在声明一个新的函数后，该函数（在JavaScript中，函数也是对象）就会拥有一个prototype的属性，通过该属性可以为对象添加新的属性和方法。

5、混合式

                    <script>
                        //混合式
			function Student(name){
				this.name = name;
			}
			Student.prototype.dohomework=function(){
				console.log(this.name+"正在作业......");
			};
			var student = new Student("Lilly");
			student.dohomework();
                    <script>

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

javascript不能支持函数的重载，这里采用的函数名都是Student，当一同出现时会报错。

https://blog.youkuaiyun.com/qq_44352182/article/details/88876625?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159489420919195264555510%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=159489420919195264555510&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_ecpm_v3~pc_rank_v2-2-88876625.first_rank_ecpm_v3_pc_rank_v2&utm_term=javascript%E4%B8%AD%E9%87%8D%E8%BD%BD