专栏首页前端知识分享第201天:js---实现继承的5种方式

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 第158天:面向对象入门

    在这里我们可以理解为创造对象的几种模式:单例模式,工厂模式,构造函数模式,原型模式等。

    半指温柔乐
  • 第195天:js---函数对象详解(call、apply)

    半指温柔乐
  • 第166天:canvas绘制饼状图动画

    半指温柔乐
  • this_原型链_继承

    小胖
  • JavaScript学习总结(五)

    之前的几讲中我们曾经说过,JavaScript中是没有类的概念的。但是我们讲过对象,那么这个对象是怎么来的呢? 只要有函数即可创建对象

    roobtyan
  • 理想的继承范式——寄生组合式继承

    就只是小茗
  • 原型和原型链

    function Foo(){} 相当于 var Foo = new Function(){}

    ConardLi
  • Zepto这样操作元素属性

    已经知道了如何使用attr方法,在开始分析attr实现源码之前,我们先了解一下这几个函数。

    IMWeb前端团队
  • Zepto这样操作元素属性

    本文作者:IMWeb 谦龙 原文出处:IMWeb社区 未经同意,禁止转载 前言 使用Zepto的时候,我们经常会要去操作一些DOM的属性,或元素本身...

    IMWeb前端团队
  • 修改prototype使Event支持observe任何对象

    上次对js自定义事件做了一些介绍,这次修改prototype使得Event对象支持observe任何对象,代码如下: var Event = {     obs...

    用户1183026

扫码关注云+社区

领取腾讯云代金券