面向对象的JavaScript系列二,继承
1.原型链
function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
};
function SubType(){
this.subproperty = false;
}
//inherit from SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue()); //true
// 原型链上查询,首先是function就是Object实例出来,然后SubType的prototype是SuperType的实例,最后是instance是SubType的实例。
alert(instance instanceof Object); //true
alert(instance instanceof SuperType); //true
alert(instance instanceof SubType); //true
alert(Object.prototype.isPrototypeOf(instance)); //true
alert(SuperType.prototype.isPrototypeOf(instance)); //true
alert(SubType.prototype.isPrototypeOf(instance)); //true
1.1原型链的问题(很少用这种方法来实际开发)
function SuperType(){
this.colors = ["red", "blue", "green"];
}
function SubType(){
}
//inherit from SuperType
SubType.prototype = new SuperType();
var instance1 = new SubType();
// 增加了black,导致原型属性也增加了black
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green,black"
2.借用构造函数(实际开发,也不会这么用)
function SuperType(name){
this.name = name;
}
function SubType(){
//inherit from SuperType passing in an argument
SuperType.call(this, "Nicholas");
//instance property
this.age = 29;
}
var instance = new SubType();
alert(instance.name); //"Nicholas";
alert(instance.age); //
3.组合继承,将原型链和借用构造函数的技术组合起来,扬长避短
function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
SuperType.call(this, name);
this.age = age;
}
SubType.prototype = new SuperType();
SubType.prototype.sayAge = function(){
alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //
4.原型式继承
function object(o){
function F(){}
F.prototype = o;
return new F();
}
var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = object(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"
4.1原型式继承 ECMA5版本
var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = Object.create(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
var yetAnotherPerson = Object.create(person);
yetAnotherPerson.name = "Linda";
yetAnotherPerson.friends.push("Barbie");
alert(person.friends); //"Shelby,Court,Van,Rob,Barbie"
5.寄生组合式继承(当前最佳实践)
function object(o){
function F(){}
F.prototype = o;
return new F();
}
function inheritPrototype(subType, superType){
var prototype = object(superType.prototype); //create object
prototype.constructor = subType; //augment object 如果不修复constructor,则指向SuperType
subType.prototype = prototype; //assign object
}
function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
SuperType.call(this, name);
this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //
面向对象的JavaScript系列二,继承的更多相关文章
- 面向对象的JavaScript系列一,创建对象
1.最简单的创建对象方法 var person = new Object(); person.name = "sam wu"; person.age = 25; person.jo ...
- JavaScript设计模式基础之面向对象的JavaScript(二)
多态 多态的实际含义:同一操作作用与不同的对象上面,可以产生不同的解释和不同的执行结果,就是说,给不同的对象发送同一个消息 的时候,这些对象会根据这个消息分别给出不同的反馈 代码如下: class D ...
- (二)Javascript面向对象编程:构造函数的继承
Javascript面向对象编程:构造函数的继承 这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承 ...
- JavaScript系列--浅析原型链与继承
一.前言 继承是面向对象(OOP)语言中的一个最为人津津乐道的概念.许多面对对象(OOP)语言都支持两种继承方式::接口继承 和 实现继承 . 接口继承只继承方法签名,而实现继承则继承实际的方法.由于 ...
- 前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型
前端开发:面向对象与javascript中的面向对象实现(二)构造函数与原型 前言(题外话): 有人说拖延症是一个绝症,哎呀治不好了.先不说这是一个每个人都多多少少会有的,也不管它究竟对生活有多么大的 ...
- 面向对象的Javascript(5):继承
在小项目中对于JavaScript使用,只要写几个function就行了.但在大型项目中,尤其是在开发追求 良好的用户体验的网站中,如SNS,就会 用到大量的JavaScrpt,有时JavaScrip ...
- (一)我的Javascript系列:Javascript的面向对象旅程(上)
今宵酒醒何处,杨柳岸,晓风残月 导引 我的JavaScript系列文章是我自己对JavaScript语言的感悟所撰写的系列文章.现在还没有写完.目前一共出了下面的系列: (三)我的JavaScript ...
- javascript面向对象之Javascript 继承
转自原文javascript面向对象之Javascript 继承 在JavaScript中实现继承可以有多种方法,下面说两种常见的. 一,call 继承 先定义一个“人”类 //人类 Person=f ...
- JavaScript 面向对象程序设计(下)——继承与多态 【转】
JavaScript 面向对象程序设计(下)--继承与多态 前面我们讨论了如何在 JavaScript 语言中实现对私有实例成员.公有实例成员.私有静态成员.公有静态成员和静态类的封装.这次我们来讨论 ...
随机推荐
- Android开发的进阶之路
客户端开发工程师,简单地从某几个方面描述一下个人理解里不同的等级: 1.初级的可以熟练使用系统框架提供的组件,搭建所需应用程序: 2.中级的,会对系统框架中如view绘制.broadcast机制.内存 ...
- struts2多线程数据乱窜问题
转自:http://love398146779.iteye.com/blog/1781680 1.struts2为每个线程提供一个action实例,多线程访问时不会出现问题.当使用spring管理st ...
- apache支持中文域名绑定,apache支持中文域名绑定,教你怎样让apache支持中文域名绑定
摘要:apache支持中文域名绑定,apache支持中文域名绑定,教你怎样让apache支持中文域名绑定,根据本人实际经验,叫你如何让apache支持中文域名绑定,绝对管用的让apache支持中文域名 ...
- html状态码与缓存学习
当浏览器访问一个页面时,浏览者的浏览器会向网页所在的服务器发送请求.当浏览器接收并显示网页前,此网页所在的服务器会返回一个包含HTTP状态码的信息头(server header)用以响应浏览器的请求. ...
- UWP开发入门系列笔记之(一):UWP初览
标签: 随着微软Build2015带来的好消息,Win10正式版发布的日子已经离我们越来越近了,我们也终于欣喜地看到:一个统一的Windows平台对于开发人员来说充满了吸引力,这局棋下的好大的说--于 ...
- MultiSelectComboBox(一)
1. MultiSelectComboBox.xaml <UserControl x:Class="MultiSelectComboBox.MultiSelectComboBox&qu ...
- C#读取Excel显示到repeater中
首先需要一个用来存储我们需要显示的内容,防止页面回发丢失(添加时使用) #region 缓存文件 private DataTable excelData; /// <summary> // ...
- ocruntime
原作: http://www.jianshu.com/p/25a319aee33d 三种方法的选择 Runtime提供三种方式来将原来的方法实现代替掉,那该怎样选择它们呢? Method Resolu ...
- Struts2的配置
Struts2的配置 Struts2可以通过Convention插件管理Action和结果映射,也可以通过使用XML文件进行管理,这两种方式各有好处:使用Convention插件管理减少了XML文件的 ...
- Xcode 性能优化
参考: 1, 使用Xcode和Instruments调试解决iOS内存泄露 2, iOS系类教程之用instruments来检验你的app 3, iOS性能优化:Instruments使用实战 4,使 ...