javascript框架设计之类工厂

类与继承在javascript的出现,说明javascript已经达到大规模开发的门槛了,在之前是ECMAScript4,就试图引入类,模块等东西,但由于过分引入太多的特性,搞得javascript乌烟瘴气,导致被否决。不过只是把类延时到ES6.到目前为止,javascript还没有正真意义上的类。不过我们可以模拟类,曾近一段时间,类工厂是框架的标配,本章会介绍各种类实现,方便大家在自己的框架中或选择时自己喜欢的那一类风格。

1.javascript对类的支持

在其它语言中 ,类的实例都要通过构造函数new出来。作为一个刻意模仿java的语言。javascript存在new操作符,并且所有函数都可以作为构造器。构造函数与普通的方法没有什么区别。浏览器为了构建它繁花似锦的生态圈,比如Node,Element,HTMLElement,HTMLParagraphElement,显然使用继承关系方便一些方法或属性的共享,于是javascript从其它语言借鉴了原型这种机制。Prototype作为一个特殊的对象属性存在于每一个函数上。当一个函数通过new操作符new出其“孩子”——“实例”,这个名为实例的对象就拥有这个函数的Prototype对象所有的一切成员,从而实现实现所有实例对象都共享一组方法或属性。而javascript所谓的“类”就是通过修改这个Prototype对象,以区别原生对象及其其它定义的“类”。在浏览器中,node这个类基于Object修改而来的,而Element则是基于Node,而HTMLElement又基于Element....相对我们的工作业务,我们可以创建自己的类来实现重用与共享。

function A(){ } A.prototype = { aa:"aa", method:function(){ } }; var a = new A; var b = new A; console.log(a.aa === b.aa); console.log(a.method === b.method)

一般地,我们把定义在原型上的方法叫原型方法,它为所有的实例所共享,这有好也有不好,为了实现差异化,javascript允许我们直接在构造器内指定其方法,这叫特权方法。如果是属性,就叫特权属性。它们每一个实例一个副本,各不影响。因此,我们通常把共享用于操作数据的方法放在原型,把私有的属性放在特权属性中。但放于this上,还是让人任意访问到,那就放在函数体内的作用域内吧。这时它就成为名副其实的私有属性。

function A() { var count = 0; this.aa = "aa"; this.method = function() { return count; } this.obj = {} } A.prototype = { aa:"aa", method:function(){ } }; var a = new A; var b = new A; console.log(a.aa === b.aa);//true 由于aa的值为基本类型,比较值 console.log(a.obj === b.obj) //false 引用类型,每次进入函数体都要重新创建,因此都不一样。 console.log(a.method === b.method); //false

特权方法或属性只是只是遮住原型的方法或属性,因此只要删掉特权方法,就能方法到同名的原型方法或属性。

delete a.method; delete b.method; console.log(a.method === A.prototype.method);//true console.log(a.method === b.method); //true

用java的语言来说,原型方法与特权方法都属性实例方法,在java中还有一种叫类方法与类属性的东西。它们用javascript来模拟也非常简单,直接定义在函数上就行了。

A.method2 = function(){} //类方法 var c = new A; console.log(c.method2); //undefined

接下来,我们看下继承的实现,上面说过,Prototype上有什么东西,它的实例就有什么东西,不论这个属性是后来添加的,还是整个Prototype都置换上去的。如果我们将这个prototype对象置换为另一个类的原型,那么它就轻而易举的获得那个类的所有原型成员。

function A() {}; A.prototype = { aaa : 1 } function B() {}; B.prototype = A.prototype; var b = new B; console.log(b.aaa); //=> 1; A.prototype.bb = 2; console.log(b.bb) //=> 2;

由于是引用着同一个对象,这意味这,我们修改A类的原型,也等同于修该了B类的原型。因此,我们不能把一个对象赋值给两个类。这有两种办法,

方法1:通过for in 把父类的原型成员逐一赋给子类的原型
方法2是:子类的原型不是直接由父类获得,先将父类的原型赋值给一个函数,然后将这个函数的实例作为子类的原型。

方法一,我们通常要实现mixin这样的方法,有的书称之为拷贝继承,好处就是简单直接,坏处就是无法通过instanceof验证。Prototype.js的extend方法就用来干这事。

function extend (des, source) { //des = destination for (var property in source) des[property] = source[property]; return des; }

方法二,就在原型上动脑筋,因此称之为原型继承。下面是个范本

function A() {}; A.prototype = { aa:function(){ alert(1) } } function bridge() { }; bridge.prototype = A.prototype; function B() {} B.prototype = new bridge(); var a = new A; var b = new B; console.log(a == b) //false 证明成功分开原型 console.log(A.prototype == B.prototype) //true 子类共享父类的原型方法 console.log(a.aa === b.aa); //为父类动态添加新的方法 A.prototype.bb = function () { alert(2) } //true,继承父类的方法 B.prototype.cc = function (){ alert(3) } //false 父类未必有子类的new实例 console.log(a.cc === b.cc) //并且它能够正常通过javascript自带的验证机制instanceof console.log(b instanceof A) ;//true console.log(b instanceof B) ; //true

方法二能通过instanceof验证,es5就内置了这种方法来实现原型继承,它就是Object.create,如果不考虑第二个参数,它约等于下面的代码。

Object.create = function (o) { function F() {} F.prototype = o; return new F(); }

上面的方法,要求传入一个父类的原型作为参数,然后返回子类的原型

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgdffy.html