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