转自:https://www.cnblogs.com/diligenceday/p/4246515.html
首先,推荐一篇博客豪情的博客JS提高: ,里面的链接全是精华, 一般人我不告诉他;
我们会先从JS的基本的设计模式开始,由浅入深, 会描述prototype,__proto__,consturctor等基础知识和JS的常见继承方式, 以及四个类工厂的推荐和使用(包括JS.Class,prototype的类工厂,john resig写的一个简洁类工厂库,以及Pjs一个很飘逸的继承库,很飘逸-_-),最后有3个参考资料链接:,最后有我个人的视频,欢迎拍砖哇, ///(o)_(o)。
工厂模式:因为使用用一个接口创建很多对象会产生大量的重复代码,为了解决这个问题,人们就开始使用工厂模式:
运行下面代码
构造函数模式:使用构造函数模式我们能少些更多代码,比如上面的工厂模式我们可以改写成:
运行下面代码
//知识点1: 那么工厂模式和构造函数模式有什么区别呢:
/*
* 没有显式地创建对象 * 直接把属性和方法赋值给了this * 没有return语句 * 构造函数的前面有一个new; * */// 知识点2:
/*
* 通过new的构造函数会经过四个阶段: * 1:创建一个新对象; * 2:把this赋值给这个新对象 * 3:执行构造函数中的代码 * 4:返回新对象 * */
原型是神马? 原型就是公用的方法或者属性,这么理解最简单, 当然:
1、prototype本质上还是一个JavaScript对象;
2、每个函数都有一个默认的prototype属性;
3、通过prototype我们可以扩展Javascript的内建对象
一些代码弄懂原型的本质:
运行下面代码
知识点:Object.getPrototypeOf;
Fn.prototype.isPrototypeOf( instance );
好的, 现在再来了解一下constructor, 如果你已经知道constructor是什么的话, 这段略过, constructor是默认指向创建当前对象的构造函数, 但是这里面有一些坑要注意, 比如你的原型prototype被改了, 实例的constructor就变了 ,
运行下面代码
大家一定要懂的是实例上的__proto__就是指向原型上的prototype, 这样会少走一些弯路,可以节约更多的时间用来看片, 你懂的; 每一个函数新建的时候都有一个默认的prototype, prototype这个对象上面默认有一个指向自己的constructor; prototype和__proto__的区别:__proto__是实例和Person.prototype之间的关系,而constructor是实例和Person之间的关系
运行下面代码
有了上面的基础, 我们开始说说JS的面向对象和继承吧;
1:组合使用构造器和原型模式, 这种模式是构造函数和原型混合的模式, 使用最广泛, 认同度也最高的一种模式, 也是最基础的模式;
运行下面代码
寄生构造模式; 听名字真的很玄乎..其实跟工厂模式一模一样的, 其实就是自定义模型的封装;
运行下面代码
JS的原型继承, 继承是依赖于原型链的;那么JS原型链是什么呢:
/* 这段话慢慢读, 从搞基程序设计三抄过来的,很重要, 实体书最好自己看一看哇; * ECMAScript中描述了原型链的概念, 并将原型链作为实现继承的主要方法, 基本思想是利用引用类型继承另一个引用类型的属性和方法。 * 简单回顾一下构造函数,原型和实例的关系:每一个函数都有一个原型对象, 每一个原型对象都有一个指向构造函数的指针, * 而实例包含了一个指向原型对象的内部(不可见的)指针。 那么我们让原型对象等于另一个类型的实例, 那么这个原型对象将会包含指向 * 另一个原型对象的指针,如果另一个原型对象又是指向了别的原型的一个实例, 这样层层嵌套, 就形成了原型链; * */ 那么我们利用原型的原型链相互继承来写一个基本的例子:运行下面代码
原型式继承第二个例子:
运行下面代码
有时候看到原型的各种引用会尿失禁, 引来引去的,坑爹啊, 不说了去洗裤子了....
寄生组合式继承
组合继承是JS的常用继承模式, 但是也有自己的不足, 组合继承最大的问题的无论是什么情况下, 都会两次调用超类的构造函数;
一个是在创建子类原型的时候, 另一个是在子类构造函数的内部, 那么子类的原型会包含所有超类实例的全部属性, 寄生组合式继承就是为了解决子类原型包含所有超类实例全部属性这个问题而存在的;运行下面代码
JS各种使用了继承库的类库推荐, 可以加深印象:
首先, JS.Class 是一个mootools式的类工厂 基于 lunereaper<![[dawid.kraczkowski[at]gmail[dot]com]]>的项目进行修改, 让子类的实现更简洁;
运行下面代码
prototype这个( ▼-▼ )库以前牛逼着呢, 但是一百年河东一百年河西, prototype当前的版本是最新版本的1.7稳定版,prototype里面的类工厂创建的主代码也被我单独裁出来了, 源码也差不多, 源码有我加的注释,自己个人方便阅读, HTML代码的最后自己写的几种 创建类工厂的方式, 可以借鉴(我没看api, 源码就是api....)
运行下面代码
prototype Demo
这款继承创建的作者是jQ的作者,你懂的, 不绕;
《《== 这个是代码的源地址:
运行下面代码
执行 new Foo打印出来对象结构如下:
pjs这个类工厂的github地址是:git://github.com/jayferd/pjs ,挺有名的js类工厂库, 写了源码分析, 关于代码我就不吐槽了,你看了就懂了, 不过真心挺方便的;
运行下面代码
无标题文档