一、构造函数方式

 //构造函数
function People(){
this.race = '汉族';
}
People.prototype={
eat:function(){
console.log('123');
}
} /*学生对象*/
function Student(name, skin) {
People.apply(this, arguments);
this.name = name;
this.skin = skin;
}
//实例化
var zhangsan = new Student('张三', '黄皮肤')
console.log(zhangsan.name); //张三
console.log(zhangsan.race); //汉族
zhangsan.eat();//报错
//原因:无法继承person原型对象中的方法

二、原型对象实现继承

 //基类
var Person = function(){
this.name = '张三';
this.age = 20;
}
Person.prototype = {
say : function(){
console.log('Person.prototype - say');
}
} //构造函数
var Student = function(name,age,sex){
this.sex = sex;
}
//学生继承person,则拥有person原型中的方法
Student.prototype = new Person();
Student.prototype.getTeacher = function(){
console.log('Student.prototype.getTeacher');
} //测试 -- 学生类拥有了person中的方法
var xiaoWang = new Student('小王',10,'男');
//xiaoWang.name = '张三'
console.log(xiaoWang.name);//张三
xiaoWang.say();//Person.prototype - say
xiaoWang.getTeacher();//Student.prototype.getTeacher /*存在的问题*/
/*无法通过传参数定义对象*/
console.log(xiaoWang.name);//张三
console.log(xiaoWang.age);// /*解决方式*/
xiaoWang.name = '小明';
xiaoWang.age = 22;
console.log(xiaoWang.name);//小明
console.log(xiaoWang.age);//

三、组合方式(构造函数+原型)

 function Person(name, age) {
this.name=name;
this.age=age;
}
Person.prototype.say = function () {
console.log("我是"+this.name);
} function Student(name, age, no) {
/*会自动调用Person的方法,同时将name age传递过去*/
Person.call(this,name,age);
//自己的属性
this.no = no;
}
Student.prototype = new Person();
var stu1 = new Student("小明",22,123);
console.log(stu1.name);//小明
console.log(stu1.say());//我是小明
console.log(stu1.no);//

四、寄生组合式

 /*继承的固定函数*/
function inheritPrototype(subType,superType){
var prototype = Object(superType.prototype);
prototype.constructor = subType;
subType.prototype = prototype;
} function Person(name){
this.name = name;
}
Person.prototype.say= function(){
console.log("我是"+this.name);
} function Student(name,age){
Person.call(this,name);
this.age = age;
} inheritPrototype(Student,Person);
var xiaozhang = new Student('小张',20);
console.log(xiaozhang.name);//小张
xiaozhang.say();//我是小张

五、拷贝方式

 var Chinese = {nation:'中国'};
var Doctor ={career:'医生'} // 请问怎样才能让"医生"去继承"中国人",也就是说,我怎样才能生成一个"中国医生"的对象?
// 这里要注意,这两个对象都是普通对象,不是构造函数,无法使用构造函数方法实现"继承"。 function extend(p) {
var c = {};
for (var i in p) {      
c[i] = p[i];    
}
c.uber = p;
return c;
} var Doctor = extend(Chinese);
Doctor.career = '医生';
alert(Doctor.nation); // 中国

六、继承的框架

1、base2.js

 <script src='base2.js'></script>
<script>
/*基类*/
var Person = Class.extend ( {
init: function (name ) {
this.name = name;
},
dance: function ( ) {
alert('跳舞');
}
} ); /*子类*/
var Student = Person.extend({
init: function(){
//false表示什么意思
this._super( false );
},
/*重写父类方法*/
dance: function(){
/*调用父类*/
this._super();
alert('唱歌');
},
/*实现自己的方法*/
swingSword: function(){
return true;
}
}); var xiaozhang = new Student();
xiaozhang.dance();
</script>

2、simple.js

 <script src='simple.js'></script>
<script>
var Person = Class.extend({
init: function(age,name){
this.age = age;
this.name = name;
},
dance: function(){
alert("跳舞");
}
});
var Student = Person.extend({
init: function(age,name,height){
this._super(age,name);
this.height = height;
},
dance: function(){
/*调用父类的同名方法*/
this._super();
/*同时又可以调用自己的方法*/
alert("唱歌");
}
}); var xiaozhang = new Student(21,'小张','121');
xiaozhang.dance();
</script>

七、对象继承实现计算周长

 var sharp = function(name){
this.name = name;
}
sharp.prototype = {
//改方法被继承,这个方法是大家都有的,并且都一样,可以放在基类中
getName : function(){
return this.name;
}
//会根据不同的形状而被重写
,zhouchang : function(){
return 100;
}
}; //矩形对象
var Rectangle = function(length,width){
sharp.call(this, name);
this.name='矩形';
this.length =length;
this.width = width;
}
//重写计算周长的方法
Rectangle.prototype = new sharp();
Rectangle.prototype.zhouchang = function(){
return (this.length + this.width) * 2;
} //好处
//以后新增一个计算其他形状的需求,不用修改原来的代码,只需要扩充即可.
//新增一个正方形
var Square = function(length){
sharp.call(this, name);
this.name='正方形';
this.length =length;
//this.width = width;
}
//重写计算周长的方法
Square.prototype = new sharp();
Square.prototype.zhouchang = function(){
return this.length * 4;
} //新增一个圆形
var Circle = function(radius){
sharp.call(this, name);
this.name='圆形';
this.radius =radius;
//this.width = width;
} //重写计算周长的方法
Circle.prototype = new sharp();
Circle.prototype.zhouchang = function(){
//圆的周长=2×圆周率×半径 或 圆周率×直径
return 2 * Math.PI * this.radius;
} //使用对象 封装
function computezhouchang(shape) {
alert( shape.getName() + '的周长是' + shape.zhouchang() );
} //组装世界
//var rectangle = new Rectangle('矩形',10,20);
//computezhouchang(rectangle); //去掉属性name
var rectangle = new Rectangle(10,20);
computezhouchang(rectangle); //正方形
var square = new Square(10);
computezhouchang(square); //圆形
var circle = new Circle(10);
computezhouchang(circle);

最新文章

  1. javascript的ajax
  2. Win7 关闭Window update
  3. Things make us different
  4. A3992学习记录
  5. 长安CS15_手动&mdash;&mdash;16款
  6. [Leetcode] Longest Substring Without Repeating Characters (C++)
  7. Android Bitmaps缓存
  8. js根据IP地址判断城市
  9. 从源代码到Runtime发生的重排序
  10. 三、Html常用标签
  11. mysql安装过程
  12. 关于html+ashx开发中几个问题的解决方法的感想和总结
  13. 如何通俗的理解spring的控制反转、依赖注入、面向切面编程等等
  14. Socket远程调试日志之 SocketLog的简单实用
  15. HTML5事件—visibilitychange 页面可见性改变事件
  16. [MySql]windows下设置mysql默认编码
  17. Python3基础 print(,end=) 输出内容的末尾加入空格
  18. React Native调试技巧与心得
  19. centOS上的基础文件操作
  20. vue中回到顶部

热门文章

  1. 网络中可以引用的jquery库
  2. 将linux上的Java代码上传到码云
  3. vector的二维用法+前缀和
  4. rman中 Backup Set 与 Image Copy 优缺点比较
  5. [BZOJ2961]共点圆-[凸包+cdq分治]
  6. gdb调试带参数程序
  7. 通知的多线程问题 iOS
  8. 基于Cocos2d-x-1.0.1的飞机大战游戏开发实例(中)
  9. Spring框架 之IOC容器 和AOP详解
  10. Javascript深入__proto__和prototype的区别和联系