javascript

Javascript系统复习：Javascript中的面向对象(OOP)之面向对象的其它特性

Posted by mieruko on 2016-08-31

前言:

本文是对面向对象第一篇的一个补充。
主要补充下面几点：

  • 重载
  • 链式调用
  • 模块化

模拟重载

在Java中，有重载这个说法，js中，我们可以模拟重载的效果，让同样的函数名字根据不同的参数情况实现不同的调用。
🌰：
定义一个构造函数Person: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function Person() {
    var args = arguments;
    if(typeof args[0] === "object" && args[0]) {
        if(args[0].name) {
            this.name = args[0].name;
        }
        if(args[0].age) {
            this.age = args[0].age;
        }
    } else {
        if(args[0]) {
            this.name = args[0];
        }
        if(args[1]) {
            this.age = args[1];
        }
    }
}

给它设置原型并使用: 

1
2
3
4
5
6
7
8
9
Person.prototype.toString = function() {
    return "name" + this.name + ",age=" + this.age;
}

var wanzi = new Person("wanzi",20);
wanzi.toString(); // "name=wanzi,age=20"

var nunn = new Person({name: "Nunn", age: 20});
nunn.toString(); // "name=Nunn, age=20"

如此，我们在构造函数内部进行参数类型的判断，根据参数类型的不同，进行不同的操作。

调用基类方法

🌰： 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function Person(name) {
    this.name = name;
}

function Student(name, className) {
    this.className = className;
    Person.call(this, name);
}
var wanzi = new Student("wanzi","Information02");
wanzi;// Student {className:"Information02", name:"wanzi"}

Person.prototype.init = function(){};

Student.prototype.init = function() {
    // do sth
    Person.prototype.init.apply(this, arguments);
};

通过在子类中使用apply方法，来调用基类中的方法。

链式调用

链式调用最让人印象深刻的应该是在jQuery中。
让我们来模拟一下jQuery中的添加类的链式操作： 

1
2
3
4
5
6
7
8
9
10
11
function classManager() {

}
classManager.prototype.addClass = function(str) {
    console.log("Class" + str + "added");
    return this;
};

var manager = new ClassManager();
manager.addClass("classA").addClass("classB")
  .addClass("classC");

链式调用的玄机就在于最后的return this。

模块化

扶额，写起模块化，还是有一种不知道该怎么表达的感觉。。。。。所以还是写代码吧。
有了模块化，我们就可以实现分工协作，可以自由地使用他人写好的代码，减少任务量，等等等等。。。。。

模块化本身是有一些类库的，但是模块化这个其实我们自己也是可以来试一试的～～～
🌰： 

1
2
3
4
5
6
7
8
9
var moduleA;
moduleA = function() {
    var prop = 1;
    function func() {};
    return {
        func: func,
        prop: prop
    }
}();

或者： 

1
2
3
4
5
6
7
var moduleA;
moduleA = new function() {
    var prop = 1;
    function func() {};
    this.func = func;
    this.prop = prop;
};

如此如此，我们就手动了模块化。
更加成熟的模块化，我们还是需要借助一些库的。

总结

终于把oop这块整完了。
然后接下来就是对正则表达式做总结啦～～加油加油^_^。

FEATURED TAGS
javascript