59.构造函数（类）

最新推荐文章于 2023-08-31 17:31:47 发布

广东码农

最新推荐文章于 2023-08-31 17:31:47 发布

阅读量126

点赞数

分类专栏： JavaScript 文章标签： js

本文链接：https://blog.csdn.net/quanxiaobai_/article/details/118682554

版权

JavaScript 专栏收录该内容

97 篇文章 0 订阅

订阅专栏

一、初识

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>构造函数（类）</title>
		<script type="text/javascript">
			/*  
				我们使用工厂方法，或者说对象字面量创建的对象，
				我们在控制台输出，都是Object，这样就不太好
				不好区分不同的对象，
				比如说创建了两个对象，一个是人，一个是猫
				但是两者在控制台输出都是Object
				
				所以就有了构造函数... ...（其实有点像面向对象的类，java、python）
			*/
			/* 
				创建一个构造函数，专门用来创建Person对象的
				构造函数就是一个普通的函数，创建方式和普通函数没有区别
				不同的是构造函数习惯上首字母大写
				
				构造函数和普通函数的区别就是调用方式的不同
				普通函数是直接调用，而构造函数需要使用new关键字来调用
				
				构造函数的执行流程
				1. 立刻创建一个新的对象（在堆内存中开辟一块空间）
				2. 将新建的对象设置为函数中this，在构造函数中可以使用this来引用
				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.sayHello = function(){
					console.log("你好，我叫"+name);
				};
			}
			var xiaobai = new Person("小白",18,"男");
			xiaobai.sayHello();
			
			console.log("\n");
			console.log("-----下面输出xiaobai的属性-----");
			for(var i in xiaobai){
				console.log(i+"："+xiaobai[i]);
			}
			
			console.log("\n");
			console.log("-----下面输出console.log(xiaobai)-----");
			console.log(xiaobai);//Person
			
			
			/* 
				使用instanceof可以检查一个对象是否是一个类的实例
				是就返回true
				不是就返回false
			 */
			console.log("\n");
			console.log("xiaobai instanceof Person = "+(xiaobai instanceof Person));//true
			
			
			/* 
				所有对象都是Object的后代
				所以任何对象和Object做instanceof检查时都会返回true
			 */
			console.log("xiaobai instanceof Object = "+(xiaobai instanceof Object));
			console.log("window instanceof Object = "+(window instanceof Object));
		</script>
	</head>
	<body>
	</body>
</html>

这是我自己的理解，如果有错以后再改

在这里插入图片描述

二、解决一中存在的问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>构造函数2</title>
		<script type="text/javascript">
			/* 
				创建一个构造函数
				- 在Person构造函数中，为每一个对象都添加了一个sayHello方法，
					目前我们的方法是在构造函数内部创建的，
					也就是构造函数每执行一次就会创建一个新的sayHello方法
					也是所有实例的sayHello都是唯一的
					这样就导致了构造函数执行一次就会创建一个新的方法，
					执行10000次就会创建10000个新的方法（但是这些方法功能都一样），这样就导致了空间的浪费
					这是完全没有必要,完全可以使所有的对象共享同一个方法
			 */
			function Student(name,age,gender){
				this.name = name;
				this.age = age;
				this.gender = gender;
				this.sayHello = function(){
					console.log("大家好，我是"+this.name);
				};
			}
			
			var stu1 = new Student("小白",18,"男");
			var stu2 = new Student("小红",18,"女");
			
			//比较两个方法是不是同一个对象（是不是同一个方法）
			console.log(stu1.sayHello == stu2.sayHello);//false
			
			
			
			
			//--------------------下面开始解决--------------------
			//创建构造函数
			function Dog(name,age){
				this.name = name;
				this.age = age;
				this.eat = dogEat;
			}
			
			//解决办法就是将函数在全局作用域中声明，再赋值给构造函数里面的属性
			function dogEat(){
				console.log(this.name+"在吃饭。");
			};
			
			//创建两个实例
			var xiaohei = new Dog("小黑",2);
			var wangcai = new Dog("旺财",1);
			
			console.log("-----测试eat-----")
			xiaohei.eat();//小黑在吃饭。
			
			console.log("-----比较两个实例的eat是不是同一个-----")
			console.log(xiaohei.eat == wangcai.eat);//true
		</script>
	</head>
	<body>
	</body>
</html>

广东码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
59.构造函数（类）

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>构造函数（类）</title> <script type="text/javascript"> /* 我们使用工厂方法，或者说对象字面量创建的对象，我们在控制台输出，都是Object，这样就不太好不好区分不同的对象，比如说创建了两个对象，一个是人
复制链接

扫一扫