第201天：js---实现继承的5种方式

 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 <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>

 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);