原型 继承
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script> 7 8 //继承： 子类继承父类的属性和方法 9 //子类， 父类， 10 11 //类（构造函数） 12 //IPod: 属性：color, 方法：listenMusic 13 //IPad: 属性：color,type, 方法：listenMusic,playKingOfHonor 14 //IPhone: 属性：color, type, size 方法： listenMusic,playKingOfHonor,call 15 16 //父类 17 function IPod(){ 18 this.color = "黑色"; 19 this.listenMusic = function(){ 20 console.log("听音乐"); 21 } 22 } 23 24 //子类 25 function IPad(){ 26 this.type = "iPad Air"; 27 this.playKingOfHonor = function(){ 28 console.log("玩王者荣耀"); 29 } 30 31 } 32 IPad.prototype = new IPod(); //原型链继承, 继承父类IPod 33 34 //ipad对象 35 var ipad = new IPad(); 36 console.log(ipad.color + "," + ipad.type); //黑色,iPad Air 37 ipad.playKingOfHonor(); 38 ipad.listenMusic(); //听音乐 39 40 41 //孙子类 42 function IPhone(){ 43 this.size = "5.5寸"; 44 this.call = function(){ 45 console.log("打电话"); 46 } 47 } 48 IPhone.prototype = new IPad(); //继承父类IPad 49 50 //iphone对象 51 var iphone = new IPhone(); 52 console.log(iphone.size); //5.5寸 53 console.log(iphone.type); //iPad Air 54 console.log(iphone.color); //黑色 55 iphone.call(); 56 iphone.playKingOfHonor(); 57 iphone.listenMusic(); 58 59 console.log(iphone instanceof IPhone); //true 60 console.log(iphone instanceof IPad); //true 61 console.log(iphone instanceof IPod); //true 62 console.log(iphone instanceof Object); //true 63 64 console.log(ipad instanceof IPhone); //false 65 console.log(ipad instanceof IPad); //true 66 console.log(ipad instanceof IPod); //true 67 console.log(ipad instanceof Object); //true 68 69 70 71 72 </script> 73 </head> 74 <body> 75 </body> 76 </html>
练习
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script> 7 8 /* 9 2, 练习 10 实现以下类的原型链继承 11 父类：Cat 12 方法： eat; miaow 13 属性： fur 14 说明： eat吃各种东西 15 16 子类1： GarfieldCat 17 方法：eat; miaow; talk 18 属性：fur; glasses 19 说明：eat只吃肉 20 21 子类2： TomCat 22 方法：eat; miaow; catchMouse 23 属性：fur; friend 24 说明：eat只吃面包 25 26 * */ 27 28 //父类：Cat 29 function Cat(){ 30 this.fur = "黑色的皮"; 31 this.miaow = function(){ 32 console.log("喵喵"); 33 } 34 this.eat = function(){ 35 console.log("吃各种东西"); 36 } 37 } 38 39 //子类1： GarfieldCat 40 function GarfieldCat(){ 41 this.glasses = "眼镜"; 42 this.talk = function(){ 43 console.log("可以说话"); 44 } 45 this.eat = function(){ 46 console.log("只吃肉"); 47 } 48 } 49 GarfieldCat.prototype = new Cat(); //继承Cat 50 //实例对象 51 var garfieldCat = new GarfieldCat(); 52 garfieldCat.eat(); //只吃肉 53 54 //子类2： TomCat 55 function TomCat(){ 56 this.friend = "Jerry"; 57 this.catchMouse = function(){ 58 console.log("抓老鼠"); 59 } 60 this.eat = function(){ 61 console.log("吃面包"); 62 } 63 } 64 TomCat.prototype = new Cat(); //继承Cat 65 66 67 </script> 68 </head> 69 <body> 70 </body> 71 </html>
对象冒充 ，call() apply()
共同点：都可以用来代替另一个对象调用一个方法，可以改变this的指向
不同点：功能一样传入参数的形式不一样。add.apply(sub,[4,2]) add.call(sub,4,2)
组合继承 原型链 + 对象冒充
原型链：继承方法
对象冒充：继承属性
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//对象冒充,借用构造函数
//call()/apply()
//构造函数
function Person(_name, _age){
//console.log(_name + "," + _age);
this.name = _name;
this.age = _age;
this.run = function(){
console.log("跑步");
}
}
Person.prototype.sex = "男";
//构造函数
function Man(_name1, _age1){
//this = man
//对象冒充
Person.call(this, _name1, _age1); //继承Person
//Person.apply(this, [_name1, _age1]);
//this.name = _name1;
//this.age = _age1;
}
//man对象
var man = new Man("张三", 33);
console.log(man.name); //张三
console.log(man.age); //33
console.log(man.sex); //undefined, 不能继承父类原型中的属性和方法
man.run(); //跑步
/*
//IPad
//父类
function IPad(_color, _type){
this.color = _color;
this.type = _type;
this.playLOL = function(){
console.log("玩LOL");
}
}
//IPhone
//子类
function IPhone(_color, _type, _size){
//对象冒充
IPad.call(this, _color, _type);
this.size = _size;
this.call = function(){
console.log("打电话");
}
}
var iphone7 = new IPhone("骚红色", "iphone7", "5.5寸");
console.log(iphone7.color);
console.log(iphone7.type);
console.log(iphone7.size);
iphone7.playLOL();
iphone7.call();
*/
//组合继承
//原型链继承： 继承方法
//对象冒充：继承属性
//IPad
//父类
function IPad(_color, _type){
this.color = _color;
this.type = _type;
}
IPad.prototype.playLOL = function(){
console.log("玩LOL");
}
//IPhone
//子类
function IPhone(_color, _type, _size){
IPad.call(this, _color, _type); //对象冒充继承父类IPad的属性
this.size = _size;
}
IPhone.prototype = new IPad(); //原型链继承父类的方法
IPhone.prototype.call = function(){
console.log("可以打电话");
}
//实例对象
var iphone8 = new IPhone("亮黑色", "iphone8", "5.5寸");
console.log(iphone8.color);
console.log(iphone8.type);
console.log(iphone8.size);
iphone8.playLOL();
iphone8.call();
</script>
</head>
<body>
</body>
</html>
练习
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
2, 练习：使用组合继承的方式实现以下类的继承
父类：Cat
方法： eat;
属性： fur
说明： eat吃各种东西
子类： TomCat
方法：eat; catchMouse
属性：fur; friend
说明：eat只吃面包
* */
//父类
function Cat(_fur){
this.fur = _fur;
}
Cat.prototype.eat = function(){
console.log("吃各种东西");
}
//子类
function TomCat(_fur, _friend){
Cat.call(this,_fur); //对象冒充继承父类的属性
this.friend = _friend;
}
TomCat.prototype = new Cat(); //原型链继承父类的方法
TomCat.prototype.catchMouse = function(){
console.log("抓老鼠");
}
TomCat.prototype.eat = function(){
console.log("吃面包");
}
var tomcat = new TomCat("有皮毛", "有盆友");
console.log(tomcat.fur);
console.log(tomcat.friend);
tomcat.catchMouse();
tomcat.eat();
</script>
</head>
<body>
</body>
</html>
