javascript继承笔记
//原型(prototype):原型是一个对象,其他对象可以通过它实现属性继承
/*笔记:
* 1.类式继承:通过原型链继承的方式
* 2.原型式继承:对类式继承的封装
* 3.寄生式继承:对原型继承的二次封装,并且在第二次封装过程中对继承的对象进行扩展
* 4.构造函数式继承:通过构造函数继承的方式
* 5.寄生组合式继承:寄生式继承融合构造函数式继承的优点去除缺点的方式
* 6.组合式继承(类式继承+构造函数式继承 两者优点相加)
*/
//原型式继承
function inheritobject(o){
//声明一个过渡函数对象
function F(){
}
//过渡原型对象继承父对象
F.prototype=o;
//返回过渡对象的一个实列,该实例的原型继承了父对象
return new F();
}
var book={
name:"jsbook",
alikeBook:['css book',"html book"],
};
//寄生式继承(对原型继承的第二次封装,并且在第二次封装过程中对继承的对象进行了扩展)
//声明基对象
function createBook(obj){
//通过原型继承方式创建新对象
var o = new inheritobject(obj);
//扩展新对象
o.getName=function(){
console.log(this.name);
}
//返回扩展后的对象
return o;
}
/*
*寄生式继承 继承原型
* 传递参数subclass 子类
* 传递参数superclass 父类
* */
function inheritPrototype(subclass,superclass){
//复制一份父类的原型副本保存在变量中
var p=inheritobject(superclass.prototype);
//修正因为重写子类原型导致子类的constructor属性被修改
p.constructor=subclass;
//设置子类原型
subclass.prototype=p;
}
//定义父类
function superclass(name){
this.name = name;
this.colors=["red","blue","green"];
}
//定义父类原型方法
superclass.prototype.getName=function(){
console.log(this.name);
}
//定义子类
function subclass(name,time){
//构造函数式继承
superclass.call(this,name);
//子类新增属性
this.time=time;
}
//寄生式继承父类原型
inheritPrototype(subclass,superclass);
//子类新增原型方法
subclass.prototype.getTime = function(){
console.log(this.time);
}
//单继承 extend 属性复制
var extend=function(target,source){
//遍历源对象中的属性
for(var property in source){
//将源对象中的属性复制到目标对象中
target[property]=source[property];
}
return target;
}
//多继承 属性复制 可以绑定到原生对象object上
Object.prototype.mix=function(){
var i=0,//从第一个参数起为被继承的对象
len=arguments.length,//arguments相当于多个传递参数的集合,非常类似数组
//target=arguments[0];//第一个传入参数为目标对象
arg; //缓存参数对象
//遍历被继承的对象
for(; i<len;i++){
//缓存当前对象
arg=arguments[i];
for(var property in arg){
//将被继承对象中的属性复制到目标对象中
this[property]=arg[property];
}
}
}
//测试单继承
var b1={
name:'javascript 设计模式',
alike:['css','html','javascript']
}
var b2={
color:'blue'
}
extend(b2,b1);
console.log("单继承测试:"+b2.name+"-"+b2.alike+"-"+b2.color);
/*寄生组合式继承测试 begin*/
console.log("寄生组合式继承测试");
var instance1=new subclass("js book",2014);
var instance2=new subclass("css book",2013);
instance1.colors.push("black");
console.log(instance1.colors);
console.log(instance2.colors);
instance1.getName();
instance1.getTime();
instance2.getName();
instance2.getTime();
/*寄生组合式继承测试 end*/
/*寄生式继承测试 begin*/
console.log("寄生式继承测试");
var newBook=createBook(book);
newBook.name="ajax book";
newBook.alikeBook.push("xml book");
var otherBook=createBook(book);
otherBook.name="flash book";
otherBook.alikeBook.push("as book");
console.log(newBook.name);
console.log(newBook.alikeBook);
newBook.getName();//对对象进行了二次封装,并进行了扩展
console.log(otherBook.name);
console.log(otherBook.alikeBook);
otherBook.getName();
/*寄生式继承测试 end*/
/*json对象 测试*/
console.log(book.name+":"+book.alikeBook);
//测试多继承
otherBook.mix(b1,b2);
console.log(otherBook);
javascript继承笔记的更多相关文章
- Java程序猿JavaScript学习笔记(2——复制和继承财产)
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
- 【读书笔记】javascript 继承
在JavaScript中继承不像C#那么直接,C#中子类继承父类之后马上获得了父类的属性和方法,但JavaScript需要分步进行. 让Brid 继承 Animal,并扩展自己fly的方法. func ...
- JS学习笔记——JavaScript继承的6种方法(原型链、借用构造函数、组合、原型式、寄生式、寄生组合式)
JavaScript继承的6种方法 1,原型链继承 2,借用构造函数继承 3,组合继承(原型+借用构造) 4,原型式继承 5,寄生式继承 6,寄生组合式继承 1.原型链继承. <script t ...
- javascript继承机制的设计思想(ryf)
我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...
- Java程序猿的JavaScript学习笔记(汇总文件夹)
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- Java程序猿的JavaScript学习笔记(8——jQuery选择器)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- 转:Javascript继承机制的设计思想
我一直很难理解Javascript语言的继承机制. 它没有"子类"和"父类"的概念,也没有"类"(class)和"实例" ...
- Java程序猿的JavaScript学习笔记(3——this/call/apply)
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记(4——关闭/getter/setter)
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
随机推荐
- ASP.NET MVC Model验证(一)
ASP.NET MVC Model验证(一) 前言 前面对于Model绑定部分作了大概的介绍,从这章开始就进入Model验证部分了,这个实际上是一个系列的Model的绑定往往都是伴随着验证的.也会在后 ...
- 关于安装安卓SDK出现无法更新问题时的解决办法
近日,如果安装过安卓的同学可能知道,大家在使用Android SDK升级或者安装SDK的时候,出现了访问Failed to fetch URL http://dl-ssl.google.com/and ...
- xamarin MasterDetailPage点击Master时卡顿现象
在很多项目中经常会使用到MasterDetailPage的布局方式,而且一般做为主页面来开发,在开发中,发现一个并不算Bug的问题,但是却发生了,以此记录下来,方便大家探讨. 现象是这样的,我开发了一 ...
- 【MSP是什么】MSP认证之项目群管理学习总结
首先要说的是,我这篇体会是针对一定的背景的,不能算是一种通用的管理方式,只能是我自己的经验总结,能给大家平常的管理提供一点思路,我就很满足了.先说说背景,我所在公司做的是大型桌面应用软件,简单点说就是 ...
- 浅谈JavaScript中forEach与each
forEach是ES5中操作数组的一种方法,主要功能是遍历数组,例如: var arr = [1,2,3,4]; arr.forEach(alert); 等价于: var arr = [1, 2, 3 ...
- Esay ui数据加载等待提示
以视频上传为例: //视频上传 function uploadVedio(fileName){ load();//开始加载时弹出加载层 $.post('< ...
- 字符串转化为Json格式的数据--(记录四)
var pName = $(".productName").html(); var pPrice = $(".productPrice").html(); // ...
- H5 Notes:PostMessage Cross-Origin Communication
Javascript中要实现跨域通信,主要有window.name,jsonp,document.domain,cors等方法.不过在H5中有一种新的方法postMessage可以安全实现跨域通信,并 ...
- Java 特定规则排序-LeetCode 179 Largest Number
Given a list of non negative integers, arrange them such that they form the largest number. For exam ...
- 设计模式--观察者模式初探和java Observable模式
初步认识观察者模式 观察者模式又称为发布/订阅(Publish/Subscribe)模式,因此我们可以用报纸期刊的订阅来形象的说明: 报社方负责出版报纸. 你订阅了该报社的报纸,那么只要报社发布了新报 ...