JavaScript 对象创建的3种方法

在 JavaScript中，对象是一组属性和方法组成的无序集合

属性是对象的某些特性，例如"刘德华"这个人的身高、体重、性别，这些都属于他的属性
方法是对象的行为，比如”刘德华”唱歌是一种行为，“刘德华”睡觉也是一种行为

对象创建

对象的创建可以通过对象字面量、new Object、构造函数这3种方法来创建。

1、对象字面量

let liudehua = {
    // 属性
    name:'刘德华',
    age: 60,
    gender:'男',

    // 方法
    sayHello: function(){
        console.log("Hi...")
    }     
}

属性和方法使用键值对方式表示， 属性名:属性值， 方法名:匿名函数
属性与属性（方法）之间用逗号分隔
获取属性值使用 对象名.属性名 或者 对象名['属性名']
调用方法使用对象名.方法名()

console.log(liudehua.name) // 刘德华
console.log(liudehua['age']) // 60
console.log(liudehua.sayHello()) // Hi...

2、new Object()

使用 new 关键字后面调用构造函数，创建一个新的对象

let liudehua = new Object(); // 创建一个空对象  等价于  let o = {};

// 设置属性
liudehua.name = '刘德华'
liudehua.age = 60
liudehua.gender='男'

//设置方法
liudehua.sayHello = function(){
    console.log("Hi...")
}

3、new 构造函数

当需要创建多个类似的对象时，可以通过构造函数来创建对象。

语法：

// 定义构造函数
function 构造函数名(参数1, 参数2){
    this.属性名1 = 参数1, 
    this.属性名2 = 参数2, 
    this.方法名 = 匿名函数
}

// 创建对象
obj  = new 构造函数()

例如：

function Singer(uname, age, gender){  
    this.uname=uname;
    this.age=age;
    this.gender=gender;

    this.sing = function(song){
        console.log(this.uname + "唱了一首" + song)
    }
}

创建对象

// 创建一个liudehua对象
let liudehua = new Singer('刘德华', 60, '男')
liudehua.sing('男人哭吧哭吧')  //打印：刘德华唱了一首男人哭吧哭吧

// 创建一个choujay对象
let choujay = new Singer('周杰伦', 40, '男')
choujay.sing('最伟大的作品')  //打印：周杰伦唱了一首最伟大的作品

使用new 关键字调用构造函数时，按下面的步骤执行：

创建对象：创建一个空对象，赋值给this
初始化对象：执行构造函数中的代码，给对象设置属性和方法
返回对象：返回 this 的值

注意：

构造函数首字母大写（规范推荐，非强制）
构造函数不需要写return，会自动返回 this
调用构造函数，前面必须使用 new 关键字
构造函数中的this表示当前这个对象，当你创建 liudiehua时，this 指向的就是 liudehua，创建 choujay 对象时， this 指向的就是 choujay这个对象。
构造函数是对象的模板，类似于Java语言中的类

遍历对象

使用 for..in 遍历对象中的所有属性和方法，语法：

for 变量名 in 对象{
    let value = 对象[变量名]  // 获取属性的值
}

例如：

for (let key in liudehua) {
    console.log(key);
    console.log(liudehua[key]);
}

4、使用扩展操作符：...

ES2018新增了扩展操作符...，将已有的对象属性复制到新的对象中

let foo  = {x:1, y:2}
let bar  = {z:3}

let zoo = {...foo, ...bar}

console.log(zoo) // {x:1, y:2, z:3}

需要注意的几点：

扩展操作符只扩展对象的自有属性，继承属性不支持扩展
如果扩展对象和被扩展的对象有相同名字的属性，属性的值由后面的对象决定

5、使用Object.assign()方法

assign 可以把一个对象的属性复制到另一个对象， assign 接收两个或多个参数，第一个参数为目标对象，第二个及后续参数为来源对象，函数将把来源对象的属性复制到目标对象，并返回目标对象。

let foo  = {x:1, y:2}
let bar  = {z:3}

let zoo = {}

let obj = Object.assign(zoo, foo, bar)

console.log(zoo)  // {x:1, y:2, z:3}

console.log(obj===zoo) // true

另外补充两个ES6中新增的对象特性

1、简写属性

如果想创建多个变量名和对应值组合成的对象，原来需要像传统对象字面量语法构建对象

let x=1, y =2;
let o = {x:x, y:y}

console.log(o) // {x:1, y:2}

ES6之后可直接简写属性，省去分号和属性名

let o2 = {x, y}

console.log(o2) // {x:1, y:2}

2、简写方法

在对象中定义方法时，ES6以前需要，定义方法时需要像定义普通属性一样，通过函数表达式定义方法

let point={
    x:1,
    y:2,

    area: function(){
        return this.x*this.y
    }
}

console.log(point.area()) //2

而ES6之后可以省略冒号和function关键字，以一种简单的方式来定义对象的方法。

let point2={
    x:1,
    y:2,

    area(){
        return this.x*this.y
    }
}

console.log(point2.area()) //2

关注公众号「Python之禅」，回复「1024」免费获取Python资源