javascript 中类的概念

2023年4月12日 151次阅读 来源: 戈志刚

编写和维护复杂的Javascipt代码，必须使用模块化策略。目前，业界的主流做法是采用”面向对象编程”。因此，Javascript如何实现面向对象编程，就成了一个热门课题。
麻烦的是，Javascipt语法不支持class，导致传统的面向对象编程方法无法直接使用。(当然ES6已经支持class),可以还是有一部分前端工作人员在现有的工作环境上无法使用ES6标准

下面代码本人使用的一段定义类的方法,代码不长,但很实用,希望能帮助到想摆脱javascript代码一多就乱成一坨的同学们
/**
 * 封装类方法
 * @methodOf Clazz.prototype
 */
var Clazz = function() {};
/**
 * [给基类的原型赋值一个方法 当作类的构造器]
 * @return {[Object]} [description]
 */
Clazz.prototype.construct = function() {};
/**
 * 创建类
 * @example
 * var MyClass = Clazz.extend({
 *   //构造器,new时执行
 *   construct: function(myParam){
 *     // 编写你的代码逻辑
 *   }
 * });
 *
 * 继承类
 * var MySubClass = MyClass.extend({
 *   construct: function(myParam){
 *     // 使用这个来调用父类的构造函数
 *     arguments.callee.$.construct.apply(this, arguments);
 *     // 编写你的代码逻辑
 *   }
 * });
 */
Clazz.extend = function(def) {
    var classDef = function() {
        if (arguments[0] !== Clazz) { this.construct.apply(this, arguments); }
    };
    var proto = new this(Clazz);
    var superClass = this.prototype;
    for (var n in def) {
        var item = def[n];
        if (item instanceof Function) item.$ = superClass;
        proto[n] = item;
    }
    classDef.prototype = proto;
    //给这个新类相同的静态扩展方法
    classDef.extend = this.extend;
    return classDef;
};

//========使用实例=========
var MyClass = Clazz.extend({
    construct: function(options){
        this.name = 'MyClass ';
        this.myClassName = 'myClassName ';
    },
    getName: function(){
        return this.name;
    },
    setName: function(name){
        if(name) this.name = name;
    }
});
//继承MyClass 类
var SubClass1 = MyClass .extend({
    construct: function(){
        //未调用父类的构造函数
        this.name = 'SubClass ';
    }
});
//继承MyClass 类
var SubClass2 = MyClass .extend({
    construct: function(){
        //调用父类构造函数
        arguments.callee.$.construct.apply(this, arguments);
        this.name = 'SubClass ';
    }
});

var myClass = new MyClass();
var subClass1 = new SubClass1();
var subClass2 = new SubClass2();

console.log(myClass.getName());     //MyClass 
console.log(myClass.myClassName);   //myClassName

console.log(subClass1.getName());   //SubClass1
console.log(subClass1.myClassName); //undefined

console.log(subClass2.getName());   //SubClass2
console.log(subClass2.myClassName); //myClassName
    原文作者：戈志刚
    原文地址: https://www.jianshu.com/p/d13ac9821fd2
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞