js 如何实现继承呢?
下面是一个简单的继承demo
console.clear(); //child 继承 parent var extend=function(child,parent) { child.prototype=new parent(); } function A(){ this.name="A"; this.sayHello=function(){ console.log("Hello , "+this.name); } } function B(){ this.sex='man'; this.mySex=function(){ console.log("sex:"+this.sex); } } extend(B,A); var b=new B(); b.mySex(); b.sayHello();
运行结果:
sex:man
Hello , A
说明:B 本身没有sayHello 方法,而是从A 继承过来的.
那么我们再让B继承另外一个类C
function C(){ this.age=26; this.myAge=function(){ console.log("age:"+this.age); } } extend(B,A); extend(B,C); var b=new B(); b.mySex(); b.sayHello();
报错:
继承C 之后,调用sayHello竟然报错,但是sayHello不是从A 继承过来的吗?
说明我们的继承方法有问题:
var extend=function(child,parent) { child.prototype=new parent(); }
B先继承A,然后继承C,那么之前继承A的属性都没了.这显然不合要求.
所以我优化一下继承方法:
//child 继承 parent var extend=function(child,parent) { var p1=child.prototype; child.prototype=new parent(); child.prototype.__proto__=p1; }
完整代码如下:
console.clear(); //child 继承 parent var extend=function(child,parent) { var p1=child.prototype; child.prototype=new parent(); child.prototype.__proto__=p1; } function A(){ this.name="A"; this.sayHello=function(){ console.log("Hello , "+this.name); } } function B(){ this.sex='man'; this.mySex=function(){ console.log("sex:"+this.sex); } } function C(){ this.age=26; this.myAge=function(){ console.log("age:"+this.age); } } extend(B,A); extend(B,C); var b=new B(); b.mySex(); b.sayHello(); b.myAge();
执行结果:
sex:man
Hello , A
age:26
即B 成功地调用了A和C 的方法
我们继续优化,因为__proto__在IE中不能访问.
优化的结果:
//child 继承 parent var extend=function(child,parent) { var p1=child.prototype; var p2=parent.prototype; parent.prototype=p1; child.prototype=new parent(); parent.prototype=p2; } function A(){ this.name="A"; this.sayHello=function(){ console.dir("Hello , "+this.name); } } function B(){ this.sex='man'; this.mySex=function(){ console.dir("sex:"+this.sex); } } function C(){ this.age=26; this.myAge=function(){ console.dir("age:"+this.age); } } extend(B,A); extend(B,C); var b=new B(); b.mySex(); b.sayHello(); b.myAge(); console.dir(A); console.dir(B); console.dir(C);
运行结果:
继承方法:
//child 继承 parent var extend=function(child,parent) { var p1=child.prototype; var p2=parent.prototype; parent.prototype=p1; child.prototype=new parent(); parent.prototype=p2; delete p1; delete p2; }
相关推荐
js继承实现示例代码,js继承实现示例代码,js继承实现示例代码
在JavaScript中继承是一个非常复杂的话题,比其他任何面向对象的语言中的继承都复杂得多。在大多数其他面向对象语言中,继承一个类只需使用一个关键字即可。与它们不同,在JavaScript中要想达到传承公用成员的目的,...
js没有特别明确的实现如何继承,但是能够通过特殊手段实现继承的,有四种方法
1.父类 2.子类 3.实现Student 继承 Person 1.父类 2.子类 3.实现Student 继承 Person 1.父类 2.子类
javascript做为一门脚本语言,但面向对象思想在其中也有体现,本文档阐述和总结了js中继承的实现,及个方法的利弊!
我们还知道,面向对象编程有三个重要的概念 - 封装、继承和多态。 但是在JavaScript的世界中,所有的这一切特性似乎都不存在。 因为JavaScript本身不是面向对象的语言,而是基于对象的语言。
JS继承.txtJS继承.txtJS继承.txtJS继承.txtJS继承.txtJS继承.txtJS继承.txtJS继承.txtJS继承.txt
Javascript继承机制原理 可以参考下
js javascript zInherit 对象 继承
js继承的用法, function initGrid(){ $('#'+instance.options.table).datagrid(instance.options); } initGrid(); return instance;
JS继承的实现方式转载整理。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。。
原型式继承 原型链式继承 借用构造函数(类式继承) 组合继承 寄生组合式继承 结束语 前言 对于灵活的js而言,继承相比于java等语言,继承实现方式可谓百花齐放。方式的多样就意味着知识点繁多,当然也是面试时...
javascript 继承派生等问题的资料,都是网上收集的,学会apply call 就懂js面向对象的原理了。
javascript中如何实现封装,继承和多态
javascript 五种继承简介。
javascript控件开发之继承关系的源码
JavaScript继承的三种方法实例 继承 继承: 首先继承是一种关系,类(class)与类之间的关系,JS中没有类,但是可以通过构造函数模拟类,然后通过原型来实现继承。 继承也是为了数据共享,js中的继承也是为了实现...
使用js实现继承的七种方式,详细讲解了js中的原型链继承,构造函数继承,组合继承(经典继承),原型式继承,寄生式继承,寄生组合式继承,以及ES6中的继承,描述原理以及实现和要点概述等。
浅析Javascript原型继承,浅析Javascript原型继承
javascript原型继承,prototype的使用,可以像java一样继承