面向对象1

最新推荐文章于 2022-05-13 15:53:36 发布

hulongfei1991

最新推荐文章于 2022-05-13 15:53:36 发布

阅读量268

点赞数

分类专栏： JavaScript 文章标签：对象 javascript

本文链接：https://blog.csdn.net/hulongfei1991/article/details/53303903

版权

JavaScript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

1.面向对象的特点

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	
</body>
</html>
<script>
window.onload = function(){
	/*面向对象的特点：
		（抽象）：抓住核心问题
		封装：不考虑内部实现，只考虑功能使用
		继承：从已有对象上几成出新的对象
		多态

	对象组成：
		方法--函数：过程、动态的
		属性--变量：状态、静态的*/
	var arr =[11,22,33,44,55];
	//alert(typeof(arr)); object
	//arr.length; 属性
	//arr.push(); 方法
	var a = 12;  //变量：自由
	arr.a = 20;  //属性：属于一个对象的
	//alert(arr.a);
	function show(){
		alert(a);
	}
	show(); //函数
	arr.fn = function(){
		alert(a);
	}
	arr.fn(); // 方法
}
</script>

2.第一个面向对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>

	
</body>
</html>
<script>

//this:当前的方法属于谁
// var arr = [11,22,33,44,55,66,77];
// arr.show=function(){
// 	alert(this.length);
// }
// arr.show();

var obj = new Object();
obj.name ='hu';
obj.sex = 'nan';
obj.showName = function(){
	alert(this.name);
}
obj.showSex = function(){
	alert(this.sex);
}
obj.showName();
obj.showSex();

var obj2 = new Object();
obj2.name ='wang';
obj2.sex = 'nv';
obj2.showName = function(){
	alert(this.name);
}
obj2.showSex = function(){
	alert(this.sex);
}
obj2.showName();
obj2.showSex();
</script>

3.工厂方式

工厂方式：

1.原料

2.加工

3.出厂

工厂方式的问题：

1没有new

2每个对象都有自己的一套函数 ——浪费资源

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
<script>
//工厂方式来构造函数
function creatPerson(name,sex){ //构造函数
	//1.原料
	var obj = new Object();
	//2.加工
	obj.name =name;
	obj.sex = sex;

	obj.showName = function(){
		alert(this.name);
	}
	obj.showSex = function(){
		alert(this.sex);
	}
	//3.出厂
	return obj;
}
var p1 = creatPerson('hu','nan');
var p2 = creatPerson('wang','nv');
p1.showName();
p1.showSex();

</script>

4.new

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
<script>
function creatPerson(name,sex){
	
	this.name =name;
	this.sex = sex;

	this.showName = function(){
		alert(this.name);
	}
	this.showSex = function(){
		alert(this.sex);
	}
	
}
var p1 = new creatPerson('hu','nan');
var p2 = new creatPerson('wang','nv');
//函数前面有new的时候
// p1.showName();
// p1.showSex();
//alert(p1.showName == p2.showName); false

</script>

5.new

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script>
	function show(){
		alert(this);
	}
	show(); //window
	new show(); //object  新创建一个对象
	</script>
</body>
</html>

6.给自己的类添加方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
<script>
function CreatePerson(name,sex){
	//属性：每个对象各不相同
	this.name = name;
	this.sex = sex;
}


//方法：所有对象都一样的
CreatePerson.prototype.showName=function(){
	alert('我是'+this.name+'的');
}
CreatePerson.prototype.showSex=function(){
	alert('我是'+this.sex+'的');
}
var p1 = new CreatePerson('hulongfei','男');
var p2 = new CreatePerson('maxingchen','女');


p1.showName();
p1.showSex();
</script>

7.构造对象混合法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	
</body>
</html>
<script>
function CreatePerson(name,height,sex){
	this.name = name;
	this.height = height;
	this.sex = sex;
}
CreatePerson.prototype.showName = function(){
	alert(this.name);
}
CreatePerson.prototype.showHeight = function(){
	alert(this.height);
}
CreatePerson.prototype.showSex = function(){
	alert(this.sex);
}
var p1 = new CreatePerson('hulongfei',180,'nan');
var p2 = new CreatePerson('maxingchen',170,'nv');
p1.showName();
p2.showSex();


</script>