javascript oo实现（转）-白红宇

文章目录

很久很久以前，我还是个phper，第一次接触javascript觉得好神奇。跟传统的oo类概念差别很大。记得刚毕业面试，如何在 javascript里面实现class一直是很热门的面试题，当前面试百度就被问到了，当年作为一个小白只是网上随便搜搜应付了下。= =现在发现当时知道的还是太少太少。今天整理了下javascript的oo实现，发现知道的越多，越发现知识真是无穷无尽。

原始时代最简单的oo实现

javascript虽然没有class的概念，但是它的函数却是可以new出来一个对象的。所以一个最简单的class就可以用function来模拟出来。

123456789

function Animal(name){    this.name = name;    this.run = function(){ console.log(this.name + "is running!!"); } } var pet = new Animal("pet"); pet.run();//petis running!!

这样 pet就有了属性，有了方法，不过这种写法毫无继承性，扩展性。比如我们要实现个dog类，只能把属性方法再写一遍。而且每个new出来的对象都有自己的方法，造成资源浪费。

在javascript里面有个原型链的概念，每一个函数都有一个prototype对象属性。这样通过这个函数new出来的对象会自动具有__proto__属性指向函数的prototype对象。说白了所有的实例对象都会共用一个prototype对象，并且调用一个属性或者方法时在自己上面找不到，就会找__proto__对象有没有，之后一直往上追溯一直到找到为止。具体表现为：

12345678910111213141516

function Animal(name){    this.name = name;}Animal.prototype.run = function(){    console.log(this.name + "is running!!"); } var a = new Animal("a"); var b = new Animal("b"); console.log(Animal.prototype) //Animal {} console.log(Animal.prototype instanceof Object) //true prototype是个对象 console.log(Animal.prototype.constructor == Animal)//true console.log(a.__proto__ == Animal.prototype) //true __proto__在new的时候会自动加载在实例对象上。在现代浏览器里可以看到 console.log(b.__proto__ == Animal.prototype) //true console.log(a.__proto__.__proto__) //Object {} 最后会找到最上面的boject对象 console.log(a.__proto__.run == a.run) //true console.log(a.__proto__.run == a.prototype.run) //true

所以，在prototype对象上定义的方法会被所有实例共享，这不就是复用吗？

于是有了基于原型链的继承的写法：

12345678910111213

function Animal(name){    this.name = name;}Animal.prototype.run = function(){ console.log(this.name + "is running!!"); } function Dog(name){ //调用父类的构造函数，通过改变this指向将属性赋值到新的实例对象 Animal.call(this,name); } Dog.prototype = new Animal(); var dog = new Dog("dog"); dog.run();//dog is running!!

可以看到我们将Animal的实例对象暂且叫做a，作为 Dog的prototype，这样 Dog的实例对象dog的__proto__指向Dog的prototype也就是a,a的__proto__再指向Animal的prototype对象，这个对象上有run方法。于是我们调用dog.run()的时候会一层层的往上追溯一直找到run方法执行。于是通过原型链我们就让 Dog继承了Animal的方法run。

需要注意的是，如果在子类的prototype对象上也有run方法，就会覆盖父类的，因为查找时在自己上面就找到了，就不会向上回溯了。

上面是原型链方法的继承。而属性我们则是通过调用父类的构造函数来赋值的。因为属性不能所有的实例都公用，应该每个人都有自己的一份，所以不能放在原型上。

上面就是原始时代最简单的类继承了。

石器时代的oo实现

这个时代javascript变得比较重要了，作为非常有用的特性，oo开始被很多人研究。

首先上面的那种简单oo实现方式，其实是有很多问题的。

1.没有实现传统oo该有的super方法来调用父类方法。

作为oo，怎么能没有super呢。作为我们前端界宗师一般的人物。Douglas 有一篇经典。不过貌似有很多问题。国内的玉伯分析过。在

最后Douglas总结出来：

我编写 JavaScript 已经 8 个年头了，从来没有一次觉得需要使用 uber 方法。在类模式中，super 的概念相当重要；但是在原型和函数式模式中，super 的概念看起来是不必要的。现在回顾起来，我早期在 JavaScript 中支持类模型的尝试是一个错误。

2.直接将父类实例作为子类的原型，简单粗暴造成多余的原型属性。还有construct的问题。

这个问题主要是之前代码里面这一句造成的：

123	Dog.prototype = new Animal();//var dog = new Dog("dog");//console.log(dog.__proto__) Animal { name: undefined}

执行new Animal()就会执行animal的构造函数，就会在Dog.prototype生成多余的属性值，这边是name。而一般属性值为了复用是不能放在原型对象上的。并且由于dog有自己的name属性，原型上的是多余的。

还有construct的问题。

12	console.log(dog.constructor == Animal) //trueconsole.log(dog.constructor == Dog) //false

显然这不是我们希望看到的。

所以我们要对上面做些改良：

1234	var F = function(){};F.prototype = Animal.prototype;Dog.prototype = new F()； Dog.prototype.constructor = Dog;

我们可以封装下：

123456789

function objCreate(prototype){    var F = function(){}; F.prototype = prototype; return new F(); } function inherit(subclass,parentclass){ subclass.prototype = objCreate(parentclass.prototype); subclass.prototype.constructor = subclass; }

于是继承可以写成：

12345678910111213

function Animal(name){    this.name = name;}Animal.prototype.run = function(){ console.log(this.name + "is running!!"); } function Dog(name){ //调用父类的构造函数，通过改变this指向将属性赋值到新的实例对象 Animal.call(this,name); } inherit(Dog,Animal); var dog = new Dog("dog"); dog.run();//dog is running!!

当年大学毕业面试，也就到这个程度了。 = =

工业时代的oo实现

这个时代，各种javascript类库像雨后春笋般涌现了出来。

上面最后给出的方案，使用起来还是很不便，比如需要自己手动维护在构造函数里调用父类构造函数。同时继承写法对不了接原理的比较容易出错。

这个时候涌现了一大堆的类库的实现：

1.首先有些类库决定跳出传统oo的思维。不一定非要实现传统oo的继承。归根到底我们是为了复用。于是出现了很多轻量级的复用方式。

比如jquery的extend：

还有kissy的mix：

还有kissy的argument：

还有很多很多，说白了都是对象级别上的混入达到复用的地步。大部分情况下已经足够了。

2.当然还是有人对类的继承有需求的。

下面我们看下kissy的extend的实现方式。其他类库实现方式类似，kissy的我觉得算是比较有代表性了。为了演示，做了些小修改。

1234567891011121314151617181920212223242526272829303132333435363738394041424344

//这个就是我们之前实现的方法，为了演示做了些改动主要是处理了construct的问题function objCreate(prototype，construct){    var F = function(){}; F.prototype = prototype; var newPro = new F(); newPro.construct = construct;//维护构造函数的改变 return newPro; } //mix是个辅助方法，这边给个最简单的实现，其实kissy里面的复杂的多。这边不考虑深度遍历等等，只是最简单的实现。 function mix(r, s) { for (var p in s) { if (s.hasOwnProperty(p)) { r[p] = s[p] } } } //下面是kissy的实现r代表子类 s代表父类，px代表最后会混入子类原型上的属性，sx代表会混入子类函数上面的属性，也就是可以当做静态方法。 //http://docs.kissyui.com/1.3/docs/html/api/seed/kissy/extend.html?highlight=extend#seed.KISSY.extend function extend (r, s, px, sx) { if (!s || !r) { return r; } var sp = s.prototype, rp; //针对父类生成一个原型。跟之前我们写的一致 rp = createObject(sp, r); //不是简单的直接复制原型对象，而是先把以前原型的方法跟要继承的合并之后再一起赋值 r.prototype = S.mix(rp, r.prototype); //为子类增加superclass属性，指向一个父类对象，这样就可以调用父类的方法了。这边是实现比较巧妙的地方 r.superclass = createObject(sp, s); //下面就是往原型还有函数上混入方法了 // add prototype overrides if (px) { S.mix(rp, px); } // add object overrides if (sx) { S.mix(r, sx); } return r; }

有了kissy的extend我们可以这么用：

1234567891011121314151617181920

function Animal(name){    this.name = name;}Animal.prototype.run = function(){ console.log(this.name + "is running!!"); } function Dog(name){ //Animal.call(this,name); //因为kissy的封装 这边可以这么用 Dog.superclass.construct.call(this,name); } extend(Dog,Animal,{ wang:function(){ console.log("wang wang!!") } }) var dog = new Dog("dog"); dog.run();//dog is running!! dog.wang();//wang wang!!

相对之前的变得清晰了很多，也更易用了。

现代科技时代的oo实现

前面的写法，目前虽然还是有很多人用，不过也渐渐过时了。上面的写法还是不够清晰，定义属性，方法都很分散，也没有多继承，等特性。我们需要像传统oo一样具有一个类工厂，可以生成一个类，属性都定义在里面。同时具有继承的方法。

而随着javascript成为前端唯一的语言，一代代大神前仆后继。终于开始涌现出了各种神奇的写法，下面罗列下一些我觉得特别好的实现，加上原理注释。

John Resig的实现方式

作为jquery的作者。John Resig在博客里记录了一种class的实现，原文

调用方法：

1234567891011121314151617181920212223242526272829303132

var Person = Class.extend({  init: function(isDancing){    this.dancing = isDancing;  },  dance: function(){ return this.dancing; } }); var Ninja = Person.extend({ init: function(){ this._super( false ); }, dance: function(){ // Call the inherited version of dance() return this._super(); }, swingSword: function(){ return true; } }); var p = new Person(true); p.dance(); // => true var n = new Ninja(); n.dance(); // => false n.swingSword(); // => true // Should all be true p instanceof Person && p instanceof Class && n instanceof Ninja && n instanceof Person && n instanceof Class

源码解读：

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576

/* Simple JavaScript Inheritance * By John Resig http://ejohn.org/ * MIT Licensed. */// Inspired by base2 and Prototype(function(){  //initializing是为了解决我们之前说的继承导致原型有多余参数的问题。当我们直接将父类的实例赋值给子类原型时。是会调用一次父类的构造函数的。所以这边会把真正的构造流程放到init函数里面，通过initializing来表示当前是不是处于构造原型阶段，为true的话就不会调用init。 //fnTest用来匹配代码里面有没有使用super关键字。对于一些浏览器`function(){xyz;}`会生成个字符串，并且会把里面的代码弄出来，有的浏览器就不会。`/xyz/.test(function(){xyz;})`为true代表浏览器支持看到函数的内部代码，所以用`/\b_super\b/`来匹配。如果不行，就不管三七二十一。所有的函数都算有super关键字，于是就是个必定匹配的正则。 var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/; // The base Class implementation (does nothing) // 超级父类 this.Class = function(){}; // Create a new Class that inherits from this class // 生成一个类，这个类会具有extend方法用于继续继承下去 Class.extend = function(prop) { //保留当前类，一般是父类的原型 //this指向父类。初次时指向Class超级父类 var _super = this.prototype; // Instantiate a base class (but only create the instance, // don't run the init constructor) //开关 用来使原型赋值时不调用真正的构成流程 initializing = true; var prototype = new this(); initializing = false; // Copy the properties over onto the new prototype for (var name in prop) { // Check if we're overwriting an existing function //这边其实就是很简单的将prop的属性混入到子类的原型上。如果是函数我们就要做一些特殊处理 prototype[name] = typeof prop[name] == "function" && typeof _super[name] == "function" && fnTest.test(prop[name]) ? (function(name, fn){ //通过闭包，返回一个新的操作函数.在外面包一层，这样我们可以做些额外的处理 return function() { var tmp = this._super; // Add a new ._super() method that is the same method // but on the super-class // 调用一个函数时，会给this注入一个_super方法用来调用父类的同名方法 this._super = _super[name]; // The method only need to be bound temporarily, so we // remove it when we're done executing //因为上面的赋值，是的这边的fn里面可以通过_super调用到父类同名方法 var ret = fn.apply(this, arguments); //离开时 保存现场环境，恢复值。 this._super = tmp; return ret; }; })(name, prop[name]) : prop[name]; } // 这边是返回的类，其实就是我们返回的子类 function Class() { // All construction is actually done in the init method if ( !initializing && this.init ) this.init.apply(this, arguments); } // 赋值原型链，完成继承 Class.prototype = prototype; // 改变constructor引用 Class.prototype.constructor = Class; // 为子类也添加extend方法 Class.extend = arguments.callee; return Class; }; })();

相当简单高效的实现方式，super的实现方式非常亮

P.js的实现

源地址：

pjs的一大亮点是支持私有属性，他的类工厂传递的是函数不是对象。

调用方式：

123456789101112131415161718192021222324252627282930313233

//可以生成一个可继承的对象，P接收一个函数，这个函数会传入生成后的class的原型。var Animal = P(function(animal) {  animal.init = function(name) { this.name = name; }; animal.move = function(meters) { console.log(this.name+" moved "+meters+"m."); } }); //继承Animal。后面的snake，animal分别是前面Snake和Animal的原型。程序直接把这些对象暴露给你了。于是灵活度很高。 var Snake = P(Animal, function(snake, animal) { snake.move = function() { console.log("Slithering..."); animal.move.call(this, 5); }; }); var Horse = P(Animal, function(horse, animal) { //真正的私有属性，外面没法调用到 var test = "hello world"; horse.move = function() { console.log(test); console.log("Galloping..."); //调用父类的方法，so easy！！ animal.move.call(this, 45); }; }); //工厂方式生成对象，可以不用new var sam = Snake("Sammy the Python") , tom = Horse("Tommy the Palomino") ; sam.move() tom.move()

源码解读：

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162

var P = (function(prototype, ownProperty, undefined) {  return function P(_superclass /* = Object */, definition) { // handle the case where no superclass is given if (definition === undefined) { definition = _superclass; _superclass = Object; } //最后返回的类就是这个，也就是我们需要的子类。这个类可以用new生成实例，也可以直接调用生成实例 function C() { //判断,是new的话this instanceof C就是true。否则我们自己手动new一下Bare。Bare就是为了实现这种类工厂的生成类的方式 var self = this instanceof C ? this : new Bare; self.init.apply(self, arguments); return self; } //这个就是用来实现不用new生成类的方式 function Bare() {} C.Bare = Bare; //将父类的原型赋值给Bare //这边prototype就是个字符串“prototype”变量，主要为了压缩字节少点，所以作者还单独传成变量进来 = = var _super = Bare[prototype] = _superclass[prototype]; //再生成这个空函数的实例赋值给C,Bare的原型，同时在C.p存下来 //这样C,Bare都公用一个原型 var proto = Bare[prototype] = C[prototype] = C.p = new Bare; var key; //改变constructor指向 proto.constructor = C; //上面几部其实还是实现的通用的继承实现方式，新建个空函数，将父类的原型赋给这个空函数再生成实例赋值给子类的原型。万变不离其宗。原理都一样 //增加extend方法。这是个语法糖，本质上还是调用P来实现，只不过第一个参数是调用者C C.extend = function(def) { return P(C, def); } //下面是最关键的地方，写的有点绕。这边分为这几步 //传入definition 执行 function（def）{} // 执行C.open = C // return C.open 其实就是 renturn C 返回最终的生成类 return (C.open = function(def) { if (typeof def === 'function') { // call the defining function with all the arguments you need // extensions captures the return value. //是函数的话就传入 一些属性包括子类原型，父类原型，子类构造函数，父类构造函数 def = def.call(C, proto, _super, C, _superclass); } // 如果是对象，就直接混入到原型 if (typeof def === 'object') { for (key in def) { if (ownProperty.call(def, key)) { proto[key] = def[key]; } } } //确保有init函数 if (!('init' in proto)) proto.init = _superclass; return C; })(definition); } })('prototype', ({}).hasOwnProperty);

阿拉蕾的实现方式

这是支付宝的库阿拉蕾的实现，我觉得是最不错的一种方式：

源地址：

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198

// The base Class implementation.function Class(o) {  //这个判断用来支持 将一个已有普通类转换成 阿拉蕾的类 if (!(this instanceof Class) && isFunction(o)) { //原理是给这个函数增加extend，implement方法 return classify(o) } } //用来支持 commonjs的模块规范。 module.exports = Class // Create a new Class. // // var SuperPig = Class.create({ // Extends: Animal, // Implements: Flyable, // initialize: function() { // SuperPig.superclass.initialize.apply(this, arguments) // }, // Statics: { // COLOR: 'red' // } // }) // // //用于创建一个类， //第一个参数可选，可以直接创建时就指定继承的父类。 //第二个参数也可选，用来表明需要混入的类属性。有三个特殊的属性为Extends,Implements,Statics.分别代表要继承的父类，需要混入原型的东西，还有静态属性。 Class.create = function(parent, properties) { //创建一个类时可以不指定要继承的父类。直接传入属性对象。 if (!isFunction(parent)) { properties = parent parent = null } properties || (properties = {}) //没有指定父类的话 就查看有没有Extends特殊属性，都没有的话就用Class作为父类 parent || (parent = properties.Extends || Class) properties.Extends = parent // 子类构造函数的定义 function SubClass() { // 自动帮忙调用父类的构造函数 parent.apply(this, arguments) // Only call initialize in self constructor. //真正的构造函数放在initialize里面 if (this.constructor === SubClass && this.initialize) { this.initialize.apply(this, arguments) } } // Inherit class (static) properties from parent. //parent为Class就没必要混入 if (parent !== Class) { //将父类里面的属性都混入到子类里面这边主要是静态属性 mix(SubClass, parent, parent.StaticsWhiteList) } // Add instance properties to the subclass. //调用implement将自定义的属性混入到子类原型里面。遇到特殊值会单独处理，真正的继承也是发生在这里面 //这边把属性也都弄到了原型上，因为这边每次create或者extend都会生成一个新的SubClass。所以倒也不会发生属性公用的问题。但是总感觉不大好 implement.call(SubClass, properties) // Make subclass extendable. //给生成的子类增加extend和implement方法，可以在类定义完后，再去继承，去混入其他属性。 return classify(SubClass) } //用于在类定义之后，往类里面添加方法。提供了之后修改类的可能。类似上面defjs实现的open函数。 function implement(properties) { var key, value for (key in properties) { value = properties[key] //发现属性是特殊的值时，调用对应的处理函数处理 if (Class.Mutators.hasOwnProperty(key)) { Class.Mutators[key].call(this, value) } else { this.prototype[key] = value } } } // Create a sub Class based on `Class`. Class.extend = function(properties) { properties || (properties = {}) //定义继承的对象是自己 properties.Extends = this //调用Class.create实现继承的流程 return Class.create(properties) } //给一个普通的函数 增加extend和implement方法。 function classify(cls) { cls.extend = Class.extend cls.implement = implement return cls } // 这里定义了一些特殊的属性，阿拉蕾遍历时发现key是这里面的一个时，会调用这里面的方法处理。 Class.Mutators = { //这个定义了继承的真正操作代码。 'Extends': function(parent) { //这边的this指向子类 var existed = this.prototype //生成一个中介原型，就是之前我们实现的objectCreat var proto = createProto(parent.prototype) //将子类原型有的方法混入到新的中介原型上 mix(proto, existed) // 改变构造函数指向子类 proto.constructor = this // 改变原型 完成继承 this.prototype = proto //为子类增加superclass属性，这样可以调用父类原型的方法。 this.superclass = parent.prototype }, //这个有点类似组合的概念，支持数组。将其他类的属性混入到子类原型上 'Implements': function(items) { isArray(items) || (items = [items]) var proto = this.prototype, item while (item = items.shift()) { mix(proto, item.prototype || item) } }, //传入静态属性 'Statics': function(staticProperties) { mix(this, staticProperties) } } // Shared empty constructor function to aid in prototype-chain creation. function Ctor() { } // 这个方法就是我们之前实现的objectCreat，用来使用一个中介者来处理原型的问题，当浏览器支持`__proto__`时可以直接使用。否则新建一个空函数再将父类的原型赋值给这个空函数，返回这个空函数的实例 var createProto = Object.__proto__ ? function(proto) { return { __proto__: proto } } : function(proto) { Ctor.prototype = proto return new Ctor() } // Helpers 下面都是些辅助方法，很简单就不说了 // ------------ function mix(r, s, wl) { // Copy "all" properties including inherited ones. for (var p in s) { //过滤掉原型链上面的属性 if (s.hasOwnProperty(p)) { if (wl && indexOf(wl, p) === -1) continue // 在 iPhone 1 代等设备的 Safari 中，prototype 也会被枚举出来，需排除 if (p !== 'prototype') { r[p] = s[p] } } } } var toString = Object.prototype.toString var isArray = Array.isArray || function(val) { return toString.call(val) === '[object Array]' } var isFunction = function(val) { return toString.call(val) === '[object Function]' } var indexOf = Array.prototype.indexOf ? function(arr, item) { return arr.indexOf(item) } : function(arr, item) { for (var i = 0, len = arr.length; i < len; i++) { if (arr[i] === item) { return i } } return -1 }

万变不离其宗，本质上还是我们之前的继承方式，只是在上面再封装一层，更加清晰，明白了。

还有很多很多的实现，这边就不一一列举了。

未来科技的oo实现

其实 es6已经开始重视emcsript的oo实现了。不过还没定案，就算定案了，也不知道嘛时候javascript会实现。再加上一大堆浏览器的跟进。不知道什么时候才能用的上。不过了解下最新的规范还是很有必要的。

目前nodejs里面已经实现了 inherite方法用来实现类继承，类似我们上面的那种实现。

而es6（harmony）实现了class关键字用来创建类，并且具有类该有的一系列方法。如下：

1234567891011121314151617181920212223242526272829303132333435363738394041424344

class Monster {  // The contextual keyword "constructor" followed by an argument  // list and a body defines the body of the class’s constructor  // function. public and private declarations in the constructor  // declare and initialize per-instance properties. Assignments  // such as "this.foo = bar;" also set public properties.  constructor(name, health) {    public name = name; private health = health; } // An identifier followed by an argument list and body defines a // method. A “method” here is simply a function property on some // object. attack(target) { log('The monster attacks ' + target); } // The contextual keyword "get" followed by an identifier and // a curly body defines a getter in the same way that "get" // defines one in an object literal. get isAlive() { return private(this).health > 0; } // Likewise, "set" can be used to define setters. set health(value) { if (value < 0) { throw new Error('Health must be non-negative.') } private(this).health = value } // After a "public" modifier, // an identifier optionally followed by "=" and an expression // declares a prototype property and initializes it to the value // of that expression. public numAttacks = 0; // After a "public" modifier, // the keyword "const" followed by an identifier and an // initializer declares a constant prototype property. public const attackMessage = 'The monster hits you!'; }

可以看到具有了传统oo里面的大部分关键字，私有属性也得到了支持。

继承也很容易：

class Base {}class Derived extends Base {} //Here, Derived.prototype will inherit from Base.prototype. let parent = {}; class Derived prototype parent {}

原文在这里：

结语

虽然es6已经实现了正规的class关键字。不过等到真正能用上也不知道是何年马月了。不过规范提供了方向，在es6还没出来之前，n多大神前仆后继实现了自己的class方式，分析源码可以学到的还是很多，仅仅一个类的实现就可以抠出这么多的类容，程序员还是应该多探索，不能只停留在表面。