红宝书阅读笔记！第十六天_对象

wf魏凡
413 阅读5分钟
ECMA将对象定义为一组属性的无序集合。对象的每个属性或者方法，都由一个名称来标识，这个名称映射到一个值，可以把ECMAScript的对象想象成一张散列表，值可以是数据或者函数。

理解对象

创建自定义对象的通常方式是创建一个Object的新实例，然后给他添加属性和方法。或者用对象字面量的方法创建。

let person = new Object();
person.name = 'Nick';
person.age = 20;
person.sayName = function() {
	console.log(this.name);
}

let person = {
    name: 'Nick',
    age = 20,
    sayName() {
    	console.log(this.name);
    }
};

1.属性的类型

分为数据属性和访问器属性。

2.给对象定义多个属性

3.读取属性的特性

这一节讲的东西是一些对象中内部的操作办法，以我的能力掌握起来不是很方便，先跳过了。

4.合并对象

ECMA6专门给合并对象提供了Object.assign()方法。这个方法接收一个目标对象和一个或多个源对象作为参数，然后把后面的复制给前面的。

dest = {};
src = { id: 'src'};

result = Object.assign(dest,src);

5.对象标识及相等判定

Object.is()

6.增强对象的语法

1.属性值简写

当属性名和变量名一样时，可以👇

let name = 'Bob';

let person = {
	name
};

console.log(person); //{ name: 'Matt'}

创建对象

虽然使用Object构造函数或对象字面量可以方便地创建对象，但这些方式也有明显不足：创建具有同样接口的多个对象需要重复编写很多代码。

1.概述

ECMAScript6开始正式支持类和继承。ES6的类，旨在完全涵盖之前规范设计的基于原型的继承模式。不过，无论从哪方便看，ES6的类都仅仅是封装ES5.1构造函数加原型继承的语法糖而已。

2.工厂模式

工厂模式是一种众所周知的设计模式，广泛应用于软件工程领域，用于抽象创建特定对象的过程。下面的例子展示了一种按照特定接口创建对象的方式👇

function createPerson( name, age, job ){
    let o = new Object();
    o.name = name;
    o.age = age;
    o.job = job;
    o.sayName = function(){
    	console.log(this.name);
    }
    return o;
}
let person1 = createPerson("Nick",29,"Doctor");

3.构造函数模式

ECMAScript中的构造函数是用于创建特定类型对象的。前面的栗子可以👇 
function Person( name, age, job ){
    this.name = name;
    this.age = age;
    this.job = job;
    this.sayName = function(){
    	console.log(this.name);
    }
}
let person1 = new Person("Nick",29,"Doctor");

在这个栗子中，Person()构造函数代替了createPerson()工厂函数。实际上内部也差不多，不过有如下区别👇

⚪没有显示地创建对象

⚪属性和方法直接赋值给了this

⚪没有return

另外，要注意函数名Person的首字母大写。按照惯例，构造函数名称的首字母都要大写，非构造函数则以小写字母开头。

4.原型模式

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。原来在构造函数种直接赋给对象实例的值，可以直接赋值给他们的原型👇 
function Person(){}

Person.prototype.name = 'Nick';
Person.prototype.age = 29;
Person.prototype.sayName(){
	console.log(this.name);
};

这里，所有的属性和方法都直接添加到了Person的prototype属性上，与构造函数模式不同，使用这种原型模式定义的属性和方法是所有实例共享的。

1.理解原型

无论何时，只要创建一个函数，就会按照特定的规则为这个函数创建一个prototype。实例与构造函数原型有直接的联系，但实例与构造函数之间没有。

以上面的Person构造函数为例

其中Person为构造函数，Person.prototype为原型对象，person1为实例。他们之间有下图关系

其中隐藏特性[[prototype]]通过_proto_来访问。

Person.prototype指向原型对象，而Person.prototype.constructor指回Person函数。Person的实例person1只有一个内部属性指回Person.prototype。

Object.getPrototypeOf()：这个方法可以返回传入对象的原型对象。在实现继承时尤为重要。

Object.setPrototypeOf()：可以向私有特性写入一个新值。❗不过回严重影响代码性能。

Object.create()：可以通过这个方法来创建一个新对象，同时为其指定原型。

2.原型层级

当通过对象访问属性时，搜索开始于实例本身，如果在实例上发现了给定的名称，那么就返回对应的值。如果没有找到这个属性，那么搜索会沿着指针继续进入原型对象，然后再原型对象上找到对应的值后，再返回相应的值。

举个

只要给对象实例添加一个属性，这个属性就会被遮蔽原型对象上同名属性。可以使用delete方法来完全删除实例上的属性👇

hasOwnProperty()：可以用来确认某个属性是在实例上还是在原型对象上。

3.原型和in操作符

两种方式使用in操作符：单独使用和在for-in循环中使用。

在单独使用时，in操作符会在可以通过对象访问指定属性时返回true，无论属性在实例上还是原型上。

在for-in循环中使用in操作符时，可以通过对象访问且可以被枚举的属性都会返回，包括实例属性和原型属性。

通过Object.keys()、Object.getOwnPropertyNames()和Object.getOwnPropertySymbols()来使用。

5.对象的迭代

ECMAScript 2017新增了两个静态方法，用于将对象内容转换为序列化的格式👇

Object.values()：接收一个对象，返回它们内容的数组，返回对象的值是数组。

Object.entries()：接受一个对象，返回它们内容的数组，返回的是键/值对的数组。

其他的原型问题再遇到了会补充。

文章内容参考：JavaScript高级程序设计（第四版）

标题样式来自：juejin.cn/post/684490…

哪里写错了就联系我🐧：54269504

avatar
文章
阅读
粉丝