JavaScript 测试 Prototype 学习笔记

什么是 Prototype？

在 JavaScript 中，每个对象都有一个内部属性 [[Prototype]]（也称为 __proto__），它指向该对象的原型。原型本身也是一个对象，同时也拥有自己的原型，形成了原型链。

我们可以通过 Object.getPrototypeOf(obj) 或者 obj.__proto__ 来访问一个对象的原型。如果原型链中最后一个原型的 [[Prototype]] 属性值为 null，则说明该对象的原型链已到达顶层。

如何测试 Prototype？

1. 使用 instanceof 运算符

我们可以使用 instanceof 运算符来判断一个对象是否是某个构造函数的实例，这也涉及到了原型链的概念。

以下是一个实例：

javascriptCopy Code
function Person(name) {
  this.name = name;
}

const person = new Person('Tom');

console.log(person instanceof Person); // true
console.log(person instanceof Object); // true

在上面的例子中，我们创建了一个 Person 构造函数，并且通过 new 关键字创建了一个 person 对象。然后，我们使用 instanceof 运算符分别判断 person 对象是否是 Person 构造函数的实例以及是否是 Object 的实例。由于 person 原型链上存在 Person 构造函数和 Object 构造函数，所以两个判断都返回了 true。

2. 使用 Object.getPrototypeOf() 方法

我们还可以使用 Object.getPrototypeOf() 方法来获取一个对象的原型。以下是一个实例：

javascriptCopy Code
function Person(name) {
  this.name = name;
}

const person = new Person('Tom');

console.log(Object.getPrototypeOf(person) === Person.prototype); // true
console.log(Object.getPrototypeOf(Person.prototype) === Object.prototype); // true

在上面的例子中，我们同样创建了一个 Person 构造函数以及一个 person 对象。然后，我们分别使用 Object.getPrototypeOf() 方法获取了 person 对象和 Person.prototype 对象的原型，并判断它们是否分别指向了 Person.prototype 和 Object.prototype。

3. 使用 hasOwnProperty() 方法

我们可以使用 hasOwnProperty() 方法来判断一个对象自身是否有某个属性。这是因为，对象本身拥有的属性是保存在该对象上的，而非从原型链上继承下来的。

以下是一个实例：

javascriptCopy Code
function Person(name) {
  this.name = name;
}

Person.prototype.sayHello = function() {
  console.log('Hello');
};

const person = new Person('Tom');

console.log(person.hasOwnProperty('name')); // true
console.log(person.hasOwnProperty('sayHello')); // false

在上面的例子中，我们创建了一个 Person 构造函数，并在其原型上添加了一个 sayHello 方法。然后，我们创建了一个 person 对象，并使用 hasOwnProperty() 方法判断了它自身是否拥有 name 和 sayHello 两个属性。由于 name 是 person 对象本身拥有的属性，所以返回 true；而 sayHello 是通过原型链继承下来的属性，所以返回 false。

结论

在 JavaScript 中，原型是非常重要的概念之一。我们可以通过多种方式来测试原型链，例如使用 instanceof 运算符、Object.getPrototypeOf() 方法以及 hasOwnProperty() 方法。熟练掌握原型相关的知识，对我们深入理解 JavaScript 函数和对象模型是非常有帮助的。