JS面向对象

最新推荐文章于 2023-12-17 09:50:32 发布

import java.lx

最新推荐文章于 2023-12-17 09:50:32 发布

阅读量908

点赞数 1

文章标签：原型模式 javascript 学习前端 html

本文链接：https://blog.csdn.net/qq_51810428/article/details/126998406

版权

面向对象

JS是一种基于对象的语言，和其它面向对象语言不同

对象

引用类型是一种数据结构，将数据和功能组织在一起，常被称为类

某个特定引用类型的实例

引用类型&对象--模具&实例

创建对象五种方法

基于Object的方式创建对象

语法：

var 对象名称=new Object( );

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<script>
			var student = new Object();

			student.name = '张三';
			student.age = 22;
			student.javaScore = 98.5;
			student.print = function() {
				console.log('学生姓名：' + this.name + "，年龄：" + this.age + "，java分数：" + this.javaScore);
			}
			
			student.print();
			
		</script>
	</body>
</html>

对象字面量

对象定义的一种简写形式

简化创建包含大量属性的对象的过程

在为函数传递大量可选参数时，可考虑使用对象字面量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var student = {
				//属性:属性值
				name: '张三',
				age: 23,
				javaScore: 99.5,
				print: function() {
					console.log('学生姓名：' + this.name + "，年龄：" + this.age + "，java分数：" + this.javaScore);
				}
			}

			console.log(student.name);
			student.print();
		</script>
	</body>
</html>

工厂模式

软件工程领域的一种设计模式

抽象了创建对象的过程

通过函数封装创建对象的细节

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function createStudent(name, age, javaScore) {
				var student = new Object();
				student.name = name;
				student.age = age;
				student.javaScore = javaScore;
				student.print = function() {
					console.log('学生姓名：' + this.name + "，年龄：" + this.age + "，java分数：" + this.javaScore);
				}

				return student;
			}

			//创建对象
			var stu1 = createStudent("李四", 24, 99.5);
			console.log(stu1.name);
			console.log(stu1.age);
			console.log(stu1.javaScore);
			stu1.print();

			var stu2 = createStudent('王五', 19, 88.9);
			stu2.print();
		</script>
	</body>
</html>

构造函数

构造函数一般以大写字母开头

构造函数也是函数，只不过可以用来创建对象

与工厂模式对比

没有显式创建对象

直接将属性和方法赋给了this对象

没有return

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function Student(name, age, javaScore) {
				this.name = name;
				this.age = age;
				this.javaScore = javaScore;
				this.print = function() {
					console.log('学生姓名：' + this.name + "，年龄：" + this.age + "，java分数：" + this.javaScore);
				}
			}
			
			var stu1 =new Student('如花',18,100);
			console.log(stu1.name);
			stu1.print();
		</script>
	</body>
</html>

原型prototype

每个函数都有一个prototype（原型）属性

是一个指针，指向一个对象

这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法

用混合方式构造对象

构造函数+prototype

构造函数：属性

原型prototype：方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			function Student(name, age, javaScore) {
				this.name = name;
				this.age = age;
				this.javaScore = javaScore;
			}

			//在上面的构造函数中没有定义输出对象所有信息的函数，可以使用原型来进行添加
			Student.prototype.print = function() {
				console.log('学生姓名：' + this.name + "，年龄：" + this.age + "，java分数：" + this.javaScore);
			}

			var stu1 = new Student('翠花', 19, 99.9);
			console.log(stu1.name);
			stu1.print();
		</script>
	</body>
</html>

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			var str = 'abcdefghijklmn';
			
			/*
			在String对象中没有定义函数将字符串内容反转，那么我们可以给String添加一个函数，来实现字符串内容反转。
			
			方式一：
				1）将字符串内容拆分成一个一个的字符
				2）将这些字符从最后一个开始组装到新的字符串中，
				3）输出组装后的字符串，就是反转的字符串
			
			方式二：
				1）将字符串转换成数组
				2）将数组中的元素进行反转
				3）将反转后的数组转换成字符串
			*/ 
			
			String.prototype.reverse = function(string){
				//先声明一个新的字符串用来组装字符
				var newStr="";
				for(var i = string.length-1;i>=0;i--){
					newStr+=string.substring(i,i+1);
				}
				
				return newStr;
			}
			
			var result =str.reverse(str);
			console.log(str);
			console.log(result);
			
			String.prototype.reverse2 = function(string){
				//将传递过来的字符串转换成数组
				// var strArr=string.split('');//strArr是一个数组，数组里有反转数组元素的函数
				// var newStrArr=strArr.reverse();//将数组元素反转得到一个新数组
				// console.log(strArr);
				// var st=newStrArr.join();//将新数组转换成字符串
				// var stringsss=st.replaceAll(',','');//将得到的字符串中所有的,替换成空
				// console.log(stringsss)
				return string.split('').reverse().join().replaceAll(',','');
			}
			
			var result2 =str.reverse2(str);
			console.log('字符串反转后：'+result2);
			
			String.prototype.studentAddress = '安徽合肥';
			var str = 'ABCD';
			console.log(str.studentAddress);
			
		</script>
	</body>
</html>