仿ExtJS实现javascript的继承

最新推荐文章于 2025-06-10 16:45:00 发布

原创最新推荐文章于 2025-06-10 16:45:00 发布 · 388 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了JavaScript中两种实现继承的方法：传统方式和仿ExtJS方式。详细解释了如何通过构造函数和原型链来实现属性和方法的继承，并展示了如何避免不必要的资源消耗。

如有不足之处，还望大神不吝赐教！

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;
		}
	}