JavaScript是如何实现继承的
2014-11-10 15:56
681 查看
JavaScript中的function是万能的,除了用于的函数定义,也可以用于类的定义。JavaScript的继承,说起来也是有点怪,没有public,private等访问控制修饰,也没有implement或其他特定的符号来说明是实现继承。关于javascript类的继承可以参考一下以下这个例子。
这就需要引入另外一个概念 - 原型(prototype),我们可以简单的把prototype看做是一个模版,新创建的自定义对象都是这个模版(prototype)的一个拷贝 (实际上不是拷贝而是链接,只不过这种链接是不可见,给人们的感觉好像是拷贝)。
让我们看一下通过prototype创建自定义对象的一个例子:
这里我们把函数Person称为构造函数,也就是创建自定义对象的函数。可以看出,JavaScript通过构造函数和原型的方式模拟实现了类的功能。
创建自定义对象(实例化类)的代码:
当代码var zhang =new Person("ZhangSan","man")执行时,其实内部做了如下几件事情:
创建一个空白对象(new Object())。
拷贝Person.prototype中的属性(键值对)到这个空对象中(我们前面提到,内部实现时不是拷贝而是一个隐藏的链接)。
将这个对象通过this关键字传递到构造函数中并执行构造函数。
将这个对象赋值给变量zhang。
为了证明prototype模版并不是被拷贝到实例化的对象中,而是一种链接的方式,请看如下代码:
这种在JavaScript内部实现的隐藏的prototype链接,是JavaScript赖以生存的温润土壤,也是模拟实现继承的基础。
上面关于继承的实现很粗糙,并且存在很多问题:
在创建Employee构造函数和原型(以后简称类)时,就对Person进行了实例化,这是不合适的。
Employee的构造函数没法调用父类Person的构造函数,导致在Employee构造函数中对name和sex属性的重复赋值。
Employee中的函数会覆盖Person中的同名函数,没有重载的机制(和上一条是一个类型的问题)。
创建JavaScript类的语法过于零散,不如C#/Java中的语法优雅。
实现中有constructor属性的指向错误。
01 | <script type= "text/javascript" > |
02 | function Person() { |
03 | // 属性 |
04 | this .Gender = "female" ; |
05 | this .Age = 18; |
06 | this .Words = "Silence" ; |
07 | // 方法 |
08 | this .shouting = function () { |
09 | alert( "开心哦!父类的方法" ); |
10 | } |
11 | } |
12 | // 继承 |
13 | function Programmer() { |
14 | this .base = Person; |
15 | } |
16 | Programmer.prototype = new Person; |
17 | // 为子类添加新的方法 |
18 | Programmer.prototype.typeCode = function () { |
19 | alert( "俺是敲代码的!IT民工,很不开心。子类的方法" ); |
20 | } |
21 | // 调用示例 |
22 | function sayHello() { |
23 | var a = new Programmer(); |
24 | alert(a.Gender); // 调用父类的属性 |
25 | a.shouting(); // 调用父类的方法 |
26 | a.typeCode(); // 调用子类的方法 |
27 | } |
28 | sayHello(); |
29 | </script> |
模拟JavaScript中类和继承
在面向对象的语言中,我们使用类来创建一个自定义对象。然而JavaScript中所有事物都是对象,那么用什么办法来创建自定义对象呢?这就需要引入另外一个概念 - 原型(prototype),我们可以简单的把prototype看做是一个模版,新创建的自定义对象都是这个模版(prototype)的一个拷贝 (实际上不是拷贝而是链接,只不过这种链接是不可见,给人们的感觉好像是拷贝)。
让我们看一下通过prototype创建自定义对象的一个例子:
01 | // 构造函数 |
02 | function Person(name,sex) { |
03 | this .name = name; |
04 | this .sex = sex; |
05 | } |
06 | // 定义Person的原型,原型中的属性可以被自定义对象引用 |
07 | Person.prototype = { |
08 | getName: function () { |
09 | return this .name; |
10 | }, |
11 | getSex: function () { |
12 | return this .sex; |
13 | } |
14 | } |
创建自定义对象(实例化类)的代码:
1 | var zhang = new Person( "ZhangSan" , "man" ); |
2 | console.log(zhang.getName()); // "ZhangSan" |
3 | var chun = new Person( "ChunHua" , "woman" ); |
4 | console.log(chun.getName()); // "ChunHua" |
创建一个空白对象(new Object())。
拷贝Person.prototype中的属性(键值对)到这个空对象中(我们前面提到,内部实现时不是拷贝而是一个隐藏的链接)。
将这个对象通过this关键字传递到构造函数中并执行构造函数。
将这个对象赋值给变量zhang。
为了证明prototype模版并不是被拷贝到实例化的对象中,而是一种链接的方式,请看如下代码:
01 | function Person(name,sex) { |
02 | this .name = name; |
03 | this .sex = sex; |
04 | } |
05 | Person.prototype.age = 20; |
06 | var zhang = new Person( "ZhangSan" , "man" ); |
07 | console.log(zhang.age); // 20 |
08 | // 覆盖prototype中的age属性 |
09 | zhang.age = 19; |
10 | console.log(zhang.age); // 19 |
11 | delete zhang.age; |
12 | // 在删除实例属性age后,此属性值又从prototype中获取 |
13 | console.log(zhang.age); // 20 |
如何在JavaScript中实现简单的继承?
下面的例子将创建一个雇员类Employee,它从Person继承了原型prototype中的所有属性。01 | function Employee(name,sex,employeeID) { |
02 | this .name = name; |
03 | this .sex = sex; |
04 | this .employeeID = employeeID; |
05 | } |
06 | // 将Employee的原型指向Person的一个实例 |
07 | // 因为Person的实例可以调用Person原型中的方法,所以Employee的实例也可以调用Person原型中的所有属性。 |
08 | Employee.prototype = new Person(); |
09 | Employee.prototype.getEmployeeID = function () { |
10 | return this .employeeID; |
11 | }; |
12 | var zhang = new Employee( "ZhangSan" , "man" , "1234" ); |
13 | console.log(zhang.getName()); // "ZhangSan |
在创建Employee构造函数和原型(以后简称类)时,就对Person进行了实例化,这是不合适的。
Employee的构造函数没法调用父类Person的构造函数,导致在Employee构造函数中对name和sex属性的重复赋值。
Employee中的函数会覆盖Person中的同名函数,没有重载的机制(和上一条是一个类型的问题)。
创建JavaScript类的语法过于零散,不如C#/Java中的语法优雅。
实现中有constructor属性的指向错误。
相关文章推荐
- JavaScript是如何实现继承的
- 如何利用javascript中的原型实现继承
- Javascript:图形解释如何实现“ 单继承 、多继承 、掺入 “
- javascript如何实现继承
- javascript 中面向对象实现 如何继承
- 在Javascript中如何实现继承
- javaScript如何实现继承(javaScript实现继承的五种方式)
- JavaScript如何实现面向对象和继承机制?
- JavaScript是如何实现继承的(六种方式)
- javascript中如何实现继承
- 在没有类的情况下,JavaScript如何创建对象、实现继承?
- 深入理解JavaScript是如何实现继承的
- Javascript如何实现继承?
- JavaScript是如何实现继承的(六种方式)
- javascript 基于原型的知识--如何实现继承
- JavaScript中prototype如何实现函数继承
- 深入理解JavaScript是如何实现继承的
- 深入理解JavaScript是如何实现继承的
- 说说 JavaScript 如何实现对象继承
- JavaScript是如何实现继承