从认识面向对象到构造函数的标准写法(构造函数的封装)

认识面向对象：

/*
五点

1、发展历史

2、编程思想
面向过程的编程思想：只关心数学逻辑。
面向对象的编程思想：直接生活逻辑映射到我们的程序中。

3、语法
类 对象

类：具有一类相同特征的事物的抽象概念。
对象：具体的某一个实体，唯一的。

4、代码

5、结构
基本数据类型(单个数据) -> 数组(批量数据) -> 对象(既能够存储数据，又能够存储函数)
*/

我们想创建两个对象，利用传统的对象方式：

        <script>
                /*
                    【注】面向对象的特点是继承、封装、多态。
                */

                var person1 = new Object();
                person1.name = 'blue';
                person1.sex = "男";
                person1.showName = function(){
                    alert("我的名字叫" + this.name);
                }
                person1.showSex = function(){
                    alert('我是' + this.sex + "的");
                }

                person1.showName();
                person1.showSex();

                /*
                    重复代码太多，封装函数。
                */

                var person2 = new Object();
                person2.name = 'red';
                person2.sex = "女";
                person2.showName = function(){
                    alert("我的名字叫" + this.name);
                }
                person2.showSex = function(){
                    alert('我是' + this.sex + "的");
                }

                person2.showName();
                person2.showSex();

        </script>

上面重复代太多，必须加以改进（利用封装函数）：

这种方式叫做工厂方法函数

        <script>
            /*
                工厂方式

                1、原料
                2、加工
                3、出厂
                
                下述方法，叫做工厂方法/工厂函数。
                【注】设计思想：工厂模式。
            */
            function createPerson(name, sex){
                //1、原料
                var person = new Object();

                //2、加工
                person.name = name;
                person.sex = sex;
                person.showName = function(){
                    alert("我的名字叫" + this.name);
                }
                person.showSex = function(){
                    alert('我是' + this.sex + "的");
                }

                //3、出厂
                return person;
            }


            var person1 = createPerson("blue", "男");
            person1.showName();
            person1.showSex();
            var person2 = createPerson("red", "女");
            person2.showName();
            person2.showSex();

            alert(person1.showName == person2.showName); //false
            /*
                工厂函数和系统创建对象的形式有啥区别？
                1、没有new
                2、每一个对象都有一套自己的函数，浪费。
            */

/*
工厂函数和系统创建对象的形式有啥区别？
1、没有new
2、每一个对象都有一套自己的函数，浪费。
*/

来看一下系统是怎么创建对象的：

        <script>
            //系统创建对象的方式
            var arr = new Array();
            var d = new Date();
            var obj = new Object();

            /*alert(typeof Array); //function
            alert(typeof Date);  //function*/

            var arr1 = [1, 2, 3];
            var arr2 = [6, 7, 8];
            alert(arr1.push == arr2.push); //true

            /*
                1、系统创建对象的函数，前面调用的时候加new
                2、创建出来对象，共用的是一套函数。
            */
        </script>

/*
1、系统创建对象的函数，前面调用的时候加new
2、创建出来对象，共用的是一套函数。
*/

怎么才能让我们（自定义创建对象）创建的对象也 可以用new调用和公用一套函数呢？

这里就用到构造函数：

//构造函数
/*
工厂方式

1、原料
2、加工
3、出厂

下述方法，叫做工厂方法/工厂函数。
【注】设计思想：工厂模式。

【注】我们通过new去调用的函数叫做构造函数，所谓构造函数就是去创建对象的。
【注】为了区分构造函数，和普通函数，一般情况下，构造函数的首字母大写。
【注】如果在调用函数的前面加了new
1、自动完成原料 和 出厂操作
2、该函数中的this，指向新创建出来的对象。

【注】JavaScript中是用构造函数替代类的功能。
*/

        <script>
            //构造函数
            /*
                工厂方式

                1、原料
                2、加工
                3、出厂
                
                下述方法，叫做工厂方法/工厂函数。
                【注】设计思想：工厂模式。


                【注】我们通过new去调用的函数叫做构造函数，所谓构造函数就是去创建对象的。
                【注】为了区分构造函数，和普通函数，一般情况下，构造函数的首字母大写。
                【注】如果在调用函数的前面加了new
                    1、自动完成原料 和 出厂操作
                    2、该函数中的this，指向新创建出来的对象。


                【注】JavaScript中是用构造函数替代类的功能。
            */
            function CreatePerson(name, sex){
                //1、原料
                // var person = new Object();
                // this = new Object()

                //2、加工
                this.name = name;
                this.sex = sex;
                this.showName = function(){
                    alert("我的名字叫" + this.name);
                }
                this.showSex = function(){
                    alert('我是' + this.sex + "的");
                }

                //3、出厂
                // return person;
                //return this;
            }


            var person1 = new CreatePerson("blue", "男");
            person1.showName();
            person1.showSex();
            var person2 = new CreatePerson("red", "女");
            person2.showName();
            person2.showSex();

            alert(person1.showName == person2.showName); //false
            /*
                工厂函数和系统创建对象的形式有啥区别？
                1、没有new
                2、每一个对象都有一套自己的函数，浪费。
            */
        </script>

现在可以用new 调用了，但是每一个对象还是都有一套自己的函数（对象方法函数），要想用让每个对象都公用一套对象的方法函数。就要用到 prototype原型来 定义对象方法函数。

先来看一下小例子，给数组对象直接给对象添加对象方法函数  的方法行不行;

            /*
                prototype 原型
            */
            var arr1 = [10, 20, 30, 40];
            var arr2 = [60, 70, 80, 90];

            //求和函数
            arr1.sum = function(){
                var res = 0;
                for(var i = 0; i < this.length; i++){
                    res += this[i];
                }
                return res;
            }

            alert(arr1.sum());
            alert(arr2.sum()); // arr2.sum is not a function

可见不行，下面我们用 prototype原型给数组对象添加对象方法函数。

        <script>
            /*
                prototype 原型2
            */
            var arr1 = [10, 20, 30, 40];
            var arr2 = [60, 70, 80, 90];

            //求和函数
            /*arr1.sum = function(){
                var res = 0;
                for(var i = 0; i < this.length; i++){
                    res += this[i];
                }
                return res;
            }*/

            /*
                【注】如果你想给一类对象添加函数，那么我们可以通过prototype原型将函数添加在构造函数上。
            */
            Array.prototype.sum = function(){
                var res = 0;
                for(var i = 0; i < this.length; i++){
                    res += this[i];
                }
                return res;
            }

            alert(arr1.sum());
            alert(arr2.sum()); // arr2.sum is not a function

            alert(arr1.sum == arr2.sum); //true

        </script>

 经过上面的给数组对象添加求和的方法。就可以这样给构造函数添加 对象方法函数了。

构造函数的标准写法：

    <script>
            function CreatePerson(name, sex){
                //添加属性
                this.name = name;
                this.sex = sex;
            }
            //函数要通过原型prototype添加
            //添加函数
            CreatePerson.prototype.showName = function(){
                alert("我的名字叫" + this.name);
            }

            CreatePerson.prototype.showSex = function(){
                alert('我是' + this.sex + "的");
            }

            var person1 = new CreatePerson("blue", "男");
            var person2 = new CreatePerson('red', "女");
            person1.showName();
            person1.showSex();
            person2.showName();
            person2.showSex();
            alert(person1.showName == person2.showName); //true

        </script>