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对象拥有同一份共享的属性和方法集合,除非他们直接通过写方法实现自己独有的。

 

目录
相关文章
|
4月前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
23天前
|
设计模式 JavaScript 算法
浅谈几种js设计模式
设计模式是软件开发中的宝贵工具,能够提高代码的可维护性和扩展性。通过单例模式、工厂模式、观察者模式和策略模式,我们可以解决不同场景下的实际问题,编写更加优雅和高效的代码。
28 8
|
2月前
|
设计模式 数据安全/隐私保护
Next.js 实战 (七):浅谈 Layout 布局的嵌套设计模式
这篇文章介绍了在Next.js框架下,如何处理中后台管理系统中特殊页面(如登录页)不包裹根布局(RootLayout)的问题。作者指出Next.js的设计理念是通过布局的嵌套来创建复杂的页面结构,这虽然保持了代码的整洁和可维护性,但对于特殊页面来说,却造成了不必要的布局包裹。文章提出了一个解决方案,即通过判断页面的skipGlobalLayout属性来决定是否包含RootLayout,从而实现特殊页面不包裹根布局的目标。
118 33
|
4月前
|
设计模式 前端开发 JavaScript
JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式
本文深入探讨了JavaScript设计模式及其在实战中的应用,涵盖单例、工厂、观察者、装饰器和策略模式,结合电商网站案例,展示了设计模式如何提升代码的可维护性、扩展性和可读性,强调了其在前端开发中的重要性。
65 2
|
4月前
|
JavaScript 前端开发
Javascript如何实现继承?
【10月更文挑战第24天】JavaScript 中实现继承的方式有很多种,每种方式都有其优缺点和适用场景。在实际开发中,我们需要根据具体的需求和情况选择合适的继承方式,以实现代码的复用和扩展。
|
4月前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
4月前
|
JavaScript 前端开发 开发者
js实现继承怎么实现
【10月更文挑战第26天】每种方式都有其优缺点和适用场景,开发者可以根据具体的需求和项目情况选择合适的继承方式来实现代码的复用和扩展。
48 1
|
6月前
|
自然语言处理 JavaScript 前端开发
一文梳理JavaScript中常见的七大继承方案
该文章系统地概述了JavaScript中七种常见的继承模式,包括原型链继承、构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合继承等,并探讨了每种模式的实现方式及其优缺点。
一文梳理JavaScript中常见的七大继承方案
|
5月前
|
设计模式 JavaScript 前端开发
JavaScript设计模式--访问者模式
【10月更文挑战第1天】
55 3
|
6月前
|
JavaScript 前端开发
js之class继承|27
js之class继承|27

热门文章

最新文章