记得以前写过一篇基于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。
分享到：
相关推荐
7. **原型与继承**：JavaScript使用原型链实现继承，每个对象都有一个`__proto__`属性指向其构造函数的原型。ES5中的`Object.create()`和ES6的类继承都是基于原型链的。 8. **闭包**：闭包是一种函数特性，它可以...
- **基于原型的继承**：ES5 继续强化了 JavaScript 的原型继承机制。通过使用 `Object.create()` 方法，可以直接将一个对象作为另一个对象的原型，从而实现继承。 - **对象的可扩展性**：ES5 为对象引入了一个内部...
5. **内部属性**：ECMAScript规范定义了一些内部属性，如`[[Prototype]]`（表示对象的原型）、`[[Value]]`（表示数据属性的值）等，这些都是实现JavaScript引擎的细节，对开发者来说通常是透明的。 6. **执行环境**...
要实现ECMAScript的原型链，可以使用Delphi的类（class）和接口（interface）来模拟。类可以作为实例的模板，而接口可以用于实现多继承。 对于严格模式，虽然Pascal语言本身没有直接对应的概念，但可以通过在编译...
二、ECMAScript继承机制的实现 在JavaScript（ECMAScript）中，继承机制是通过多种方式实现的，包括但不限于原型链、构造函数借用、组合继承等。JavaScript的类并非传统意义上的类，而是通过函数来模拟的。当一个...
JavaScript中的继承和原型链是其核心特性之一，尤其对于从基于类的语言背景转到JavaScript的开发者来说，理解这一概念至关重要。在JavaScript中，没有传统的类，而是基于对象和原型进行继承。每个对象都有一个指向其...
- **继承属性（Inherited Property）**：对象通过其原型链继承的属性。 #### 三、记法与约定 ECMAScript 5.1 规范中详细介绍了记法和文法，这有助于开发者理解语言的语法结构。例如： - **语法和词法的文法**：...
"ECMAScript_javascript"表明此规范与JavaScript语言密切相关，JavaScript是基于ECMAScript实现的一种广泛使用的脚本语言。 ECMAScript规范的每个新版本都会引入新的特性和改进，旨在提升语言的灵活性和功能性。...
它使用原型链实现方法的继承，同时又利用构造函数来继承父对象的属性。组合继承避免了子对象共享父对象引用类型属性的问题，同时也继承了父对象原型链上的方法。其主要缺点是调用了两次父构造函数，一次是在创建子...
- ES6 引入了基于原型的面向对象编程的类语法，使得代码更加清晰，同时支持继承、构造函数、方法重写等特性。 8. **解构赋值**： - 可以从数组或对象中提取值，直接赋给新的变量，简化了代码。 9. **展开运算符*...
- `class` 关键字用于定义类，`extends` 关键字实现继承。 6. **模块系统** - `import` 和 `export` 关键字用于模块导入和导出，支持静态链接，增强了代码的组织和复用性。 - 模块可以按需导入，有助于优化代码...
在JavaScript中，由于其基于原型的语言特性，实现多态的方式与传统的面向对象语言有所不同，但核心思想是相似的。 #### 三、实现多态的关键步骤 1. **定义一个抽象基类**：该基类包含一个或多个未实现的方法（虚...
随着 ECMAScript 标准的不断更新，新的继承方式提供了更加简洁和高效的实现手段，但原型链和构造函数的继承机制依然是理解 JavaScript 继承特性的基础。通过阮一峰老师的总结，我们可以看到，JavaScript 的继承实现...
原型链是通过`__proto__`属性实现，提供了继承的基础。 6. **数组**：虽然ES3没有正式引入数组字面量，但可以通过对象来模拟数组功能，例如使用索引属性。数组方法如`push`、`pop`、`shift`、`unshift`、`slice`、`...
在ECMAScript 5中，`Object.create()`方法被引入来规范化这个过程。例如： ```javascript function personObject(o) { function F() {} F.prototype = o; return new F(); } var person = { name: "Nicholas",...
这些方法在后续的继承实现，如原型链、寄生构造函数、组合继承等模式中起到了关键作用。 总结起来，对象冒充是一种原始的JavaScript继承实现方式，它利用`this`关键字在函数调用中的动态绑定特性，使得一个构造函数...
在ECMAScript 6（简称ES6）中，引入了一个重要的新特性——Class对象，它为...然而，需要注意的是，虽然Class语法更易读，但其底层仍然是基于原型实现的，因此理解原型链和构造函数仍然是理解和使用Class的关键。