记得以前写过一篇基于javascript function的类继承链实现。在ECMAScript3.1中，可以把function模拟成类。但是，因为原型链，构造体的实现非常繁琐。
现在各大浏览器升级到ECMAScript5之后，逐渐抛弃了以function来模拟类的思路。而转变为以对象来模拟类的思路。即：
var Cat = {};
以上的代码，可以看成是一个对象，也可以看成是一个类。当然像现在流行的静态语言中，比如java，Class本身就是对象。(究竟是先有对象还是先有类这样究竟是鸡生蛋还是蛋生鸡这样的哲学问题这里不加以讨论)
由此，新的Class函数如下：
var Class = (function() {
/**
* Initialze object from class.
* @param class object.
*/
var initializeClass = (function() {
if (Object.create) {
return Object.create;
} else {
return function(o) {
function F() {}
F.prototype = o;
return new F();
};
}
})();
/**
* The main function of Class.
*
* @param classContent
* @param superClass
*/
return function() {
var classPrototype = arguments[arguments.length - 1] || {};
for (var index = 0; index < arguments.length - 1; index++) {
var superClass = arguments[index];
if (typeof superClass["initialize"] == "function") {
classPrototype.superclass = superClass["initialize"];
} else {
classPrototype.superclass = function() {};
}
for (var prop in superClass) {
if (prop == "initialize" || prop == "newInstance") {
continue;
}
if (classPrototype.hasOwnProperty(prop)) {
if (typeof superClass[prop] == "function") {
classPrototype.superclass[prop] = superClass[prop];
}
} else {
classPrototype[prop] = superClass[prop];
}
}
}
classPrototype.newInstance = function() {
var instance = initializeClass(this);
if (instance["initialize"]) {
instance["initialize"].apply(instance, arguments);
}
return instance;
};
return classPrototype;
};
})();
大致功能为为对象增加getInstance方法和父类的superclass对象使其能够调用父类的构造体和方法。
测试：
var Animal = Class({
initialize: function(age) {
this.age = age;
},
eat: function() {
alert("eat");
}
});
var Cat = Class(Animal, {
initialize: function(name, age) {
// 调用父类构造体
Cat.superclass.call(this, age);
// 本类属性
this.name = name;
// 调用父类方法
this.superclass.eat();
},
eat: function() {
alert("eat fish");
}
});
var animal = Animal.newInstance(12);
animal.eat();
var cat = Cat.newInstance("123", 12);
alert(cat.name);
alert(cat.age);
cat.eat();
此方式注意点：
1.无法完全使用instanceof 来模糊判断是何种类型(判断父类)。但是可以用isPrototypeOf来精确判断是何种子类
2.无需使用关键字new来实例化对象。。而要用newInstance方法。(废话)
大家可以比较下我以前的那篇文章，会发现，继承的实现不是简单了一点半点。
至于instanceof的判断限制问题，大家完全可以不用担心
例如下面的java代码，instanceof用来判断何种接口，然后判断完后无非为了调用接口的方法。
public interface Animal {
}
public interface Cat extends Animal {
void eatFish()；
}
public interface Dog extends Animal {
void eatFood（）；
}
public class Test {
public void animalExecute(Animal animal) {
if (animal instanceof Cat) {
(（Cat） animal).eatFish();
} else if (animal instanceof Dog) {
(（Cat） animal).eatFood();
}
}
}
而javascript在没有instanceof的情况下，代码可以这么实现
var Animal = Class({});
var Dog = Class(Animal, {
eatFood: function() {};
})
var Cat = Class(Animal, {
eatFish: function() {};
})
function animalExecute(animal) {
if (animal.eatFood) {// Dog
animal.eatFood();
} else if (animal.eatFish) {// Cat
animal.eatFish();
}
}
也就是说，javascript完全无需instanceof，也能完成相同功能
另外，在写组建的时候，通常都会用composite模式，在此模式下，instanceof就没有必要了。
为了解决instanceof的问题。我们引入function作为Object.create的模板，就能解决这个问题
var Class = (function() {
/**
* Inherits function.(node.js)
*
* @param ctor subclass's constructor.
* @param superctor superclass's constructor.
*/
var inherits = function(ctor, superCtor) {
ctor.super_ = superCtor;
// ECMAScript 5
if (Object.create) {
ctor.prototype = Object.create(superCtor.prototype, {
constructor: {
value: ctor,
enumerable: false,
writable: true,
configurable: true
}
});
} else {
function F() {};
F.prototype = superCtor.prototype;
ctor.prototype = new F();
ctor.prototype.constructor = ctor;
}
};
/**
* Class function.
*/
return function() {
var subClazz = arguments[arguments.length - 1] || function() {};
var fn = subClazz.initialize == null ? function() {} : subClazz.initialize;
for (var index = 0; index < arguments.length - 1; index++) {
inherits(fn, arguments[index]);
}
for (var prop in subClazz) {
if (prop == "initialize") {
continue;
}
fn.prototype[prop] = subClazz[prop];
}
return fn;
}
})();
/**
* The definition of Cat Class.
*/
var Cat = Class({
/**
* Constructor.
*
* @param name Cat's name
*/
initialize: function(name) {
this.name = name;
},
/**
* Eat function.
*/
eat: function() {
alert(this.name + " is eating fish.");
}
});
/**
* The definition of Black Cat Class.
*/
var BlackCat = Class(Cat, {
/**
* Constructor.
*
* @param name Cat's name.
* @param age Cat's age.
*/
initialize: function(name, age) {
// call the constructor of super class.
BlackCat.super_.call(this, name);
this.age = age;
},
/**
* Eat function.
*/
eat: function() {
alert(this.name + "(" + this.age + ") is eating dog.");
}
});
/**
* The definition of Black Fat Cat Class.
*/
var BlackFatCat = Class(BlackCat, {
/**
* Constructor.
*
* @param name Cat's name.
* @param age Cat's age.
* @param weight Cat's weight.
*/
initialize: function(name, age, weight) {
// call the constructor of super class.
BlackFatCat.super_.call(this, name, age);
this.weight = weight;
},
/**
* Eat function.
*/
eat: function() {
alert(this.name + "(" + this.age + ") is eating dog. My weight: " + this.weight);
}
});
/**
* The definition of Dog Class.
*/
var Dog = Class({});
var cat = new BlackFatCat("John", 24, "100kg");
cat.eat();
// true
alert(cat instanceof Cat);
// true
alert(cat instanceof BlackCat);
// true
alert(cat instanceof BlackFatCat);
// true
alert(cat.constructor === BlackFatCat);
// false
alert(cat instanceof Dog);
可以很明显的看到instanceof可以判断原型链上的function。
分享到：
相关推荐
采用Go编写的ECMAScript 5.1( )实现
基于ECMAScript6中class ，module规范编写的JavaScript计算器小程序
本书适合那些希望学习Web编程语言的初、中级程序员和希望精通JavaScript的JavaScript程序员阅读。
eslevels, 在escope库上，基于 ECMAScript EsLevels基于 escope 库的ECMAScript范围级分析器。 这个库的最初目的是在javascript编辑器的( 。对于 SublimeText，按顺序排序) 中启用范围上下文着色。库只有一个方法 le
ECMAScript全套（ECMAScript5，ECMAScript6,ECMAScript2018）
ECMAScript的一个安全要求实现
对于有一定基础或热衷于研究的人来说，可以在这些基础代码上进行修改和扩展，实现其他功能。 【沟通交流】： 有任何使用上的问题，欢迎随时与博主沟通，博主会及时解答。 鼓励下载和使用，并欢迎大家互相学习，共同...
ECMAscript基础
大多OO语言都支持两种继承方式： 接口继承和实现继承 ，而ECMAScript中无法实现接口继承，ECMAScript只支持实现继承，而且其实现继承主要是依靠原型链来实现，下文给大家技术js实现继承的六种方式，需要的朋友参考下
新增、改进的API 更严谨、强大的语法 全新的概念 更多的细节
ECMAScript2021中文最新,ECMAScript2021中文文档，第1-6章，持续更新，喜欢请star。git地址https://github.com/fangniyima/ECMAScript-notes
在Qt的帮助文档中有时并不严格区分ECMAScript与JavaScript，但其实两者是不同的，当我们在QML的上下文中提到JavaScript时，多数时候是指QML的ECMAScript实现，只是JavaScript由来已久说起来更顺嘴而已。要想学好并...
ECMAScript对象概述(原型链Prototype Chain) ECMA-262主要术语 ECMAScript执行环境(作用域链Scope Chain，闭包机制) ECMAScript函数(new原理) ECMAScript内部属性(参考) ECMAScript执行环境作用域链图示 ECMA-262...
ecmascript手册，可以通过手册料及基于此规范的语言
js 学习必备。 ECMAScript5.1中文版
ECMAScript 基于几种原始技术，最著名的是 JavaScript（Netscape）和 JScript（Microsoft）。该语言由Netscape的Brendan Eich发明，并首次出现在该公司的Navigator 2.0浏览器中。它已经出现在Netscape的所有后续...
此标准定义了 ECMAScript 脚本语言。本节包含对 ECMAScript 语言非规范性的概述。
ECMAScript5 新增了十个数组方法，这些方法只有在ie9及以上浏览器中可以被使用，下面是对于这些方法的模拟实现。 一、Array.isArray(element) 该方法用于判断传入的对象是否为数组类型，返回true和false。 Array....
Learning ECMAScript 6 Learning ECMAScript 6 Learning ECMAScript 6 Learning ECMAScript 6
3c_js.chm ECMAScript 6入门.pdf JavaScript 5.chm 高性能JavaScript.2015年.pdf