在JavaScript中,原型(prototype)是面向對象編程(OOP)核心概念之一。每個JavaScript對象都有原型屬性,它們用于提供對象的屬性和方法。原型對象作為一個模板,它定義了對象的通用屬性和方法。我們來看一個簡單的例子:
var car = function() { this.drive = function() { console.log("Driving"); } } var myCar = new car(); myCar.drive();上述代碼定義了一個名為"car"的函數。它有一個屬性"drive",函數體內部打印"Driving"。接下來,我們建立一個名為"myCar"的實例,它是通過new關鍵字由"car"函數創建的。 當我們調用myCar對drive()方法時,JavaScript解釋器會首先檢查myCar對象是否有其自身的drive()方法。由于myCar對象沒有drive()方法,JavaScript引擎將搜索它的原型鏈。搜索的第一個原型是car.prototype,如果car.prototype有一個drive()方法,它將被調用。這樣我們就把一個對象的屬性和方法分成了兩部分:對象本身的屬性和方法,以及從原型繼承的屬性和方法。 有關原型鏈的更多詳細信息,請參閱JavaScript的模式一書:"JavaScript的模式:構造高質量的代碼"。
var car = function() { this.color = "Red"; } car.prototype.drive = function() { console.log("Driving"); } var myCar = new car(); console.log(myCar.color); //輸出: "Red" myCar.drive(); //輸出: "Driving"在上面的代碼中,我們定義了一個car類并添加了一個名為"color"的屬性,具有默認值"Red"。為了實現drive()方法,我們把它放到car.prototype下。這就意味著通過new car()創建的每個實例都將繼承該方法。 我們甚至可以通過修改原型對象來影響所有實例的屬性和方法:
car.prototype.color = "Blue"; var yourCar = new car(); console.log(yourCar.color); //輸出: "Blue"在上面的代碼中,我們修改了car.prototype對象的color屬性,將其設置為"Blue"。然后創建一個新的實例"yourCar",它將繼承修改后的屬性。 當然,我們還可以繼續修改原型對象的行為:
car.prototype = { drive : function() { console.log("Driving"); }, park : function() { console.log("Parking"); }, brake : function() { console.log("Stopping"); } }; var hisCar = new car(); hisCar.drive(); //輸出: "Driving" hisCar.park(); //輸出: "Parking" hisCar.brake(); //輸出: "Stopping"在上面的代碼中,我們創建了一個新的用法car.prototype對象。這個新的原型對象有三個方法:drive()、park()和brake()。由于我們已經把整個原型對象替換為新的對象,我們必須再次創建一個實例對象,以確保我們使用的是修改后的原型。 總之,原型是JavaScript OOP的重要概念之一。他簡化了對象模型,并提供了一種靈活的方式來實現繼承和類似的概念。通過深入的了解原型繼承機制,我們可以寫出更具靈活性和可維護性的代碼。
下一篇css中圓的樣式