JavaScript實現類與繼承的方法(全面整理)

JavaScript定義類的4種方法

工廠方法

function creatPerson(name, age) {
            
    var obj = new Object();

    obj.name = name;
    obj.age = age;

    obj.sayName = function() {
        window.alert(this.name);
    };
            
    return obj;
}

構造函數方法

function Person(name, age) {

    this.name = name;
    this.age = age;

    this.sayName = function() {
        window.alert(this.name);
    };
}

原型方法

function Person() {
        
}
        
Person.prototype = {
    constructor : Person,
    name : "Ning",
    age : "23",
    sayName : function() {
        window.alert(this.name);
    }
};

你們能夠看到這種方法有缺陷,類裏屬性的值都是在原型裏給定的。javascript

組合使用構造函數和原型方法(使用最廣)

function Person(name, age) {
    this.name = name;
    this.age = age;
}
        
Person.prototype = {
    constructor : Person, 
    sayName : function() {
        window.alert(this.name);
    }
};

將構造函數方法和原型方法結合使用是目前最經常使用的定義類的方法。這種方法的好處是實現了屬性定義和方法定義的分離。好比我能夠建立兩個對象person1person2,它們分別傳入各自的name值和age值,但sayName()方法能夠同時使用原型裏定義的。java

JavaScript實現繼承的3種方法

借用構造函數法(又叫經典繼承)

function SuperType(name) {

    this.name = name;

    this.sayName = function() {
        window.alert(this.name);
    };
}
        
function SubType(name, age) {

    SuperType.call(this, name); //在這裏借用了父類的構造函數

    this.age = age;
}

對象冒充

function SuperType(name) {

    this.name = name;
    
    this.sayName = function() {
        window.alert(this.name);
    };
}
        
function SubType(name, age) {

    this.supertype = SuperType; //在這裏使用了對象冒充
    this.supertype(name);

    this.age = age;
}

組合繼承(最經常使用)

function SuperType(name) {

    this.name = name;

}
        
SuperType.prototype = {
        
    sayName : function() {
        window.alert(this.name);
    }
};
        
function SubType(name, age) {
    
    SuperType.call(this, name); //在這裏繼承屬性
    this.age = age;
}

SubType.prototype = new SuperType(); //這裏繼承方法

組合繼承的方法是對應着咱們用‘組合使用構造函數和原型方法’定義父類的一種繼承方法。一樣的,咱們的屬性和方法是分開繼承的。編程

總結

以上就是常見的JavaScript中面向對象編程的幾種實現,歡迎你們補充與指正。函數

相關文章
相關標籤/搜索