摘要:實現類的步驟第一步是使用新建類,初始化的固定函數是,不能使用其它名稱子類也是使用新建,父類放在第一個參數中,如子類中與父類的同名方法,如果需要在父類的同名方法上拓展,在需要在第一個參數中使用,然后在方法體內使用如果需要在類的外面增加方法,可
實現類的步驟
第一步是使用Class.create新建類,初始化的固定函數是initialize,不能使用其它名稱
子類也是使用Class.create新建,父類放在第一個參數中,如var Cat = Class.create(Animal,{});
子類中與父類的同名方法,如果需要在父類的同名方法上拓展,在需要在第一個參數中使用$super,然后在方法體內使用$super(args);
如果需要在類的外面增加方法,可以使用addMethods方法
</>復制代碼
// 使用 Class.create 創建類
var Person = Class.create({
// 初始函數固定為 initialize, 如果不設置,會默認創建一個空函數給 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)
}
});
// 使用 addMethods 給在類的初始構建之外添加方法,子類可以繼承該方法
Person.addMethods({
getAge:function(age){
console.log("My age is " + age);
}
})
// 子類通過 Class.create 創建類,第一個參數為父類的名字
var Chinese = Class.create(Person,{
// 使用 $super 為第一個參數,表示當前函數在父類的同名函數上拓展
initialize:function($super, name, addr){
$super(name);
this.addr = addr;
},
getAddr:function(){
console.log("My address is " + this.addr);
}
});
var Japanese = Class.create(Person, {
initialize:function($super, name){
$super(name);
}
})
// 實例化類
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
// 以下驗證 - 子類繼承父類的屬性,修改了之后,其他子類再次繼承父類,父類的屬性的值為何不會改變
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是如何實現類的方法,有幾個重要的問題需要搞清楚
JS是如何創建類的
子類是如何實現繼承父類屬性和方法的
子類繼承父類的屬性,修改了之后,其他子類再次繼承父類,父類的屬性的值為何不會改變
子類和父類的同名函數,在同名函數中使用$super,是如何做到在子類中共存的
如何實現,不在類中,而是使用addMethods往類中添加方法的
下面來通過prototype.js的class來具體分析
</>復制代碼
var Class = (function() {
function subclass() {};
function create() {
// ...
}
function addMethods(source) {
// ...
}
// 暴露給外部的接口
return {
create: create,
Methods: {
addMethods: addMethods
}
};
})();
內部實現其實很簡單,Class是一個立即執行函數,里面只有三個函數,而且subclass還是個空函數
</>復制代碼
/* Based on Alex Arnell"s inheritance implementation. */
/**
* Refer to Prototype"s web site for a [tutorial on classes and
* inheritance](http://prototypejs.org/learn/class-inheritance).
**/
var Class = (function() {
function subclass() {};
function create() {
// $A 函數就是把參數轉化成數組
var parent = null, properties = $A(arguments);
// 如果第一個參數是函數,就把他當作父類
if (Object.isFunction(properties[0]))
parent = properties.shift();
function klass() {
// klass 是新建的類,把傳入的參數都綁定到 klass 的 initialize 方法中
this.initialize.apply(this, arguments);
}
// 把通過 extend 方法,把 Class.Methods 的方法添加到 klass 中
Object.extend(klass, Class.Methods);
// 這里有指定 klass 的父類是哪一個
klass.superclass = parent;
klass.subclasses = [];
if (parent) {
// 這里通過把父類的原型方法,都繼承到當前類中
// 通過中間變量 subclass 來傳遞 prototype 來防止由于子類的修改而導致父類的屬性或者方法也被修改
subclass.prototype = parent.prototype;
// 每次子類都會創建一個新的中間變量來傳遞,所以無論子類怎么修改屬性,都不會影響到父類
klass.prototype = new subclass;
// 把當前類添加到父類的子類中
parent.subclasses.push(klass);
}
for (var i = 0, length = properties.length; i < length; i++)
// 前面把 addMethods 方法添加到 klass 中,這里就可以使用 addMethods 把傳入參數中的方法,添加到 klass 中了
klass.addMethods(properties[i]);
// 如果 klass 沒有初始化函數,就設置一個空函數
if (!klass.prototype.initialize)
klass.prototype.initialize = Prototype.emptyFunction;
// 把 klass 的構造函數指向自身
klass.prototype.constructor = klass;
return klass;
}
// source 是所有要添加進來方法的集合
function addMethods(source) {
var ancestor = this.superclass && this.superclass.prototype,
properties = Object.keys(source);
for (var i = 0, length = properties.length; i < length; i++) {
// value 就是單個的方法
var property = properties[i], value = source[property];
// 如果參數中的第一個參數是 $super,就需要把父類的同名方法,傳遞進來
if (ancestor && Object.isFunction(value) &&
value.argumentNames()[0] == "$super") {
// 把最初的 value 使用 method 存起來
var method = value;
// 繼承父類的同名方法,然后把當前參數傳進去
value = (function(m) {
return function() { return ancestor[m].apply(this, arguments); };
})(property).wrap(method);
// wrap 是把父類的同名方法,添加當前類的同名方法中
// We used to use `bind` to ensure that `toString` and `valueOf`
// methods were called in the proper context, but now that we"re
// relying on native bind and/or an existing polyfill, we can"t rely
// on the nuanced behavior of whatever `bind` implementation is on
// the page.
//
// MDC"s polyfill, for instance, doesn"t like binding functions that
// haven"t got a `prototype` property defined.
// 將 valueOf 的方法綁定到 method 中
value.valueOf = (function(method) {
return function() { return method.valueOf.call(method); };
})(method);
// 將 toString 的方法綁定到 method 中
value.toString = (function(method) {
return function() { return method.toString.call(method); };
})(method);
}
this.prototype[property] = value;
}
return this;
}
// 暴露給外部的接口
return {
create: create,
Methods: {
addMethods: addMethods
}
};
})();
上面使用到的wrap函數,摘抄在下面
</>復制代碼
function wrap(wrapper) {
var __method = this;
return function() {
var a = update([__method.bind(this)], arguments);
return wrapper.apply(this, a);
}
}
// 這里就是把 args 中的屬性,都添加到 array 中
function update(array, args) {
var arrayLength = array.length, length = args.length;
while (length--) array[arrayLength + length] = args[length];
return array;
}
JS面向對象系列
《javascript高級程序設計》 繼承實現方式
Mootools.js 是如何實現類,以及類的相關屬性和作用
klass 是如何實現JS的類以及類的相關屬性和作用
總結:prototype.js,Mootools.js和klass.js 實現類的方法的異同與優劣
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/84535.html
摘要:前面介紹了和是如何實現類,及其類的屬性和作用的。今天介紹的就是單純的實現面向對象的庫,只有多行,也照例分析吧。 前面介紹了prototype.js和Mootools.js是如何實現類,及其類的屬性和作用的。今天介紹的klass.js就是單純的實現面向對象的庫,只有90多行,也照例分析吧。 實現類的步驟 第一步是使用klass新建類,初始化的固定函數是initialize,不能使用其它...
摘要:實現類的步驟第一步是使用新建類,初始化的固定函數是,不能使用其它名稱子類也是使用新建,父類在子類中,使用來繼承,與子類的方法名,同一級別子類中與父類的同名方法,如果需要在父類的同名方法上拓展,需要在子類的同名方法內,使用如果需要在類的外面增 實現類的步驟 第一步是使用new Class新建類,初始化的固定函數是initialize,不能使用其它名稱 子類也是使用new Class新建...
摘要:構建類的方法使用來構建類使用來構建類使用來構建類繼承父類的方法使用子類方法構建子類,繼承父類,在與父類同名的方法中,第一個參數為,方法體內使用來拓展父類的同名方法使用正常構建類后,第一個方法使用來繼承父類,在子類的方法體中,使用來拓展父類的 構建類的方法 Prototype.js使用Class.create來構建類 Mootools.js使用new Class來構建類 klass.j...
摘要:寄生式繼承的思路與寄生構造函數和工廠模式類似,即創建一個僅用于封裝繼承過程的函數,該函數在內部已某種方式來增強對象,最后再像真的是它做了所有工作一樣返回對象。 這篇本來應該是作為寫JS 面向對象的前奏,只是作為《javascript高級程序設計》繼承一章的筆記 原型鏈 code 實現 function SuperType() { this.colors = [red,blu...
摘要:裝飾者要實現這些相同的方法繼承自裝飾器對象創建具體的裝飾器,也是接收作對參數接下來我們要為每一個功能創建一個裝飾者對象,重寫父級方法,添加我們想要的功能。 裝飾模式 僅僅包裝現有的模塊,使之 更加華麗 ,并不會影響原有接口的功能 —— 好比你給手機添加一個外殼罷了,并不影響手機原有的通話、充電等功能; 使用 ES7 的 decorator ES7 中增加了一個 decorator 屬性...
閱讀 1594·2021-11-22 15:33
閱讀 1739·2021-11-15 18:01
閱讀 676·2021-10-09 09:43
閱讀 2615·2021-09-22 16:03
閱讀 764·2021-09-03 10:28
閱讀 3562·2021-08-11 10:22
閱讀 2726·2019-08-30 15:54
閱讀 1767·2019-08-30 14:21