JavaScript面向对象
1.对象是什么
对象是包含相关属性和方法的集合体
2.什么是面向对象
1.面向对象仅仅是一个概念或者编程思想
2.通过一种叫做原型的方式来实现面向对象编程
3.创建对象
基于Object对象的方式创建对象
var 对象名称 = new Object();
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<script>
var person = new Object();
person.name = "小明";
person.hobby = "范德萨、范德萨、";
person.showName = function(){
alert(this.hobby);
}
person.showName();
</script>
</body>
</html>
4.使用字面量赋值方式创建对象
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>创建对象</title>
6 </head>
7 <body>
8 <script>
9 var person={
10 name:"小明",
11 sex:"男",
12 age:18,
13 hobby:"呃呃、范德萨、 士大夫、但是、",
14 showName:function(){
15 alert(this.name);
16 }
17 }
18 person.showName();
19 </script>
20 </body>
21 </html>
5.如何解决使用同一个接口不需要创建很多对象，减少产生大量的重复代码？
1.构造函数
function Person(){} 构造函数始终都应该首字母大写
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title>构造函数</title>
6 </head>
7 <body>
8 <script>
9 function Person(name,sex,age,hobby){
10 this.name = name;
11 this.sex = sex;
12 this.age = age;
13 this.hobby = hobby;
14 this.showName = function(){
15 alert(this.name);
16 }
17 }
18 var person1=new Person("小明","男",18,"范德萨 大范式 啊啊啊");
19 person1.showName();
20 var person2=new Person("小的","男",15,"范德萨 放到是 大范式 啊啊啊");
21 person2.showName();
22
23 alert(person1.constructor);
24 alert(person1.constructor==Person);
25
26 alert(person1 instanceof Object);
27 alert(person1 instanceof Person);
28 alert(person2 instanceof Person);
29 </script>
30 </body>
31 </html>
调用构造函数的4个步骤
1.创建一个新对象
2.将构造函数的作用域赋给新对象（this）
3.执行构造函数中的代码
4.返回新对象
使用 instanceof和constructor来检验对象类型
2.原型对象
1 <html>
2 <head>
3 <meta charset="utf-8" />
4 <title>原型对象</title>
5 </head>
6 <body>
7 <script>
8 function Person(){
9
10 }
11 Person.prototype.name ="小明";
12 Person.prototype.sex="男";
13 Person.prototype.age=18;
14 Person.prototype.hobby="范德萨 现在才 微软";
15 Person.prototype.showName=function(){
16 alert(this.name);
17 }
18 var person1 = new Person();
19 person1.showName();
20 var person2 = new Person();
21 var person3 = new Person();
22 person2.name = "呃呃";
23 alert(person2.name);
24 alert(person3.name);
25 </script>
26 </body>
27 </html>
原型对象 也就是给每个属性一个初始值，使它没呀成为空值的情况
6.继承
1.原型链
一个原型对象是另一个原型对象的示例
相关的原型对象层层递进，就构成了示例与原型的链条，也就是原型链
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 </head>
7 <body>
8 <script>
9 function Humans(){
10 this.foot=2;
11 }
12 Humans.prototype.getFoot=function(){
13 return this.foot;
14 }
15 function Man(){
16 this.head=1;
17 }
18 Man.prototype=new Humans();
19 Man.prototype.getHead=function(){
20 return this.head;
21 }
22 var man1 = new Man();
23 alert(man1.getFoot());
24 alert(man1.getHead());
25 alert(man1 instanceof Object);
26 alert(man1 instanceof Humans);
27 alert(man1 instanceof Man);
28 </script>
29 </body>
30 </html>
2.对象继承
1 Man.prototype=new Humans(); 2 Man.prototype.getHead=function(){ 3 return this.head; 4 } 5 var man1 = new Man(); 6 alert(man1.getFoot()); 7 alert(man1.getHead()); 8 alert(man1 instanceof Object); 9 alert(man1 instanceof Humans); 10 alert(man1 instanceof Man);
3.借用构造函数
apply：应用某一个对象的一个方法，用另一个对象替换当前对象
call：调用一个对象的方法，以另一个对象替换当前对象
push：加入值
1 <html>
2 <head>
3 <meta charset="utf-8" />
4 <title></title>
5 </head>
6 <body>
7 <script>
8 function Humans(){
9 this.clothing=["范德萨","发短信","范德萨信息"];
10 }
11 function Man(){
12 Humans.call(this);
13 }
14 var man1 = new Man();
15 man1.clothing.push("呃呃");
16 alert(man1.clothing);
17 var man2 = new Man();
18 alert(man2.clothing);
19 </script>
20 </body>
21 </html>
传递参数
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <script> 9 function Humans(name,sex){ 10 this.name=name; 11 this.sex=sex; 12 } 13 function Man(){ 14 Humans.call(this,"小明","男"); 15 this.age=19; 16 } 17 var man1 = new Man(); 18 alert(man1.name); 19 alert(man1.age); 20 alert(man1.sex); 21 </script> 22 </body> 23 </html>
组合继承
也叫做伪经典继承
将原型链和借用构造函数的技术组合到一块，发挥二者之长的一种继承模式
使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 </head>
7 <body>
8 <script>
9 function Humans(name){
10 this.name = name;
11 this.clothing=["dsas","fds","sdfd"];
12 }
13 Humans.prototype.sayName = function(){
14 alert(this.name);
15 }
16 function Man(name,age){
17 Humans.call(this,name);
18 this.age=age;
19 }
20 Man.prototype = new Humans();
21 Man.prototype.sayAge=function(){
22 alert(this.age);
23 }
24
25 var man1 = new Man("1314",19);
26 man1.clothing.push("fdsff");
27 alert(man1.clothing);
28 man1.sayName();
29 man1.sayAge();
30 var man2 = new Man("xzvx",19);
31 alert(man2.clothing);
32 man2.sayName();
33 man2.sayAge();
34 </script>
35 </body>
36 </html>
