不一样的Javascript(14)——继承
2013-12-26 17:51
155 查看
1. 首先我们定义一个Person类,每个Person实例都有一个name和age属性。同时,每个实例还能调用函数toString输出自己的name和age,并调用greeting函数跟别人打招呼:
我们可以调用构造函数Person创建实例,并访问实例的属性和调用函数。比如如下代码:
接下来我们定义一个Employee类,每个Employee实例除了有name和age属性外,还有个属性id。很自然地我们希望Employee类能从Person类继承,并通过Person的构造函数自动初始化属性name和age:
在上述代码中,我们先创建一个Person的实例,并把它赋值给Employee的prototype。这样就表明Employee是从Person继承过来的。为了能在构造函数Employee里调用它基类的构造函数,我们先用函数getPrototypeOfBase得到基类Person的prototype,接着再通过这个prototype的constructor属性调用构造函数Person。
由于我们在Employee里面添加了新的属性id,因此我们需要为Employee定义新的toString函数:
和调用基类的构造函数一样,我们仍然需要通过基类的prototype调用基类的toString函数。接着我们可以创建子类Employee的对象:
当我们试图访问Employee自己的属性(如id)的时候,直接得到该属性。如果发现一个属性自己并没有定义(比如age),那么将会沿着prototype链去它的基类中查找。调用函数的情况类似。当调用函数toString时,由于Employee定义了自己的toString,那么就调用Employee的toString。由于Employee没有定义自己的greeting函数,那么将会调用它基类Person的greeting函数。
2. prototype链有可能产生问题。例如如下代码:
function Person(name, age) { this.name = name; this.age = age; } Person.prototype.greeting = function() { return "Hello. I'm " + this.name + "."; } Person.prototype.toString = function() { return "name is " + this.name + "; age is " + this.age + "; "; }
我们可以调用构造函数Person创建实例,并访问实例的属性和调用函数。比如如下代码:
console.log(peter.name); // Peter console.log(peter.greeting()); // Hello. I'm Peter. console.log(peter.toString()); // name is Peter; age is 30;
接下来我们定义一个Employee类,每个Employee实例除了有name和age属性外,还有个属性id。很自然地我们希望Employee类能从Person类继承,并通过Person的构造函数自动初始化属性name和age:
function Employee(name, age, id) { this.base = getPrototypeOfBase.call(this); this.base.constructor.call(this, name, age); this.id = id; } Employee.prototype = new Person; function getPrototypeOfBase() { var prototype = Object.getPrototypeOf(this); return Object.getPrototypeOf(prototype); }
在上述代码中,我们先创建一个Person的实例,并把它赋值给Employee的prototype。这样就表明Employee是从Person继承过来的。为了能在构造函数Employee里调用它基类的构造函数,我们先用函数getPrototypeOfBase得到基类Person的prototype,接着再通过这个prototype的constructor属性调用构造函数Person。
由于我们在Employee里面添加了新的属性id,因此我们需要为Employee定义新的toString函数:
Employee.prototype.toString = function() { var strPerson = this.base.toString.call(this); var strEmployee = strPerson + "id " + this.id + "; "; return strEmployee; };
和调用基类的构造函数一样,我们仍然需要通过基类的prototype调用基类的toString函数。接着我们可以创建子类Employee的对象:
var harry = new Employee("Harry", 32, 9001); console.log(harry.age); // 32 console.log(harry.id); // 9001 console.log(harry.greeting()); // Hello. I'm Harry. console.log(harry.toString()); // name is Harry; age is 32; id 9001;
当我们试图访问Employee自己的属性(如id)的时候,直接得到该属性。如果发现一个属性自己并没有定义(比如age),那么将会沿着prototype链去它的基类中查找。调用函数的情况类似。当调用函数toString时,由于Employee定义了自己的toString,那么就调用Employee的toString。由于Employee没有定义自己的greeting函数,那么将会调用它基类Person的greeting函数。
2. prototype链有可能产生问题。例如如下代码:
function Base() { this.colors = ["red", "green", "blue"]; } var base = new Base(); var derived1 = Object.create(base); console.log(derived1.colors); // ["red", "green", "blue"] var derived2 = Object.create(base); console.log(derived2.colors); // ["red", "green", "blue"] derived1.colors.push("white"); console.log(derived1.colors); // ["red", "green", "blue", "white"] console.log(derived2.colors); // ["red", "green", "blue", "white"]在上述代码中,我们本来只想往derived1的colors里添加一个颜色"white",但derived2的colors同样也添加了。这是因为他们有相同的prototype。
相关文章推荐
- 从零开始学习前端JAVASCRIPT — 14、闭包与继承
- JavaScript继承详解(二)
- 探寻完美 之 JavaScript继承
- JavaScript-读 You Dont Know JS,原型继承不是继承
- Javascript面向对象编程(二):构造函数的继承
- 学习JavaScript设计模式(继承)
- Javascript面向对象编程(二):构造函数的继承
- javascript 继承模式思考
- 信管14:类的继承示例代码2
- Javascript实现继承的一种方法
- javascript继承的6种方法
- javascript中toFixed不同浏览器解析不一样的问题,好扯。。。。
- JavaScript——面向对象以及基于类的继承
- JavaScript面向对象------继承
- JavaScript的原型继承详解
- java篇 【14】Java 继承
- JavaScript实现继承机制(2)——调用call()与apply()方法
- javascript继承
- javascript中寄生组合式继承
- 基于JavaScript实现继承机制之构造函数+原型链混合方式的使用详解