JS面向对象（封装，继承）

在六月份找工作中，被问的最多的问题就是： js面向对象，继承，封装，原型链这些，你了解多少？

额，，，我怎么回答呢， 只能说，了解一些，不多不少，哈哈哈哈，当然，这是玩笑话。

不过之前学过java，来理解这些还是很容易的。

所以趁着自己空闲的时间，理一理，，这些，，

一、封装

1.原始方法

// 通过new关键字生成一个对象，然后根据javascript是动态语言的特性来添加属性和方法，构造一个对象。其中this表示调用该方法的对象。
    var obj = new Object();
    obj.name = 'jessie';
    obj.age = 22;
    obj.showName = function(){
        alert(this.name);
    };
    obj.showAge = function(){
        alert(this.age);
    }
    obj.showName(); //jessie
    obj.showAge(); // 22
    // 这种方式的问题是如果需要多次创建对象，那么需要重复代码多次，不利于代码的复用。

2.工厂模式

function createBlog(name, url) {
        var obj = new Object();
        obj.name = name;
        obj.url = url;
        obj.sayName = function(){
            alert(this.name);
        };
        obj.sayUrl = function() {
            alert(this.url);
        };
        return obj;
    }
    var blog1 = createBlog('jessie', 'http://www.cnblogs.com/xiayu25/');
    var blog2 = createBlog('cuit', 'http://www.cuit.edu.cn');
    blog1.sayName(); // jessie
    blog1.sayUrl(); // http://www.cnblogs.com/xiayu25/
    blog2.sayName(); // cuit
    blog2.sayUrl(); // http://www.cuit.edu.cn

    // 通过定义几个函数的对象，解决了不同对象持有函数对象的私有属性问题。
    // 现在所有对象的方法都持有上面两个函数的引用，
    // 但这么一来，对象的函数又和对象相互独立了，这和面向对象中持有方法属于与特定类的思想不符。
    // 可以看到工厂模式的实现方法非常简单，解决了创建多个相似对象的问题，
    // 但是工厂模式却无从识别对象的类型，因为全部都是Object，不像Date、Array等，因此出现了构造函数模式。

3.构造函数模式

function Blog(name, url){
        //var this=new Object();  //系统模拟创建对象
        this.name = name;
        this.url = url;
        this.sayName = function(){
            alert(this.name);
        };
        this.sayUrl = function(){
            alert(this.url);
        };
    }
    var blog1 = Blog('jessie', 'http://www.cnblogs.com/xiayu25/');
    var blog2 = Blog('cuit', 'http://www.cuit.edu.cn');
    blog1.sayName(); // jessie
    blog1.sayUrl(); // http://www.cnblogs.com/xiayu25/
    blog2.sayName(); // cuit
    blog2.sayUrl(); // http://www.cuit.edu.cn
    // 这个例子与工厂模式中除了函数名不同以外，细心的童鞋应该发现许多不同之处：
    // 函数名首写字母为大写(虽然标准没有严格规定首写字母为大写，但按照惯例，构造函数的首写字母用大写)
    // 没有显示的创建对象
    // 直接将属性和方法赋值给了this对象
    // 没有return语句
    // 使用new创建对象
    // 能够识别对象(这正是构造函数模式胜于工厂模式的地方)
    // 构造函数虽然好用，但也并非没有缺点
    // 构造函数的方式与工厂加工方式一样，会为每个对象创建独享的函数对象，
    // 当然也可以将这些函数对象定义在构造函数外面，这样又有了对象和方法相互独立的问题

4.原型模式

function Blog() {}
    Blog.prototype.name = 'jessie';
    Blog.prototype.url = 'http://www.cnblogs.com/xiayu25/';
    Blog.prototype.friend = ['fr1', 'fr2', 'fr3', 'fr4'];
    Blog.prototype.alertInfo = function() {
        alert(this.name + this.url + this.friend );
    };
    
    var blog1 = new Blog(), blog2 = new Blog();
    blog1.alertInfo();  // jessiehttp://www.cnblogs.com/xiayu25/fr1,fr2,fr3,fr4
    blog2.alertInfo();  // jessiehttp://www.cnblogs.com/xiayu25/fr1,fr2,fr3,fr4
    blog1.name = 'test1';
    blog1.url = 'http://***.com';
    blog1.friend.pop();
    blog2.name = 'test2';
    blog2.url = 'http://+++.com';
    blog1.alertInfo();  // test1http://***.comfr1,fr2,fr3
    blog2.alertInfo();  // test2http://+++.comfr1,fr2,fr3
    // 上面的代码通过blog1向blog1的属性friend添加元素时，
    // blog2的friend属性的元素也跟着受影响，原因是在于blog1和blog2对象的friend属性引用的是同一个Array
    // 对象，那么改变这个Array对象，另一个引用Array对象的属性自然也会受到影响

5.混合模式（原型模式 + 构造函数模式）

 

function Blog(name, url, friend) {
        this.name = name;
        this.url = url;
        this.friend = friend;
    }

    Blog.prototype.alertInfo = function() {
        alert(this.name + this.url + this.friend);
    };

    var blog1 = new Blog('jessie', 'http://www.cnblogs.com/xiayu25/', ['fr1', 'fr2', 'fr3']),
            blog2 = new Blog('cuit', 'http://www.cuit.edu.cn', ['a', 'b']);

    blog1.friend.pop();
    blog1.alertInfo();  // jessiehttp://www.cnblogs.com/xiayu25/fr1,fr2
    blog2.alertInfo();  // cuithttp://www.cuit.edu.cna,b

    //属性私有后，改变各自的属性不会影响别的对象。
    // 同时，方法也是由各个对象共享的。在语义上，这符合了面向对象编程的要求。

6.动态原型模式

动态原型模式将所有信息封装在了构造函数中，而通过构造函数中初始化原型（仅第一个对象实例化时初始化原型），这个可以通过判断该方法是否有效而选择是否需要初始化原型。

function Blog(name, url) {
        this.name = name;
        this.url = url;

        if (typeof this.alertInfo != 'function') {
            // 这段代码只执行了一次
            alert('exe time');
            Blog.prototype.alertInfo = function() {
                alert(thia.name + this.url);
            }
        }
    }

    var blog1 = new Blog('jessie', 'http://www.cnblogs.com/xiayu25/'),
            blog2 = new Blog('cuit', 'http://www.cuit.edu.cn');
    // 可以看到上面的例子中只弹出一次窗，'exe time'，即当blog1初始化时，
    // 这样做blog2就不在需要初始化原型，对于使用这种模式创建对象，可以算是perfect了。

 

二、继承（主要是方法的继承和属性的继承）

function person(name, sex){
        this.name=name;
        this.sex=sex;
    }
    person.prototype.showName=function(){
        alert(this.name);
    };
    person.prototype.showSex=function(){
        alert(this.sex);
    };

    function worker(name,sex,job){
        person.call(this,name,sex);//构造函数伪装   调用父级的构造函数--为了继承属性
        this.job=job;
    }
    //原型链  通过原型来继承父级的方法
    for(attr in person.prototype){
        worker.prototype[attr]=person.prototype[attr];
    }
    worker.prototype.showJob=function(){
        alert(this.job);
    };

    var op=new person('blue','女');
    var ow=new worker('blue','女','程序员');
    op.showName();  //blue
    op.showSex();  //女
    ow.showName();  //blue
    ow.showSex();  //女
    ow.showJob();  //程序员

    //继承的好处：父类新加的功能，子类也具备该功能，子类新加的功能不会影响父类的功能