javascript设计模式--继承(下)-阿里云开发者社区

开发者社区> bill.kang> 正文

javascript设计模式--继承(下)

简介:   本章的主题是继承,在javascript中要实现继承比其他面相对象语言要复杂的多,他主要使用原型实现继承。下面就介绍几种常用的实现继承的方式。   1.经典继承(Classical Inheritance)   我们首先创建一个Person类。
+关注继续查看

  本章的主题是继承,在javascript中要实现继承比其他面相对象语言要复杂的多,他主要使用原型实现继承。下面就介绍几种常用的实现继承的方式。

  1.经典继承(Classical Inheritance)

  我们首先创建一个Person类。

/* Class Person. */
function Person(name) {
  this.name = name;
}
Person.prototype.getName = function() {
  return this.name;
}

   现在我们创建一个Author类,继承自Person

/* Class Author. */
function Author(name, books) {
  //这种方式只能继承Person构造函数内部的对象
  Person.call(
this, name); // Call the superclass's constructor in the scope of this.
  this.books = books; // Add an attribute to Author. }
//将Author的prototype指向Person的实例,这样他就继承了Person prototype里面的对象
Author.prototype
= new Person(); // Set up the prototype chain.
//注意,要将Author的constructor重新指回他本身,因为指定原型之后,constructor已经为null,需要重新指定
Author.prototype.constructor = Author; // Set the constructor attribute to Author. Author.prototype.getBooks = function() { // Add a method to Author.   return this.books; };

  通过上面的步骤就实现了经典继承,如果需要使用Author类,也是相当的简单。

var author = [];
author[0] = new Author('Dustin Diaz', ['JavaScript Design Patterns']);
author[1] = new Author('Ross Harmes', ['JavaScript Design Patterns']);
author[1].getName();
author[1].getBooks();

  当然我们可以通过一个扩展方法使继承变的通用。

/* Extend function. */
function extend(subClass, superClass) {
  var F = function() {};
  F.prototype = superClass.prototype;
  subClass.prototype = new F();
  subClass.prototype.constructor = subClass;
}

  现在整个继承过程变为:

/* Class Person. */
function Person(name) {
  this.name = name;
}
Person.prototype.getName = function() {
  return this.name;
}
/* Class Author. */
function Author(name, books) {
  Person.call(this, name);
  this.books = books;
}
extend(Author, Person);
Author.prototype.getBooks = function() {
  return this.books;
};

 

  2.原型继承(Prototypal Inheritance)

  经典继承是通过声明一个类的结构,通过初始化该类的实例来创建新对象。新对象包括自己单独享有的属性和与其他实例共享的方法。然而原型继承并没有类的构造函数,他只创建一个对象,然后他将自己以原型的方式提供给其他子类使用。下面我们来看例子:

/* Clone function. */
function clone(object) {
  function F() {}
  F.prototype = object;
  return new F;
}


/*
Person Prototype Object. */ var Person = {   name: 'default name',   getName: function() {     return this.name;   } };
var reader = clone(Person);
alert(reader.getName()); // This will output 'default name'.
reader.name = 'John Smith';
alert(reader.getName()); // This will now output 'John Smith'.

  Clone方法创建了一个新的空函数F,然后将F的prototype指向原型对象,最后函数返回F的实例。

 

比较经典继承和原型继承:

  毫无疑问,经典继承更容易理解,几乎所有的javascript oop都是通过这种方式实现的。如果你创建一个广泛使用的api,最好还是用这种方式。

  原型继承占用更少的内存,因为所有的clone对象拥有同一份共享的属性和方法集合,除非他们直接通过写方法实现自己独有的。

 

adpics.aspx?source=kbh1983&sourcesuninfo

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
阿里云服务器怎么设置密码?怎么停机?怎么重启服务器?
如果在创建实例时没有设置密码,或者密码丢失,您可以在控制台上重新设置实例的登录密码。本文仅描述如何在 ECS 管理控制台上修改实例登录密码。
8642 0
阿里云服务器端口号设置
阿里云服务器初级使用者可能面临的问题之一. 使用tomcat或者其他服务器软件设置端口号后,比如 一些不是默认的, mysql的 3306, mssql的1433,有时候打不开网页, 原因是没有在ecs安全组去设置这个端口号. 解决: 点击ecs下网络和安全下的安全组 在弹出的安全组中,如果没有就新建安全组,然后点击配置规则 最后如上图点击添加...或快速创建.   have fun!  将编程看作是一门艺术,而不单单是个技术。
10468 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
11942 0
javascript设计模式--封装和信息隐藏(上)
  今天博文关注的是javascript中的封装,文章内容来自《pro javascript design patterns》(有兴趣的朋友可以直接去下)和自己对这一问题的理解。   本文分上下两部分,上部讲基本模式(basic patterns):完全暴露法,下划线标记法和使用闭包;下部讲高级模式(Advanced Patterns),如何实现静态方法和属性,常量还有其他一些知识点。
778 0
javascript设计模式--接口
最近在看javascript设计模式的书籍《pro javascript design pattrens》,觉得很不错,可以提高自己对js oo的理解,也可能帮助自己更好的理解别人写的js library,提高自己js的水平。
741 0
《JavaScript设计模式》——第2章 写的都是看到的——面向对象编程 2.1两种编程风格——面向过程与面向对象
面向对象编程就是将你的需求抽象成一个对象,然后针对这个对象分析其特征(属性)与动作(方法)。这个对象我们称之为类。面向对象编程思想其中有一个特点就是封装,就是说把你需要的功能放在一个对象里。比如你大学毕业你来公司携带的行李物品没有一件一件拿过来,而是要将他们放在一个旅行箱里,这样不论携带还是管理都会更方便一些。
1265 0
+关注
bill.kang
从事软件研发十余年,入行前端开发六年有余,对前端工程化有一定认识。 现就职于客如云科技有限公司,任前端技术经理一职。
109
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载