TGCode

关注互联网技术

JavaScript 继承方式（3）

2021年1月11日   |   by tgcode

　　接上文：JavaScript 继承方式（2）

　　3，继承工具函数三


/**
 * @param {Function} subCls
 * @param {Function} superCls
 */
function extend(subCls,superCls) {
    subCls.prototype = new superCls();    
}

　　父类，按原型方式写，即属性和方法都挂在原型上。


/**
 *  父类Person
 */
function Person(){}
Person.prototype.nationality = 'China';
Person.prototype.getNationality = function() {return this.nationality;}
Person.prototype.setNationality = function(n) { this.nationality = n;}

　　子类继承与父：


function Man() {}
extend(Man,Person);

　　继承父类的属性和方法后，再添加子类自有属性，方法 ：


Man.prototype.name = 'jack';
Man.prototype.getName = functitgcodeon() { return this.name;}
Man.prototype.setName = function(n) { this.name=n;}

　　测试如下：


var m = new Man();
console.log(m);
console.log(m instanceof Person);

　　可以看到这种写类方式，继承方式完全采用原型机制。

　　4，继承工具函数四

　　这种方式是目前比较流行的，51ditu网站的开发就是按照这种模式的。


/**
 * @param {Function} subCls 子类
 * @param {Function} superCls 父类
 */
function extend(subCls,superCls) {    
    //暂存子类原型
    var sbp = subCls.prototype;
    //重写子类原型--原型继承
    subCls.prototype = new superCls();
    //重写后一定要将constructor指回subCls
    subCls.prototype.constructor = subCls;
    //还原子类原型
    for(var atr intgcode sbp) {
        subCls.prototype[atr] = sbp[atr];
    }
    //暂存父类    
    subCls.supr = superCls;
}

　　按构造函数+原型 方式写类，即属性挂在this上，方法挂在prototype上。


/**
 *  父类Person
 */
function Person(nationality){
    this.nationality = nationality;
}
Person.prototype.getNationality = function() {return this.nationality;}
Person.prototype.setNationality = function(n) { this.nationality = n;}

/**
 *  子tgcode类Man
 */
function Man(nationality,name) {
    Man.supr.call(this,nationality); //很重要的一句，调用父类构造器
    this.name = name;
}
Man.prototype.getName = function() {return this.name;}
Man.prototype.setName = function(n) {this.name=n;}

　　注意子类Man中要显示的调用父类构造器已完成父类的属性/字段拷贝。

　　extend调用，创建Man的实：


extend(Man,Person);
var m = new Man('USA','jack');
console.log(m);
m.setName('lily');
console.log(m.name);

相关推荐: 帮设计师与工程师更好沟通的实用技巧

　　开发者一般不是令人惊艳的设计师，tgcode设计师也通常不是出色的开发者。虽然有很多例外，但这两行的门道对对方而言都是难以言说的谜，然而双方却要在这种情况下合作完成项目。作为在两个领域都工作过的人，我为设计师整理了一个列表，使他们能够更好地辅助开发者开发应…

Tags: , ,