js面向对象设计

面向对象模式

<script>
    //1.工厂模式
    function product(id ,name , desc){
        var o = new Object();
        o.id = id;
        o.name = name;
        o.desc = desc;
        o.getname = function(){
            alert(this.name)
        }
        return o;
    }
    var product1 = product("1", '包子', "描述：小笼包");
    var product2 = product("2", '豆浆', "描述：豆浆");

    //2.构造函数模式 （大写字母开头）
    function User(name,mobile){
        this.name =  name;
        this.mobile = mobile;
        this.getname = function(){
            alert(this.name)
        }
    }

    var user1 = new User("Tom", "13000000000");
    var user2 = new User("John", "13333333333");

    alert(user1.constructor == User) //true

        /*
        1.没有显式创建对象
        2.直接将属性和方法赋给了this对象
        3.没有return语句
        * */

    /*
    * 创建新的实例 new
    * 1.创建了一个新的对象
    * 2.将构造函数的作用域赋给新对象（this就会指向新对象）
    * 3.执行构造函数中的代码（为新对象添加属性）
    * 4.返回新对象
    * */

    /**
     * 构造函数的问题：
     * 每个方法都要在实例上重新创建一遍，不同实例上的同名函数是不相等的。
     *
     * */
    alert(user1.getname == user2.getname )//false

    function User(name,mobile){
        this.name =  name;
        this.mobile = mobile;
        this.getname = getname;
    }
    function getname(){
        alert(this.name)
    }
    alert(user1.getname == user2.getname )//true
    /**
     * 把getname指向了全局作用域的getname函数，但是如果有很多方法就需要定义很多全局函数，这样就失去了封装性。
     */

    //3.原型模式
    /*
    * 每个函数都有一个prototype（原型）属性，这是一个指针指向一个对象，这个对象可以包含所有实例共享的属性和方法
    * */
    function Product(){

    }
    Product.prototype.name = "包子";
    Product.prototype.id = "123";
    Product.prototype.desc = "描述：小笼包";
    Product.prototype.getName = function(){
        alert(this.name)
    };

    var product1 = new Product();
    product1.getName(); //包子
    var product2 = new Product();
    alert(product1.getName == product2.getName)//true

    //实例重写原型的属性
    product1.name = '面包';
    console.log(product1.name)
    console.log(product2.name)
    delete(product1.name)
    console.log(product1.name)
    console.log(product2.name)

    //更简单的原型语法

    function Product(){

    }
    Product.prototype = {
            name : "套餐",
            id : "123",
            desc :  "描述：套餐",
            include: ['米饭', '菜'],
            getName : function(){
                alert(this.name)
            }
    }
    //此时constructor 属性就不再指向Product了，变成了Object
    /*
    * 原型模式的缺点，对于共享的引用类型，一个修改就会导致所有实例的修改
    * */

    var product1 = new Product();
    var product2 = new Product();
    console.log(product1.include)
    console.log(product2.include)
    product1.include.push('饮料');
    console.log(product1.include)
    console.log(product2.include)

    //4.组合使用构造函数模式和原型模式

    function User(name,mobile){
        this.name =  name;
        this.mobile = mobile;
        this.address = ['add1','add2']
    }
    User.prototype = {
        constructor: User,
        getName: function(){
            alert(this.name)
        }
    }
    var user1 = new User('Jack','13312345678');
    var user2 = new User('Tom','13011111111');
    console.log(user1.address)
    console.log(user2.address)
    user1.address.push("add3")
    console.log(user1.address)
    console.log(user2.address)

    //实例属性在构造函数中定义，而所有实例共享的属性和方法在原型中定义
</script>

继承

 <script>
//        1.原型继承
        function SuperType(){
            this.prototype = true;
            this.color = ['red','blue']
        }
        SuperType.prototype.getSuperValue = function(){
            return this.prototype;
        }

        function SubType(){
            this.subpropertype = false;
        }
        //继承
        SubType.prototype = new SuperType();
        SubType.prototype.getSubValue = function(){
            return this.subpropertype;
        }

        var instance = new SubType();
        alert(instance.getSuperValue());//true

        //原型继承的问题   包含引用类型的原型
        var instance1 = new SubType();
        instance1.color.push("green");
        console.log(instance1.color)
        var instance2 = new SubType();
        console.log(instance2.color)

        //2.借用构造函数
        //好处：可以传递参数

        function SuperType(id,name){
            this.color = ['red','blue'];
            this.id = id;
            this.name = name;
        }
        function SubType(){
            //继承 SuperType
            SuperType.call(this,'11','name')
        }
        var instance1 = new SubType();
        instance1.color.push("green");
        console.log(instance1.color)
        var instance2 = new SubType();
        console.log(instance2.color)
        console.log(instance2.id)
        console.log(instance2.name)

        //call apply 实际上是在未来将要新创建的SubType实例环境下调用了SuperType构造函数。这样每个实例上就有自己的属性副本

        //3.组合继承 原型链和借用构造函数组合
        function SuperType(name){
            this.color = ['red','blue'];
            this.name = name;
        }
        SuperType.prototype.sayName = function(){
            console.log(this.name)
        }
        function SubType(name,id){
            //继承 SuperType 属性
            SuperType.call(this,name);
            this.id = id;
        }
        //继承方法
        SubType.prototype = new SuperType();
        SubType.prototype.sayId = function(){
            console.log(this.id)
        }

        var instance1 = new SubType('instance1',1);
        instance1.color.push("green");
        console.log(instance1.color)
        instance1.sayName();
        instance1.sayId();
        var instance2 = new SubType('instance2',2);
        console.log(instance2.color)
        instance2.sayName();
        instance2.sayId();
    </script>