javascript模拟类的最佳实践

页面导航:首页 > 网络编程 > JavaScript > javascript模拟类的最佳实践

javascript模拟类的最佳实践

来源: 作者: 时间:2016-01-22 08:40 【

1:如何模拟一个类在sencha touch2 系列里面定义一个类和new出这个类的对象Ext define(Animal, {config: {name: null},constructor: function(config) {this initConfig(config);},speak: fu

1:如何模拟一个类

在sencha touch2 系列里面定义一个类和new出这个类的对象

 

Ext.define(
	Animal, {
		config: {
			name: null
		},
		constructor: function(config) {
			this.initConfig(config);
		},
		speak: function() {
			console.log('说点什么');
		}
	}
)

var my=Ext.create(Animal,{name:bb})
my.speak();

上面代码里面constructor在create的时候会自动调用,然后初始化config对象配置的属性。constructor完全就像面对象里面的构造函数……

 

下面我模拟一下

 

// 在sencha中new一个对象传了两个参数Ext.create(Animal,{name:bb})
// 这里就不模拟sencha的命名空间了,所以生成该类的对象的时候传一个配置对象即可
// 把命名空间(mss)和命名单独提取出来,new mss.define({});
var mss = {} //建立一个命名空间
mss.define = function(config) {
	if(typeof config !== 'object') {
		console.log('参数错误');
		return;
	}
	var interface = function() { //当new 该define返回的函数,会自动执行atrr和init
		this.attr && this.attr();
		this.init && this.init.apply(this, arguments);
	}
	for(var i in config) {
		config.hasOwnProperty(i) &&(interface.prototype[i] = config[i]);
	}
	return interface;
}

var Car = mss.define({
	attr: function() {
		this.type = '汽车';
	},
	init: function() {
		console.log(this.type);
	},
	speank: function() {
		console.log('我是' + this.type);
	}
});

var car1 = new Car();
car1.speank();


输出

 

 

汽车
我是汽车
[Finished in 0.1s]


这样就模拟成了:define一个类,然后new出来调用其方法;

 

 

2:如何在此基础上继承一个类

首先看看sencha touch2系列的继承

 

 

Ext.define(
	Person, {
		extend: Animal,
		speak: function() {
			console.log('我是人');
		}
	}
)
加多一个属性extend搞定。

 

下面在mss.define模拟一下

 

// 在sencha中new一个对象传了两个参数Ext.create(Animal,{name:bb})
// 这里就不模拟sencha的命名空间了,所以生成该类的对象的时候传一个配置对象即可
// 把命名空间(mss)和命名单独提取出来,new mss.define({});
var _mss = {} //建立一个命名空间
_mss.Define = function(parClass, curConfig) {


	// 若sup 是个object,表示这是一个新类
	// 若sup 是个function,表示这是一个继承
	if(typeof parClass === 'object') {
		curConfig = parClass;
		parClass = function() {};
	}
	// 定义返回类
	// 当new 该define返回的函数,会自动执行atrr和init
	var interface = function() { 
		this.attr && this.attr();
		this.init && this.init.apply(this, arguments);
	}
	// 返回类继承 parClass
	interface.prototype = new parClass();

	// 为返回类包含的两个初始化函数定义基础方法
	// 获得继承的init方法 和attr方法
	// 如果parClass存在init方法,那么nterface.prototype.init
	// 和new parClass().init相等
	var parInit = interface.prototype.init || function() {};
	var curInit = curConfig.init || function() {};
	var parAttr = interface.prototype.attr || function() {};
	var curAttr = curConfig.attr || function() {};

	// 为返回类原型初始化当前属性,这里注意可能被后面的方法重写
	for(var i in curConfig) {
		curConfig.hasOwnProperty(i) && (interface.prototype[i] = curConfig[i]);
	}

	// 如果当前返回类已经继承了init,重写该方法
	if(arguments.length && arguments[0].prototype && arguments[0].prototype.init === parInit) {
		interface.prototype.init = function() {
			var scope = this;
			var args = [function() {
				parInit.apply(scope, arguments);
			}];
			var slice = [].slice;
			curInit.apply(scope, args.concat(slice.call(arguments)));

		}
	}


	// 如果当前返回类已经继承了attr,重写attr 或者是首次构造改方法(新类)
	interface.prototype.attr = function() {
		parAttr.call(this);
		curAttr.call(this);
	}

	// 继承父类的成员属性
	for(var i in parClass) {
		parClass.hasOwnProperty(i) && (interface[i] = parClass[i]);
	}

	return interface;
}

var Car = _mss.Define({
	attr: function() {
		this.type = '汽车';
	},
	init: function() {
		console.log(this.type);
	},
	speank: function() {
		console.log('我是' + this.type);
	}
});

var car1 = _mss.Define(Car, {
})
new car1().speank();




输出

 

 

汽车
我是汽车
[Finished in 0.1s]

对于call实现继承

 

 

	interface.prototype.attr = function() {
		parAttr.call(this);
		curAttr.call(this);
	}

在Chorome控制台打印这段代码就可以解释一下这段代码了

 

 

var _Attr = function() {
  this.a = 1;
}
var B = function() {
  this.attr();
};
B.prototype.attr = function(){_Attr.call(this);}
console.log(new B());
	

VM665:9 B {a: 1}a: 1__proto__: Battr: (){_Attr.call(this);}constructor: () {__proto__: Object


 

 

Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<