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

时间:2021-08-11 16:10:38

本篇体验通过硬编码、工厂模式、构造函数来创建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,鼠标事件