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技巧及最佳实践

  • 2014年05月16日 13:00
  • 350KB
  • 下载

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

一、校验数字的表达式  1 数字:^[0-9]*$  2 n位的数字:^\d{n}$  3 至少n位的数字:^\d{n,}$  4 m-n位的数字:^\d{m,n}$  5 零和非零开头的数...

JavaScript高级程序设计第24章(最佳实践)

前端小菜鸟在JS高级程序设计中的小COPY

JavaScript专精系列(7)——最佳实践篇

Web前端领域,什么样的实践,才是好的处理方式?在《JavaScript高级程序设计》一书中,从三个不同的方面来描述最佳实践:1、可维护性什么是可维护性的代码?那么它可能需要做到: 可理解性——其他人...

Javascript 最佳实践 10 条建议

初级开发人员维护自己开发的产品可能也会是一个噩梦,比如我。过年前写的一个产品因为数据不全的问题一直没有上线,昨天数据库的搞定了,要准备上线了,需要我这边改一下功能,我喵了一眼JS,发现其中一个 dra...

前端代码标准最佳实践:javascript篇

前言 最近一直重构项目的前端代码,也参考了各种前端代码的最佳实践,目的是让前端的HTML,CSS,Javacript代码更符合标准,有更好的性能,更好的可维护性,尝到了重构后的甜头,也萌生了写这个系...

javascript最佳实践

在读过《javascript DOM编程艺术》的第五章之后,总结一下影响脚本健壮性的因素,如下: 1.要能够平稳退化 2.把网页的结构和内容与javascript脚本的动作行为分离开来...

Javascript 编程最佳实践

随着 浏览器 对 HTML5 ,CSS3  更好的支持

javascript最佳实践

javascript最佳实践,使用技巧。
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript模拟类的最佳实践
举报原因:
原因补充:

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