一、构造函数方式
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 - say 28 xiaoWang.getTeacher();//Student.prototype.getTeacher 29 30 31 32 /*存在的问题*/ 33 /*无法通过传参数定义对象*/ 34 console.log(xiaoWang.name);//张三 35 console.log(xiaoWang.age);//20 36 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 <script src='base2.js'></script> 2 <script> 3 /*基类*/ 4 var Person = Class.extend ( { 5 init: function (name ) { 6 this.name = name; 7 }, 8 dance: function ( ) { 9 alert('跳舞'); 10 } 11 } ); 12 13 /*子类*/ 14 var Student = Person.extend({ 15 init: function(){ 16 //false表示什么意思 17 this._super( false ); 18 }, 19 /*重写父类方法*/ 20 dance: function(){ 21 /*调用父类*/ 22 this._super(); 23 alert('唱歌'); 24 }, 25 /*实现自己的方法*/ 26 swingSword: function(){ 27 return true; 28 } 29 }); 30 31 var xiaozhang = new Student(); 32 xiaozhang.dance(); 33 </script>
2、simple.js
1 <script src='simple.js'></script> 2 <script> 3 var Person = Class.extend({ 4 init: function(age,name){ 5 this.age = age; 6 this.name = name; 7 }, 8 dance: function(){ 9 alert("跳舞"); 10 } 11 }); 12 var Student = Person.extend({ 13 init: function(age,name,height){ 14 this._super(age,name); 15 this.height = height; 16 }, 17 dance: function(){ 18 /*调用父类的同名方法*/ 19 this._super(); 20 /*同时又可以调用自己的方法*/ 21 alert("唱歌"); 22 } 23 }); 24 25 26 var xiaozhang = new Student(21,'小张','121'); 27 xiaozhang.dance(); 28 </script>
七、对象继承实现计算周长
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 //去掉属性name 73 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);
