不一样的Javascript(14)——继承
来源:互联网 发布:千峰python视频教程 编辑:程序博客网 时间:2024/05/29 10:26
1. 首先我们定义一个Person类,每个Person实例都有一个name和age属性。同时,每个实例还能调用函数toString输出自己的name和age,并调用greeting函数跟别人打招呼:
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); // Peterconsole.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); // 32console.log(harry.id); // 9001console.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(1)——循环
- 不一样的JavaScript(2)——属性
- 不一样的JavaScript(3)——比较
- 不一样的JavaScript(4)——函数参数
- 不一样的JavaScript(5)——变量作用域
- 不一样的JavaScript(6)——函数调用
- 不一样的JavaScript(7)——数组
- 不一样的Javascript(8)——基本语法
- 不一样的Javascript(9)——基本类型
- 不一样的Javascript(10)——函数嵌套
- 不一样的Javascript(11)——函数与对象
- 不一样的Javascript(12)——prototype
- 不一样的Javascript(13)——模块化与命名空间
- JavaScript不一样的语法
- javascript不一样的写法
- 《javascript pattern》— javascript的继承
- 31、不一样的C++系列--多重继承
- 浮点数float转换成十六进制字符串的方法(FloatToHex)
- 2013年即将结束了
- java socket通讯之 echo server 和echo client例子
- oc学习之旅:内存管理,文件操作流程
- css3相关收集
- 不一样的Javascript(14)——继承
- 边缘检测 几何边缘检测 鱼眼镜头特效
- CentOS 6.3 minimal 安装后简单设置
- [置顶] 历届博客之星获奖博客分享
- Android Intent 详解
- 算法之道:形而之上谓之道
- svn对比乱码的问题
- 解决SecureCRT中文显示乱码
- Rigidboby刚体