javascript學習筆記--經典繼承、組合繼承、原型式繼承、寄生繼承以及寄生組合繼承
阿新 • • 發佈:2018-06-10
ron 過程 obj 對象 __proto__ 避免 2.0 creating scrip
經典繼承
js中實現經典繼承的方式是通過構造函數來實現的,即在子類中對父類調用call方法。
function Geometric() { this.time = ""; this.color = ""; this.base = function () { alert("Creating time is: " + this.time + " and color is: " + this.color) } } function Circle() { Geometric.call(this); this.radius = 0; this.area = function () { alert("the area is: " + Math.PI * this.radius * this.radius) } } function Rectangle() { Geometric.call(this); this.wi = 0; this.he = 0; this.area = function () { alert("the area is: " + this.wi * this.he) } } var instance1 = new Circle() instance1.time = "20xx.xx.xx" instance1.color = "red" instance1.radius = 0.3; instance1.area() instance1.base() var instance2 = new Rectangle() instance2.time = "20xx.xx.xx" instance2.color = "blue" instance2.wi = 3; instance2.he = 4; instance2.area(); instance2.base();
組合繼承
組合繼承又稱偽經典繼承,是通過原型鏈(實現對原型屬性和方法的繼承) +借用構造函數(實現對實例屬性的繼承) 。
父類的方法定義在父類的原型上;子類中繼續進行父類的call方法的調用;讓子類的原型指向父類;子類的方法定義在子類原型上。
//組合繼承 //原型鏈+借用構造函數 function Geometric() { this.time = ""; this.color = ""; } //方法定義在構造函數的原型上 Geometric.prototype.base = function () { alert("Creating time is: " + this.time + " and color is: " + this.color) } function Circle() { Geometric.call(this); this.radius = 0; } Circle.prototype = new Geometric() Circle.prototype.area = function () { alert("the area is: " + Math.PI * this.radius * this.radius) } var instance3 = new Circle(); instance3.time = "20xx.xx.xx" instance3.color = "green"; instance3.radius = "20" instance3.base(); instance3.area();
原型式繼承
原型式繼承使用了一個空函數對象F來作為原型鏈的中間變量。
父類的方法定義在父類的原型上;子類中繼續進行父類call方法的調用;構造一個空函數對象F;讓F的原型=父類的原型;子類的原型=F;子類原型的構造函數=子類;子類的方法構造在子類原型上。
//原型式繼承 //使用一個空函數F來當做中間對象 function Geometric() { this.time = ""; this.color = ""; } //方法定義在構造函數的原型上 Geometric.prototype.base = function () { alert("Creating time is: " + this.time + " and color is: " + this.color) } function Circle() { Geometric.call(this); this.radius = 0; } function F() { } F.prototype = Geometric.prototype; Circle.prototype = new F() Circle.prototype.constructor = Circle(); Circle.prototype.area = function () { alert("the area is: " + Math.PI * this.radius * this.radius) } var instance4 = new Circle(); instance4.time = "2018.06.03" instance4.color = "green"; instance4.radius = "20" instance4.base(); instance4.area(); alert(instance4.__proto__ == Circle.prototype) alert(instance4.__proto__.__proto__ == Geometric.prototype)
寄生繼承
寄生繼承了創建一個用於封裝繼承過程的函數。
創建一個繼承函數;傳入一個父類對象;在函數內構造該父類對象;在函數內創建子類;return該父類對象;
//寄生繼承 //創建一個用於封裝繼承過程的函數 function createGeometric(g) { var clone1 = Object(g); clone1.createCircle = function (radius) { this.radius = radius; this.circleArea = function () { alert("the area is: " + Math.PI * this.radius * this.radius) } } clone1.createRectangle = function (wi, he) { this.wi = wi; this.he = he; this.rectangleArea = function () { alert("the area is: " + this.wi * this.he); } } clone1.base = function () { alert("Creating time is: " + g.time + " and color is: " + g.color) } //最後要將新創建的對象return出去 return clone1 } var g = { time: "20xx.xx.xx", color: "red" } var Geometric = createGeometric(g); Geometric.base(); Geometric.createCircle(2.0); alert(Geometric.circleArea()) Geometric.createRectangle(4, 5); alert(Geometric.rectangleArea())
寄生組合繼承
寄生組合繼承避免了組合繼承中的一些冗余現象。
組合繼承中:子類中進行了父類call方法的調用;子類的原型指向父類;這樣就會有一定的冗余。
寄生組合繼承中,通過一個函數(此處寫為inheritPrototype)來代替子類的原型指向父類這一過程
//寄生組合繼承,避免了組合繼承中的冗余現象 function inheritPrototype(subType, superType) { var protoType = Object.create(superType.prototype); //創建對象 protoType.constructor = subType; //增強對象 subType.prototype = protoType; //指定對象 } function Geometric() { this.time = ""; this.color = ""; } //方法定義在構造函數的原型上 Geometric.prototype.base = function () { alert("Creating time is: " + this.time + " and color is: " + this.color) } function Circle() { Geometric.call(this); this.radius = 0; } //Circle.prototype = new Geometric() inheritPrototype(Circle, Geometric) Circle.prototype.area = function () { alert("the area is: " + Math.PI * this.radius * this.radius) } var instance5 = new Circle(); instance5.time = "20xx.xx.xx" instance5.color = "green"; instance5.radius = "20" instance5.base(); instance5.area();
javascript學習筆記--經典繼承、組合繼承、原型式繼承、寄生繼承以及寄生組合繼承