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,鼠标事件