js中有关类、对象的增强函数

javascript中继承的实现

基础实现

function Range(from,to){
    this.from =from;
    this.to =to;
}
Range.prototype = {
    includes:function(x){
        return this.from<=x &&this.to >=x;
    },
    foreach:function(f){
        for(var x = Math.ceil(this.from);x<=this.to;x++){
            f(x);
        }
    },
    toString:function(){
        return "("+this.from+"..."+this.to+")";
    }
}
var r= new Range(1,3);
console.log(r.includes(2));
// 可以借鉴下面这种用法
r.foreach(alert); // 弹出三次
console.log(r.toString());

线上链接

寄生组合继承

function SuperType() {
    this.property = true;
}
SuperType.prototype.superMethod = function () {
}

function LowType() {
    SuperType.call(this);
    this.lowProperty = true;
}
function inheritPrototype(subType, superType) {
    var prototype1 = object(superType.prototype);
    prototype1.constructor = subType;
    subType.prototype = prototype1;
}
inheritPrototype(LowType, SuperType);
LowType.prototype.lowMethod = function () {
};
var lowType = new LowType();

线上链接。线上链接主要讲最后一个例子，寄生组合继承，其实这里命名，在我后来都没遇到

还有，如果实例对应的类原型的引用变化了，这个实例指向的原型会变吗？不会的。

最优雅的写法

/* @article https://johnresig.com/blog/simple-javascript-inheritance/
 * Simple JavaScript Inheritance
 * By John Resig http://ejohn.org/
 * MIT Licensed.
 */

// Inspired by base2 and Prototype
(function () {
    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
    Class.extend = function (prop) {
        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
            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 = _super[name];

                            // The method only need to be bound temporarily, so we
                            // remove it when we're done executing
                            var ret = fn.apply(this, arguments);
                            this._super = tmp;
                            return ret;
                        };
                    })(name, prop[name]) :
                    prop[name];
        }

        // The dummy class constructor
        function Class() {
            // All construction is actually done in the init method
            if (!initializing && this.init)
                this.init.apply(this, arguments);
        }

        // Populate our constructed prototype object
        Class.prototype = prototype;
        // Enforce the constructor to be what we expect
        Class.prototype.constructor = Class;
        // And make this class extendable
        Class.extend = arguments.callee;
        return Class;
    };
})();

线上链接。这个继承是大牛写的，是我见过最简洁写法了，但是在工作中，一直没看到有人在子类方法内，要用到父类方法，直接使用this._super方法，还有init方法construction，也只会调用一次。继承中构造函数保持在原型链中。这个实现不支持继承静态方法，但以后如果有需求，我会尽量用这个方法。

最繁重的写法

var Class = (function () {
    // Class
    // -----------------
    // Thanks to:
    //  - http://mootools.net/docs/core/Class/Class
    //  - http://ejohn.org/blog/simple-javascript-inheritance/
    //  - https://github.com/ded/klass
    //  - http://documentcloud.github.com/backbone/#Model-extend
    //  - https://github.com/joyent/node/blob/master/lib/util.js
    //  - https://github.com/kissyteam/kissy/blob/master/src/seed/src/kissy.js

    // The base Class implementation.
    function Class(o) {
        // Convert existed function to Class.
        if (!(this instanceof Class) && isFunction(o)) {
            return classify(o)
        }
    }

    // Create a new Class.
    //
    //  var SuperPig = Class.create({
    //    Extends: Animal,
    //    Implements: Flyable,
    //    initialize: function() {
    //      SuperPig.superclass.initialize.apply(this, arguments)
    //    },
    //    Statics: {
    //      COLOR: 'red'
    //    }
    // })
    //
    Class.create = function (parent, properties) {
        if (!isFunction(parent)) {
            properties = parent
            parent = null
        }

        properties || (properties = {})
        parent || (parent = properties.Extends || Class)
        properties.Extends = parent

        // The created class constructor
        function SubClass() {
            // Call the parent constructor.
            parent.apply(this, arguments)

            // Only call initialize in self constructor.
            if (this.constructor === SubClass && this.initialize) {
                this.initialize.apply(this, arguments)
            }
        }

        // Inherit class (static) properties from parent.
        if (parent !== Class) {
            mix(SubClass, parent, parent.StaticsWhiteList)
        }

        // Add instance properties to the subclass.
        implement.call(SubClass, properties)

        // Make subclass extendable.
        return classify(SubClass)
    }

    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

        return Class.create(properties)
    }

    function classify(cls) {
        cls.extend = Class.extend
        cls.implement = implement
        return cls
    }

    // Mutators define special properties.
    Class.Mutators = {

        'Extends': function (parent) {
            var existed = this.prototype
            var proto = createProto(parent.prototype)

            // Keep existed properties.
            mix(proto, existed)

            // Enforce the constructor to be what we expect.
            proto.constructor = this

            // Set the prototype chain to inherit from `parent`.
            this.prototype = proto

            // Set a convenience property in case the parent's prototype is
            // needed later.
            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() {
    }

    // See: http://jsperf.com/object-create-vs-new-ctor
    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
            }

    return Class
})()

线上链接。这个继承是功能最全面的，包括类实现里，怎么实现静态方法，但是它的语法糖太多了，Extends、Implements、Statics、initialize，继承中的构造函数提出来，放在当前类的构造函数中执行，new初始化时的钩子，是initialize，只会调用一次，继承中initialize也可以调用。

brix里的实现

// http://g.alicdn.com/thx/brix-release/1.0.0-beta.9/brix-base/dist/base-debug.js

var _ = {}
var toString = Object.prototype.toString

_.each = function (obj, iterator, context) {
    if (obj === null || obj === undefined) return obj
    if (obj.forEach) {
        obj.forEach(iterator, context);
    } else if (obj.length === +obj.length) {
        for (var i = 0, length = obj.length; i < length; i++) {
            iterator.call(context, obj[i], i, obj)
        }
    } else {
        for (var prop in obj) {
            iterator.call(context, obj[prop], prop, obj)
        }
    }
    return obj
}

_.each('Boolean Number String Function Array Date RegExp Object Error'.split(' '), function (name) {
    _['is' + name] = function (obj) {
        return toString.call(obj) == '[object ' + name + ']'
    }
})
_.extend = function () {
    var target = arguments[0]
    var index = 1
    var length = arguments.length
    var deep = false
    var options, name, src, copy, clone

    if (typeof target === "boolean") {
        deep = target
        target = arguments[index] || {}
        index++
    }

    if (typeof target !== "object" && typeof target !== "function") {
        target = {}
    }

    if (length === 1) {
        target = this
        index = 0
    }

    for (; index < length; index++) {
        options = arguments[index]
        if (!options) continue

        for (name in options) {
            src = target[name]
            copy = options[name]

            if (target === copy) continue
            if (copy === undefined) continue

            if (deep && (_.isArray(copy) || _.isObject(copy))) {
                if (_.isArray(copy)) clone = src && _.isArray(src) ? src : []
                if (_.isObject(copy)) clone = src && _.isObject(src) ? src : {}

                target[name] = _.extend(deep, clone, copy)
            } else {
                target[name] = copy
            }
        }
    }

    return target
}

/*
 This function is loosely inspired by Backbone.js.
 http://backbonejs.org
 */
function extend(protoProps, staticProps) {
    var parent = this

    // 构造函数 Initialize constructor
    var constructor = protoProps && protoProps.hasOwnProperty('constructor') ?
            protoProps.constructor : // 自定义构造函数 Custom constructor
            parent // 父类构造函数 Base constructor

    // 子类 Subclass
    var child = function () {
        parent.__x_created_with = child.__x_created_with
        var instance = constructor.apply(this, arguments) || this

        // instance.options vs parameter options
        var options = arguments[0]
        if (options && !instance.hasOwnProperty('options')) {
            instance.options = _.extend(true, {}, this.options, options)
        }

        // 如果模块带有 __x_created_with，则一切初始化行为都交给第三方；否则调用 .create() 方法。
        // If the child module has a property named as __x_created_with, the third-library will be response for the rest of initialization actions.
        // If not, the child module will call the `.create()`.
        if (!child.__x_created_with && instance.created && instance.constructor === child) {
            instance.created.apply(instance, instance.created.length ? [instance.options] : []) // @edit
        }

        return instance
    }

    // 静态属性 Static properties
    _.extend(child, parent, staticProps)

    // 原型链 Build prototype chain.
    var Surrogate = function () {
//      this.constructor = constructor // @remove
    }
    Surrogate.prototype = parent.prototype
    child.prototype = new Surrogate()
    child.prototype.constructor = child // @add

    // 原型属性 Copy prototype properties from the parameter protoProps to the prototype of child
    if (protoProps) _.extend(child.prototype, protoProps)

    // Add keyword __super__
    child.__super__ = parent.prototype

    child.extend = extend

    return child
}

function Brix() {
}
Brix.prototype = {
    created: function () {
        if (this.init) this.init()
        if (this.render) this.render()
    },
    constructor: Brix // @add
}
Brix.extend = extend

是Brix Base里关于继承的实现，因为为了支持框架Brix Loader，所以继承里做了特殊处理，比如options参数，比如__x_created_with，继承中的构造函数提出来，放在当前类的构造函数中执行，new时初始化钩子，是created方法调用init、render，所以初始化语句可以放在init、render，按正常结果只调用一次，但这里调用了两次，重复了。

magix里实现

magix中View如何实现继承？也是类似brix，但它不包含任何语法糖，new初始化钩子，是

View.extend = function(props, statics, ctor) {

第三个参数ctor是初始化钩子，这里会多次调用

总结

为了实现类似Person.extend能生成新类，extend要向封装传入原型上方法，父类，静态方法，每次执行extend时要定义新类的构造函数。返回的新类也能extend再生成子类。

封装内，将父类的构造函数和原型拆分。新类的构造函数执行父类的构造函数，新类的原型指向Object.create(父类的原型)。构造函数在实例化时才执行，原型链实现，在实现继承时就执行。

新类的构造函数中执行父类的构造函数，父类的构造函数再执行祖先的构造函数...，直到最顶层。最顶层构造函数可自由实现。在simple-inherit中是封装外面的Class，在brix中是首次直接赋值了extend方法的类。complex-inherit中，是由Class.create传入的。

实例化类的时候，要自动执行初始化的操作，正常是在构造函数中实现的，extend封装里的构造函数是统一写死的，无法自由做一些初始化，要在构造函数里提供个钩子，构造函数执行这个钩子函数，钩子函数，在定义新类的时候传入，也就是Person.extend时传入。

钩子一般是定义在原型上的某方法，比如initialize方法，因为构造函数里是调父类的构造函数，一直到最顶层基类，也要多次执行构造函数内钩子吗？钩子是这样执行的this.initialize.apply(this, arguments)，this在每次执行时都不变的，也没必要多次执行，只要执行一次即可。并且只执行原型链中，第一个有钩子方法的原型，剩下的都不执行了。

实现原型链继承时，要注意原型的constructor属性，为了子类方法能调父类方法，给每个类加个superclass属性，指向父类的原型对象。

mix

	// https://g.alicdn.com/mm/pubplus/0.4.12/app_debug/exts/arale/class.js
    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]
          }
        }
      }
    }

extend在库里实现

underscore

将后面对象的自有可枚举属性，拷贝到第一个对象，并返回第一个对象

  // http://g.alicdn.com/thx/brix-release/1.0.0-beta.9/underscore/underscore.js
  // Extend a given object with all the properties in passed-in object(s).
  _.extend = function(obj) {
    if (!_.isObject(obj)) return obj;
    var source, prop;
    for (var i = 1, length = arguments.length; i < length; i++) {
      source = arguments[i];
      for (prop in source) {
        if (hasOwnProperty.call(source, prop)) {
            obj[prop] = source[prop];
        }
      }
    }
    return obj;
  };

jquery

支持深度拷贝，深拷贝除了支持对象还包括数组，改变第一个对象，并返回第一个对象

// http://g.alicdn.com/thx/brix-release/1.0.0-beta.9/jquery/dist/jquery.js
jQuery.extend = jQuery.fn.extend = function() {
	var src, copyIsArray, copy, name, options, clone,
		target = arguments[ 0 ] || {},
		i = 1,
		length = arguments.length,
		deep = false;

	// Handle a deep copy situation
	if ( typeof target === "boolean" ) {
		deep = target;

		// skip the boolean and the target
		target = arguments[ i ] || {};
		i++;
	}

	// Handle case when target is a string or something (possible in deep copy)
	if ( typeof target !== "object" && !jQuery.isFunction( target ) ) {
		target = {};
	}

	// extend jQuery itself if only one argument is passed
	if ( i === length ) {
		target = this;
		i--;
	}

	for ( ; i < length; i++ ) {

		// Only deal with non-null/undefined values
		if ( ( options = arguments[ i ] ) != null ) {

			// Extend the base object
			for ( name in options ) {
				src = target[ name ];
				copy = options[ name ];

				// Prevent never-ending loop
				if ( target === copy ) {
					continue;
				}

				// Recurse if we're merging plain objects or arrays
				if ( deep && copy && ( jQuery.isPlainObject( copy ) ||
					( copyIsArray = jQuery.isArray( copy ) ) ) ) {

					if ( copyIsArray ) {
						copyIsArray = false;
						clone = src && jQuery.isArray( src ) ? src : [];

					} else {
						clone = src && jQuery.isPlainObject( src ) ? src : {};
					}

					// Never move original objects, clone them
					target[ name ] = jQuery.extend( deep, clone, copy );

				// Don't bring in undefined values
				} else if ( copy !== undefined ) {
					target[ name ] = copy;
				}
			}
		}
	}

	// Return the modified object
	return target;
};

kissy1.3中有关对象的方法

mix

改变并返回第一个参数，下面实现方法中MIX_CIRCULAR_DETECTION标记，感觉是为了调试，看deep了几次

/*
 * for example:
 *     @example
 *     var t = {};
 *     S.mix({x: {y: 2, z: 4}}, {x: {y: 3, a: t}}, {deep: TRUE}) => {x: {y: 3, z: 4, a: {}}}, a !== t
 *     S.mix({x: {y: 2, z: 4}}, {x: {y: 3, a: t}}, {deep: TRUE, overwrite: false}) => {x: {y: 2, z: 4, a: {}}}, a !== t
 *     S.mix({x: {y: 2, z: 4}}, {x: {y: 3, a: t}}, 1) => {x: {y: 3, a: t}}
 */
mix: function (r, s, ov, wl, deep) {
    if (typeof ov === 'object') {
        wl = ov['whitelist'];
        deep = ov['deep'];
        ov = ov['overwrite'];
    }
    var cache = [],
            c,
            i = 0;
    mixInternal(r, s, ov, wl, deep, cache);
    while (c = cache[i++]) {
        delete c[MIX_CIRCULAR_DETECTION];
    }
    return r;
}

function mixInternal(r, s, ov, wl, deep, cache) {
    if (!s || !r) {
        return r;
    }

    if (ov === undefined) {
        ov = TRUE;
    }

    var i = 0, p, keys, len;

    // 记录循环标志
    s[MIX_CIRCULAR_DETECTION] = r;

    // 记录被记录了循环标志的对像
    cache.push(s);

    if (wl) {
        len = wl.length;
        for (i = 0; i < len; i++) {
            p = wl[i];
            if (p in s) {
                _mix(p, r, s, ov, wl, deep, cache);
            }
        }
    } else {
        // mix all properties
        keys = S.keys(s);
        len = keys.length;
        for (i = 0; i < len; i++) {
            p = keys[i];
            if (p != MIX_CIRCULAR_DETECTION) {
                // no hasOwnProperty judge!
                _mix(p, r, s, ov, wl, deep, cache);
            }
        }
    }

    return r;
}

function _mix(p, r, s, ov, wl, deep, cache) {
    // 要求覆盖
    // 或者目的不存在
    // 或者深度mix
    if (ov || !(p in r) || deep) {
        var target = r[p],
                src = s[p];
        // prevent never-end loop
        if (target === src) {
            // S.mix({},{x:undefined})
            if (target === undefined) {
                r[p] = target;
            }
            return;
        }
        // 来源是数组和对象，并且要求深度 mix
        if (deep && src && (S.isArray(src) || S.isPlainObject(src))) {
            if (src[MIX_CIRCULAR_DETECTION]) {
                r[p] = src[MIX_CIRCULAR_DETECTION];
            } else {
                // 目标值为对象或数组，直接 mix
                // 否则 新建一个和源值类型一样的空数组/对象，递归 mix
                var clone = target && (S.isArray(target) || S.isPlainObject(target)) ?
                        target :
                        (S.isArray(src) ? [] : {});
                r[p] = clone;
                mixInternal(clone, src, ov, wl, TRUE, cache);
            }
        } else if (src !== undefined && (ov || !(p in r))) {
            r[p] = src;
        }
    }
}

merge

合并所有obj到返回新

merge: function (var_args) {
    var_args = S.makeArray(arguments);
    var o = {},
        i,
        l = var_args.length;
    for (i = 0; i < l; i++) {
        S.mix(o, var_args[i]);
    }
    return o;
},

augment

只对原型对象进行复制，改变并返回第一个参数

augment: function (r, var_args) {
    var args = S.makeArray(arguments),
        len = args.length - 2,
        i = 1,
        ov = args[len],
        wl = args[len + 1];

    if (!S.isArray(wl)) {
        ov = wl;
        wl = undefined;
        len++;
    }
    if (!S.isBoolean(ov)) {
        ov = undefined;
        len++;
    }

    for (; i < len; i++) {
        S.mix(r.prototype, args[i].prototype || args[i], ov, wl);
    }

    return r;
},

extend

继承的实现，跟上面封装的继承相比，还是有缺点的，首先新类的构造函数执行时候，父类的构造函数不会自动执行，总觉得superclass的指向的原型，中间多了一层

extend: function (r, s, px, sx) {
    if (!s || !r) {
        return r;
    }

    var sp = s.prototype,
        rp;

    // add prototype chain
    rp = createObject(sp, r);
    r.prototype = S.mix(rp, r.prototype);
    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;
},

function Empty() {
}
function createObject(proto, constructor) {
    var newProto;
    if (ObjectCreate) {
        newProto = ObjectCreate(proto);
    } else {
        Empty.prototype = proto;
        newProto = new Empty();
    }
    newProto.constructor = constructor;
    return newProto;
}

更多例子以及在例子中，我对继承的摸索http://sprying.github.io/webtest/class/index.html