JavaScript进阶系列03,通过硬编码、工厂模式、构造函数创建JavaScript对象

本篇体验通过硬编码、工厂模式、构造函数来创建JavaScript对象。

□ 通过硬编码创建JavaScript对象

当需要创建一个JavaScript对象时，我们可能这样写：

        var person = {

            firstName: "Darren",

            lastName: "Ji",

            getFullName: function() {

                return this.firstName + " " + this.lastName;

            }

        };

如果需要创建2个结构相同的对象，我们可能这样写：

        var person = {

            firstName: "Darren",

            lastName: "Ji",

            getFullName: function() {

                return this.firstName + " " + this.lastName;

            }

        };


        var person2 = {

            firstName: "Darren2",

            lastName: "Ji2",

            getFullName: function () {

                return this.firstName + " " + this.lastName;

            }

        };

□ 通过工厂模式创建JavaScript对象

但实际上，还可以通过工厂模式来创建JavaScript对象。

       var person1 = createPerson("Darren1", "Ji1"),

            person2 = createPerson("Darren2", "Ji2");


        function createPerson(firstName, lastName) {

            return {

                firstName: firstName,

                lastName: lastName,

                getFullName: function() {

                    return this.firstName + " " + this.lastName;

                }

            };

        }

继续在createPerson函数中增加一个方法，并调用。

        var person1 = createPerson("Darren1", "Ji1"),

            person2 = createPerson("Darren2", "Ji2");


        alert(person1.greet(person2));


        function createPerson(firstName, lastName) {

            return {

                firstName: firstName,

                lastName: lastName,

                getFullName: function() {

                    return this.firstName + " " + this.lastName;

                },

                greet: function(person) {

                    if (typeof person.getFullName !== "undefined") {

                        return "hello, " + person.getFullName();

                    } else {

                        return "are u here?";

                    }

                }

            };

        }

输出结果：hello, Darren2 Ji2

如果person1.greet方法的实参为匿名对象，如下：

alert(person1.greet({}));

输出结果：are u here?

□ 通过构造函数创建JavaScript对象

就像通过var arr = new Array()创建数组对象，通过var date = new Date()创建日期对象，JavaScript允许我们创建自定义数据类型。

        var Person = function(firstName, lastName) {

            this.firstName = firstName;

            this.lastName = lastName;


            this.getFullName = function() {

                return this.firstName + " " + this.lastName;

            };


            this.greet = function(person) {

                if (person instanceof  Person) {

                    return "hello, " + person.getFullName();

                } else {

                    return "are u here?";

                }

            };

        };


        var person1 = new Person("Darren", "Ji"),

            person2 = new Person("Jack", "Zhang");


        alert(person1.greet({

            getFullName: "this is string"

        }));

输出结果：are u here?

○ 变量Peson的第一个字母大写，这是一个惯例，表示Peson是自定义数据类型
○ this表示Person对象
○ instanceof用来判断变量是否是某种数据类型
○ 通过new来创建数据类型对象，new关键字不可获取，否则,在本例中this会指向window
○ 因为person1.greet()的实参不是Peson类型，所以输出了are u here?

如果把最后一行代码改成：

alert(person1.greet(person2));

输出结果：hello, Jack Zhang

但这里还有一点小问题：getFullName和greet可看作是对象，每次通过new创建Peson对象时，相当于在内存上创建了2份的Peson对象，以及2份的getFullName和greet对象，这增加了内存开销。是否可以让getFullName和greet放到一个公共的地方，然后每个Peson对象都可以引用他们呢？--prototype属性此时就可以用上了！

        var Person = function(firstName, lastName) {

            this.firstName = firstName;

            this.lastName = lastName;

        };


        Person.prototype.getFullName = function () {

            return this.firstName + " " + this.lastName;

        };


        Person.prototype.greet = function (person) {

            if (person instanceof Person) {

                return "hello, " + person.getFullName();

            } else {

                return "are u here?";

            }

        };


        var person1 = new Person("Darren", "Ji"),

            person2 = new Person("Jack", "Zhang");


        alert(person1.greet(person2));

输出结果：hello, Jack Zhang

以上，在Peson的prototype属性上定义的方法，能够被每个Peson对象共享，这从一定程度上减少了内存开销。

“JavaScript进阶系列”包括：

JavaScript进阶系列01,函数的声明，函数参数，函数闭包

JavaScript进阶系列02,函数作为参数以及在数组中的应用

JavaScript进阶系列03,通过硬编码、工厂模式、构造函数创建JavaScript对象

JavaScript进阶系列04,函数参数个数不确定情况下的解决方案

JavaScript进阶系列05,事件的执行时机, 使用addEventListener为元素同时注册多个事件,事件参数

JavaScript进阶系列06,事件委托

JavaScript进阶系列07,鼠标事件