ExtJS学习------Ext.define的继承extend,用javascript实现类似Ext的继承

(1)Ext.define的继承extend

具体实例:

Ext.onReady(function(){
	//Sup Class 父类
	Ext.define('Person',{
		config:{
			name:'bjsxt'
		} ,
		constructor:function(config){
			var me = this ;
			me.initConfig(config);
		}
	});
	//Sub Class 子类
	Ext.define('Boy',{
		//使用Ext的继承
		extend:'Person',//直接继承
		config:{
			sex:'男',
			age:20
		}
	});
	var b = Ext.create('Boy',{
		name:'张三',
		age:25
	});
	alert('姓名:'+b.name+'--性别:'+b.sex+'--年龄:'+b.age);
});

实例结果:

(2)使用javascript实现类似Ext的继承

实例:

Ext.onReady(function(){
	//javascript : prototype(原型)  :实现继承
	//SupClass
	var Person = function(name){
		this.name = name;
	};
	//alert(Person.prototype.constructor);		//原型对象的构造器,默认是当前的类的模板
	//SupClass prototype object
	Person.prototype = {
		constructor:Person ,
		id:100
	};

	//SubClass
	var Boy = function(name,sex,age){
		//借用构造函数继承的方式
		Person.call(this,name);
		this.sex = sex ;
		this.age = age ;
	};

	//实现原型继承: 继承了父类的模板和父类的原型对象
	//Boy.prototype = new Person();
	//自己实现extend的方法
	function myextend(sub , sup){
	        var F = function() {},		//定义一个空函数做为中转函数
	            subclassProto,			//子类的原型对象

	            //把父类的原型对象 交给了superclassProto变量
   superclassProto = sup.prototype;

			 // 做中转的位置:把父类的原型对象 赋值给了 F这个空函数的原型对象
	        //进行原型继承
F.prototype = superclassProto;
subclassProto = sub.prototype = new F();
	        subclassProto.constructor = sub;		//还原构造器
	        sub.superclass = superclassProto;		//做了一个保存,保存了父类的原型对象
			//目的是为了防止你大意了
	        if (superclassProto.constructor === Object.prototype.constructor) {
	            superclassProto.constructor = sup;
	        }
	};
	myextend(Boy ,Person);//自己实现的继承方法
	var b = new Boy('李四','男',25);//
	/* 注:传统的javascript方法实现继承
	 * Boy.prototype=new Person('李四');
	 * var b=new Boy('男',25);
	 */
	alert('姓名:'+b.name+'--性别:'+b.sex+'--id:'+b.id+'--年龄:'+b.age);
});

实例结果:

ExtJS学习------Ext.define的继承extend,用javascript实现类似Ext的继承

时间: 2024-08-09 01:18:36

ExtJS学习------Ext.define的继承extend,用javascript实现类似Ext的继承的相关文章

浅谈javascript继承【读javascript设计模式第四章节继承有感】

javascript继承,无任是类式继承,原型式继承还是渗元式继承都是通过不同方法去围绕着prototype转,简单分析下三种不同继承方法是如何围绕prototype转的 一:类似继承,先上关键代码 function extend(subClass,supClass){ var fn = function(){}; fn.prototype = supClass.prototype; subClass.prototype = new fn(); subClass.prototype.constr

Ext.define override和extend的区别

extend:继承组件,创建新组建. override:改写组件 Ext.define('Ext.some.DerivedClass', { method: function () { console.log('Bad'); }}); Ext.define('App.paches.DerivedClass', { override: 'Ext.some.DerivedClass', method: function () { console.log('Fixed'); this.callSupe

[ExtJS学习笔记]第九节 Extjs5的mvc与mvvm框架结构简介

本文地址:http://blog.csdn.net/sushengmiyan/article/details/38537431 本文作者:sushengmiyan -------------------------------------------------------------资源链接----------------------------------------------------------------------- 翻译来源:http://docs.sencha.com/ext

EXTJS--使用Ext.define自定义类

Javascript自定义类 var person = function(name,age){ this.Name = ""; this.Age = 26: this.Say = function(msg){ alert(this.Name + " Says : " + msg); } this.init = function(name,age){ this.Name = name; this.Age = age; } this.init(name, age); }

ExtJS4 Ext.onReady、Ext.define、Ext.create的区别与联系 http://blog.sina.com.cn/s/blog_48d7f92901011cfn.html

1.Ext.onReady 说明:onReady内的语句块会在页面上下文加载后再执行. 2.Ext.define 说明:创建类,可以继承其他类,也可以被继承. 例子1: <script type="text/javascript"> Ext.onReady(function () { //创建一个类,类名:TextClass,具有两个属性:A.B Ext.define('TextClass', { A: 'a', B: 'b' }); //实例化类 var textClas

ExtJS学习笔记:定义extjs类

定义类 Ext.define('Cookbook.Vehicle', { Manufacturer: 'Aston Martin', Model: 'Vanquish', getDetails: function(){ alert('I am an ' + this.Manufacturer + ' ' + this.Model); } }, function(){ Console.log('Cookbook.Vehicle class defined!'); }); 第一个参数是类名,第二个参

ExtJS4教程—-Ext.onReady、Ext.define、Ext.create基础方法(转)

Ext.onReady 说明:onReady内的语句块会在页面上下文加载后再执行 例子: <html> <head> <title>Index</title> <link href="http://www.cnblogs.com/Scripts/ext-4.0.7-gpl/ext-4.0.7-gpl/resources/css/ext-all.css" rel="stylesheet" type="te

ExtJS学习笔记:定义extjs类别

类的定义 Ext.define('Cookbook.Vehicle', { Manufacturer: 'Aston Martin', Model: 'Vanquish', getDetails: function(){ alert('I am an ' + this.Manufacturer + ' ' + this.Model); } }, function(){ Console.log('Cookbook.Vehicle class defined!'); }); 第一个參数是类名.第二个

extJs学习基础3 ajax与php交互

extJs代码: 1 <script src="build/ext-all.js"></script> 2 <script src="build/packages/ext-theme-crisp/build/ext-theme-crisp.js"></script> 3 <link rel="stylesheet" href="build/packages/ext-theme-cri