JavaScript笔记:原型对象

获取原型对象
Object.setPrototypeOf

在 JavaScript 中用于设置一个对象的原型(即内部的 [[Prototype]] 属性)。这个方法通常用于改变对象的继承链,或者将一个对象的原型设置为 null 来防止进一步的原型继承。

下面是一个使用 Object.setPrototypeOf 方法的例子:

// 构造函数
function Animal(name) {
  this.name = name;
}

// 添加一个方法到 Animal 原型上
Animal.prototype.speak = function() {
  console.log(this.name + ' makes a sound.');
};

// 使用构造函数创建一个实例
const animal = new Animal('Generic animal');

// 创建另一个构造函数
function Vehicle(make, model) {
  this.make = make;
  this.model = model;
}

// 添加一个方法到 Vehicle 原型上
Vehicle.prototype.describe = function() {
  console.log('This is a ' + this.make + ' ' + this.model + ' vehicle.');
};

// 使用构造函数创建一个 Vehicle 实例
const car = new Vehicle('Toyota', 'Corolla');

// 现在,我们将 car 实例的原型设置为 animal 实例
// 这意味着 car 将继承 animal 实例的所有属性和方法
Object.setPrototypeOf(car, animal);

// 验证原型链是否已改变
console.log(Object.getPrototypeOf(car) === animal); // 输出: true

// 由于 car 的原型现在是 animal,它继承了 speak 方法
car.speak(); // 输出: Generic animal makes a sound.

// 为了演示,我们也可以将 car 的原型设置为 null,这样它就不再有原型
Object.setPrototypeOf(car, null);

// 再次验证原型链
console.log(Object.getPrototypeOf(car) === null); // 输出: true

// 现在 car 没有原型,因此不能访问 speak 方法
car.speak(); // 输出: TypeError: car.speak is not a function

在这个例子中,我们首先定义了两个构造函数 AnimalVehicle,并分别为它们的原型添加了方法 speakdescribe。然后,我们分别使用这两个构造函数创建了 animalcar 实例。

接下来,我们使用 Object.setPrototypeOf 方法将 car 实例的原型设置为 animal 实例。这意味着 car 现在继承了 animal 实例的所有属性和方法。我们通过调用 car.speak() 来验证这一点,它输出了 animal 实例的名字和声音。

最后,我们再次使用 Object.setPrototypeOf 方法将 car 的原型设置为 null,这意味着 car 将不再继承任何属性和方法。当我们尝试调用 car.speak() 时,由于 car 没有 speak 方法,因此抛出了一个类型错误。

这个例子展示了 Object.setPrototypeOf 方法如何用于修改对象的原型链,以及如何通过改变原型来控制对象继承的属性和方法

设置原型对象
Object.getOwnPropertyDescriptor

Object.getOwnPropertyDescriptor 方法在 JavaScript 中用于获取指定对象上给定属性的描述信息。描述信息是一个包含属性的各种元数据的对象,例如属性是否可枚举、是否可写、默认值以及 getter 和 setter 函数等。

这个方法对于深入了解对象属性的具体行为和特征非常有用,尤其是在调试或者需要精确控制对象属性时。

下面是一个使用 Object.getOwnPropertyDescriptor 方法的例子:

// 创建一个对象,并定义一个属性
const myObject = {
  myProperty: 'Hello, World!'
};

// 定义一个 getter 和一个 setter 函数
const getter = function () {
  return this.myProperty + ' (accessed via getter)';
};

const setter = function (newValue) {
  this.myProperty = newValue + ' (updated via setter)';
};

// 使用 Object.defineProperty 为对象添加一个带有 getter 和 setter 的属性
Object.defineProperty(myObject, 'accessorProperty', {
  get: getter,
  set: setter,
  enumerable: true,
  configurable: true
});

// 使用 Object.getOwnPropertyDescriptor 获取属性描述信息
const descriptor = Object.getOwnPropertyDescriptor(myObject, 'accessorProperty');

// 打印属性描述信息
console.log(descriptor);
// 输出:
// {
//   value: 'Hello, World! (accessed via getter)',
//   writable: false,
//   enumerable: true,
//   configurable: true,
//   get: [Function: getter],
//   set: [Function: setter]
// }

// 直接访问属性值
console.log(myObject.accessorProperty); // 输出: 'Hello, World! (accessed via getter)'

// 修改属性值
myObject.accessorProperty = 'Goodbye, World!';
console.log(myObject.accessorProperty); // 输出: 'Goodbye, World! (updated via setter)'

在这个例子中,我们首先创建了一个对象 myObject 并给它定义了一个普通的属性 myProperty。接着,我们定义了一个 getter 函数和一个 setter 函数,并将它们与 Object.defineProperty 方法一起使用,为 myObject 添加了一个带有访问器(accessor)的属性 accessorProperty

使用 Object.getOwnPropertyDescriptor 方法,我们获取了 accessorProperty 的描述信息,并打印出来。描述信息对象包含了属性的值、是否可写、是否可枚举、是否可配置以及 getter 和 setter 函数的引用。

然后,我们通过直接访问 accessorProperty 来触发 getter 函数,并打印出它的返回值。之后,我们尝试修改 accessorProperty 的值,这将触发 setter 函数,并将修改后的值打印出来。

通过这个例子,我们可以看到 Object.getOwnPropertyDescriptor 方法如何帮助我们获取和理解对象属性的详细信息。

获取当前所有对象属性

Object.getOwnPropertyNames

获取特殊属性

Object.getOwnPropertySymbols

获取可枚举属性

Odject.keys

冻结属性

Object.preventExtensions

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值