js原型繼承的兩種方法對比介紹

2019-11-20 20:53:26

字體：大中小

來源：轉載

供稿：網友

在實際的項目中，我們通常都是用構造函數來創建一個對象，再將一些常用的方法添加到其原型對象上。最后要么直接實例化該對象，要么將它作為父類，再申明一個對象，繼承該父類。

而在繼承的時候有兩種常用方式，今天我們就來稍作探討

復制代碼代碼如下:

//父類
function Person(name){
this.name = name;
};

// 子類
function Student(sex){
Person.apply(this,arguments); //繼承父類的構造函數
this.sex=sex;
};

1，繼承Prototype：

復制代碼代碼如下:

Student.prototype = Person.prototype; //執行完此句時，Student.prototype.constructor 指向的是Person,為什么了？因為Person.prototype.constructor指向Person,對象的賦值實質上是引用賦值，所以Student.prototype.constructor也指向Person
Student.prototype.constructor = Student;  //  將Student.prototype.constructor 指回Person

用Person的原型對象來覆蓋Student的原型對象；前面說到對象的賦值實質上是引用賦值，所以如果Student.prototype上的任何修改都會體現到Person.prototype中，即子類會影響父類。

看下面：

復制代碼代碼如下:

Student.prototype.add=function(){alert("add")};
Person.prototype.add();//彈出add

2，繼承實例：

復制代碼代碼如下:

Student.prototype = new Person();  //如果此處不傳遞參數，可以不寫（);即直接寫成 new Person;
2 Student.prototype.constructor = Student;

用Person的實例來覆蓋Student的原型對象；創建了實例，比起前面那種，顯示是浪費內存了，不過這同時也解決了上面那種方法的缺點，即此時Student.prototype上的任何修改不會體現到Person.prototype中，即子類不會影響父類。

3，利用控對象來組合1和2的優點，去掉缺點

復制代碼代碼如下:

var  F = function(){};
F.prototype = Person.prototype;
Student.prototype  = new F();
Student.prototype.constructor  = Student;

F是個空對象，上面只有些原型方法，實例化時內存占用較少，同時也隔離開了子類對父類的影響。

上一篇：jquery控制display屬性為none或block

下一篇：詳解JavaScript中undefined與null的區別

學習交流

索泰發布一款GTX 1070 Mini迷你版本:小機

索泰發布一款GTX 1070 Mini迷你版本:小機箱大愛...

熱門圖片

猜你喜歡的新聞

猜你喜歡的關注

国产探花免费观看_亚洲丰满少妇自慰呻吟_97日韩有码在线_资源在线日韩欧美_一区二区精品毛片,辰东完美世界有声小说,欢乐颂第一季,yy玄幻小说排行榜完本

js原型繼承的兩種方法對比介紹