《javascript设计模式》读书笔记三(继承)

1.为什么要继承

在设计类的时候,总是在强调减少类与类之间的“耦合度”,也就是减少类与类之间的关联。而通过继承能给我们带来什么呢?

1)减少重复性代码

2)弱化对象间的耦合

3)抽象不应该依赖细节;细节应该依赖抽象—《设计模式》

而我们知道像在C#语言中,继承机制操作的话,只需要一个关键字即可,而在javas没有这种机制,还需要模范,下面就是几种模仿继承的方法。

2.原型链式

首先创建一个Person类,其有name属性,然后让一个Author类来继承Person类。效果如下:

<span style="font-family:SimSun;font-size:18px;"> <script>
        //通过一个构造函数来创建一个Person类
        function Person(name) {
            this.name = name;
        }

        //通过原型机制来获取name属性
        Person.prototype.getName = function () {
            alert(this.name);
        }

        //创建一个Author类
        function Author(name, books) {
            //调用一个对象的一个方法,以另一个对象替换当前对象。
            //这里就是Author会有了Person类name的属性
            //也就是Author类有了this.name = name
            Person.call(this, name);
            this.books = books;
        }
        //使Author类的prototype属性指向Person类
        //从这里Author类的prototype也就有了Person类的方法
        Author.prototype = new Person();
        alert(Author.prototype.constructor);//返回Person
        Author.prototype.constructor = Author;  //刚才prototype属性设置时,constructor被抹除
        Author.prototype.getBooks = function () {
            return this.books;
        }

        //创建一个实例对象
        var a = new Author("好的", "haode");
        //通过继承a也有了Person类的Getname方法
        a.getName();

    </script></span>

通过上述代码,我们看出为了让Author继承Person,必须手工设置Author的Prototope为Person的实例,最后还需将prototype的constructor的属性设置为author。通过这几步就实现了继承。

我们为何不能像C#中那样直接通过一个关键字就实现继承,也没有了这么多麻烦的操作呢?

3.extend函数

在这种方法中,我们就是把继承子类的整个过程封装到了一个extend函数中,这样就达到了模仿C#那种关键字的效果。既然我们知道了我们需要的操作,直接看代码吧

<span style="font-family:SimSun;font-size:18px;">    //extend函数用来封装那一些列的操作
        //参数是要实现继承的两个对象
        //subClass代表子类,superClass代表父类
        function extend(subClass, superClass) {
            //声明第三方,通过第三方来实现那一系列的操作
            var F = function () { };
            //看过上面那个例子,下面这些东东就知道干什么了把
            F.prototype = superClass.prototype;
            subClass.prototype = new F();
            subClass.prototype.constructor = subClass;
        }
        //通过一个构造函数来创建一个Person类
        function Person(name) {
            this.name = name;
        }

        //通过原型机制来获取name属性
        Person.prototype.getName = function () {
            alert(this.name);
        }
        //创建一个Author类
        function Author(name, books) {
            //调用一个对象的一个方法,以另一个对象替换当前对象。
            //这里就是Author会有了Person类name的属性
            //也就是Author类有了this.name = name
            Person.call(this, name);
            this.books = books;
        }

        //继承的实现操作
        extend(Author, Person);
        Author.prototype.getBooks = function () {
            return this.books;
        }</span>

4.原型式继承

我们从上述几种类式继承中看到,每次的操作都需要两个步骤:第一:定义类的结构;第二:实例化该类。而接下来原型式继承时,并不需要这些操作。只需直接创建一个对象,然后这个对象就可以被后面的对象所重用,在这里用到了Clone()的方法。看一下实例

<span style="font-family:SimSun;font-size:18px;"> <script>
        //定义一个Person对象
        var Person = {
            name: 'default name',
            getName: function () {
                return this.name;
            }
        };
        //
        var reader = clone(Person);
        alert(reader.getName()); // reader就有了Person的方法
        reader.name = 'John Smith';
        alert(reader.getName()); 

        /*Author原型对象*/

        var Author = clone(Person);
        Author.books = [];
        Author.getBooks = function () {
            return this.books;
        }
    </script></span>

上面的clone函数可以用来创建新的Person对象,它会创建一个空对象,而该对象的原型对象被设置为Person,这就意味着在这个对象中查找某个方法的时候,如果找不到,那么查找过程会在其原型对象中继承进行。

通过这个方法,减少了实例化person子类的操作,只要执行一次克隆即可。

5.小结

本篇博客中主要讲解了几种继承的方法,可以分为两种:类式继承和原型式继承。区别在原型式继承更能节约内存,因为正如上述代码所示所有克隆出来的对象都共享每个属性和方法,而且通过clone方法也减少了许多麻烦的操作。当然到底使用哪种继承方式主要取决于你更喜欢哪种类型。

以上代码中涉及到javascript中call方法、constructor与prototype。详细的内容请参见一下博客。

关于JS中的constructor与prototype

javaScript 中 call 函数的用法说明

时间: 2024-10-08 10:29:09

《javascript设计模式》读书笔记三(继承)的相关文章

JavaScript设计模式:读书笔记(未完)

该篇随我读书的进度持续更新阅读书目:<JavaScript设计模式> 2016/3/30 2016/3/31 2016/3/30: 模式是一种可复用的解决方案,可用于解决软件设计中遇到的常见问题./将解决问题的方法制作成模板,并且这些模板可应用于多种不同的情况.有效模式的附加要求:适合性,实用性,适用性. 模式的优点: 防止局部问题引起大问题,模式让我们的代码更有组织性 模式通常是通用的解决方式,不管我们开发哪种应用程序,都可以用模式优化我们代码的结构 模式确实可以让我们避免代码复用,使代码更

《世界是数字的》读书笔记 三

<世界是数字的>读书笔记 三 第六章 软件系统 操作系统是软件中的基础层,他负责管理计算机硬件,并为其他被称作应用程序的程序运行提供支持. 6.1操作系统 操作系统控制和分配计算机资源.首先,他负责管理CPU,调度和协调当前运行的程序.操作系统通常都需要管理数十个同时运行的进程或任务. 其次,操作系统管理RAM.他把程序加载到内存中以便执行指令. 最后,操作系统管理和协调外接设备的活动. 6.2操作系统怎么工作 计算机启动时首先要加载代码,加载的过程中还要检查硬件,比如哪些设备已经接入电脑,,

《大型网站技术架构》读书笔记三:大型网站核心架构要素

一.性能—响应时间决定用户 (1)浏览器端: ①浏览器缓存: ②使用页面压缩: PS:Gzip压缩效率非常高,通常可以达到70%的压缩率,也就是说,如果你的网页有30K,压缩之后就变成了9K左右.想要启用Gzip压缩,提高浏览速度,可以浏览这篇文章:http://www.chinaz.com/web/2012/1017/278682.shtml ③合理布局页面: CSS:把样式表置于顶部:避免使用CSS表达式(expression_r):使用外部JavaScript和CSS:削减JavaScri

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

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

《编写可维护的javascript》读书笔记(中)——编程实践

上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. 二.编程实践 1.UI松耦合 第一.将css从javascript中抽离(要改变dom样式数据,应该去操作dom的class名而非dom的style属性,后续要修改此样式只需到对应的css文件中修改而不用修改js文件): 第二.将javascript从HTML中抽离,比如下面的写法是不好的 <!-- 不

《你必须知道的.NET》读书笔记三:体验OO之美

一.依赖也是哲学 (1)本质诠释:"不要调用我们,我们会调用你" (2)依赖和耦合: ①无依赖,无耦合: ②单向依赖,耦合度不高: ③双向依赖,耦合度较高: (3)设计的目标:高内聚,低耦合. ①低耦合:实现最简单的依赖关系,尽可能地减少类与类.模块与模块.层次与层次.系统与系统之间的联系: ②高内聚:一方面代表了职责的统一管理,一方面又代表了关系的有效隔离: (4)控制反转(IoC):代码的控制器交由系统控制而不是在代码内部,消除组件或模块间的直接依赖: (5)依赖注入(DI): ①

大话设计模式读书笔记2——策略模式

策略模式是一种定义一系列算法的方法,从概念上来看,所有这些算法完成的都是相同的工作,只是实现不同,它可以以相同的方式调用所有的算法,减少了各种算法类与使用算法类直接的耦合. UML 图: 根据<大话设计模式>——第二章 商场促销这个案例代码来简单的记录一下策略模式的使用方式: /// <summary> /// 现金收费抽象类 /// </summary> public abstract class CashSuper { /// <summary> ///

悟道—位IT高管20年的职场心经(读书笔记三)

悟道--一位IT高管20年的职场心经 第三章 世事洞明皆学问 职场就是你的大半个世界 是你一辈子也读不完的一大本书 想明白一个道理, 看明白一件事儿, 你就向成功迈进了一步. 1.1  "四行"说 四行是指: 第一,  你自己得行.自己的基础的能力是必须的,得靠自己学习. 第二,  得有人说你行.需要有伯乐,实际上是你得有一个自己的圈子,并且这些人都人认同你. 第三,  说你行的人得行.自己周围的圈子,里面也必须有牛人,只有在牛人的范围内,才能突显你自己的才能. 第四,  你身子骨得行

《R实战》读书笔记三

第二章  创建数据集 本章概要 1探索R数据结构 2使用数据编辑器 3数据导入 4数据集标注 本章所介绍内容概括如下. 两个方面的内容. 方面一:R数据结构 方面二:进入数据或者导入数据到数据结构 理解数据集 一个数据集通常由一个表格组合而成,行表示观测,列表示变量.病人的数据集如表1所示. 表1 病人数据集 数据集能够反映数据结构.数据类型和内容. 数据结构 R数据结构如图2所示. 图2:R数据结构 数据结构即数据的组织方式,R数据结构包括向量.矩阵.数组.数据框和列表等. R向量 R向量是一

大话设计模式读书笔记1——简单工厂模式

最近几日,重温了一下<大话设计模式>这本书,当时读的仓促,有很多没有注意的地方,现在仔细翻看起来,发现这值得细细品味的一本书!! 好东西就要记下来!!! 第一章笔记:从一个简单的计算器程序来看简单工厂模式. 变化的地方就要封装,用一个单独的类来做创造实例的过程这就是工厂. UML图: /// <summary> /// 运算类 /// </summary> public class Operation { public double Number1 { get; set