JS 中的 对象（基础解析）

一、概述

• 概念：特指的某一个事物，有特征（属性）和行为（方法），可存储数据。

• 通俗理解：对象是一组无序键值对的集合，可存储数据。

• 对象的属性和方法：可以通过 . 的方式添加（这一点也证明了JS是一门动态类型的语言）

• JS中大多数引用类型的值，都是Object类型的实例

二、对象创建的 3种方式

1. {} 字面量

var obj2 = {};
obj2.name = 'zhangxin';

console.log(obj2);

2. new 构造函数、 new 做了几件事？

• 构造函数：第一个字母大写（约定）；普通函数：第一个字母小写

var obj1 = new Object();
obj1.name = 'zhangxin';

console.log(obj1);

• new 构造函数，new 做了4件事：

  • 创建一个新对象

  • 把this指向当前创建的新对象

  • 给新对象添加 属性、方法

  • 返回 创建后的新对象

function Computer(name, age) {
    this.name = name;
    this.age = age;

    this.say = function () {
        return '我是' + this.name + ';今年' + this.age;
    }
}

var cp = new Computer('电脑', 20);
console.log(cp.say());  // 我是电脑;今年20

• new 构造函数 创建数组对象

var arr = new Array();

console.log(arr);  // [] 

3. Object.create({键值对}) 方法创建新对象 （ES5方法，IE8及以下不兼容）

var o1 = {name: 'zhangxin'};
var create = Object.create(o1);

console.log(create.name);  // 'zhangxin'

三、对象的的属性 、方法（ 赋值、取值 ）

方式1：. 的方式添加 / 读取：属性 、方法

方式2：[] 的方式添加 / 读取：属性 、方法（重要）

• 重要：可添加动态的属性名、动态的方法名

• 使用 [] 添加属性、方法：若属性名是固定的，需加引号；否则被视为 动态的变量

var obj = {};
    
obj.age = 20;
obj['name'] = 'zhangxin';
    
console.log(obj.age);       // 20
console.log(obj['name']);   // 'zhangxin'

四、对象的 循环遍历 for-in 、 for-of

• for-in 循环： 需要通过 key，去取对象中的值

var obj = {age: 18, name: 'ss'};
    
for (var key in obj) {
    consloe.log(key);
    console.log(obj[key]);
}

• for-of 循环： ES6 语法

const obj = {
    name: 'zhangxin',
    age: 18
};

for (const [key, value] of Object.entries(obj)) {
    console.log(key, value);
}

五、创建对象，并指定原型 Object.create( )

• 语法： Object.create(proto, descriptors)
  • 参数 proto：原型对象
  • 参数 descriptors： 原型对象上属性描述

var proto = {
    name: 'zhang'
};

var instance = Object.create(proto, {
    age: {
        writable: true,         // 可写性：是否可修改
        enumerable: true,       // 可枚举性：是否可枚举
        configurable: true,     // 可配置性：是否可以用 delete删除
        value: 18
    }
});

// 如上：proto 为 instance 的原型对象，改变 proto 中的属性 即改变原型对象上的属性

proto.name = 'xin';

console.log(instance.name);     // xin
console.log(instance.age);      // 18