想要谈恋爱必须先理解对象(写给前端小白的理解对象指南)-CSDN博客

本文链接：https://blog.csdn.net/qq_41162375/article/details/144103035

1.理解对象

创建对象。

① 使用构造函数的方式创建对象

let person = new Object();
person.name ="nico";
person.sayname = function (){
  console.log(this.name); //this.name属性会解析为person.name
}

② 使用字面量的方式来创建对象

let person ={
  name:"nico",
  sayname(){
    console.log(this.name); //this.name属性会解析为person.name
  }
}

1.1 属性的类型

ECMA-262 使用一些内部特性来描述属性的特征.

为了将某个特性标识为内部特性,规范会用两个中括号把特征的名称括起来比如 [ [ Enumerable ] ] .

属性分为两种: 数据属性和访问器属性.

数据属性

数据属性包含一个保存数据值的位置. 值会从这个位置读取,也会写入到这个位置.

数据属性有4个特性描述它们的行为. (我是一个数据属性,我有四个特别的性格要说明: 1我可以被俱乐部踢掉 2.俱乐部清点人数的时候一定要点上我 3.我是一个E人你可以修改我的名字叫我小明或者明哥都可以 4.我有一个笔记本value大家都可以写也都可以读 )

[[ Configurable ]] 可配置的 ,表示属性是否可以通过delete删除并重新定义是否可以修改它的特性是否可以把它改为访问器属性 . 默认值为true.

[[ Enumerable ]] 可枚举的,表示属性是否可以通过for-in 循环返回. 默认值为true.

[[ Writable ]] 可写入的,表示属性的值是否可以被修改. 默认值为true.

[[ Value ]] 属性实际的值, 读取和写入属性值的位置,默认值为 undefined.

要修改属性的默认特性,就必须使用Object.defineProperty()方法.

这个方法接收3个参数: ①要给其添加属性的对象 ②属性的名称 ③ 一个描述符对象(可以包含4个属性和上面4个特性名称一一对应 )

let person = {};
Object.defineProperty( person ,"name" ,{
  writable:false, // 可写入为false,即不能被修改.
  value:"Nico", //person对象的name属性值为"Nico"
  // Configurable  Enumerable 的值没有被在该描述符对象中指定,则值为false
  // 这个属性不能被修改 不能删除 也不能枚举
  //Configurable属性被定为不可配置后,就不能再变回可配置的了
});
delete person.name;//严格模式下会抛出错误,非严格模式下只是没效果

访问器属性

访问器属性不包含数据值，但是包含两个函数 1.getter 获取函数 2.setter 设置函数，这两个函数不是必需的。只定义getter函数意味着属性是只读的. 只定义setter函数严格模式下报错.

在读取访问器属性时，会调用getter函数，函数会返回一个有效的值。

在写入访问器属性时，会调用setter函数并传入新值，函数必须决定对数据做出什么修改。

访问器属性有4个特性描述它们的行为。

- - [[ Configurable ]] 可配置的 ,表示属性是否可以通过delete删除并重新定义是否可以修改它的特性是否可以把它改为访问器属性 . 默认值为true.
  - [[ Enumerable ]] 可枚举的,表示属性是否可以通过for-in 循环返回. 默认值为true.
  - [[ Get ]] 获取函数在读取属性时调用,默认值为undefined.
  - [[ Set ]] 设置函数,在写入属性时调用,默认值为undefined.

访问器属性是不能直接定义的,必须使用Object.defineProperty().

// 定义一个对象book,包含伪私有成员year_和公共成员edition
let book = {
  year_:2017,//下划线表示该属性不希望在对象方法的外部被访问.
  edition: 1
};
// 使用Object.defineProperty()定义访问器属性year
Object.defineProperty( book, "year",{
  get(){
    return this.year_;
  },
  set(newValue){
    if(newValue>2017){
    this.year_=newValue;
    this.edition += newValue-2017;
    }
  }
})
book.year = 2018;
console.log(book.edition) ;// 2

1.2定义多个属性(略)

1.3读取属性的特性

使用Object.getOwnPropertyDescriptor() 方法可以取得指定属性的属性描述符.

1.4合并对象Object.assign()

合并merge两个对象,有时候也称为"混入mixin".就是把源对象所有的本地属性一起复制到目标对象上.目标对象的属性得到了增强.

ES6 提供了Object.assign()方法来合并对象.

参数 : ①一个目标对象 ② 一个或多个源对象

作用: 将每个源对象中 可枚举( Enumerable:true )的并且自有的(自己拥有的,不是从原型链上继承来的)属性 复制到目标对象.

注意:

Object.assign() 实际上对每个源对象执行的是 浅拷贝.
如果多个源对象都有相同的属性,那么使用最后一个复制的值.
源对象访问器属性取得的值比如说getter函数-->会作为一个静态值赋给目标对象.即不能转移getter函数和setter函数.

1.5 对象标识及相等判定(略)

1.6 增强的对象语法

ES6为定义和操作对象新增了很多语法糖特性. (语法糖是编程语言中提供的一种更加简洁、易读的写法。本质上没有增加新功能，只是让原本的代码更短更直观写起来更方便如模版字符串)

const name = "Nico";
// 普通字符串拼接
const greeting = "Hello" + name + "!";
//模板字符串拼接
const greeting = `Hello ${name} !`;

1.属性值简写

let name = 'Matt';
let person = {
  name, //相当于 name: name, 
  //这里使用变量name给属性name赋值,同名则可以只写一个name
};

2.可计算属性

//使用计算属性之前 , 如果想使用变量的值作为属性 必须先声明对象,然后使用中括号语法来添加属性.
// 准备好变量
const nameKey = 'name';
const ageKey = 'age';
const jobKey = 'job';

//使用计算属性之前需要
//①先声明对象
let person ={};
//②再使用中括号向对象中添加属性
person[nameKey] = 'Nico';
person[ageKey] = '28';
person[jobKey] = 'lawyer';

//使用计算属性之后可以直接在对象字面量中 完成动态属性的赋值.
let person = {
  [nameKey]: 'Nico';//[]包围的属性键 表示它是js表达式 而不是字符串.
  [ageKey]: '28';
  [jobKey]: 'lawyer';
}

3.简写方法名

// 给对象定义方法时,通常要写 方法名 冒号,再引用一个匿名函数
let person = {
  sayName: function(name) {
    console.log(`my name is ${name}`);
  }
}
// 简写方法名后 可以明显缩短 方法声明
let person = {
  sayName(name){
    console.log(`my name is ${name}`);
  }
}

1.7对象解构

ES6新增了对象解构的语法,可以使用和对象匹配的结构 来实现对象属性赋值

//准备好对象
let person = {
  name:'nico',
  age: 28,
  job:'lawyer',
};
//不使用对象结构
let personName = person.name;
let personAge = person.age;
//使用对象结构
let { name: personName ,age: personAge } = person;
// 上面的语句表示 将person里的name属性值赋值给perssonName,将person对象里的age属性值赋值给personAge

// 如果这里赋值的属性名也为name 和age 那么可以
let { name: name ,age: age} = person;
//使用属性值简写语法糖则可以写为
let { name , age } = person;
// 如果引用的属性不存在 那么值为undefined
let { name , sex } = person //此时sex 值为undefined
//可以在结构赋值的同时 定义默认值
let { name , sex='Female'} = person