概述

原型模式是指原型實(shí)例指向創(chuàng)建對(duì)象的種類，并通過拷貝這些原型創(chuàng)建新的對(duì)象，是一種用來創(chuàng)建對(duì)象的模式，也就是創(chuàng)建一個(gè)對(duì)象作為另一個(gè)對(duì)象的prototype屬性；

prototype警告：學(xué)習(xí)了解原型模式前需先學(xué)習(xí)原型、原型鏈、prototype、__proto__、constructor等知識(shí)；

實(shí)現(xiàn)原型模式

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

Object.create()方法接收兩個(gè)參數(shù)：第一個(gè)參數(shù)是__proto__對(duì)象，第二個(gè)是prototiesObject（可選，使用第二個(gè)參數(shù)可以初始化額外的其他屬性，接受字面量對(duì)象形式）；　

var vehiclePrototype = {
    model:"保時(shí)捷",
    getModel: function () {
        console.log('車輛模具是：' + this.model);
    }
};

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

vehicle.getModel();  //車輛模具是：法拉利

我們使用Object.create實(shí)際上是新建了一個(gè)對(duì)象vehiclePrototype，并且繼承了vehiclePrototype的方法，所以此時(shí)vehicle.__proto__ == vehiclePrototype；

第二個(gè)參數(shù)中初始化了"model"的值，將model的值初始化為了"法拉利",所以此時(shí)新創(chuàng)建的對(duì)象vehiclePrototype中只有一個(gè)model，值為"法拉利"；

不用Object.create()實(shí)現(xiàn)，用prototype:

var vehiclePrototype = {
    init: function (carModel) {
        this.model = carModel || "保時(shí)捷";
    },
    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中，我們先創(chuàng)建了一個(gè)新的構(gòu)造函數(shù)，然后將該函數(shù)的原型指向vehiclePrototype，然后進(jìn)行實(shí)例化該函數(shù)，最后繼承之后調(diào)用prototype上的init方法，最后將執(zhí)行結(jié)果進(jìn)行返回也是同樣可以實(shí)現(xiàn)的；

總結(jié)

原型模式在JavaScript中無處不在，其他模式中有很多也是基于prototype來實(shí)現(xiàn)的，所以好好學(xué)習(xí)、復(fù)習(xí)原型和原型鏈的知識(shí)很重要，重點(diǎn)是prototype、__proto__、constructor等關(guān)鍵屬性知識(shí)點(diǎn)；

以上就是怎樣用JavaScript實(shí)現(xiàn)原型模式的詳細(xì)內(nèi)容，更多關(guān)于JavaScript原型模式的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論