JavaScript高级程序设计读书笔记（3）

面向对象程序设计

1.创建对象

        <script type="text/javascript">
            var person=new Object();
            preson.name="zhangsan"
            person.age=13;
            person.sayAge=function(){
                alert(this.age);
            }
        
        </script>

这种方式有一个明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。

2.工厂模式

        <script type="text/javascript">
            function creatPerson(name,age){
                var o=new Object();
                o.name=name;
                o.age=age;
                o.sayAge=function(){
                    alert(this.age);
                }
                return o;
            }
            var person1=creatPerson("zhangsan",12);
            var person2=creatPerson("lisi",15)
            person1.sayAge();//12
            person2.sayAge();//15
        
        </script>

3.构造函数创建对象

        <script type="text/javascript">
            function Person(name,age){
                this.name=name;
                this.age=age;
                this.sayAge=function(){
                    alert(this.age);
                }
            }
            var person1 =new Person("zhangsan",19);
            var person2 =new Person("lisi",20);
            person1.sayAge();//19
            person2.sayAge();//20
        </script>

person1和person2都保存着Person的一个不同实例。这两个对象都有一个costructor属性，该属性指向Person。

            alert(person1.constructor==Person);//true
            alert(person2.constructor==Person);//true

构造函数的调用：

1.作为构造函数调用

2.作为普通函数调用

            Person("zhangsan",17);
            window.sayAge();//17

在另一个对象的作用域中调用

            var obj=new Object();
            Person.call(obj,"zhangsan",18);
            obj.sayAge();//18

构造函数模式虽然好用，但是每个方法要在么个实例上重新创建一遍，前面的例子中，person1和person2都有一个名为sayName()的方法，但那两个方法不是同一个Function的实例。因此每定义一个函数，也就是实例化了一个对象。所以构造函数也可以 这样定义：

            function Person(name, age){
                this.name = name;
                this.age = age;
                this.sayAge =new Function("alert(this.age)");
            }

为了避免创建多个Function对象，可以将函数定义到构造函数外部

            function Person(name, age){
                this.name = name;
                this.age = age;
                this.sayAge =sayAge;
            }
            function sayAge(age){
                alert(this.age);
            }

原型模型：

 创建的每一个函数都有一个prototype属性，这个属性是一个对象，它的用途是包含可以由特定类型的所有实例共享的属性和方法。那么prototype就是通过调用构造函数而创建的那个对象的原型对象。使用原型的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说，不必在构造函数中定义对象信息，而是可以将这些信息直接添加到原型对象中。

        <script type="text/javascript">
            function Person(){}
            Person.prototype.name="zhangsan";
            Person.prototype.age=12;
            Person.prototype.setAge=function(){
                alert(this.age);
            }
            var person1=new Person();
            var person2=new Person();
            person1.setAge();//12
            person2.setAge();//12
        </script>

更简单的原型模型

        <script type="text/javascript">
            function Person(){}
            Person.prototype={
                name:"zhangsan",
                age:14,
                sayAge:function(){
                    alert(this.age);
                }
            }
            var person1=new Person();
            var person2=new Person();
            person1.sayAge();//14
            person2.sayAge();//14
        </script>

原型模型的动态性

        <script type="text/javascript">
            function Person(){}
            Person.prototype={
                name:"zhangsan",
                age:14,
                sayAge:function(){
                    alert(this.age);
                }
            }
            var person1=new Person();
            Person.prototype.sayHi=function(){
                alert("hi");
            }
            person1.sayHi();
        </script>

通过构造函数初始化原型

        <script type="text/javascript">
            function Person(name,age){
                this.name=name;
                this.age=age;
                if(typeof this.sayAge!="function"){
                    Person.prototype.sayAge=function(){
                        alert(this.age);
                    }
                } 
            }
            var person=new Person("zhangsan",13);
            person.sayAge();
        </script>