JavaScript繼承的特性與實(shí)踐應(yīng)用深入詳解

this.prototype = {constructor : this};

Function.method('new', function (){
  var that = Object.create(this.prototype);//創(chuàng)建一個繼承了構(gòu)造器函數(shù)的原型對象的新對象
  var other = this.apply(that, arguments);//調(diào)用構(gòu)造器函數(shù)，綁定 this 到新對象
  return (typeof other === 'object' && other) || that;//如果構(gòu)造器函數(shù)的返回值不是對象，就直接返回這個新對象
});

//定義構(gòu)造器并擴(kuò)充原型
var Mammal = function (name) {
  this.name = name;
};
Mammal.prototype.get_name = function () {
  return this.name;
};
Mammal.prototype.says = function () {
  return this.saying || '';
};

var myMammal = new Mammal('Herb the mammal');
console.log(myMammal.get_name());//Herb the mammal

var Cat = function (name) {
  this.name = name;
  this.saying = 'meow';
};
Cat.prototype = new Mammal();

Cat.prototype.purr = function (n) {
  var i, s = '';
  for (i = 0; i < n; i += 1) {
    if (s) {
      s += '-';
    }
    s += 'r';
  }
  return s;
};
Cat.prototype.get_name = function () {
  return this.says() + ' ' + this.name + ' ' + this.says();
};
var myCat = new Cat('Henrietta');
console.log(myCat.says());//meow
console.log(myCat.purr(5));//r-r-r-r-r
console.log(myCat.get_name());//meow Henrietta meow

/**
 * 為 Function.prototype 新增 method 方法
 * @param name 方法名稱
 * @param func 函數(shù)
 * @returns {Function}
 */
Function.prototype.method = function (name, func) {
  if (!this.prototype[name])//沒有該方法時，才添加
    this.prototype[name] = func;
  return this;
};
Function.method('inherits', function (Parent) {
  this.prototype = new Parent();
  return this;
});

var Cat = function (name) {
  this.name = name;
  this.saying = 'meow';
}.inherits(Mammal).method('purr', function (n) {
    var i, s = '';
    for (i = 0; i < n; i += 1) {
      if (s) {
        s += '-';
      }
      s += 'r';
    }
    return s;
  }).method('get_name', function () {
    return this.says() + ' ' + this.name + ' ' + this.says();
  });
var myCat = new Cat('Henrietta');
console.log(myCat.says());//meow
console.log(myCat.purr(5));//r-r-r-r-r
console.log(myCat.get_name());//meow Henrietta meow

var myObject = maker({
 first: f,
 middle: m,
 last: l
});

/**
 * 原型
 */
var myMammal = {
  name: 'Herb the mammal',
  get_name: function () {
    return this.name;
  },
  says: function () {
    return this.saying || '';
  }
};
//創(chuàng)建新實(shí)例
var myCat = Object.create(myMammal);
myCat.name = 'Henrietta';
myCat.saying = 'meow';
myCat.purr = function (n) {
  var i, s = '';
  for (i = 0; i < n; i += 1) {
    if (s) {
      s += '-';
    }
    s += 'r';
  }
  return s;
};
myCat.get_name = function () {
  return this.says() + ' ' + this.name + ' ' + this.says();
};
console.log(myCat.says());//meow
console.log(myCat.purr(5));//r-r-r-r-r
console.log(myCat.get_name());//meow Henrietta meow

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

var constructor = function (spec, my){
  var that, 其他私有變量;
  my = my || {}；
 //把共享的變量和函數(shù)添加到 my 中
 that = 一個新對象
 //添加給 that 的特權(quán)方法
 return that;
};

var methodical = function (){
 ...
};
that.methodical = methodical;

var mammal = function (spec) {
  var that = {};
  that.get_name = function () {
    return spec.name;
  };
  that.says = function () {
    return spec.saying || '';
  };
  return that;
};
var myMammal = mammal({name: 'Herb'});
console.log(myMammal.get_name());//Herb
var cat = function (spec) {
  spec.saying = spec.saying || 'meow';
  var that = mammal(spec);
  that.purr = function (n) {
    var i, s = '';
    for (i = 0; i < n; i += 1) {
      if (s) {
        s += '-';
      }
      s += 'r';
    }
    return s;
  };
  that.get_name = function () {
    return that.says() + ' ' + spec.name + ' ' + that.says();
  };
  return that;
};
var myCat = cat({name: 'Henrietta'});
console.log(myCat.says());//meow
console.log(myCat.purr(5));//r-r-r-r-r
console.log(myCat.get_name());//meow Henrietta meow

//返回調(diào)用某個方法名的函數(shù)
Object.method('superior', function (name) {
  var that = this,
    method = that[name];
  return function () {
    return method.apply(that, arguments);
  };
});

var coolcat = function (spec) {
  var that = cat(spec),
    super_get_name = that.superior('get_name');
  that.get_name = function (n) {
    return 'like ' + super_get_name() + ' baby';
  };
  return that;
};
var myCoolCat = coolcat({name: 'Bix'});
console.log(myCoolCat.get_name());//like meow Bix meow baby

var eventuality = function (that) {
  var registry = {};
  /**
   * 觸發(fā)事件
   *
   * 使用 'on' 方法注冊的事件處理程序?qū)⒈徽{(diào)用
   * @param 可以是包含事件名稱的字符串，或者是一個擁有 type 屬性（值為事件名稱）的對象。
   */
  that.fire = function (event) {
    var array,
      func,
      handler,
      i,
      type = typeof event === 'string' ? event : event.type;
    //如果這個事件已被注冊，則遍歷并依序執(zhí)行
    if (registry.hasOwnProperty(type)) {
      array = registry[type];
      for (i = 0; i < array.length; i += 1) {
        handler = array[i];//處理程序包含一個方法和一組可選的參數(shù)
        func = handler.method;
        if (typeof func === 'string') {//如果方法是字符串形式的名稱，則尋找它
          func = this[func];
        }
        //調(diào)用它。如果處理程序包含參數(shù)，則傳遞過去，否則就傳遞事件對象
        func.apply(this, handler.parameters || [event]);
      }
    }
    return this;
  };
  /**
   * 注冊一個事件
   * @param type
   * @param method
   * @param parameters
   */
  that.on = function (type, method, parameters) {
    var handler = {
      method: method,
      parameters: parameters
    };
    if (registry.hasOwnProperty(type)) {//如果已存在，就新增數(shù)組項(xiàng)
      registry[type].push(handler);
    } else {//新增
      registry[type] = [handler];
    }
    return this;
  };
  return that;
};

eventuality(that);