我的编程空间,编程开发者的网络收藏夹
学习永远不晚

怎样用JavaScript实现原型模式

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

怎样用JavaScript实现原型模式

概述

原型模式是指原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象,是一种用来创建对象的模式,也就是创建一个对象作为另一个对象的prototype属性;

prototype警告:学习了解原型模式前需先学习原型、原型链、prototype、__proto__、constructor等知识;

实现原型模式

ES5中的API:Object.create(prototype, optionalDescriptorObjects)

Object.create()方法接收两个参数:第一个参数是__proto__对象,第二个是prototiesObject(可选,使用第二个参数可以初始化额外的其他属性,接受字面量对象形式); 


var vehiclePrototype = {
    model:"保时捷",
    getModel: function () {
        console.log('车辆模具是:' + this.model);
    }
};

var vehicle = Object.create(vehiclePrototype,{
    "model":{
        value:"法拉利"
    }
});

vehicle.getModel();  //车辆模具是:法拉利

我们使用Object.create实际上是新建了一个对象vehiclePrototype,并且继承了vehiclePrototype的方法,所以此时vehicle.__proto__ == vehiclePrototype;

第二个参数中初始化了"model"的值,将model的值初始化为了"法拉利",所以此时新创建的对象vehiclePrototype中只有一个model,值为"法拉利";

不用Object.create()实现,用prototype:


var vehiclePrototype = {
    init: function (carModel) {
        this.model = carModel || "保时捷";
    },
    getModel: function () {
        console.log('车辆模具是:' + this.model);
    }

};

function vehicle(model) {
    function F() { };
    F.prototype = vehiclePrototype;    
    var f = new F();
    f.init(model);
    return f;
}
var car = vehicle('法拉利');
car.getModel();  // 车辆模具是:法拉利

上述代码中,我们可以看到核心是在vehicle中,我们先创建了一个新的构造函数,然后将该函数的原型指向vehiclePrototype,然后进行实例化该函数,最后继承之后调用prototype上的init方法,最后将执行结果进行返回也是同样可以实现的;

总结

原型模式在JavaScript中无处不在,其他模式中有很多也是基于prototype来实现的,所以好好学习、复习原型和原型链的知识很重要,重点是prototype、__proto__、constructor等关键属性知识点;

以上就是怎样用JavaScript实现原型模式的详细内容,更多关于JavaScript原型模式的资料请关注编程网其它相关文章!

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

怎样用JavaScript实现原型模式

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

JavaScript设计模式之原型模式怎么实现

本篇内容主要讲解“JavaScript设计模式之原型模式怎么实现”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“JavaScript设计模式之原型模式怎么实现”吧!前言设计模式呢最多的可能是用到类
2023-07-02

java原型模式怎么实现

这篇文章主要介绍“java原型模式怎么实现”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“java原型模式怎么实现”文章能帮助大家解决问题。原型模式属于对象的创建模式。通过给出一个原型对象来指明所有创
2023-06-28

java原型设计模式怎么实现

在Java中,可以通过实现Cloneable接口和重写clone()方法来实现原型设计模式。1. 首先,在需要被复制的类中实现Cloneable接口。该接口是一个标记接口,没有任何方法需要实现。javapublic class MyClas
2023-10-18

java如何实现原型模式

这篇文章主要介绍了java如何实现原型模式,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。定义: 通过复制现有的对象实例来创建新的对象实例。实现:实现Clonea
2023-05-30

javascript原型链怎么实现

这篇文章主要讲解了“javascript原型链怎么实现”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“javascript原型链怎么实现”吧!原型链在ES6中引入了class关键字,但是JS依
2023-06-22

JavaScript 原型模式的实战:运用其解决实际问题

JavaScript原型模式是面向对象编程的基石,它允许动态创建对象,并通过原型链实现继承。本文将深入探讨原型模式的原理及其实际应用,通过演示代码解析如何运用原型模式解决实际问题,助力你更深入理解和掌握JavaScript原型模式。
JavaScript 原型模式的实战:运用其解决实际问题
2024-02-06

JavaScript 原型模式的深入剖析:从原理到应用

JavaScript原型模式是一种强大的机制,允许您创建和扩展对象。通过理解原型链的概念和原型方法的使用,您可以编写出更强大、更灵活的代码。
JavaScript 原型模式的深入剖析:从原理到应用
2024-02-06

java怎样实现工厂模式

这篇文章将为大家详细讲解有关java怎样实现工厂模式,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。定义:工厂模式是 Java 中最常用的设计模式之一。这种类型的设计模式属于创建型模式,它提供了一种创建对象
2023-05-30

怎么用Javascript实现观察者模式

本篇内容主要讲解“怎么用Javascript实现观察者模式”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“怎么用Javascript实现观察者模式”吧!什么是观察者模式?观察者模式一种设计模式。观
2023-06-21

原生JavaScript怎么实现模态框

本篇内容介绍了“原生JavaScript怎么实现模态框”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!原生js封装模态框最近需要一个模态框,然
2023-07-02

编程热搜

目录