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
  • 注意，这是大写的，不是原始类型

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

对象基础

一、建立对象

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

• 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)
	}
	
}
复制代码

二、对象成员

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

• 名字
• 值

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

• 属性，
• 方法

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

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

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

• 点表示法
• 括号表示法

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

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

四、深刻对象的属性

4.一、属性的类型

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

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

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

4.二、修改属性的特性

修改特定属性

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

一次性修改多个属性

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

4.三、读取属性的特性

Object.getOwnPropertyDescriptor( 对象 , 要读取的属性的特性 )
复制代码

小结

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

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

参考：

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