对象

对象是一个包含相关数据和方法的集合（通常由一些变量和函数组成，我们称之为对象里面的属性和方法）

1.创建对象

• 字面量模式

var obj = {
            name: '小红',
            age:18,
            gender:'female',
            sayHi:function() {
                console.log('hi');
            }
        }
        console.log(obj.name);
        console.log(obj['age']);
        console.log(obj.gender,typeof obj);
        obj.sayHi();
        
        //(1) 里面的属性或者方法我们采取键值对的形式 键 属性名 : 值 属性值
        // (2) 多个属性或者方法中间用逗号隔开的
        // (3) 方法冒号后面跟的是一个
        // (4) 调用对象的方法  对象名.方法名()      

• 构造函数模式

        var obj1 = new Object();
        obj1.name = '小明';
        obj1.age = 12;
        obj1.sex = 'male';
        obj1.skill = function() {
            console.log('hello');
        }
        console.log(obj1.name);
        console.log(obj1['age']);
        obj1.skill();

• 遍历对象的属性 普通版的for循环可以遍历数组，但无法遍历对象

增强版的for循环：

for..in用于遍历数组或者对象的属性

for (var key in obj1) {
            console.log(key + '==' + obj1[key]);
        }

2.Object显示类型转换(强制类型转换)

ECMAScript中可用的3种强制类型转换如下：

Boolean(value)

把给定的值转换成Boolean型；

String(value)

把给定的值转换成字符串。

Number(value)

把给定的值转换成数字（可以是整数或浮点数）；

• Object类型到Boolean类型

// 除了空引用(null)会转换为false，其他都被转换为true
var obj = {
  name:"zhangsan",
  age:12
};
// 使用Boolean包装器进行转换
console.log(Boolean(obj));  //true

数据类型	转换为true的值	转换为false的值
Boolean	true	false
String	任何非空的字符串	""(空字符串)
Number	任何非零数字(包括无穷大)	0和NaN
Object	任何对象	null
Undefined	无	undefined

• Object类型转String类型

var obj = {
  name: 'zhangsan',
  age: 12,
  // 可以重写toString方法，进行我们想要的转换
  toString:function(){
    return this.name+"--"+this.age;
  }
};
console.log(obj.toString(), typeof obj.toString());  //zhangsan--12 string
console.log(String(obj), typeof String(obj));   //zhangsan--12 string

转换规则：

显示转换与隐式转换规则类似，当要将对象转换为String时，类似隐式转换中的PreferredType为String

1. 先调用对象的toString方法
2. 判断该方法的返回值是否为基础数据类型（Number，String，Boolean，Undefined，Null）
3. 若返回值为基础数据类型，则转换规则按照相应数据类型的转换规则对其进行转换
4. 若返回值不为基础数据类型，则在该返回值的基础上继续调用valueOf方法
5. 判断valueOf的返回值是否为基础数据类型
6. 判断是否为基础数据类型，若是基础数据类型则进行操作3
7. 若仍旧不为基础数据类型则报错

• Object类型转Number类型

var obj = {
    name:"hhh",
    age:12,
    /*
          1.如果只重写了valueOf()或者toString()方法，则调用该方法，并将返回值用Number()转换。
          2.如果两个方法都重写了，则调用valueOf()，并将返回值用Number()转换。
          3.如果两个方法都没有重写，则返回NaN
      */ 
    toString:function(){
      return "100";
    },
    valueOf:function(){
      return 10;
    }
  };
  console.log(Number(obj));  //10

转换规则： 显示转换与隐式转换规则类似，当要将对象转换为Number时，类似隐式转换中的PreferredType为Number

1. 先调用对象的valueOf方法
2. 判断该方法的返回值是否为基础数据类型（Number，String，Boolean，Undefined，Null）
3. 若返回值为基础数据类型，则转换规则按照相应数据类型的转换规则对其进行转换
4. 若返回值不为基础数据类型，则在该返回值的基础上继续调用toString方法
5. 判断toString的返回值是否为基础数据类型
6. 判断是否为基础数据类型，若是基础数据类型则进行操作3
7. 若仍旧不为基础数据类型则报错

3.检测属性

检测一个属性是否属于某个对象。常用的方式主要有3种：

• in

检测某属性是否是某对象的自有属性或者是继承属性

var obj = {
    name: 'zhangsan',
    age:18,
    gender: 'male'
}

//in运算符的左侧为属性名称，右侧为对象
console.log('name' in obj);   //true
console.log('age' in obj);    //true
console.log('gender' in obj);   //false

//如果用in判断一个属性存在，这个属性不一定是obj的，它可能是obj继承得到的,如：
console.log('toString' in obj);  //  true

// 因为toString定义在object对象中，而所有对象最终都会在原型链上指向object，所以obj也拥有toString属性。

• Object.prototype.hasOwnProperty()

检测给定的属性是否是对象的自有属性，对于继承属性将返回false

var obj = {
    name: 'zhangsan',
    age:18,
    gender: 'male'
}

console.log(obj.hasOwnProperty('name')); //true
console.log(obj.hasOwnProperty('age'));  //true
console.log(obj.hasOwnProperty('toString')); //false,toString为继承属性
console.log(obj.hasOwnProperty('gender')); //true

• Object.prototype.propertyIsEnumerable()

propertyIsEnumerable()是hasOwnProperty()的增强版，除了是自身属性外，还要求是可枚举属性，即我们创建的属性。可以确定对象中的指定属性（除了通过原型链继承的属性）是否可以由for...in循环枚举。

4.Object原型属性及方法(原型方法，实例可以调用的方法)

在Object的构造函数的原型对象中的属性和方法都可以被Object构造函数的实例所继承。

Object原型中的所具有的任何属性和方法也同样存在于其他对象中，任何对象继承自Object。

Object原型中常用的方法：

constructor

保存用户创建当前对象的函数，与原型对象对应的构造函数

hasOwnProperty(propertyName)

检查给定的属性名是否是对象的自有属性

propertyIsEnumerable(propertyName)

检查给定的属性在当前对象实例中是否存在

valueOf()

返回对象的字符串，数值，布尔值的表示

toLocaleString()

返回对象的字符串表示，该字符串与执行环境的地区对应

toString()

返回对象的字符串表示

isPrototypeOf(object)

检查传入的对象的原型

var obj = new Object()

// 调用原型对象中继承的方法
console.log(obj.toString());  //[object Object]

console.log(obj.__proto__.toString());  //[object Object]

console.log(Object);   //[Function: Object]

// 构造函数
console.log(Object);  //[Function: Object]

// 原型对象 Object.prototype
console.log(Object.prototype);  //{}

// 原型对象照片那个的constructor属性  原型对象中的constructor属性指向构造函数
console.log(Object.prototype.constructor);  //[Function: Object]

// 实例__proto__指向原型对象
console.log(obj.__proto__ === Object.prototype);  //true

// 创建Date对象
var now = new Date();
console.log(now);   //2021-09-04T02:46:00.198Z

// 使用原型对象中的方法
console.log(now.toString());   //  Sat Sep 04 2021 10:46:00 GMT+0800 (GMT+08:00) (国际标准时间)

console.log(now.toLocaleString());  //2021-9-4 10:47:30

5.深入理解对象-定义属性

ECMAScript中有两种属性：数据属性、访问器属性。这两种属性用于设置属性的高级属性，例如该属性是否可以配置，是否可以读写，是否可以遍历，并且可以通过setter,getter来监听数据的改变。

• 数据属性特性

数据属性 例如name属性

包含一个属性值的位置，这个位置可以读取和写入值。数据属性特性如下：

[[Configurable]]

表示是否通过delete删除属性从而重新定义属性，能否修改属性的特性，或者能否把属性修改为访问器属性(属性直接定 义在对象中，默认为true)。 当为false时，不能重新定义不能使用delete删除。

[[Enumerable]]

表示能否通过for-in循环返回属性。(属性直接定义在对象中，默认为true)

[[Writable]]

表示能否修改属性的值。(属性直接定义在对象中，默认为true)

[[Value]]

包含这个属性的数据值 name:jacky

要修改属性默认的特性，必须使用ECMAScript5的

Object.defineProperty(obj,prop,descriptor)

• obj：必需。目标对象
• prop：必需。需定义或修改的属性的名字
• descriptor：必需。目标属性所拥有的特性

var obj = new Object()
Object.defineProperty(obj,'name',{
    configurable:true,
    enumerable:true,
    writable:true,
    value:'hhh'
 })

 console.log(obj.name);  //hhh
 obj.name = 'zhangsan';
 console.log(obj.name);  //zhangsan

//  改属性后
Object.defineProperty(obj,"name",{enumerable:false});
Object.defineProperty(obj,"name",{writable:false});
obj.name = 'sisi';
console.log(obj.name);   //zhangsan
console.log( obj.propertyIsEnumerable("name"));  //false

注意：当我们创建一个对象并且为对象设置一个属性的时候，该属性默认特性Configurable、Enumerable、Writable默认都为true，value为该属性的值。

Object.defineProperties(obj,props)

• obj：必需。目标对象
• props：该对象的一个或多个键值对定义了将要为对象添加或修改的属性的具体配置

var obj = new Object();
Object.defineProperties(obj, {
    name: {
        value: 'zhangsan',
        configurable: false,
        writable: true,
        enumerable: true
    },
    age: {
        value: 18,
        configurable: true
    }
})
console.log(obj.name, obj.age);  //zhangsan 18
delete obj.name;
delete obj.age;
console.log(obj.name, obj.age);  //zhangsan undefined

6.读取属性的特性

Object.getOwnPropertyDescriptor(obj,prop)

功能: 该方法返回指定对象上一个自有属性对应的属性描述符。（自有属性指的是直接赋予该对象的属性，不需要从原型链上进行查找的属性）

• obj: 需要查找的目标对象
• prop: 目标对象内属性名称

var person = {
    name: '张三',
    age: 18
}
var desc = Object.getOwnPropertyDescriptor(person, 'name'); 
console.log(desc);
/*
结果如下
{ value: '张三',
  writable: true,
  enumerable: true,
  configurable: true }
*/

Object. getOwnPropertyDescriptors(obj)

功能: 所指定对象的所有自身属性的描述符，如果没有任何自身属性，则返回空对象。

var person = {
    name: '张三',
    age: 18
}
var res = Object.getOwnPropertyDescriptors(person); 
console.log(res);
/*
结果如下
{ name:
    { value: '张三',
      writable: true,
      enumerable: true,
      configurable: true },
   age:
    { value: 18,
      writable: true,
      enumerable: true,
      configurable: true } }
*/

7.访问器属性特性

访问器属性：这个属性不包含数据值，包含的是一对get和set方法，在读写访问器属性时，就是通过这两个方法来进行操作处理的。

访问器属性包含的四个特性：

[[Configurable]]

表示能否通过delete删除属性从而重新定义属性，能否修改属性的特性，或能否把属性修改为访问器属性， 默认为false

[[Enumerable]]

表示能否通过for-in循环返回属性,默认为false

[[Get]]

在读取属性时调用的函数,默认值为undefined

[[Set]]

在写入属性时调用的函数,默认值为undefined

这里要注意下，访问器属性不能直接定义，要通过Object.defineProperty()这个方法来定义。

var book = {
    _year: 2020, //下划线表示是内部属性，只能通过对象的方法来读写
    editor: 1
};
Object.defineProperty(book, 'year', {
    get: function () {
        return this._year;
    },
    // 若只指定get方法，不指定set方法，那就默认该属性是只读的
    set: function (newYear) {
        if (newYear !== this._year) {
            this._year = newYear;
            this.editor++;
        }
    }
});
console.log(book.year);  //未修改的year:2020
book.year = 2021;
console.log(book.year);   //修改后的year: 2021
console.log(book.editor);  //修改year后的editor: 2
// 访问器属性可以通过Object.getOwnPropertyDescriptor()查询
console.log(Object.getOwnPropertyDescriptor(book, '_year'));
/*
结果如下
{ value: 2021,        
    writable: true,     
    enumerable: true,   
    configurable: true }
*/

由此可以想到数据的双向绑定：

在一个对象（book）中设置一个私有属性(_year:开头下划线代表私有属性)，再为这个对象设置访问器属性year（本身还未在对象中定义），当book.year进行修改时触发set函数，通过这个函数可以进行数据的操作，比如数据的判断赋值等一系列操作，从而实现数据的双向绑定。这个原理是vue的本质原理。vue是数据驱动框架，当数据发生改变的时候，视图自动更新。