JavaScript设计模式之原型模式分析【ES5与ES6】

本文实例讲述了JavaScript设计模式之原型模式。分享给大家供大家参考，具体如下：

从设计模式的角度讲，原型模式是用于创建对象的一种模式，若需要创建一个对象，一种方法是先指定其类型，然后通过类来创建这个对象，另一种方法是通过原型来创建，不必关心对象的具体类型，而是找到一个对象，然后通过克隆来创建一个一模一样的对象。

ES5提供了Object.create(obj)方法来克隆对象，在不支持Object.create(obj)方法的浏览器中，可以使用以下代码：

Object.create = Object.create || function(obj) {
  function Func() {};
  Func.prototype = obj;
  return new Func();
}

一、JavaScript中的原型继承：

1. 大部分的数据都是对象；

JavaScript有两种类型机制：基本类型和对象类型。基本类型包括undefined、number、boolean、string、function、object。

JavaScript设计者的本意在于，除了undefined，一切都应该是对象，为了实现这一目标，number、boolean、string这几种基本数据类型通过对应的包装类Number、Boolean、String来变成对象类型数据。

JavaScript中的根对象是Object.prototype对象，Object.prototype对象是一个空的对象。JavaScript的每个对象，实际上都是从Object.prototype对象克隆而来的，Object.prototype对象就是它们的原型。

ES5提供了getPrototypeOf来查看对象的原型，Object.getPrototypeOf(任何对象) == Object.prototype都会返回true。

2. 要得到一个对象，不是通过实例化类，而是找到一个对象作为原型并克隆它；

JavaScript没有类的概念，new运算符后面的不是类，而是构造器。当使用new运算符来创建对象时，实际上也是先克隆Object.prototype对象，再进行一些额外操作的过程。

3. 对象会记住它的原型；

其实不能说对象有原型，而只能说对象的构造器有原型。JavaScript给对象提供了一个名为__proto__属性，默认指向它的构造器的原型，__proto__属性是对象与构造器的原型联系起来的纽带，如：person.__proto__ == Person.prototype。

4. 若对象无法响应某个请求，它会把该请求委托给它自己的原型。

这是原型继承的精髓，当一个对象无法响应某个请求时，会顺着原型链把请求传递下去，直到遇到一个可以处理该请求的对象为止。但是，原型链并不是无限长的，只会查找到Object.prototype对象为止，由于Object.prototype的原型是null，因此请求无法找到可以处理的对象，返回undefined。

二、原型继承的未来

使用Object.create来实现原型继承似乎更能体现原型模式的精髓，但是，通过Object.create创建对象的效率并不高，通常要比通过构造函数创建对象慢。

ES6带来了新的Class语法，这让JavaScript看起来像是一门基于类的语言，但背后仍然是通过原型机制来创建对象。

class Person {
  constuctor(name) {
    this.name = name;
  }
  getName() {
    return this.name;
  }
}
class Student extends Person {
  constuctor(name) {
    super(name);
  }
  sayHello() {
    alert(“Hello”);
  }
}
var student = new Student(“Alice”);
student.sayHello();

更多关于JavaScript相关内容可查看本站专题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • 深入了解js原型模式

    一.什么是原型模式 在js中,创建对象的方式有工厂模式和构造函数模式等: 而构造函数模式最大的问题在于:构造函数中的每个方法都需要在实例对象中重新创建一遍,不能复用,所以为了解决这一个问题,就需要使用原型模式来创建对象. 原型模式是把所有实例共享的方法和属性放在一个叫做prototype(原型)的属性中 ,在创建一个函数时都会有个prototype属性, 这个属性是一个指针,指向一个对象,是通过调用构造函数而创建的那个对象实例的原型对象. // 构造函数 function Person() {}

  • JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】

    本文实例讲述了JS中创建自定义类型的常用模式.分享给大家供大家参考,具体如下: 虽然在 ES6 中,已经出了 class 的语法,貌似好像不用了解 ES5 中的这些老东西了,但是越深入学习,你会发现理解这些模式的重要性. 在本文中,我会描述 7 种常用的创建自定义类型的模式:工厂模式.构造函数模式.原型模式.组合使用构造函数模式.动态原型模式.寄生构造函数模式.稳妥构造函数模式.分别给出他们的示例代码,并分析他们的利弊,方便读者选择具体的方式来构建自己的自定义类型. 最后,我会指出 ES6 中的

  • JavaScript创建对象方式总结【工厂模式、构造函数模式、原型模式等】

    本文实例总结了JavaScript创建对象方式.分享给大家供大家参考,具体如下: 这里主要是对<JavaScript高级程序设计>第六章(面向对象的程序设计)的总结,书上的这章至少看了4遍是有的.该章主要讲对象的创建与继承.其中创建对象和继承方式至少6种,再加上一些方法属性,很容易搞得晕头转向的.因此有必要对本章的内容理一理,以后忘了也好过来看一看. 由于文章长度的限制,本文主要讲创建对象. 1 创建对象 1.1 一般方法 使用Object或者采用对象字面量的方法. var o = {a: 1

  • 详解js产生对象的3种基本方式（工厂模式，构造函数模式，原型模式）

    1.工厂模式 工厂模式是软件工程领域一种广为人知的设计模式,而由于在ECMAScript中无法创建类,因此用函数封装以特定接口创建对象.其实现方法非常简单,也就是在函数内创建一个对象,给对象赋予属性及方法再将对象返回即可. function a(name){ var b = new object(); b.name = name; b.say = function(){ alert(this.name); } return b } 函数内部产生b对象并返回. 2.构造函数模式 function

  • JavaScript设计模式之原型模式分析【ES5与ES6】

    本文实例讲述了JavaScript设计模式之原型模式.分享给大家供大家参考,具体如下: 从设计模式的角度讲,原型模式是用于创建对象的一种模式,若需要创建一个对象,一种方法是先指定其类型,然后通过类来创建这个对象,另一种方法是通过原型来创建,不必关心对象的具体类型,而是找到一个对象,然后通过克隆来创建一个一模一样的对象. ES5提供了Object.create(obj)方法来克隆对象,在不支持Object.create(obj)方法的浏览器中,可以使用以下代码: Object.create = O

  • Javascript设计模式之原型模式详细

    Javascript设计模式之原型模式详细

    目录 1.原型模式 示例一 示例二 示例三 2.观察者模式 1.原型模式 原型模式用于在创建对象时,通过共享某个对象原型的属性和方法,从而达到提高性能.降低内存占用.代码复用的效果. 示例一 function Person(name) { this.name = name; this.config = { a: "1", b: "2", }; this.hello = function () { console.info("hello"); };

  • JavaScript设计模式之原型模式详情

    JavaScript设计模式之原型模式详情

    目录 前言 案例 回顾 原型的拓展 前言 设计模式呢最多的可能是用到类,我们去通过类来封装一些实用的方法,通过设计模式去实现各个方法之间的解耦等,由于JS中的继承是用原型链继承的,所以原型模式是用原型实例指向创建对象的类,使用于创建新的对象的类共享原型对象的属性以及方法 案例 比如我们现在需要实现一个页面上的轮播图,可能需要用到对轮播图操作的方法,比如聚焦,切换,点击展开等动作,那么我们可以创一个图片轮播的方法,也可以叫做类 上面这个方法只是一个基础的方法,但在实际操作中我们可能会有不同的各种各

  • JavaScript设计模式之原型模式和适配器模式示例详解

    目录 原型模式 原型模式介绍 代码实现 适配器模式 适配器模式介绍 代码实现 小结 原型模式 原型模式介绍 原型模式是指原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象,是一种用来创建对象的模式,也就是创建一个对象作为另一个对象的prototype属性 实现原型模式是在ECMAScript5中,提出的Object.create方法,使用现有的对象来提供新创建的对象的__proto__. 代码实现 var lynkCoPrototype = { model: "领克", get

  • php设计模式之原型模式分析【星际争霸游戏案例】

    本文实例讲述了php设计模式之原型模式.分享给大家供大家参考,具体如下: 我们一般用new来新增对象,不过很多时候新增一个对象需要一些工作.而星际里面往往会新增某些类的大量的对象,比如新增很多机枪兵和龙骑. 待解决的问题:我们能否减少new的使用,同时避免需要新增对象的时候,了解对象的类名. 思路:php5提供了克隆方法,我们可以新增一个对象,然后每次需要新增和她同类的对象,克隆他就可以了. 原型(Prototype)模式示例: <?php //机枪兵类 class Marine { //所属的

  • JavaScript设计模式之原型模式(Object.create与prototype)介绍

    原型模式说明 说明:使用原型实例来 拷贝 创建新的可定制的对象:新建的对象,不需要知道原对象创建的具体过程: 过程:Prototype => new ProtoExam => clone to new Object; 使用相关代码: 复制代码 代码如下: function Prototype() {     this.name = '';     this.age = '';     this.sex = ''; } Prototype.prototype.userInfo = functio

  • javascript设计模式 – 原型模式原理与应用实例分析

    本文实例讲述了javascript设计模式 – 原型模式原理与应用.分享给大家供大家参考,具体如下: 介绍:在日常的开发过程中,我们经常会利用到前端模板引擎来做页面渲染,因为存在很多页面结构相同,内容不同的场景.这种场景在js层面也会遇到, 很多组件存在相同或者类似,重复的创建会导致系统的消耗,这就要用到原型模式了.将相似内容提取出来作为原型类,创建具体类时需要对原型类进行复制然后扩展. 需要注意的是,复制出来的对象在进行修改时不会影响到原型类,二者相互独立. 定义:使用原型实例指定创建对象的种

  • 结合ES6 编写 JavaScript 设计模式中的结构型模式

    目录 前言 什么是设计模式? 结构型设计模式 适配器模式 实例 桥接模式 实例 组合模式 实例 装饰者模式 实例 门面模式 实例 享元模式 实例 代理模式 实例 前言 本文将对 20 多种 JavaScript 设计模式进行简单概述,然后结合 ES6 类的方式来编写实例代码展示其使用方式. JavaScript 在现代前端中扮演重要的角色,相比过去能够做的事情已经不在一个级别上了.JavaScript 最大的特征是其灵活性,一般只要敢想敢写,可以把程序写得很简单,有可以写得很复杂.其灵活性导致编

  • 深入理解JavaScript系列（42）：设计模式之原型模式详解

    介绍 原型模式(prototype)是指用原型实例指向创建对象的种类,并且通过拷贝这些原型创建新的对象. 正文 对于原型模式,我们可以利用JavaScript特有的原型继承特性去创建对象的方式,也就是创建的一个对象作为另外一个对象的prototype属性值.原型对象本身就是有效地利用了每个构造器创建的对象,例如,如果一个构造函数的原型包含了一个name属性(见后面的例子),那通过这个构造函数创建的对象都会有这个属性. 在现有的文献里查看原型模式的定义,没有针对JavaScript的,你可能发现很

  • JavaScript构造函数与原型之间的联系

    JavaScript构造函数与原型之间的联系

    目录 一.构造函数和原型 1.构造函数 2.构造函数的问题 3.构造函数原型 prototype 4.对象原型 __proto__ 5.constructor 构造函数 6.构造函数.实例.原型对象三者之间的关系 7.JavaScript 的成员查找机制(规则) 8. 扩展内置对象 二.类的本质 一.构造函数和原型 1.构造函数 构造函数是一种特殊的函数,主要用来初始化对象,即为对象成员变量赋初始值,它总与 new 一起使用.我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面.

随机推荐