博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
第201天:js---实现继承的5种方式
阅读量:6826 次
发布时间:2019-06-26

本文共 5092 字,大约阅读时间需要 16 分钟。

一、构造函数方式

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

 

转载于:https://www.cnblogs.com/le220/p/8588053.html

你可能感兴趣的文章
TCP协议三次握手过程分析
查看>>
set排序(个人模版)
查看>>
Codeforces Round #404 (Div. 2) D. Anton and School - 2 数学
查看>>
windows进程中的几个杂项-hpguard 进程终止
查看>>
Window 7 + Ubuntu 双系统安装
查看>>
instance 怎么获得自己的 Metadata - 每天5分钟玩转 OpenStack(169)
查看>>
以AVL树为例理解二叉树的旋转(Rotate)操作
查看>>
Maven可以提交到官方公共仓库maven.org
查看>>
学霸也要会看书
查看>>
解读tensorflow之rnn 的示例 ptb_word_lm.py
查看>>
Linux内核--并发【转】
查看>>
关于对FLASH开发,starling、starling feathers、starling MVC框架的理解
查看>>
Nginx的基本配置案例
查看>>
一线架构师带你玩性能优化
查看>>
13. 关于IDEA工具在springboot整合mybatis中出现的Invalid bound statement (not found)问题
查看>>
mysql监测工具
查看>>
Centos防火墙设置与端口开放的方法
查看>>
工作总结 razor 接收datatable
查看>>
[leetcode]Unique Paths II
查看>>
C#调用dll时的类型转换总结
查看>>