（知識點）JavaScript繼承

標籤：空間   lin   pre   cal   call   triangle   自己   tar   str   

1）原型鏈

　　①原型鏈樣本

function Shape() {    this.name = ‘shape‘;    this.toString = function(){        return this.name;    }}function TwoDshape () {    this.name = ‘2D shape‘;}function Triangle (side,height) {    this.name = ‘Triangle‘;    this.side = side;    this.height = height;    this.getArea = function () {        return this.side * this.height / 2;    }}TwoDshape.prototype = new Shape();Triangle.prototype = new TwoDshape();   //用new建立對象實體，並賦值覆蓋該對象的原型TwoDshape.prototype.constructor = TwoDshape;Triangle.prototype.constructor = Triangle; var my = new Triangle(5,10); my.getArea();　　 　　　　//25console.log(my.toString());//繼承的方法，具體步驟（遍曆my對象屬性沒有找到，接著查看my.__proto__所指向的對象，即new TwoDshape()建立的實體，//依然沒找到，又繼續尋找該實體的__proto__所指向的對象，即new Shape()所建立的實體，找到toString方法，並在my對象中被調用，this指向my）//通過instanceof操作符，我們可以驗證my對象同時是上面三個構造器的執行個體my instanceof Shape；    　　    //truemy instanceof  TwoDShape；     //truemy instanceof Triangle；      //true

//我們也可以用其他兩個構造器來建立對象，用new TwoDshape()所建立的對象也可以獲得繼承自Shape()的toString()方法
var td = new TwoDshape();
td.constructor === TwoDshape;   //true;
td.toString();　　　　　　　　　　// 2D shape

var s = new Shape();
s.constructor === shape;　　　　// true;

 ②將共用屬性遷移到原型中去

function Shape(){this.name=‘shape‘}//使用new Shape()建立對象，每個實體都有全新的屬性並佔用獨立空間function Shape(){};Shape.prototype.name=‘shape‘;//屬性移到原型後，使用new建立對象時，不再含自己獨立的這個屬性

2）只繼承於原型

Triangle.prototype=Shape.prototype;//減少繼承方法的查詢步驟Triangle.prototype.name=‘Triangle‘;//修改子物件原型後父物件原型也隨即被改，即再new Shape()建立對象時，新對象name為‘Triangl

　　②臨時構造器——new F()

function Shape() {}Shape.prototype.name = "shape";Shape.prototype.toString = function () {    return this.name;}function TwoDshape() {}var F = function () {};F.prototype = Shape.prototype;TwoDshape.prototype = new F();TwoDshape.prototype.constructor = TwoDshape;TwoDshape.prototype.name = ‘2D shape‘;function Triangle(side, height) {    this.side = side;    this.height = height;}var F = function () {};F.prototype = TwoDshape.prototype;Triangle.prototype = new F();Triangle.prototype.constructor = Triangle;Triangle.prototype.name = ‘Triangle‘;Triangle.prototype.getArea = function () {    return this.side * this.height / 2;}var my = new Triangle (5,10);alert(my.getArea());

//通過這種方法，我們仍然能保持住原型鏈
my._proto_ === Triangle.prototype;　　　　　　　　　　　　  //true
my._proto_.constructor === Triangle;　　　　　　　　　　　　//true
my._proto_._proto_ === TwoDshape.prototypr;　　　　　　　　//true
my._proto_._proto_._proto_.constructor === Shape;_　　　　//true

//並且父物件的屬性不會被子物件覆蓋：
var s = new Shape();
s.name;    // shape

//calling toString()
"I am a" + new TwoDshape();　　　　　//I am a 2D shape　　　

 3)uber—子物件訪問父物件的方式

function Shape(){}Shape.prototype.name=‘shape‘;Shape.prototype.toString=function(){　　var const = this.constructor;
　　return const.uber
　　　　　? this.const.uber.toString() + ‘,‘ + this.name
　　　　　： this.name;
}function TwoDShape(){}var F=function(){}F.prototype=Shape.prototype;TwoDShape.prototype=new F();TwoDShape.prototype.constructor=TwoDShape;TwoDShape.uber=Shape.prototype;TwoDShape.prototype.name=‘2D shape‘;function Triangle(side,height){  this.side=side;  this.height=height;}var F=function(){}F.prototype=TwoDShape.prototype;Triangle.prototype=new F();Triangle.prototype.constructor=Triangle;Triangle.uber=TwoDShape.prototype;Triangle.prototype.name=‘triangle‘;Triangle.prototype.getArea=function(){return this.side*this.height/2};var my=new Triangle(5,10)console.log(my.toString());//shape,2D shape,triangle

 

（知識點）JavaScript繼承