面向对象

最新推荐文章于 2023-02-26 23:18:29 发布

cc果冻LXY

最新推荐文章于 2023-02-26 23:18:29 发布

阅读量80

点赞数

分类专栏： js 文章标签： js面向对象

本文链接：https://blog.csdn.net/weixin_44538675/article/details/86545027

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

面向对象和面向过程

面向对象中出现了类的概念，通过类可以创建相同属性和方法的对象

面向对象的三个特点

1、封装把数据和对数据的操作集中在一起

2、继承一般是针对类（父类，子类），一个类型的对象可以访问另外一个类型的属性和方法

3、多态同一种方法（sound()）针对于不同对象，会有不同的结果

1、普通的创建函数（会形成代码冗余）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var person1 = {
				name:"john1",
				sayHello:function(){
					console.log(this.name);
				}
			}
			var person2 = {
				name:"john1",
				sayHello:function(){
					console.log(this.name);
				}
			}
			//……
			
			//代码冗余
		</script>
	</body>
</html>

2、工厂函数（无法准确判断创建的实例的类型)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function createObject(name){
				var obj = new Object();
				obj.name = name;
				obj.sayHello = function(){
					console.log(this.name);
				}
				return obj;
			}
			//实例
			var person1 = createObject("john1");
			var person2 = createObject("john2");
			var amao = createObject("miaomiao");
			
			//person2.sayHello();
			
			console.log(person1 instanceof Object,amao instanceof Object);
			//无法准确判断创建实例（对象）属于哪个类型
		
		</script>
	</body>
</html>

3、构造函数

普通函数加new之后，有四步操作
   1.创建一个新对象
2.改变this指向，指向新对象
   3.执行构造函数里的代码
   4.返回这个新对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function Person(name,age){
				this.name = name;
				this.age = age;
				
				this.sayHello = function(){
					console.log(this.name);
				}
			}
			function Animal(name,age){
				this.name = name;
				this.age = age;
				
				this.sound = function(){
					console.log(this.name);
				}
			}
			
			var person1 = new Person("john1",20);
			console.log(person1.name);
			var person2 = new Person("john2",20);
			console.log(person1==person2);
			
			
			var amao = new Animal("miaomiao",2);
			amao.sound();
			
			console.log(person1 instanceof Person,amao instanceof Animal);
			console.log(person1 instanceof Object,amao instanceof Object);
			
			//相同方法多次定义
			console.log(person1.sayHello== person2.sayHello);
		</script>
	</body>
</html>

4、组合创建

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			/*function Person(name,age){
				this.name = name;
				this.age = age;
			}
			Person.prototype.sayHello = function(){
				console.log(this.name);
			}
			
			var person1 = new Person("john1",20);
			var person1 = new Person("john2",20);
			person2.sayHello();*/
			
			var arr1 = [1,2,3,4];
			var arr2 = [10,20,30,40];


			/*arr1.sum = function(){
				var num = 0;
				for(var i = 0; i < arr1.length; i++){
					num += arr1[i];
				}
				return num;    
			}
			console.log(arr1.sum());
			console.log(arr2.sum());*/
			//push() sum()
			
			Array.prototype.sum = function(){
				var num = 0;
				for(var i = 0; i < this.length; i++){
					num += this[i];
				}
				return num;
			}
			
			console.log(arr1.sum());
			console.log(arr2.sum());
		</script>
	</body>
</html>

5、首先写一个弹出层来看看有面向对象和面向过程有什么不同（对于比较简单的例子来说用面向对象比较麻烦，但是对于大型网站和数据来说，面向对象后期维护和修改都比较方便）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<input type="button" id="btn" value="弹出层">
		<script type="text/javascript">
			//面向过程
			var oBtn = document.getElementById("btn");
			oBtn.onclick = function(){
				var oDiv = document.createElement("div");
				document.body.appendChild(oDiv);
			}
			//面向对象
			
			function PopBox(){
				var a = 10;
				var b = 20;
				
				this.node = document.createElement("div");
				this.node.style.width = "100px";
				this.node.style.height = "100px";
				this.node.style.background = "red";
			}
			
			PopBox.prototype.show = function(){
				document.body.appendChild(this.node);
			}
			
			oBtn.onclick = function(){
				var p = new PopBox();
				p.show();
			}
			
		</script>
	</body>
</html>

cc果冻LXY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
面向对象

面向对象和面向过程面向对象中出现了类的概念，通过类可以创建相同属性和方法的对象面向对象的三个特点 1、封装把数据和对数据的操作集中在一起 2、继承一般是针对类（父类，子类），一个类型的对象可以访问另外一个类型的属性和方法 3、多态同一种方法（sound()）针对于不同对...
复制链接

扫一扫

专栏目录