一,构造函数方式
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);