文章详情

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

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎样用JavaScript实现原型模式

2024-04-02 19:55

关注

概述

原型模式是指原型实例指向创建对象的种类,并通过拷贝这些原型创建新的对象,是一种用来创建对象的模式,也就是创建一个对象作为另一个对象的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

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     807人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     351人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     314人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     433人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     221人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯