JavaScript 精粹基础进阶(9)OOP面向对象编程(下)

谁践踏了优雅 2022-01-19 03:59 195阅读 0赞

**转载请注明出处**

**原文连接** [blog.huanghanlian.com/article/5b6…][blog.huanghanlian.com_article_5b6]

我们怎么去模拟重载，在javasceipr中我们可以通过参数的类型区别或者数量的区别，来去让同样一个函数名字，可以根据不同的参数列表的情况来去调用相应的函数。

javascript中函数类型是不确定的，并且参数的个数也是可以任意的，那么我们可以通过判断实际传入的参数的个数，来去做一个模拟的重载，

### OOP(模拟重载、链式调用、模块化) ###

> 模拟重载

> 调用子类方法

**例子1**

if (!Object.create) {
            Object.create = function(proto) {
                function F() {};
                F.prototype = proto;
                return new F();
            };
        }
    
        function person(name) {
        //基类
            this.name=name;
        }
        person.prototype.init=function(){
            console.log("你好"+this.name)
        }
    
        function student(name,classname){   //学生类
            this.classname=classname;
            person.call(this,name);
        }
    
        student.prototype = Object.create(person.prototype);
        student.prototype.constructor = student;
    
    
        student.prototype.init=function(){
            console.log("你好s"+this.name)
        }
    
    
    
    
        var peng=new student("继小鹏","class2");
        console.log(peng);
        peng.init();
    复制代码

**例子2子类调用基类方法**

> 链式调用

function classman() {}
    classman.prototype.addClass = function(str) {
        console.log('calss' + str + 'added');
        return this;
    }
    var mang = new classman();
    mang.addClass('classA').addClass('classB').addClass('classC')
    
    // calssclassAadded
    // calssclassBadded
    // calssclassCadded
    复制代码

使用jq的时候$("\#id").addClass('df') 选择器做些操作后在继续addClass('df')还可以再做动作一层层链式去调用。

例子解释

function classman() {}   //现定义一个构造器classman
    classman.prototype.addClass = function(str) {   //给classman构造器prototype添加addClass属性方法
        console.log('calss' + str + 'added');   //输出表示添加一个class
        return this;  //return this表示返回classman的实例因为返回了实例那么紧接着后面不需要加mang.addClass('classA')直接后面加.addClass('classB').addClass('classB')就可以，每次执行完都会返回实例
    }
    var mang = new classman();
    mang.addClass('classA').addClass('classB').addClass('classC')
    
    // calssclassAadded
    // calssclassBadded
    // calssclassCadded
    复制代码

> 抽象类

> defineProperty(ES5)

> 模块化

定义简单模块化

var moduleA;
    moduleA=function(){
        var prop=1;
        function func(){};
        return {
            func:func,
            prop:prop
        }
    }();
    复制代码

定义简单模块化2

var moduleA;
    moduleA = new function() {
        var prop = 1;
    
        function func() {};
        this.func = func;
        this.prop = prop;
    }();
    复制代码

### 实践（探测器） ###

转载于:https://juejin.im/post/5c7f7521e51d454210515615

[blog.huanghanlian.com_article_5b6]: https://link.juejin.im?target=http%3A%2F%2Fblog.huanghanlian.com%2Farticle%2F5b698f22b8ea642ea9213f51