重新认识JavaScript-Js面向对象(1): 理解对象

目标

• 理解对象
• 创建对象实例
• 理解Js中的继承

前言

对象是JavaScript的基础

什么是面向对象？

面向对象编程（Object Oriented Programming，缩写为 OOP）是目前主流的编程范式。
它将真实应用场景中各种复杂的关系，抽象出来，用对象之间的协作来模拟这种关系。
所以，对象是对单个实物的抽象，面向对象编程就是将事物之间的关系抽象成对象来实现

Js中的面向对象？

ECMAScript中没有类的概念，所以它的对象也与基于类的语言中的对象有所不同。
ECMA-262中对象的定义为：“无序属性的集合，其属性可以为基本值、对象、或者函数”，每一个对象都是基于一个引用类型创建。
简单来说，对象是一个容器，封装了 “属性” 和 “方法”

理解对象

JavaScript中一共有6+1种主要的类型（ES6中新增symbol）

• string
• number
• boolean
• null
• undefined
• **symbol
• object

原始类型并不是对象（string、number、boolean、null、undefined和symbol

所以，JavaScript 中万物皆是对象，这显然是错误的。

那么Js中哪些是对象？

• 函数（一等公民）
• 数组
• 其他内置对象
  • Object String Number Boolean Function Array Date RegExp Error
  • 注意，这是大写的，不是原始类型

详细知识点暂不讨论…
下面简单说说对象的基础知识点

对象基础

1、创建对象

两种最简单的创建对象方法，复杂一些的在创建对象中展开。

• New Object实例

const Person=new Object();
Person.name='Leo';
Person.age=10;
Person.job='Web developer';

Person.sayName= function (){
	alert(this.name);
};

• 使用对象字面量 {}

const Person={
	name:"Leo",
	age:10,
	job:' Web developer',
	saytName: function() {
		console.log(this.name)
	}
	
}

2、对象成员

参考上面的Person，一个对象由许多个成员组成，成员含有：

• 名字
• 值

例如Person对象的第一个成员，成员名为name,值为Leo。
对象成员的值可以是Js中任意的数据类型，分为两类：

• 属性，
• 方法

当成员的值为一个函数的时候，被称为方法，如Person的sayName是它的一个对象方法
其余都归为属性

3、访问/设置对象的属性和方法

Js提供两种方法来访问/设置对象成员的值

• 点表示法
• 括号表示法

两种方法都支持链式的调用，
括号表示法只能对属性进行操作，
点表示法可以操作属性和方法，

注意，使用括号表示法可以使用变量，
而点表示法不能使用变量，只能使用对象的成员名字字面量

4、深入对象的属性

4.1、属性的类型

• 数据属性：包含数据，可读取，写入 。包含以下特性：
  • [[Configurable]] 表示该属性能否进行修改，比如删除、修改特性，改为访问器属性。默认为true
  • [[Enumerable]] 是否可枚举，默认为true
  • [[Writable]] 可否修改,默认为true
  • [[Value]] 该属性对应的值
• 访问器属性
  • [[Configurable]]
  • [[Enumerable]]
  • [[Get]] 属性被读取时调用的方法
  • [[Set]] 属性被写入时调用的方法

访问器属性不能直接定义，只能通过Object.defineProperty()来定义

Vue的响应式就是基于Object.defineProperty()实现的

4.2、修改属性的特性

修改特定属性

Object.defineProperty( 对象 ，属性名 ， { 
    特性的描述符: 值,
    [[Enumerable]]:false,
    [[Writable]]`:false
})

一次性修改多个属性

Object.defineProperties( 对象 ， { 
	属性名:{
	    特性的描述符: 值,
	    [[Enumerable]]:false,
	    [[Writable]]`:false
	},
	age:{
	    [[Writable]]`:false
    }
})

4.3、读取属性的特性

Object.getOwnPropertyDescriptor( 对象 , 要读取的属性的特性 )

小结

此处应该有个小结，不过还没想好该写些什么。

水平有限，不准确的地方，欢迎指正。

参考：

• 《JavaScript高级程序设计》
• MDN文档
• 《你不知道的JavaScript》
• 《JavaScript入门》 阮一峰
• 自己画的前端知识体系思维导图 | PressOn