Extjs-lesson2

简介: Extjs-lesson2


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();

第一行代码会将原先 Sonprototype 对象重新赋值,导致原先的被删除。任何一个 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.prototypeFather.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 关键字

相关文章
|
Java 程序员
Java 异常处理与正则表达式详解,实例演练及最佳实践
在 Java 代码执行期间,可能会发生各种错误,包括程序员编码错误、用户输入错误以及其他不可预料的状况。 当错误发生时,Java 通常会停止并生成错误消息,这个过程称为抛出异常。 try...catch 语句 try 语句允许您定义一段代码块,并在其中测试是否发生错误。 catch 语句允许您定义一段代码块,当 try 块中发生错误时执行该代码块。 try 和 catch 关键字成对使用,语法如下:
240 0
|
存储 程序员 C语言
C语言变量命名规则
C语言变量命名规则
989 0
|
小程序 API
微信小程序中音频播放
微信小程序中音频播放
514 0
|
机器学习/深度学习 算法 存储
一文读懂大规模图神经网络平台AliGraph
2019阿里云峰会·上海开发者大会于7月24日盛大开幕,本次峰会与未来世界的开发者们分享开源大数据、IT基础设施云化、数据库、云原生、物联网等领域的技术干货, 共同探讨前沿科技趋势。本文整理自开源大数据专场中阿里巴巴资深技术专家李永先生的精彩演讲,将为大家分享AliGraph:大规模图神经网络平台。
8938 0
|
网络协议 网络架构
内网IP 外网IP 网卡 路由器通信过程(全)
       这几天上了计算机网络的课,对于老师讲的内容也是懵懵懂懂,一个慌神就没跟上,啥ip 啥NAT一脸蒙蔽。课后oogle补了点东西算是大致有了点了解,不过网上的总结都是零零散散而且点到即止。
5350 0
|
8月前
|
JSON Java 数据格式
微服务——SpringBoot使用归纳——Spring Boot中的全局异常处理——处理系统异常
本文介绍了在Spring Boot项目中如何通过创建`GlobalExceptionHandler`类来全局处理系统异常。通过使用`@ControllerAdvice`注解,可以拦截项目中的各种异常,并结合`@ExceptionHandler`注解针对特定异常(如参数缺失、空指针等)进行定制化处理。文中详细展示了处理参数缺失异常和空指针异常的示例代码,并说明了通过拦截`Exception`父类实现统一异常处理的方法。虽然拦截`Exception`可一劳永逸,但为便于问题排查,建议优先处理常见异常,最后再兜底处理未知异常,确保返回给调用方的信息友好且明确。
1180 0
微服务——SpringBoot使用归纳——Spring Boot中的全局异常处理——处理系统异常
|
NoSQL Linux Redis
使用docker-compose搭建redis-cluster集群
使用docker-compose搭建redis-cluster集群
1333 0
|
机器学习/深度学习 自然语言处理 搜索推荐
深度学习中的多头注意力机制及其应用探索
深度学习中的多头注意力机制及其应用探索
874 2
Java系列之 解决 项目 jar 包无法上传到Github
该博客文章介绍了解决Java项目中jar包无法上传到Github的问题,通过修改`.gitignore`文件来包含jar包,从而成功添加到上传目录。
Java系列之 解决 项目 jar 包无法上传到Github
|
资源调度 调度 混合部署
Koordinator 助力云原生应用性能提升,小红书混部技术实践
本文基于 2023 云栖大会上关于 Koordinator 分享的实录,介绍小红书通过规模化落地混部技术来大幅提升集群资源效能,降低业务资源成本。