JavaScript创建对象的几种方式

144 阅读2分钟

在Javascript的ES5中,我们目前可以采用几种方式创建对象(object):
1、利用对象字面量创建对象
2、利用new Object() 创建对象
3、利用 构造函数创建对象

1. 利用字面量创建对象
对象字面量:就是花括号{ }里面包含了表达这个具体事物(对象)的属性和方法。var obj ={ };
{ }里面采用键值对的形式表示
键:  相当于属性名
值:  相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型、函数类型)\

        var obj = new Object();
        obj.uname = '周杰伦';
        obj.singSong = function () {
            console.log('青花瓷');
        }
        console.log(obj.uname);// 周杰伦
        obj.singSong();// 青花瓷
        
(1)对象的属性值或者方法我们采取键值对的形式  键 属性名 : 值 属性值\
(2)多个属性或者方法中间用逗号隔开\
(3)方法冒号后面跟的是一个匿名函数

这种方式死板, 灵活度不高, 每次都需要手动创建, 冗余度也很大, 适用于临时对象变量或者局部属性少的对象

2. 利用 对象字面量创建对象

var obj = {
            uname: '周杰伦',
            singSong: function () {
                console.log('青花瓷');
            }
        }
        console.log(obj.uname);// 周杰伦
        obj.singSong();// 青花瓷

对象字面量是对象定义的一种简写形式,第一种和第二种创建形式的缺点就是:他们用同一个接口创建很多对象和,会产生大量的重复代码,如果你有500个对象,那么你就要输入500次很多相同的代码。

3. 利用构造函数创建对象

function Star(uname, age) {
            // 属性
            this.uname = uname;
            this.age = age;
            // 方法
            this.sing = function () {
                console.log('青花瓷');
            }
        }
        var ldh = new Star('周杰伦,25')
        console.log(ldh);
        ldh.sing();

构造函数执行的流程:

1 创建一个新的对象(遇到new 的时候)

2 将构造函数的作用域赋给新的对象(因此this就指向这个对象)

3 执行构造函数中的代码(为这个对象添加属性)

4 返回新对象

那么构造函数确实挺好用的,但是它也有它的缺点:

每个对象里面都有公用的函数,意味着每次创建都会穿件这个函数,因此可以这个函数放到外面,但是会污染全局作用域。

就是每个方法都要在每个实例上重新创建一遍,方法指的就是我们在对象里面定义的函数。如果方法的数量很多,就会占用很多不必要的内存。

\

4.es6新增类创建对象

class Star {
            // 属性
            constructor(uname, age) {
                this.uname = uname;
                this.age = age;
            }
            // 方法
            sing(song) {
                console.log(song);
            }
        }
        var ldh = new Star('周杰伦', 25);
        console.log(ldh);
        ldh.sing('青花瓷');