javascript繼承一覽

標籤：

繼承是每一個javascript工具庫和架構都不可少的部分。來看看各大類庫的實現吧。

1,  prototype.1.7.1.js

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

 

2, 鼎鼎大名的jQuery.2.0.3

jQuery.extend = jQuery.fn.extend = function() {    var options, name, src, copy, copyIsArray, clone,        target = arguments[0] || {},        i = 1,        length = arguments.length,        deep = false;    // Handle a deep copy situation    if ( typeof target === "boolean" ) {        deep = target;        target = arguments[1] || {};        // skip the boolean and the target        i = 2;    }    // 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 ( length === i ) {        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;};

代碼多了這麼多，多了深拷貝和函數方式

3， underscore

 _.extend = function(obj) {    each(slice.call(arguments, 1), function(source) {      if (source) {        for (var prop in source) {          obj[prop] = source[prop];        }      }    });    return obj;  };

 

4，龐大的angular

function extend(dst) {  var h = dst.$$hashKey;  forEach(arguments, function(obj) {    if (obj !== dst) {      forEach(obj, function(value, key) {        dst[key] = value;      });    }  });  setHashKey(dst,h);  return dst;}

 

5, 第一個項目中使用的ligerUI

Function.prototype.ligerExtend = function (parent, overrides){    if (typeof parent != ‘function‘) return this;    //儲存對父類的引用    this.base = parent.prototype;    this.base.constructor = parent;    //繼承    var f = function () { };    f.prototype = parent.prototype;    this.prototype = new f();    this.prototype.constructor = this;    //附加屬性方法    if (overrides) $.extend(this.prototype, overrides);};

 

6, dojo

extend: function(ctor, props){            // summary:            //        Adds all properties and methods of props to constructor‘s            //        prototype, making them available to all instances created with            //        constructor.            // ctor: Object            //        Target constructor to extend.            // props: Object            //        One or more objects to mix into ctor.prototype            for(var i=1, l=arguments.length; i<l; i++){                lang._mixin(ctor.prototype, arguments[i]);            }            return ctor; // Object        },

_mixin: function(dest, source, copyFunc){            // summary:            //        Copies/adds all properties of source to dest; returns dest.            // dest: Object            //        The object to which to copy/add all properties contained in source.            // source: Object            //        The object from which to draw all properties to copy into dest.            // copyFunc: Function?            //        The process used to copy/add a property in source; defaults to the Javascript assignment operator.            // returns:            //        dest, as modified            // description:            //        All properties, including functions (sometimes termed "methods"), excluding any non-standard extensions            //        found in Object.prototype, are copied/added to dest. Copying/adding each particular property is            //        delegated to copyFunc (if any); copyFunc defaults to the Javascript assignment operator if not provided.            //        Notice that by default, _mixin executes a so-called "shallow copy" and aggregate types are copied/added by reference.            var name, s, i, empty = {};            for(name in source){                // the (!(name in empty) || empty[name] !== s) condition avoids copying properties in "source"                // inherited from Object.prototype.     For example, if dest has a custom toString() method,                // don‘t overwrite it with the toString() method that source inherited from Object.prototype                s = source[name];                if(!(name in dest) || (dest[name] !== s && (!(name in empty) || empty[name] !== s))){                    dest[name] = copyFunc ? copyFunc(s) : s;                }            }            if(has("bug-for-in-skips-shadowed")){                if(source){                    for(i = 0; i < _extraLen; ++i){                        name = _extraNames[i];                        s = source[name];                        if(!(name in dest) || (dest[name] !== s && (!(name in empty) || empty[name] !== s))){                            dest[name] = copyFunc ? copyFunc(s) : s;                        }                    }                }            }            return dest; // Object        },

 

除了5之外，基本上用到的是拷貝式繼承。簡單，通用（對數組，對象的繼承也很好用，喜歡）

6是原型繼承

 

當然了，還有一些其他方式，不過實際用的不多

比如：

對象冒充繼承

function Parent(firstname)  {      this.fname=firstname;      this.age=40;      this.sayAge=function()      {          console.log(this.age);      }  }  function Child(firstname)  {      this.parent=Parent;      this.parent(firstname);      delete this.parent;      this.saySomeThing=function()      {          console.log(this.fname);          this.sayAge();      }  }  var mychild=new  Child("李");  mychild.saySomeThing(); 

 

採用call方法改變函數上下文實現繼承

function Parent(firstname)  {      this.fname=firstname;      this.age=40;      this.sayAge=function()      {          console.log(this.age);      }  }  function Child(firstname)  {        this.saySomeThing=function()      {          console.log(this.fname);          this.sayAge();      }     this.getName=function()     {         return firstname;     }    }  var child=new Child("張");  Parent.call(child,child.getName());  child.saySomeThing(); 

 

以上就是尋找各大類庫繼承方式和在網路上一些繼承的方法。

推薦：拷貝式繼承，雖然效能差點。

 

javascript繼承一覽