64-65----JS基础-----构造函数与构造函数修改(完全正常合理的利用构造函数创建对象的方式)

最新推荐文章于 2022-07-15 21:18:27 发布

Mango酱

最新推荐文章于 2022-07-15 21:18:27 发布

阅读量496

点赞数

分类专栏： JavaScript学习笔记文章标签： javascript es6 前端

本文链接：https://blog.csdn.net/weixin_44517656/article/details/121331739

版权

JavaScript学习笔记专栏收录该内容

121 篇文章 1 订阅

订阅专栏

一代码

由于上一节讲到，工厂创建的对象，打印出来可以看到都是Object开头的，想改变这种显示，可以通过构造函数创建去处理，具体看下面代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
		
			/*
			 * 1. 创建一个构造函数，专门用来创建Person对象的
			 * 	构造函数就是一个普通的函数，创建方式和普通函数没有区别，构造函数习惯上首字母大写，
			 *  构造函数和普通函数的区别就是调用方式的不同，
			 * 	普通函数是直接调用，而构造函数需要使用new关键字来调用。
             * 即是普通函数还是构造函数：由你的调用方式决定。
			 * 
			 * 2. 构造函数的执行流程：
			 * 	1.立刻创建一个新的对象，
			 * 	2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象，
			 * 	3.逐行执行函数中的代码，
			 * 	4.将新建的对象作为返回值返回。
			 * 
			 * 3. 使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。
			 * 	我们将通过一个构造函数创建的对象，称为是该类的实例。
			 * 
			 * 4. this的情况：
			 * 	1.当以函数的形式调用时，this是window
			 * 	2.当以方法的形式调用时，谁调用方法this就是谁
			 * 	3.当以构造函数的形式调用时，this就是新创建的那个对象
			 * 
			 */
			function Person(name , age , gender){
				this.name = name;
				this.age = age;
				this.gender = gender;
				this.sayName = function(){
					alert(this.name);
				};
			}
			
			function Dog(){
			}
			
			var per = new Person("孙悟空",18,"男");
			var per2 = new Person("玉兔精",16,"女");
			var per3 = new Person("奔波霸",38,"男");
			var dog = new Dog();
			
			console.log(per);       // 开头不是Object，而是Person。
			console.log(dog);       // 开头不是Object，而是Dog。
			
			/*
			 * 5. 使用instanceof可以检查一个对象是否是一个类的实例
			 * 	语法：
			 * 		对象 instanceof 构造函数
			 * 如果是，则返回true，否则返回false
			 */
			console.log(per instanceof Person);     // true
			console.log(dog instanceof Person);     // false
			
			/*
			 * 6. 所有的对象都是Object的后代，
			 * 	所以任何对象和Object左instanceof检查时都会返回true
			 */
			console.log(dog instanceof Object);     // true
			
		</script>
	</head>
	<body>
	</body>
</html>

结果：
很明显，打印出来的不再是Object，而是对应的对象构造函数名字了。
在这里插入图片描述

上一节博客的截图：
在这里插入图片描述

三构造函数修改

虽然解决了对象名字为Object的问题，但是这样对象里面带有函数，这样合理吗？
肯定是不合理的，因为每个实例都会开辟一个函数属性的内存，要解决的话，看下面的代码，更具体可以看关于原型的博客讲解。

下面的创建对象方法才是最好最正确的创建方法。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			/*
			 * 1. 创建一个Person构造函数
			 * 	- 在Person构造函数中，为每一个对象都添加了一个sayName方法，
			 * 		目前我们的方法是在构造函数内部创建的，
			 * 			也就是构造函数每执行一次就会创建一个新的sayName方法
			 * 		也是所有实例的sayName都是唯一的。
			 * 		这样就导致了构造函数执行一次就会创建一个新的方法，
			 * 			执行10000次就会创建10000个新的方法，而10000个方法都是一摸一样的
			 * 			这是完全没有必要，完全可以使所有的对象共享同一个方法
			 */
			function Person(name , age , gender){
				this.name = name;
				this.age = age;
				this.gender = gender;
				// 不合理情况1：直接向对象中添加一个方法
				//this.sayName = fun;
			}
			
			/*
			 * 2. 将函数定义在全局作用域，污染了全局作用域的命名空间，
			 * 	而且定义在全局作用域中也很不安全。例如多个开发人员独立开发时，使用了同一个函数名，这也是不安全的。
             *  所以将函数定义在全局作用域也是不行的。
			 */
            // 不合理情况2：
			/*function fun(){
				alert("Hello大家好，我是:"+this.name);
			};*/



			// 3. 正确的方法：向原型中添加sayName方法。既不会额外开辟内存，也不会污染全局作用域。
			Person.prototype.sayName = function(){
				alert("Hello大家好，我是:"+this.name);
			};
			
			//创建一个Person的实例
			var per = new Person("孙悟空",18,"男");
			var per2 = new Person("猪八戒",28,"男");
			per.sayName();
			per2.sayName();
			
			console.log(per.sayName == per2.sayName);   // true

		</script>
	</head>
	<body>
	</body>
</html>

结果：
在这里插入图片描述

Mango酱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
64-65----JS基础-----构造函数与构造函数修改(完全正常合理的利用构造函数创建对象的方式)

一代码由于上一节讲到，工厂创建的对象，打印出来可以看到都是Object开头的，想改变这种显示，可以通过构造函数创建去处理，具体看下面代码。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 1. 创建一个构造函数，专门用来创建P
复制链接

扫一扫