JavaScript面向对象设计

一、理解对象
    1.创建
        ①构造函数   new Object
        ②对象字面量  var o = {};
    2.属性类型
        ①数据属性,对象属性有4个属性特征,默认都为true,可以通过Object.defineProperty()来修改属性特征
            a.[[Configurable]]  表示能否通过delete删除重新定义,能否修改属性的特征,能否修改为访问权属性
            b.[[Enumerable]]    表示能否通过for-in枚举
            c.[[Writable]]      表示能否修改属性的值
            d.[[Value]]         表示属性值
            eg:
                var o = {
                    name : [1, 2, 3]
                }
                Object.defineProperty(o, "name", {
                    configurable : false,       // 不能delete,不能修改,不能设置为访问器属性
                    enumerable : false,         // 不能枚举
                    writable :  false,          // 不能修改
                    value :     [100, 200]      // 把值变成[100, 200]
                });
                // for(var v in o.name) {
                    // alert(o.name[v]); // 100, 200, 能枚举
                // }
                alert(o.propertyIsEnumerable("name"));      // false
                // o.name = "li";
                // alert(o.name); // 100, 200 不能修改
                // delete o.name;
                // alert(o.name); // 100, 200 不能删除
        ②访问器属性,4个访问器属性特征,可以通过Object.defineProperty()来修改属性特征
            a.[[Configurable]]  表示能否通过delete删除重新定义,能否修改属性的特征,能否修改为访问权属性
            b.[[Enumerable]]    表示能否通过for-in枚举
            c.[[Get]]           表示在读取属性时调用的函数,默认为undefined
            d.[[Set]]           表示在设置属性时调用的函数,默认为undefined
            eg:
                var o = {
                    name : [1, 2, 3]
                }
                Object.defineProperty(o, "name", {
                    get : function () {
                        alert("get");
                    },
                    set : function() {
                        alert("set");
                    }
                });
                o.name = "li";      // set,设置name值时,自动调用o.set()
                o.name;             // get,读取name时,自动调用o.get()
        ③定义多个属性 Object.defineProperties()来同时定义多个属性
            eg:
                var o = {}
                Object.defineProperties(o, {
                    name : {
                        configurable : false,
                        value : "zhang"
                    },
                    age : {
                        get : function () {
                            alert("get");
                        },
                        set : function() {
                            alert("set");
                        }
                    }
                });
                alert(o.name);          // zhang
                o.age;                  // get
                o.age = "li";           // set
        ④读取属性的特征    Object.getOwnPropertyDescriptor(objectName, propertyName)
            eg:
                var o = {}
                Object.defineProperties(o, {
                    age : {
                        get : function () {
                            alert("get");
                        },
                        set : function() {
                            alert("set");
                        }
                    }
                });
                var descriptor = Object.getOwnPropertyDescriptor(o, "age");
                for(var v in descriptor) {
                    alert(v + " = " + descriptor[v]);       // 弹出访问器属性的4个属性特征
                }
二、创建对象
    1.工厂模式         
        ①抽象了创建对象的具体过程
            eg:
                function createObject (name, age) {
                var object = new Object();
                object.name = name;
                object.age = age;
                object.sayName = function () {
                    return object.name;
                }
                return object;
            }
            var p1 = createObject("zhang", 23);
            var p2 = createObject("li", 33);
            alert(p1.sayName());        // zhang
            alert(p2.sayName());        // li
            // 无法识别p1和p2
            alert(p1);                  // [object Object]
            alert(p2);                  // [object Object]
        ②弊端     没有解决对象识别的问题
        ③解决方法   构造函数模型
    2.构造函数模式
        ①创建模式
            eg:
                function Person(name, age) {
                    this.name = name;
                    this.age = age;
                    this.getName = function () {
                        return this.name;
                    }
                }
                var p1 = new Person("zhang", 34);
                var p2 = new Person("li", 23);
                alert(p1.getName());        // zhang
                alert(p2.getName());        // li
                alert(p1 instanceof Person);        // true
                alert(p2 instanceof Person);        // true, 解决了工厂模式的对象识别问题
        ②问题 每个方法都要在每个实例上创建一遍,从而形成不同的作用域链,从而导致不相同
            eg: alert(p1.getName == p2.getName);        // false
            我们也可以将方法部分提取到构造函数之外,但这样就没有什么封装性可言了。
            eg:
                function Person(name, age) {
                    this.name = name;
                    this.age = age;
                    this.getName = getName;
                }
                function getName () {
                    return this.name;
                }
        ③解决方法   原型模型
    3.原型模式
        ①创建模式   原型对象(构造函数的prototype属性指向它)的好处:可以让所有对象实例共享它包含属性和方法
            eg:
                function Person(name, age) {
                    this.name = name;
                    this.age = age;
                }
                Person.prototype.getName = function () {
                    return this.name;
                }
                var p1 = new Person("zhang", 34);
                var p2 = new Person("li", 23);
                alert(p1.getName == p2.getName);    // true,解决了方法共享的问题
        ②理解原型  
                a.函数Person.prototype指向原型
                b.Person.prototype.constructor指回构造函数
                c.p1、p2的prototype指向原型,且可调用原型中的方法,用Person.prototype.isPrototypeOf(p1)判断,也可以用Object.getPrototypeOf(p1)来获取原型
                d.我们可以用原型访问属性的值,但是不能通过实例重写原型的值,因为对象实例的值会屏蔽原型属性的值。当我们用实例对象重写了原型中的值,只有删除实例对象的值,才能访问原型属性的值。
                e.同样我们可以通过[实例.hasOwnProperty(propertyName)]来检测实例是否定义了自己的属性值
                    eg:
                        function Person() {}
                        Person.prototype.name = "zhang";
                        Person.prototype.getName = function () {
                            return this.name;
                        }
                        var p1 = new Person();
                        alert(p1.name);     // zhang
                        p1.name = "li";
                        alert(p1.name);     // li,实例中的值覆盖了原型中的值
                        alert(p1.hasOwnProperty("name"));   // 判断实例p1是否定义了自己的属性name的值,true
                        delete p1.name;     // 删除实例对象中的属性值
                        alert(p1.name);     // zhang
        ③原型与in操作符      
            a.无论是属性值存在于原型中,还是实例对象中都返回true
                eg:
                    function Person() {}
                    Person.prototype.name = "zhang";
                    Person.prototype.getName = function () {
                        return this.name;
                    }
                    // 判断是否为原型中的属性
                    function hasPrototypeProperty(object, propertyName) {
                        return propertyName in object && !object.hasOwnProperty(propertyName);
                    }
                    var p1 = new Person();
                    p1.name = "li";
                    alert(hasPrototypeProperty(p1, "name"));    // false
                    delete p1.name;
                    alert(hasPrototypeProperty(p1, "name"));    // true
            b.枚举所有可枚举的属性和方法,用Object.key(原型/实例)
                eg:
                    function Person() {}
                    Person.prototype.name = "zhang";
                    Person.prototype.age = 11;
                    Person.prototype.getName = function () {
                        return this.name;
                    }
                    alert(Object.keys(Person.prototype));   // 枚举原型中的属性和方法
                    var p1 = new Person();
                    p1.name = "li";
                    p1.getName = function () {}             // 枚举实例对象中的属性和方法
                    alert(Object.keys(p1));
            c.枚举所有的属性和方法,无论是否隐藏,用hasOwnPropertyNames(原型);
                eg: alert(Object.getOwnPropertyNames(Person));  // prototype,length,name
        ④更简单的原型方法
            a.源码
            eg: function Person() {}
                Person.prototype = {
                    constructor : Person,
                    name : "zhang",
                    getName : function () {}
                }
            b.问题    这样做可能会导致原型中的constructor属性的[Enumerable]为true,默认为false
            c.解决方法  用Object.defineProperty()方法重新定义
                eg: Object.defineProperty(Person.prototype, constructor, { enumerable : false});
            e.实例化对象一定要后于对象的定义完毕
        ⑤原型对象的问题        共享性,针对方法很好,针对属性也说的过去,但是针对那些包含了引用类型则不可
            eg:
                function Person() {}
                Person.prototype = {
                    constructor : Person,
                    friends : [1, 2]        // 引用类型
                }
                var p1 = new Person();
                var p2 = new Person();
                p1.friends.push(3);
                alert(p1.friends);
                alert(p2.friends);      // 同时返回1,2,3
        ⑥解决方法   取长补短,用构造函数模式定义属性,用原型模式定义方法
    3.组合构造模式和原型模式
        ①模式 取长补短,用构造函数模式定义属性,用原型模式定义方法
        eg:
            function Person(name) {
                this.name = name;
                this.friends = [1, 2]       // 引用类型
            }
            Person.prototype = {
                constructor : Person,
                name : "zhang",
            }
            var p1 = new Person("li");
            var p2 = new Person("wang");
            p1.friends.push(3);
            alert(p1.friends);      // 1,2,3
            alert(p2.friends);      // 1,2
        ②小问题        感觉构造函数和原型分离,破坏了封装性
        ③解决方法   使用动态原型模式
    4.动态原型模式(基本完美)      将原型中方法封装到构造函数中去
        eg:
            function Person(name) {
                this.name = name;
                this.friends = [1, 2];      // 引用类型
                if (typeof this.getName != "function") {
                    Person.prototype.getName = {
                        return this.name;
                    }
                }
            }
    5.寄生构造模式
        ①基本思想:创建一个函数(对象),该函数用来封装代码,然后返回函数(对象)
        ②模式
            eg:
                function Person(name, age) {
                    var o = new Object();
                    o.name = name;
                    o.age = age;
                    o.getName = function () {
                        return o.name;
                    };
                    return o;
                }
                var p1 = new Person("zhang", 34);
                alert(p1.getName());        // zhang
                alert(p1 instanceof Person);// false
        ③问题:由于实例对象和构造函数完全分离,因此无法识别对象
        ④案例:对于Array类型,我们可能在特殊情况在,对它进行添加属性和方法
            eg:
                function NewArray() {
                    var array = new Array();
                    array.push.apply(array, arguments);
                    array.addFun = function () {
                        return this.join("|");
                    }
                    return array;
                }
                var a1 = new NewArray("zhang", 22);
                alert(a1.addFun());     // zhang|22
    6.稳妥构造函数模型      没有公共属性,不使用this和new,只能定义获取值的方法
        ①用途:安全性
        ②源码
            eg:
                function Person(name, age) {
                    var o = new Object();
                    o.getName = function () {
                        return name;
                    }
                    return o;
                }
                var p = Person("zhang", 3);
                p.name = 'li';          // 无效
                alert(p.getName());     // zhang
        ③特点 函数名首字母大写、对象里只定义方法且不用this、实例化时不用new
        ④问题:由于实例对象和构造函数完全分离,因此无法识别对象
三、继承
    1.原型链
        ①将父类的实例赋值给子类的原型。因为父类的实例指向父类的原型,因此子类的原型也指向父类的原型。
        ②基本源码:
            eg:
                function SuperType(){
                    this.property = true;
                }
                SuperType.prototype.getSuperValue = function(){
                    return this.property;
                };
                function SubType(){
                    this.subproperty = false;
                }
                //继承了SuperType
                SubType.prototype = new SuperType();    // 将父类的实例赋值给子类的原型
                SubType.prototype.getSubValue = function (){
                    return this.subproperty;
                };
                var instance = new SubType();
                alert(instance.getSuperValue()); //true,调用父类SuperType的方法getSuperValue()
        ③别忘记了父类同样基础了祖类Object
        ③确定原型和实例的关系 用instanceof和对象.isPrototypeOf(实例)
        ④在子类重新或者添加父类的方法时,必须要在父类定义之后
        ⑤原型链的问题 原型链中不能存在引用类型
            eg:
                function SuperType(){
                    this.friends = [1,2];
                }
                function SubType(){}
                //继承了SuperType
                SubType.prototype = new SuperType();
                var s1 = new SubType();
                var s2 = new SubType();
                s1.friends.push(3);
                alert(s1.friends);      // 1, 2, 3
                alert(s2.friends);      // 同上
        ⑥解决方法   借用构造函数
    2.借用构造函数    对于原型链中包含引用类型,我们可以在子类的构造函中调用父类的构造函数
        ①源码案例, 即可以使用引用类型,还可以传递参数
        eg:
            function SuperType(name){
                this.name = name;
                this.friends = [1,2];
            }
            function SubType(){
                SuperType.call(this, "abc");        // 传递参数
            }
            //继承了SuperType
            SubType.prototype = new SuperType();
            var s1 = new SubType();
            var s2 = new SubType();
            s1.friends.push(3);
            alert(s1.friends);      // 1, 2, 3
            alert(s2.friends);      // 1, 2
            alert(s1.name);         // abc
        ③问题 由于是在构造函数中定义,所以方法不能够共享
        ④解决方法   组合继承
    3.组合继承(虽然两次调用了父类,但是基本ok)
        ①基本思想   将借用构造和原型链结合起来,借用构造定义属性,原型链定义方法
            eg:
                function SuperType(name){
                    this.name = name;
                    this.friends = [1,2];
                    if (typeof this.getName != "function") {
                        SuperType.prototype.getName = function () {
                            return this.name;
                        }
                    }
                }
                function SubType(name, age){
                    SuperType.call(this, name);             // 第二次调用父类
                    this.age = age;
                    if (typeof this.getAge != "function") {
                        SuperType.prototype.getAge = function () {
                            return this.age;
                        }
                    }  
                }
                //继承了SuperType
                SubType.prototype = new SuperType();        // 第一次调用父类
                var s1 = new SubType("zhang", 23);
                var s2 = new SubType("li", 24);
                s1.friends.push(3);
                alert(s1.friends);      // 1, 2, 3
                alert(s2.friends);      // 1, 2
                alert(s1.getName());    // zhang
                alert(s2.getAge());     // 24
    4.原型式继承
        ①基本思想   借助原型可以基于已有的对象创建新对象,从而不必自定义对象
            eg:
                function object(o) {
                    function F() {};
                    F.prototype = o;
                    return new F();
                }
                var person = {
                    name : "zhang",
                    friends : [1, 2]
                }
                var p1 = object(person);
                p1.name = "li";
                p1.friends.push(3);
                alert(p1.name);     // li
                alert(p1.friends);  // 1,2,3
                var p2 = object(person);
                p1.name = "wang";
                p1.friends.push(4);
                alert(p2.name);     // wang
                alert(p2.friends);  // 1,2,3,4
        ②ECMAScript 5发展了道格拉斯·克罗克福德的原型链继承,用Object.create()方法
            eg: 其中第二个参数和defineProperty()方法一致
                var person = {
                    name : "zhang",
                    friends : [1, 2]
                }
                var p1 = Object.create(person, {
                    name : {
                        value : "zhang"
                    }
                });
                p1.friends.push(3);
                alert(p1.name);     // li
                alert(p1.friends);  // 1,2,3
                var p2 = Object.create(person, {
                    name : {
                        value : "wang"
                    }
                });
                p1.friends.push(4);
                alert(p2.name);     // wang
                alert(p2.friends);  // 1,2,3,4
        ③问题:    原型链共享问题,引用类型
    5.寄生式继承
        ①思想 基于原型式继承,创建一个新函数对象,添加新方法
        eg:
            function object(o) {
                function F() {};
                F.prototype = o;
                return new F();
            }
            function createAnother(original) {
                // 继承原来的对象原型
                var clone = object(original);
                // 添加新方法
                clone.newFun = function () {
                    return "new function";
                }
                return clone;
            }
            var person = {
                name : "zhang",
                friends : [1, 2]
            }
            var p = createAnother(person);
            alert(p.name);      // zhang
            alert(p.newFun());  // new function
        ②问题 原型链共享问题,引用类型
    6.寄生组合式继承
        ①思想 在组合继承和原型式继承的基础上,不在子类的内部调用父类的构造函数,而是创建父类原型的副本
        eg:
            function object(o) {
                function F() {};
                F.prototype = o;
                return new F();
            }
            function inheritPrototype(subType, superType) {
                // 赋值proto为superType的原型
                var proto = object(superType.prototype);
                // 原型的contructor属性指向构造函数
                proto.contructor = subType;
                // superType的构造函数指向原型
                subType.prototype = proto;
            }
            function SuperType(name){
                this.name = name;
                this.friends = [1,2];
                if (typeof this.getName != "function") {
                    SuperType.prototype.getName = function () {
                        return this.name;
                    }
                }
            }
            inheritPrototype(SubType, SuperType);
            function SubType(name, age){
                SuperType.call(this, name);
                this.age = age;
                if (typeof this.getAge != "function") {
                    SuperType.prototype.getAge = function () {
                        return this.age;
                    }
                }  
            }
            var s1 = new SubType("zhang", 23);
            var s2 = new SubType("li", 24);
            s1.friends.push(3);
            alert(s1.friends);      // 1, 2, 3
            alert(s2.friends);      // 1, 2
            alert(s1.getName());    // zhang
            alert(s2.getAge());     // 24











推荐阅读更多精彩内容