How to implement inheritance in JavaScript
来源:互联网 发布:数据共享该怎样连接 编辑:程序博客网 时间:2024/05/16 04:17
Introduction
If you have done Object Oriented Programming in JavaScript, you will know that you can create a class as follows:
Person = function(id, name, age){ this.id = id; this.name = name; this.age = age; alert('A new person has been accepted');}
So far our class Person
only has two properties and we are going to give it some methods. A clean way of doing this is to use its 'prototype
' object.
Starting from JavaScript 1.1, the prototype
object was introduced in JavaScript. This is a built in object that simplifies the process of adding custom properties and methods to all instances of an object.
Let's add two methods to our class using its 'prototype
' object as follows:
Person.prototype = { /** wake person up */ wake_up: function() { alert('I am awake'); }, /** retrieve person's age */ get_age: function() { return this.age; }}
Now we have defined our class Person
. What if we wanted to define another class calledManager
which inherits some properties from Person
? There is no point redefining all these properties again when we define ourManager
class, we can just set it to inherit from the class Person
.
JavaScript doesn't have built-in inheritance but we can use a technique to implement inheritance as follows:
Inheritance_Manager = {};//We create an inheritance manager class (the name is arbitrary)
Now let's give our inheritance class a method calledExtend
which takes the baseClass
and subClassas
arguments. Within theExtend
method, we will create an inner class with a function inheritance() { }
. The reason why we are using this inner class is to avoid confusion between thebaseClass
and subClass
prototypes.
Next we make the prototype of our inheritance class point to thebaseClass
prototype as in the following code:
inheritance.prototype = baseClass. prototype;
Then we copy the inheritance prototype into thesubClass
prototype as follows:
subClass.prototype = new inheritance();
The next thing is to specify the constructor for oursubClass
as follows:
subClass.prototype.constructor = subClass;
Once finished with our subClass
prototyping, we can specify the next two lines of code to set some base class pointers.
subClass.baseConstructor = baseClass;subClass.superClass = baseClass.prototype;
Here is the full code for our Extend
function:
Inheritance_Manager.extend = function(subClass, baseClass) { function inheritance() { } inheritance.prototype = baseClass.prototype; subClass.prototype = new inheritance(); subClass.prototype.constructor = subClass; subClass.baseConstructor = baseClass; subClass.superClass = baseClass.prototype;}
Now that we have implemented our inheritance, we can start using it to extend our classes. In this case, we are going to extend ourPerson
class into a Manager
class as follows:
We define the Manager
class:
Manager = function(id, name, age, salary) { Person.baseConstructor.call(this, id, name, age); this.salary = salary; alert('A manager has been registered.');}
We make it inherit form Person
:
Inheritance_Manager.extend(Manager, Person);
If you have noticed, we have just called theExtend
method of our Inheritance_Manager
class and passed thesubClass
Manager in our case and then the baseClass
Person. Note that the order is very important here. If you swap them, the inheritance will not work as you intended if at all.
Also note that you will need to specify this inheritance before you can actually define thesubClass
.
Now let us define the subClass
:
We can add more methods as shown below. OurManager
class will always have the methods and properties defined in thePerson
class because it inherits from it.
Manager.prototype.lead = function(){ alert('I am a good leader');}
Now to test it, let us create two objects, one from the classPerson
and one from the inherited class Manager
:
var p = new Person(1, 'Joe Tester', 26);var pm = new Manager(1, 'Joe Tester', 26, '20.000');
Here is the full JavaScript code you can copy:
Person = function(id, name, age){ this.id = id; this.name = name; this.age = age; alert('A new person has been accepted');}Person.prototype = { /** wake person up */ wake_up: function() { alert('I am awake'); }, /** retrieve person's age */ get_age: function() { return this.age; }}Inheritance_Manager = {};Inheritance_Manager.extend = function(subClass, baseClass) { function inheritance() { } inheritance.prototype = baseClass.prototype; subClass.prototype = new inheritance(); subClass.prototype.constructor = subClass; subClass.baseConstructor = baseClass; subClass.superClass = baseClass.prototype;}Manager = function(id, name, age, salary) { Manager.baseConstructor.call(this, id, name, age); this.salary = salary; alert('A manager has been registered.');}Inheritance_Manager.extend(Manager, Person);Manager.prototype.lead = function(){ alert('I am a good leader');}var p = new Person(1, 'Joe Tester', 26);var pm = new Manager(1, 'Joe Tester', 26, '20.000');
You can manipulate these objects by accessing some of their properties as follows:
alert(p.name);alert(pm.salary);
转自:http://www.codeproject.com/Articles/303796/How-to-Implement-Inheritance-in-Javascript
- How to implement inheritance in JavaScript
- How to implement xpcom module in JavaScript
- How to implement scrolling image with javascript in web page
- HOW TO IMPLEMENT WEB SERVICES IN INDY
- How To: Implement A Server Plug-in
- How to implement Polymorphism in C
- How to implement linked controls in gridview
- How to implement master-details in OAF?
- How to Implement Ajax in WordPress Themes
- how to implement the WaitForMultipleObjects in linux
- How to implement switch statement in python
- how to implement WaitForMultipleObjects in linux
- How to use composition and inheritance in visual c# ?
- How to: Explicitly Implement Interface Members with Inheritance (C# Programming Guide)
- How to: Explicitly Implement Interface Members with Inheritance (C# Programming Guide)
- How to: Explicitly Implement Interface Members with Inheritance (C# Programming Guide)
- How to: Explicitly Implement Interface Members with Inheritance (C# Programming Guide)
- How to: Explicitly Implement Interface Members with Inheritance (C# Programming Guide)
- DAO
- live555学习
- 《鸿宝术》活子时也叫玄关显像
- 旋转矩阵及旋转向量相互转化 Rodrigues矩阵
- 键盘与ASCII码对应表
- How to implement inheritance in JavaScript
- 去留
- Ubuntu系统的中有着许多不同颜色的文件
- 挂载NFS网络文件系统
- 万能转换器boost::lexical_cast
- RAID卡服务器安装2003教程
- Tween(补间)动画 之 安卓
- 使用github出现的错误以及解决办法
- POJ 3162 树形dp+线段树