javascript模拟类的最佳实践

原创 2015年07月10日 04:34:29

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


版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

javascript最佳实践

  • 2010-02-07 23:00
  • 1.06MB
  • 下载

JavaScript正则表达式大全(过滤Emoji的最佳实践)

name = name.replace(/\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g, "");

Javascript 初学者应知的 24 条最佳实践

1. 优先使用 ===,而不是 == JavaScript 使用两种相等性操作符:===,!== 和 ==,!=。通常认为做比较的最佳实践是使用前一组操作符。 "若两个操作数的类型和值...

JavaScript简单规则( 最佳实践 )

1. 注释 函数和方法 : 应该包含注释-- 描述用途, 算法, 假设, 参数代表, 函数返回 大段代码 : 在代码前放注释, 主要是描述任务 复杂算法 : 解释如何实现. 2. 变量和函数命...

20个超实用的JavaScript技巧及最佳实践,转自csdn

众所周知,JavaScript是一门非常流行的编程语言,开发者用它不仅可以开发出炫丽的Web程序,还可以用它来开发一些移动应用程序(如PhoneGap或Appcelerator),它还有一些服务端实现...

45 个实用的 JavaScript 技巧、窍门和最佳实践

如你所知,JavaScript是世界上第一的编程语言(编者注:2013年最后的一天就不要起圣战了=_=),它是Web的语言,是移动混合应用(mobile hybrid apps)的语言(比如 Phon...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)