摘要：前面介紹了和是如何實(shí)現(xiàn)類(lèi)，及其類(lèi)的屬性和作用的。今天介紹的就是單純的實(shí)現(xiàn)面向?qū)ο蟮膸?kù)，只有多行，也照例分析吧。

前面介紹了prototype.js和Mootools.js是如何實(shí)現(xiàn)類(lèi)，及其類(lèi)的屬性和作用的。今天介紹的klass.js就是單純的實(shí)現(xiàn)面向?qū)ο蟮膸?kù)，只有90多行，也照例分析吧。

實(shí)現(xiàn)類(lèi)的步驟

第一步是使用klass新建類(lèi)，初始化的固定函數(shù)是initialize，不能使用其它名稱

子類(lèi)使用ParentClassName.extend{// 子類(lèi)方法}繼承

子類(lèi)中與父類(lèi)的同名方法，如果需要在父類(lèi)的同名方法上拓展，需要在子類(lèi)的方法體中使用this.supr(args)

如果需要在類(lèi)的外面增加方法，可以使用methods方法

// 使用 klass 創(chuàng)建類(lèi)
    var Person = klass({
        // 初始函數(shù)固定為 initialize,
        initialize:function(name) {
            this.name = name;
            this.friends = ["jack", "mark"];
        },
        getName: function(){
            console.log("My name is " + this.name);
        },
        setFriends:function(friend){
            this.friends.push(friend);
        },
        getFriends:function(){
            console.log(this.friends)
        }
    });

    // 使用 methods 給類(lèi)添加方法，子類(lèi)可以繼承該方法
    Person.methods({
        getAge:function(age){
            console.log("My age is " + age);
        }
    })

    // 子類(lèi)直接通過(guò) ParentClassName.extend 來(lái)繼承父類(lèi)
    var Chinese = Person.extend({
        initialize:function(name, addr){
            // 使用 this.supr(args)來(lái)使用父類(lèi)的同名函數(shù)
            this.supr(name);
            this.addr = addr;
        },
        getAddr:function(){
            console.log("My address is " + this.addr);
        }
    });

    // 子類(lèi)直接通過(guò) ParentClassName.extend 來(lái)繼承父類(lèi)
    var Japanese = Person.extend({
        initialize:function(name){
            this.supr(name);
        }
    })

    // 實(shí)例化類(lèi)
    var men = new Chinese("allen", "BeiJing");
    men.getName(); // My name is allen
    men.getAge(23); // My age is 23
    men.getAddr(); // My address is BeiJing

    // 以下驗(yàn)證 - 子類(lèi)繼承父類(lèi)的屬性，修改了之后，其他子類(lèi)再次繼承父類(lèi)，父類(lèi)的屬性的值為何不會(huì)改變
    var allen = new Person();
    allen.getFriends(); // ["jack", "mark"]

    var women = new Japanese();
    women.setFriends("lisa");
    women.getFriends(); // ["jack", "mark", "lisa"]

    var men = new Chinese();
    men.setFriends("peter");
    men.getFriends(); //["jack", "mark", "peter"]

    var wallen = new Person();
    wallen.getFriends(); //["jack", "mark"]

JS是如何實(shí)現(xiàn)類(lèi)的方法，有幾個(gè)重要的問(wèn)題需要搞清楚

JS是如何創(chuàng)建類(lèi)的

子類(lèi)是如何實(shí)現(xiàn)繼承父類(lèi)屬性和方法的

子類(lèi)繼承父類(lèi)的屬性，修改了之后，其他子類(lèi)再次繼承父類(lèi)，父類(lèi)的屬性的值為何不會(huì)改變

子類(lèi)和父類(lèi)的同名函數(shù)，在同名函數(shù)中使用$supr，是如何做到在子類(lèi)中共存的
如何實(shí)現(xiàn)，不在類(lèi)中，而是使用methods往類(lèi)中添加方法的

下面來(lái)通過(guò)klass.js來(lái)具體分析

!function (name, context, definition) {
  if (typeof define == "function") define(definition)
  else if (typeof module != "undefined") module.exports = definition()
  else context[name] = definition()
}("klass", this, function () {
  var context = this
    , f = "function"
      // 是否使用了 supr 來(lái)調(diào)用父類(lèi)的同名函數(shù)
    , fnTest = /xyz/.test(function () {xyz}) ? /supr/ : /.*/
    , proto = "prototype"

    // o 為創(chuàng)建類(lèi)時(shí)，類(lèi)的方法
  function klass(o) {
    return extend.call(isFn(o) ? o : function () {}, o, 1)
  }

  // 判斷對(duì)象是否是函數(shù)
  function isFn(o) {
    return typeof o === f
  }

  // 將父類(lèi)的方法/屬性，附加到子類(lèi)中
  function wrap(k, fn, supr) {
    return function () {
      var tmp = this.supr
        // 當(dāng)前函數(shù)的 supr，就是父類(lèi)的同名函數(shù)
      this.supr = supr[proto][k]
      var undef = {}.fabricatedUndefined
      var ret = undef
      try {
        // this 是當(dāng)前類(lèi)，fn 是父類(lèi)的函數(shù)，fn 的上下文是綁定在當(dāng)前類(lèi)中，所以就等于父類(lèi)的方法就繼承到子類(lèi)中了
        ret = fn.apply(this, arguments)
      } finally {
        this.supr = tmp
      }
      return ret
    }
  }

  // 子類(lèi)繼承父類(lèi)的屬性，如果有同名函數(shù)，就使用 wrap 方法處理，如果沒(méi)有，就完全繼承該屬性
  // what : child; o : parent; supr: parentClass
  function process(what, o, supr) {
    for (var k in o) {
      if (o.hasOwnProperty(k)) {
        what[k] = isFn(o[k])
          && isFn(supr[proto][k])
          && fnTest.test(o[k])
          ? wrap(k, o[k], supr) : o[k]
      }
    }
  }

  // 實(shí)現(xiàn)繼承的主函數(shù)， o創(chuàng)建類(lèi)時(shí)的所有函數(shù)，fromSub 為1，不明白為什么不把fromSub設(shè)置為true/false
  function extend(o, fromSub) {
    // must redefine noop each time so it doesn"t inherit from previous arbitrary classes
    function noop() {}
    noop[proto] = this[proto]
    var supr = this
      , prototype = new noop()
      , isFunction = isFn(o)
      , _constructor = isFunction ? o : this
      , _methods = isFunction ? {} : o
    function fn() {
      // 如果當(dāng)前類(lèi)設(shè)置類(lèi) initialize 函數(shù)，就把傳給當(dāng)前類(lèi)的參數(shù)傳遞給該函數(shù)
      if (this.initialize) this.initialize.apply(this, arguments)
      else {
        // 如果沒(méi)有設(shè)置 initialize ,傳入類(lèi)的參數(shù)也能被其它函數(shù)使用
        fromSub || isFunction && supr.apply(this, arguments)
        _constructor.apply(this, arguments)
      }
    }

    // 使用 methods 添加方法到當(dāng)前類(lèi)，o 為使用 methods 內(nèi)的方法
    fn.methods = function (o) {
      process(prototype, o, supr)
      fn[proto] = prototype
      return this
    }

    // 指定 fn 的 constructor
    fn.methods.call(fn, _methods).prototype.constructor = fn

    // 使用 ParentClassName.extend 來(lái)實(shí)現(xiàn)繼承時(shí)候的
    fn.extend = arguments.callee
      // 使用 implement 來(lái)重寫(xiě)父類(lèi)的方法或者拓展父類(lèi)的方法
      // o : 函數(shù)名 ; optFn : 函數(shù)
    fn[proto].implement = fn.statics = function (o, optFn) {
      o = typeof o == "string" ? (function () {
        var obj = {}
        obj[o] = optFn
        return obj
      }()) : o
      // 使用 process 把 implement 中的函數(shù)添加到當(dāng)前類(lèi)中
      process(this, o, supr)
      return this
    }

    return fn
  }

  return klass
});

JS面向?qū)ο笙盗?/p>

《javascript高級(jí)程序設(shè)計(jì)》 繼承實(shí)現(xiàn)方式

prototype.js 是如何實(shí)現(xiàn)JS的類(lèi)以及類(lèi)的相關(guān)屬性和作用

Mootools.js 是如何實(shí)現(xiàn)類(lèi)，以及類(lèi)的相關(guān)屬性和作用

總結(jié)：prototype.js，Mootools.js和klass.js 實(shí)現(xiàn)類(lèi)的方法的異同與優(yōu)劣