仿ExtJS实现javascript的继承

如有不足之处,还望大神不吝赐教!

1、还原原型对象构造器

	var Person = function(name){
		this.name = name;
	}
	
	/*
	//Person原型对象的构造器是它本身
	console.info(Person.prototype.constructor);
	//给Person原型对象扩展了一个id属性
	Person.prototype = {
		id:100
	}
	//Person原型对象的构造器是Object
	console.info(Person.prototype.constructor);
	*/
	
	//给Person原型对象扩展属性/方法时,必须还原其构造器
	Person.prototype = {
		constructor:Person,
		id:100
	}

2、传统方式实现javascript的继承

	// superclass
	var Person = function(name){
		this.name = name;
	}
	
	// superclass 对象的原型对象
	Person.prototype = {
		constructor:Person,
		id:100
	}
	
	// subclass
	var Boy = function(name,sex,age){
		//借用构造函数继承的方式 (把Person函数绑定到Boy上(相当于继承了Person的模板),并传递参数)
		Person.call(this,name);
		this.sex = sex;
		this.age = age;
	}
	
	//Boy继承了父类的模板,同时也继承了父类的原型对象
	Boy.prototype = new Person();
	
	var boy = new Boy('李四','男',25);
	alert(boy.name);
	alert(boy.sex);
	alert(boy.age);
	alert(boy.id);
3、仿ExtJS实现javascript的继承


因为传统的方式继承了两次父类的模板,一般父类的模板对象属性方法很多,就会消耗过多的浏览器资源。

	// superclass
	var Person = function(name){
		this.name = name;
	}
	
	// superclass 对象的原型对象
	Person.prototype = {
		constructor:Person,
		id:100
	}
	
	// subclass
	var Boy = function(name,sex,age){
		Person.call(this,name);
		this.sex = sex;
		this.age = age;
	}
	
	//Boy只继承了父类的原型对象
	myExtend(Boy,Person);
	
	var boy = new Boy('李四','男',25);
	alert(boy.name);
	alert(boy.sex);
	alert(boy.age);
	alert(boy.id);
	
	
	function myExtend(subclass,superclass){
		//定义了三个变量,并把父类的原型对象赋值给superclassProto
		var F = function(){},subclassProto,superclassProto=superclass.prototype;
		//把superclassProto赋值给空函数的原型对象
		F.prototype = superclassProto;
		//子类的原型对象集成了空函数的模板和原型对象(原型为空)
		subclassProto = subclass.prototype = new F();
		//还原的子类的构造器
		subclassProto.constructor = subclass;
		//把父类的原型对象赋值给子类对象的superclass属性(以备后用)
		subclass.superclass = superclassProto;
		//如果父类的原型对象的构造器与Object的相等,还原父类的构造器
		if(superclassProto.constructor === Object.prototype.constructor){
			superclassProto.constructor = superclass;
		}
	}




  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值