1.定义类
Ext.js
是面向对象的,因此我们需要了解一下它的语法,以便后续程序的展开。也许你一直好奇为什么使用该框架经常见到 Ext
,因为框架中定义了各种类(提供了 300 多个类),不能保证与原生 js
或者其他框架没有一点冲突,因此将所有的命名封装到了 Ext
中,在此命名空间中就可以为所欲为了。就好比 JQuery
中的 $
。
本来想写 Ext.define
的,结果惊奇的发现 Extjs2.3
中没有该方法,我也是一脸懵逼。好吧,这一些列文章,我会围绕老版本 2.3
进行展开,以适应那些老版本的企业项目。既然如此,那我们就回顾一下 js
的面向对象吧。
1.1 构造函数模式
❝所谓"构造函数",其实就是一个普通函数,但是内部使用了
❞this
变量。对构造函数使用new
运算符,就能生成实例,并且this
变量会绑定在实例对象上。
function Father(name, age){ this.name = name; this.age = age; this.call = "爸爸" this.like = function(){ alert("藏私房钱~") }; }
1.1.1 问题
每生成一个实例, call
属性和 like
方法都会生成相同的内容,这是否太占用空间,浪费内存?那么能否只生成一次,以后的实例都去引用,而非重复内容创建多份呢?当然可以!请看下面:
1.2 Prototype模式
昨天的文章 Extjs-lesson1 末尾提到了这种方式。我们可以将所有不变的属性以及方法直接定义在 prototype
对象上来解决上面提到的问题。
❝❞
Javascript
规定,每一个构造函数都有一个prototype
属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承。
function Father(name, age) { this.name = name; this.age = age; } Father.prototype.call = "爸爸"; Father.prototype.like = function() { alert("藏私房钱~"); };
2.继承
2.1 构造函数绑定
❝使用
❞apply
方法,让子类继承父类的方法
function Father(name, age) { this.name = name; this.age = age; this.call = "爸爸"; this.like = function() { alert("藏私房钱~"); }; } function Son(name, age, school) { Father.apply(this, arguments); <---- 看这里 this.name = name; this.age = age; this.school = school; } // 创建对象,调用父类方法 var smallSon = new Son("小明", 6, "庞各庄一高"); smallSon.like();
2.2 Prototype模式
function Father(name, age) { this.name = name; this.age = age; } Father.prototype.call = "爸爸"; Father.prototype.like = function() { alert("藏私房钱~"); }; function Son(name, age, school) { this.name = name; this.age = age; this.school = school; } // 将 Son 的 prototype 对象指向一个 Father 示例 Son.prototype = new Father(); // 将 constructor 属性,指向它原本的构造函数 Son.prototype.constructor = Son; var smallSon = new Son("小明", 6, "庞各庄一高"); smallSon.like();
❝第一行代码会将原先
❞Son
的prototype
对象重新赋值,导致原先的被删除。任何一个prototype
对象都有一个constructor
属性,指向它的构造函数。经过第一行代码之后,constructor
属性也指向了Father
,这样一来,所有通过Son
构造的实例的constructor
属性都会指向了Father
,继承将完全混乱,所以第二行代码进行拨乱反正。
2.3 直接继承prototype
// 将 Son 的 prototype 对象指向 Father 的 prototype 对象 Son.prototype = Father.prototype; // 将 constructor 属性,指向它原本的构造函数 Son.prototype.constructor = Son;
❝「优点」 :效率比较高(不用执行和建立
Father
的实例了),比较省内存。「缺点」 :
❞Son.prototype
和Father.prototype
现在指向了同一个对象,那么任何对Son.prototype
的修改,都会反映到Father.prototype
。
2.3.1 改进
var oEmpty = function() {}; oEmpty.prototype = Father.prototype; Son.prototype = new oEmpty(); Son.prototype.constructor = Son;
❝其实就是利用一个空对象做中介,既节省内存,又不会因为
❞Son.prototype
的修改,反映到Father.prototype
上。
3.创建对象
var smallSon = new Son("小明", 6, "庞各庄一高");
就是通过 new
关键字