OOP in JS - Inheritance
Summary
- You cause a class to inherit using
ChildClassName.prototype = new ParentClass();
. - You need to remember to reset the
constructor
property for the class usingChildClassName.prototype.constructor=ChildClassName
. - You can call ancestor class methods which your child class has overridden using the
Function.call()
method. - Javascript does not support protected methods.
Example
To jump right into it, following is a sample showing inheritance between two classes:
function Mammal(name){
this.name=name;
this.offspring=[];
}
Mammal.prototype.haveABaby=function(){
var newBaby=new Mammal("Baby "+this.name);
this.offspring.push(newBaby);
return newBaby;
}
Mammal.prototype.toString=function(){
return '[Mammal "'+this.name+'"]';
} Cat.prototype = new Mammal(); // Here's where the inheritance occurs
Cat.prototype.constructor=Cat; // Otherwise instances of Cat would have a constructor of Mammal
function Cat(name){
this.name=name;
}
Cat.prototype.toString=function(){
return '[Cat "'+this.name+'"]';
} var someAnimal = new Mammal('Mr. Biggles');
var myPet = new Cat('Felix');
alert('someAnimal is '+someAnimal); // results in 'someAnimal is [Mammal "Mr. Biggles"]'
alert('myPet is '+myPet); // results in 'myPet is [Cat "Felix"]' myPet.haveABaby(); // calls a method inherited from Mammal
alert(myPet.offspring.length); // shows that the cat has one baby now
alert(myPet.offspring[0]); // results in '[Mammal "Baby Felix"]'
The someAnimal & myPet above inner logical struct:
Using the .constructor
property
Look at the last line in the above example. The baby of a Cat should be a Cat, right? While the haveABaby()
method worked, that method specifically asks to create a new Mammal
. While we could make a new haveABaby()
method for the Cat
subclass like this.offspring.push(new Cat("Baby "+this.name))
, it would be better to have the ancestor class make an object of the correct type.
Every object instance in JS has a property named constructor
that points to its parent class. For example, someAnimal.constructor==Mammmal
is true. Armed with this knowledge, we can remake the haveABaby()
method like this:
Mammal.prototype.haveABaby=function(){
var newBaby=new this.constructor("Baby "+this.name);
this.offspring.push(newBaby);
return newBaby;
}
...
myPet.haveABaby(); // Same as before: calls the method inherited from Mammal
alert(myPet.offspring[0]); // Now results in '[Cat "Baby Felix"]'
Calling 'super' methods
Let's extend the example now so that when baby kittens are created, they 'mew' right after being born. To do this, we want to write our own customCat.prototype.haveABaby()
method, which is able to call the original Mammal.prototype.haveABaby()
method:
Cat.prototype.haveABaby=function(){
Mammal.prototype.haveABaby.call(this);
alert("mew!");
}
The above may look a little bit bizarre. Javascript does not have any sort of 'super' property, which would point to its parent class. Instead, you use thecall()
method of a Function
object, which allows you to run a function using a different object as context for it.
Making your own 'super' property
Rather than having to know that Cat
inherits from Mammal
, and having to type in Mammal.prototype
each time you wanted to call an ancestor method, wouldn't it be nice to have your own property of the cat pointing to its ancestor class? Those familiar with other OOP languages may be tempted to call this property 'super', but JS reserves this word for future use. The word 'parent', while used in some DOM items, is free for the JS language itself, so let's call it parent
in this example:
Cat.prototype = new Mammal();
Cat.prototype.constructor=Cat;
Cat.prototype.parent = Mammal.prototype;
...
Cat.prototype.haveABaby=function(){
var theKitten = this.parent.haveABaby.call(this);
alert("mew!");
return theKitten;
}
Spoofing pure virtual classes
Some OOP languages have the concept of a pure virtual class...one which cannot be instantiated itself, but only inherited from. For example, you might have aLivingThing
class which Mammal
inherited from, but you didn't want someone to be able to make a LivingThing
without specifying what type of thing it was. You can do this in JS by making the virtual class an object instead of a function.
The following example shows how this could be used to simulate a pure virtual ancestor:
LivingThing = {
beBorn : function(){
this.alive=true;
}
}
...
Mammal.prototype = LivingThing;
Mammal.prototype.parent = LivingThing; //Note: not 'LivingThing.prototype'
Mammal.prototype.haveABaby=function(){
this.parent.beBorn.call(this);
var newBaby=new this.constructor("Baby "+this.name);
this.offspring.push(newBaby);
return newBaby;
}
With the above, doing something like var spirit = new LivingThing()
would result in an error, since LivingThing
is not a function, and hence can't be used as a constructor.
Convenient Inheritance
Rather than writing 3 lines every time you want to inherit one class from another, it's convenient to extend the Function object to do it for you:
Function.prototype.inheritsFrom = function( parentClassOrObject ){
if ( parentClassOrObject.constructor == Function )
{
//Normal Inheritance
this.prototype = new parentClassOrObject;
this.prototype.constructor = this;
this.prototype.parent = parentClassOrObject.prototype;
}
else
{
//Pure Virtual Inheritance
this.prototype = parentClassOrObject;
this.prototype.constructor = this;
this.prototype.parent = parentClassOrObject;
}
return this;
}
//
//
LivingThing = {
beBorn : function(){
this.alive = true;
}
}
//
//
function Mammal(name){
this.name=name;
this.offspring=[];
}
Mammal.inheritsFrom( LivingThing );
Mammal.prototype.haveABaby=function(){
this.parent.beBorn.call(this);
var newBaby = new this.constructor( "Baby " + this.name );
this.offspring.push(newBaby);
return newBaby;
}
//
//
function Cat( name ){
this.name=name;
}
Cat.inheritsFrom( Mammal );
Cat.prototype.haveABaby=function(){
var theKitten = this.parent.haveABaby.call(this);
alert("mew!");
return theKitten;
}
Cat.prototype.toString=function(){
return '[Cat "'+this.name+'"]';
}
//
//
var felix = new Cat( "Felix" );
var kitten = felix.haveABaby( ); // mew!
alert( kitten ); // [Cat "Baby Felix"]
Just make sure you call this method immediately after your constructor, before you extend the prototype for the object.
Protected methods?
Some OOP languages have the concept of 'protected' methods—methods that exist in a parent or ancestor class that can only be called by descendants of the object (on each other), but not by external objects. These are not supported in JS. If you need such, you will have to write your own framework, ensuring that each class has a 'parent' or some such property, and walking up the tree to find ancestors and checking whether or not the calling object is the same type. Doable, but not enjoyable.
Quote From:
OOP in JS, Part 2 : Inheritance
Reference:
Understanding JavaScript Function Invocation and "this"
OOP in JS - Inheritance的更多相关文章
- OOP in JS Public/Private Variables and Methods
Summary private variables are declared with the 'var' keyword inside the object, and can only be acc ...
- js inheritance all in one
js inheritance all in one prototype & proto constructor Object.definepropety Object.create() js ...
- JS--我发现,原来你是这样的JS:面向对象编程OOP[3]--(JS继承)
一.面向对象编程(继承) 这篇博客是面向对象编程的第三篇,JS继承.继承顾名思义,就是获取父辈的各种"财产"(属性和方法). 怎么实现继承? 我们的JavaScript比较特别了, ...
- JS OOP -04 JS中的公有成员,私有成员和静态成员
JS中的公有成员,私有成员和静态成员 a.实现类的公有成员 b.实现类的私有成员 c.实现类的静态成员 a.实现类的公有成员 之前定义的任何类型成员都属于公有成员的范畴,该类的任何实例都对外公开这些属 ...
- JS OOP -03 JS类的实现
JS类的实现: a.理解类的实现机制 b.使用prototype对象定义类成员 c.一种JS类的设计模式 a.理解类的实现机制 在JS中可以使用function关键字来定义一个类. 添加类的成员,在函 ...
- 小结JS中的OOP(上)
前言:大家都知道,OOP有三大特性:封装,继承,多态.下面是自己对这三个特性的理解: 封装:把属性与方法整合到某种数据类型中.目的是让类的使用者按类的编写者的意愿去使用类.在封装过程中会一般会做两件事 ...
- JS面向对象思想(OOP)
直接看js好了,模拟创建一个奥运会 function 奥运会Class(主题) { // 删除主题 // delete this.主题; this.主题 = 主题; this.开幕时间; this.闭 ...
- 三言两语之js面向对象初探1
http://www.cnblogs.com/54td/p/5580994.htm 先是有了这个比较简短但是内容比较丰盈的上篇,现在时间比较充沛,所以详细写来.搞前端的同学经常被其他程序员bs, ...
- 关于JS APP
多屏screen, JS如何路由,如何换页,导航.通过JS来实现. 当前页面的逻辑通过JS来实现.HTML DOM, Event, Widget. 核心在于function. JS 不仅仅是DOM, ...
随机推荐
- TFS的安装
TFS的安装 本系列的实例将采用TFS 2012+Sql Server2012编写. TFS的完整版本安装最好是在Windows server2008 64位以上版本中,其包括64位的SQL SERV ...
- linux netstat 命令详解
linux netstat 命令详解 1.功能与说明 netstat 用于显示linux中各种网络相关信息.如网络链接 路由表 接口状态链接 多播成员等等. 2.参数含义介绍 -a (all)显示所 ...
- MapXtreme IResultSetFeatureCollection
最近使用MapXtreme做轨迹回放功能,做完之后感觉良好便交给同事测试使用.同事测试后发现第一次使用速度很快,然后越来越慢.出现这样的问题我们应该很容易第一个想到是资源暂用没有释放照成的,我便在关键 ...
- 飘逸的python - 简明gzip模块压缩教程
压缩数据创建gzip文件 先看一个略麻烦的做法 import StringIO,gzip content = 'Life is short.I use python' zbuf = StringIO. ...
- 使用docker搭建kafka环境
Requirements 最近学习了下kafka,为方便搭建环境,使用docker进行部署. 需要首先安装docker的环境.要求操作系统是linux的64位系统. docker的安装(适于rpm/d ...
- Sql Server 自定义函数(原创)
---------------------------------------------------------------------------------------------- 传入字符串 ...
- ubuntu 14.04中Elasticsearch 2.3 中 Nginx 权限认证
前言:本文实现了nginx简单保护elasticsearch,类似的保护也可以采用elasticsearch 官方插件shield 一.准备密码 1.确认htpasswd是否已经安装 which ht ...
- C# 关于委托的小例子
本例子是一个关于委托的小例子[猫叫,狗跳,人喊]. 委托是C#开发中一个非常重要的概念,理解起来也和常规的方法不同,但一旦理解清楚,就可以信手拈来,随处可用. 委托是对方法的抽象.它存储的就是一系列具 ...
- xhtml头文件设置
设置字符集编码: <head> <meta http-equiv="Content-Type" Content="text/html" cha ...
- 以域管理账户连接到TFS或git时,设置IE允许Cookies
在 Windows 域环境中,每个项目组会创建一个项目管理账户,在和其他项目组进行数据交互时,只需要授予该项目管理账户相应的权限,方便了权限的管理.对于项目组管理账户:domain\admin,该域账 ...