首頁 > web前端 > js教程 > javascript繼承的實作方式(程式碼)

javascript繼承的實作方式(程式碼)

不言
發布: 2018-08-07 17:34:55
原創
1315 人瀏覽過

這篇文章帶給大家的內容是關於javascript繼承的實現方式(程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。

JS中繼承方式的實作有多種方法,以下是比較推薦的方法,其它繼承方式可做了解:

function object(o) {
    function F() {}
    F.prototype = o;
    return new F();
}

function inheritPrototype(subType, superType) {
    var newObj = object(superType.prototype);
    newObj.constructor = subType;
    subType.prototype = newObj;
}

function People() {
    this.cls = 'people';
}

People.prototype.say = function(name) {
    name = name || this.cls;
    console.log('My class is '+ name);
}

function Student() {
    People.call(this);
    this.type = 'student';
}

inheritPrototype(Student, People);

Student.prototype.goToSchool = function() {
    console.log('I go to school every day.');
}

// 测试
var stu = new Student();

console.log('class: ' + stu.cls); // class: people
console.log('type: ' + stu.type); // type: student
stu.say(); // My class is people
stu.goToSchool (); // I go to school every day.
登入後複製

其實,javascript 已經提供了更簡單的實作方法,沒必要在這造輪子,而且方法不完善,MDN 例子:

// Shape - 父类(superclass)
function Shape() {
  this.x = 0;
  this.y = 0;
}

// 父类的方法
Shape.prototype.move = function(x, y) {
  this.x += x;
  this.y += y;
  console.info('Shape moved.');
};

// Rectangle - 子类(subclass)
function Rectangle() {
  Shape.call(this); // call super constructor.
}

// 子类续承父类
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;

var rect = new Rectangle();

console.log('Is rect an instance of Rectangle?',
  rect instanceof Rectangle); // true
console.log('Is rect an instance of Shape?',
  rect instanceof Shape); // true
rect.move(1, 1); // Outputs, 'Shape moved.'
登入後複製

如果你希望能繼承到多個對象,則可以使用混入的方式:

function MyClass() {
     SuperClass.call(this);
     OtherSuperClass.call(this);
}

// 继承一个类
MyClass.prototype = Object.create(SuperClass.prototype);
// 混合其它
Object.assign(MyClass.prototype, OtherSuperClass.prototype);
// 重新指定constructor
MyClass.prototype.constructor = MyClass;

MyClass.prototype.myMethod = function() {
     // do a thing
};
登入後複製

相關文章推薦:

javascript中this關鍵字的用法(附程式碼)

#jQuery如何實作彈幕? jQuery實作彈幕效果的程式碼

以上是javascript繼承的實作方式(程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板