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

作者:筱葭 时间:2024-05-02 16:29:37 

本文实例讲述了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有两种类型机制:基本类型和对象类型。基本类型包括undefinednumberbooleanstringfunctionobject

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程序设计有所帮助。

来源:https://blog.csdn.net/zhouziyu2011/article/details/68942872

标签:JavaScript,设计模式,原型模式
0
投稿

猜你喜欢

  • python httpx的具体使用

    2021-05-31 21:42:28
  • 交互设计师的尴尬-我的强项是什么?

    2008-12-29 14:00:00
  • 简单解析PHP程序的运行流程

    2023-06-22 07:35:41
  • jupyter读取错误格式文件的解决方案

    2022-04-02 18:56:57
  • 使用Py2Exe for Python3创建自己的exe程序示例

    2021-12-25 21:21:10
  • 正则给header的冒号两边参数添加单引号(Python请求用)

    2022-10-07 13:59:59
  • JavaScript实现x秒后自动跳转到一个页面

    2024-04-18 10:00:55
  • Python 基于jwt实现认证机制流程解析

    2022-07-15 00:25:30
  • numpy增加维度、删除维度的方法

    2023-12-07 22:29:01
  • Python向Excel中插入图片的简单实现方法

    2022-09-27 21:41:59
  • Oracle备库宕机启动的完美解决方案

    2023-07-20 05:28:34
  • HTML4标签的默认样式列表

    2007-09-28 22:00:00
  • Python提取支付宝和微信支付二维码的示例代码

    2021-04-08 19:38:42
  • MySQL分区表的正确使用方法

    2024-01-29 01:51:26
  • Linux 修改Python命令的方法示例

    2023-10-04 18:16:58
  • 如何正确显示模式对话框showModalDialog中的中文?

    2010-06-28 18:24:00
  • wxPython实现整点报时

    2023-06-11 05:25:39
  • 配置php网页显示各种语法错误

    2023-11-14 07:23:04
  • Django restful framework生成API文档过程详解

    2021-08-10 16:37:16
  • 使用OpenCV实现仿射变换—平移功能

    2022-11-01 01:45:06
  • asp之家 网络编程 m.aspxhome.com