一、构造函数方式
1 //构造函数 2 function People(){ 3 this.race = '汉族'; 4 } 5 People.prototype={ 6 eat:function(){ 7 console.log('123'); 8 } 9 }10 11 /*学生对象*/12 function Student(name, skin) {13 People.apply(this, arguments);14 this.name = name;15 this.skin = skin;16 }17 //实例化 18 var zhangsan = new Student('张三', '黄皮肤')19 console.log(zhangsan.name); //张三20 console.log(zhangsan.race); //汉族21 zhangsan.eat();//报错22 //原因:无法继承person原型对象中的方法
二、原型对象实现继承
1 //基类 2 var Person = function(){ 3 this.name = '张三'; 4 this.age = 20; 5 } 6 Person.prototype = { 7 say : function(){ 8 console.log('Person.prototype - say'); 9 }10 }11 12 13 //构造函数14 var Student = function(name,age,sex){15 this.sex = sex;16 }17 //学生继承person,则拥有person原型中的方法18 Student.prototype = new Person();19 Student.prototype.getTeacher = function(){20 console.log('Student.prototype.getTeacher');21 }22 23 //测试 -- 学生类拥有了person中的方法24 var xiaoWang = new Student('小王',10,'男');25 //xiaoWang.name = '张三'26 console.log(xiaoWang.name);//张三27 xiaoWang.say();//Person.prototype - say28 xiaoWang.getTeacher();//Student.prototype.getTeacher29 30 31 32 /*存在的问题*/33 /*无法通过传参数定义对象*/34 console.log(xiaoWang.name);//张三35 console.log(xiaoWang.age);//2036 37 38 /*解决方式*/39 xiaoWang.name = '小明';40 xiaoWang.age = 22;41 console.log(xiaoWang.name);//小明42 console.log(xiaoWang.age);//22
三、组合方式(构造函数+原型)
1 function Person(name, age) { 2 this.name=name; 3 this.age=age; 4 } 5 Person.prototype.say = function () { 6 console.log("我是"+this.name); 7 } 8 9 10 function Student(name, age, no) {11 /*会自动调用Person的方法,同时将name age传递过去*/12 Person.call(this,name,age);13 //自己的属性14 this.no = no;15 }16 Student.prototype = new Person();17 var stu1 = new Student("小明",22,123);18 console.log(stu1.name);//小明19 console.log(stu1.say());//我是小明20 console.log(stu1.no);//123
四、寄生组合式
1 /*继承的固定函数*/ 2 function inheritPrototype(subType,superType){ 3 var prototype = Object(superType.prototype); 4 prototype.constructor = subType; 5 subType.prototype = prototype; 6 } 7 8 function Person(name){ 9 this.name = name;10 }11 Person.prototype.say= function(){12 console.log("我是"+this.name);13 }14 15 function Student(name,age){16 Person.call(this,name);17 this.age = age;18 }19 20 inheritPrototype(Student,Person);21 var xiaozhang = new Student('小张',20);22 console.log(xiaozhang.name);//小张23 xiaozhang.say();//我是小张
五、拷贝方式
1 var Chinese = {nation:'中国'}; 2 var Doctor ={career:'医生'} 3 4 // 请问怎样才能让"医生"去继承"中国人",也就是说,我怎样才能生成一个"中国医生"的对象? 5 // 这里要注意,这两个对象都是普通对象,不是构造函数,无法使用构造函数方法实现"继承"。 6 7 8 function extend(p) { 9 var c = {};10 for (var i in p) { 11 c[i] = p[i]; 12 }13 c.uber = p;14 return c;15 }16 17 18 var Doctor = extend(Chinese);19 Doctor.career = '医生';20 alert(Doctor.nation); // 中国
六、继承的框架
1、base2.js
1 2
2、simple.js
1 2
七、对象继承实现计算周长
1 var sharp = function(name){ 2 this.name = name; 3 } 4 sharp.prototype = { 5 //改方法被继承,这个方法是大家都有的,并且都一样,可以放在基类中 6 getName : function(){ 7 return this.name; 8 } 9 //会根据不同的形状而被重写10 ,zhouchang : function(){11 return 100;12 }13 };14 15 16 //矩形对象17 var Rectangle = function(length,width){18 sharp.call(this, name);19 this.name='矩形';20 this.length =length;21 this.width = width;22 }23 //重写计算周长的方法24 Rectangle.prototype = new sharp();25 Rectangle.prototype.zhouchang = function(){26 return (this.length + this.width) * 2;27 }28 29 30 //好处31 //以后新增一个计算其他形状的需求,不用修改原来的代码,只需要扩充即可.32 //新增一个正方形33 var Square = function(length){34 sharp.call(this, name);35 this.name='正方形';36 this.length =length;37 //this.width = width;38 }39 //重写计算周长的方法40 Square.prototype = new sharp();41 Square.prototype.zhouchang = function(){42 return this.length * 4;43 }44 45 46 //新增一个圆形47 var Circle = function(radius){48 sharp.call(this, name);49 this.name='圆形';50 this.radius =radius;51 //this.width = width;52 }53 54 //重写计算周长的方法55 Circle.prototype = new sharp();56 Circle.prototype.zhouchang = function(){57 //圆的周长=2×圆周率×半径 或 圆周率×直径58 return 2 * Math.PI * this.radius;59 }60 61 62 63 //使用对象 封装64 function computezhouchang(shape) {65 alert( shape.getName() + '的周长是' + shape.zhouchang() );66 }67 68 //组装世界69 //var rectangle = new Rectangle('矩形',10,20);70 //computezhouchang(rectangle);71 72 //去掉属性name73 var rectangle = new Rectangle(10,20);74 computezhouchang(rectangle);75 76 //正方形77 var square = new Square(10);78 computezhouchang(square);79 80 //圆形81 var circle = new Circle(10);82 computezhouchang(circle);