面向对象1

男娘i 2022-07-14 01:53 195阅读 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>