JavaScript的面向对象

Posted 2021-10-12 还是不会呀

javascript的面向对象（一）

• • 对象的创建方式
  • 对属性操作的控制
  • • 属性描述符分类
    • • 数据属性描述符
      • 存取属性描述符
    • 属性描述符补充
  • 其他方法补充
  • • 同时配置多个属性描述符
    • 获取指定属性的属性描述符
    • 获取整个对象多有属性的属性描述符
    • 禁止对象继续添加属性
    • 将整个对象属性的配置成不可配置
    • 将整个对象属性的配置成不可修改

对象的创建方式

// 1、 对象字面量的创建方式
const info1 = {};
info1.name = "fzb";
console.log(info1); // { name: 'fzb' }

// 2、 Object类的创建方式
const info2 = new Object();
info2.age = 21;
console.log(info2); // { age: 21 }

对属性操作的控制

JavaScript存在属性描述符，可以对对象的属性进行精确的添加和修改配置。属性描述符需要使用 Object.defineProperty来进行控制。

Object.defineProperty(obj, prop, descriptor)

参数

• obj：要定义属性的对象。
• prop：要定义或修改的属性的名称或 Symbol 。
• descriptor：要定义或修改的属性描述符。

属性描述符分类

两类：描述符内配置是可以一起出现的，有些是不可以一起出现的

	configurable	enumerable	writable	value	get	set
数据属性描述符	可以	可以	可以	可以	不可以	不可以
存取属性描述符	可以	可以	不可以	不可以	可以	可以

数据属性描述符

• configurable：属性是否可以删除，是否可以修改它的特性。
• enumerable：属性是否可以枚举。
• writable：是否可以修改属性值。
• value：设置属性的值。

const info = {
  age: 21,
  address: "长沙",
};

/**
 * 添加 name 属性
 *    此时name属性是不可以被delete关键字删除的，
 *    同时再次使用Object.defineProperty对name进行配置，是无效的
 * 在枚举是打印整个info对象时，是无法显示name属性的
 * 在info.name进行赋值时，是无法赋值的
 **/
Object.defineProperty(info, "name", {
  configurable: false,
  enumerable: false,
  writable: false,
  value: "fzb",
});

console.log(info); // { name: 'fzb', address: '长沙' }

存取属性描述符

存取属性描述符主要用来：1、为私有属性提供访问修改的入口。2、捕获获取属性值和属性赋值的过程。

• configurable：属性是否可以删除，是否可以修改它的特性。
• enumerable：属性是否可以枚举。
• get：在获取对应属性值时进行的回调。
• set：在对应属性值赋值时进行的回调。

var info = {
  name: "fzb",
  _age: 21,
};

function foo() {
  console.log("进行对应属性的取值或修改");
}

Object.defineProperty(info, "age", {
  configurable: true,
  enumerable: false,
  set(newValue) {
    foo(); // 进行对应属性的取值或修改
    this._age = newValue;
  },
  get() {
    foo();
    return this._age;
  },
});
info.age = 18;
console.log(info); // { name: 'fzb', _age: 18 }

上述例子也可以这样写,当上面 enumerable: true时，实际打印是一样的

var info = {
  name: "fzb",
  _age: 21,
  set age(newValue) {
    this._age = newValue;
  },
  get age() {
    return this._age;
  },
};
console.log(info); // { name: 'fzb', _age: 21, age: [Getter/Setter] }

属性描述符补充

默认属性描述符的值

情况一：

var info = {
  name: "fzb",
};
// 以这种方式创建的对象，默认其中的属性全部为true
// 上述例子等价于
Object.defineProperty(info, "name", {
  configurable: true,
  enumerable: true,
  writable: true,
  value: "fzb",
});

情况二：

var info = {};

Object.defineProperty(info, "age", {
  value: 21,
});
// 通过属性描述符配置到一半，其他配置不配置了，那么等价于
// 没配置的属性设置成 false
// 上述例子等价于
Object.defineProperty(info, "age", {
  configurable: false,
  enumerable: false,
  writable: false,
  value: 21,
});

其他方法补充

同时配置多个属性描述符

方法：Object.defineProperties

var info = { _age: 18 };

Object.defineProperties(info, {
  name: {
    configurable: true,
    enumerable: true,
    writable: true,
    value: "fzb",
  },
  age: {
    configurable: false,
    enumerable: true,
    set(newValue) {
      this._age = newValue;
    },
    get() {
      return this._age;
    },
  },
});

console.log(info); // { _age: 18, name: 'fzb', age: [Getter/Setter] }

获取指定属性的属性描述符

方法：Object.getOwnPropertyDescriptor

var info = { age: 18 };

console.log(Object.getOwnPropertyDescriptor(info, "age"));
// { value: 18, writable: true, enumerable: true, configurable: true }

获取整个对象多有属性的属性描述符

方法：Object.getOwnPropertyDescriptors

var info = { age: 18, name: "fzb" };
console.log(Object.getOwnPropertyDescriptors(info));
// {
//   age: { value: 18, writable: true, enumerable: true, configurable: true },
//   name: {
//     value: 'fzb',
//     writable: true,
//     enumerable: true,
//     configurable: true
//   }
// }

禁止对象继续添加属性

方法：Object.preventExtensions

var info = {
  name: "fzb",
};

Object.preventExtensions(info);

info.age = 21;
console.log(info); // { name: 'fzb' }

将整个对象属性的配置成不可配置

方法： Object.seal

var info = {
  name: "fzb",
};
console.log(Object.getOwnPropertyDescriptor(info, "name"));
// { value: 'fzb', writable: true, enumerable: true, configurable: true }
Object.seal(info);
console.log(Object.getOwnPropertyDescriptor(info, "name"));
// { value: 'fzb', writable: true, enumerable: true, configurable: false }

将整个对象属性的配置成不可修改

不可修改（不可再次赋值，不可配置和删除）：writable: false，configurable: false

方法：Object.freeze

var info = {
  name: "fzb",
};
console.log(Object.getOwnPropertyDescriptor(info, "name"));
// { value: 'fzb', writable: true, enumerable: true, configurable: true }
Object.freeze(info);
console.log(Object.getOwnPropertyDescriptor(info, "name"));
// { value: 'fzb', writable: false, enumerable: true, configurable: false }