javascript创建对象的几种方法

var person = new Object();
person.name = 'demo';
person.age = 21;
console.log(person.name);
console.log(person["name"]);

第一种方式,用Object构造函数创建对象(person)

为person添加两个值name,age;

调用对象属性----->对象名.属性名

   　　　　　　　　对象名["属性名"]

    var person = {
            name: "demo",
            age: 21,
            520: "我的名字叫520",
            "oh my god" : "我的天"
        };
console.log(person.name);
console.log(person["age"]);
console.log(person["520"]);
console.log(person["oh my god"]);

第二种方式,使用对象字面量创建对象,这里有两个不同的地方,一个是属性名为520,另外一个是带有双引号的"oh my god"用--->对象名.属性名无法获取到对应的属性值并且还报错

这里只能使用---->对象名["属性名"],在调用"oh my god"的时候--->person["oh my god"]是可以有空格的.

 

function person(name,age,obj){
            var o = new Object();
            o.name = name;
            o.age = age;
            o.obj = obj;
            o.sayName = function(){
                alert(this.name);
            };
            return o;
        }

person("小茗同学",21,["跑步","游泳"]).sayName();

 

第三种方式,工厂模式创建对象,返回一个带属性和方法的person对象.

function Person(name,age,obj){
            this.name = name;
            this.age = age;
            this.obj = obj;
            this.sayName = function(){
                alert(this.name);
            };
        }
var person = new Person("小茗同学",21,["跑步","游泳"]);
person.sayName();

第四种,使用自定义构造函数创建对象,要注意命名规范,构造函数的函数名首字母要大写,区别对待,这方式创建对象有个缺陷,sayName这个方法的每个实例都是指向不同函数的实例,而不是同一个.

可以通过控制台打断点观察js运行

 

    function Person(){}
        Person.prototype = {
            constructor : Person,
            name : "小茗同学",
            age : 21,
            arr : ["跑步","游泳"],
            sayName : function(){
                alert(this.arr);
            }
        };
var personA = new Person();
personA.arr.push("打篮球");
personA.sayName();
var personB = new Person();
personB.sayName();

第五种,使用原型模式创建对象,解决第四种中的问题,使用不同对象(personA,personB)的函数(personA.sayName();personB.sayName())指向同一个函数(person原型对象中的sayName方法);

缺陷:实例共享同一引用类型arr,两个(personA和personB)得到的值是一样的.

每创建一个函数，就会同时创建它的prototype 对象，这个对象也会自动获得constructor 属性。而我们在这里使用的语法，本质上完全重写了默认的prototype 对象，因此constructor 属性也就变成了新对象的constructor 属性（指向Object 构造函数），不再指向Person 函数。此时，尽管instanceof操作符还能返回正确的结果，但通过constructor 已经无法确定对象的类型了

引用文章---->   https://www.cnblogs.com/hahazexia/p/5276655.html

function Person(name,age,obj){
            this.name = name;
            this.age = age;
            this.obj = obj;
            this.arr = ["跑步","游泳"];
        }
        Person.prototype.sayName = function(){
            alert(this.arr);
        };

        var personA = new Person("小茗同学",21,"男");
        var personB = new Person("小红同学",21,"女");
        personA.arr.push("打篮球");
        personA.sayName();
        console.log(personA);
        personB.sayName();
        console.log(personB);

第六种方式,组合使用原型模式和构造函数创建对象,解决第五种方式的缺陷,也是最广泛的运用,该模式创建的对象.

第六种输出结果:

 

function Person(name,age,obj){
            this.name = name;
            this,age = age;
            this.obj = obj;
            this.arr = ["跑步","游泳"];
            if(typeof this.sayName != "function"){
                Person.prototype.sayName = function(){
                    alert(this.name);
                }

                Person.prototype.sayFriends = function(){
                    alert(this.arr);
                }
            }
        }
        var person = new Person("小茗同学",21,"男");
        person.sayName();
        person.sayFriends();

动态创建原型模式,这个模式好处在于想面向对象编程,具有更好的封装性,在构造函数完成对原型的创建.

在这几种创建对象里,第六种和第七种用得比较广泛.