JavaScript进阶讲解七—＞面向对象一

一、JavaScript的面向对象

JavaScript是支持多种编程范式的，包括函数式编程和面向对象编程：

1. JavaScript中的对象被设计成一组属性的无序集合，像是一个哈希表，由key和value组成。
2. key是一个标识符名称，value可以是任意类型，也可以是其他对象或者函数类型。
3. 如果值是一个函数，那么我们可以称之为是对象的方法。

二、创建对象

1. 方式一，通过new的方式

var obj = new Object()
obj.name = 'xt'
obj.foo = function() {
    console.log(this.name);
}

2. 方式二，通过字面量的方式（这也是我们目前在js中使用最多的方式）

var obj = {
    name: 'xt',
    foo: function() {
        console.log(this.name);
    }
}

3. 方式三，工厂模式（一种常见的设计模式）

function createObj(name, age) {
    var obj = new Object()
    obj.name = name
    obj.age = age

    obj.getName = function() {
        console.log(this.name);
    }

    return obj
}

var obj1 = createObj('xt', 18)
var obj2 = createObj('tx', 20)
console.log(obj1);
console.log(obj2);

3. 方式四，构造函数

function CreateObj(name, age) {
    this.name = name
    this.age = age

    this.getName = function() {
        console.log(this.name);
    }
}

var obj1 = new CreateObj('xt', 18)
var obj2 = new CreateObj('tx', 20)
console.log(obj1);
console.log(obj2);

三、对象属性的操作

1. 基本操作

var obj = {
    name: 'xt',
    age: 18,
    foo: function() {
        console.log(this.name);
    }
}

// // 1. 获取
// console.log(obj.name);

// // 2. 赋值
// obj.name = 'tx'

// // 3. 删除
// delete obj.name

// 遍历
for (const key in obj) {
    console.log(key);
}

2. 精准操作
   2.1 如果我们想要对一个属性进行比较精准的操作控制，那么我们就可以使用属性描述符。
   2.1.1 通过属性描述符可以精准的添加或修改对象的属性。
   2.1.2 属性描述符需要使用 Object.defineProperty 来对属性进行添加或者修改。

3. Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
   3.1 Object.defineProperty(obj, prop, descriptor)
   3.1.1 obj要定义属性的对象
   3.1.2 prop要定义或修改的属性的名称或 Symbol
   3.1.3 descriptor要定义或修改的属性描述符
   3.1.4 返回值: 被传递给函数的对象。（也会修改原对象）

var obj = {
    name: 'xt',
    foo: function() {
        console.log(this.name);
    }
}

Object.defineProperty(obj, 'age', {
    value: 18
})
console.log(obj); // {name: 'xt', age: 18, foo: ƒ}

4. 属性描述符
   4.1 数据属性描述符：
   4.1.1 Configurable：表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符。
   4.1.2 Enumerable：表示属性是否可以通过for-in或者Object.keys()返回该属性。
   4.1.3 Writable：表示是否可以修改属性的值
   4.14 value：属性的value值，读取属性时会返回该值，修改属性时，会对其进行修改。
   4.2 存取属性描述符：
   4.1.1 Configurable：表示属性是否可以通过delete删除属性，是否可以修改它的特性，或者是否可以将它修改为存取属性描述符。
   4.1.2 Enumerable：表示属性是否可以通过for-in或者Object.keys()返回该属性。
   4.1.3 get：获取属性时会执行的函数。
   4.1.3 set：设置属性时会执行的函数。

这里另外提一下，其实vue2的响应式原理就是通过劫持Object.defineProperty的get与set实现的

5. 同时定义多个属性Object.defineProperties

var obj = {
    _name: 'xt',
}

Object.defineProperties(obj, {
    age: {
        writable: true,
        value: 'why'
    },
    name: {
        get: function() {
            return this._name
        }
    }
})
console.log(obj);

注意这里是Object.defineProperties而不是Object.defineProperty