《重学前端》学习笔记Day101

面型对象

JavaScript的面向对象更类似于基于对象的语言。
面对象对象对于自然事物定义：

1. 一个可以触摸或者可以看见的东西；
2. 人的智力可以理解的东西；
3. 可以指导思考或行动（进行想象或施加动作）的东西。
   --Grandy Booch《面向对象分析与设计》

JavaScript对象的特征

对象具有唯一标识性：即使完全相同的两个对象，也并非同一个对象。
对象有状态：对象具有状态，同一对象可能处于不同状态之下。
对象具有行为：即对象的状态，可能因为它的行为产生变迁。
--Grandy Booch《面向对象分析与设计》

JavaScript中定义两个对象具有唯一标识的内存地址。
关于第二个和第三个特征“状态和行为”，在JavaScript中可以统称为属性。

JavaScript对象的两类属性

第一类数据属性
value：就是属性的值。
writable：决定属性能否被赋值。
enumerable：决定for in能否枚举该属性。
configurable：决定该属性能否被删除或者改变特征值。
第二类访问器(getter/setter)属性
getter：函数或undefined，在取属性值时被调用。
setter：函数或undefined，在设置属性值时被调用。
enumerable：决定for in能否枚举该属性。
configurable：决定该属性能否被删除或者改变特征值。

我们定义属性的代码会产生数据属性，可以使用内置函数getOwnPropertyDescriptor来查看：

var o = { a: 1 };
o.b = 2;
//a和b皆为数据属性
Object.getOwnPropertyDescriptor(o,"a") // {value: 1, writable: true, enumerable: true, configurable: true})
Object.getOwnPropertyDescriptor(o,"b") // {value: 2, writable: true, enumerable: true, configurable: true})

如果我们要想改变属性的特征，或者定义访问器属性，我们可以使用Object.defineProperty

在创建对象时，也可以使用 get 和 set 关键字来创建访问器属性：

var o = { get a() { return 1 } };
console.log(o.a); // 1

访问器属性跟数据属性不同，每次访问属性都会执行getter或者setter函数。这里我们的getter函数返回了1，所以o.a每次都得到1。

JavaScript的对象系统设计虽然特别，但是JavaScript提供完全运行时的对象系统，这使得它可以模仿多数面向对象编程范式（基于类和基于原型），所以它也是正统的面向对象语言。

原型

基于类”的编程提倡使用一个关注分类和类之间关系开发模型。先有一个类，再去实例化一个对象，类与类之间有可能形成继承组合等关系。
基于原型”的编程看起来更为提倡程序员去关注一系列对象实例的行为，而后才去关心如何将这些对象，划分到最近的使用方式相似的原型对象，而不是将它们分成类。

JavaScript的原型

在JavaScript的实现思路，并不是真正的复制原型对象，而是使得新对象持有一个原型的引用。
JavaScript的原型系统可以简单的概括为两点：
如果所有对象都有私有字段[[prototype]]，就是对象的原型；
读一个属性，如果对象本身没有，则会继续访问对象的原型，直到原型为空或者找到为止。

早期版本的类与原型

ES6中的类

ES6引入class关键字，new跟function可以退休了(虽然运行时没有改变)。

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    // Getter
    get area() {
        return this.calcArea();
    }
    // Method
    calcArea() {
        return this.height * this.width;
    }
}

另外，类提供了继承能力。通过extends关键字继承。

此文章为7月Day4学习笔记，内容来源于极客时间《重学前端》，日拱一卒，每天进步一点点💪💪