js 原型链的理解|极客笔记

js 原型链的理解

在 JavaScript 中，每个对象都有一个原型对象，它会定义该对象的属性和方法。原型对象也可以有自己的原型，这样就形成了原型链。原型链是 JavaScript 实现继承的一种重要方式。

1. 原型

在 JavaScript 中，每个函数都有一个 prototype 属性，这个属性是一个指向另一个对象的指针。这个对象就是该函数的原型对象。当我们创建一个函数时，其 prototype 对象会自动获得一个 constructor 属性，该属性指向该函数本身。

示例代码如下：

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

console.log(Person.prototype); // {constructor: ƒ Person()}

在这个示例中，Person 函数的原型对象中有一个 constructor 属性，它指向 Person 函数本身。

2. 原型链

当我们想访问一个对象的属性或方法时，如果该对象本身没有这个属性或方法，那么 JavaScript 就会沿着原型链往上查找，直到找到为止。如果找不到，就会返回 undefined。

示例代码如下：

function Animal(type) {
  this.type = type;
}

Animal.prototype.say = function() {
  console.log("I am a " + this.type);
};

function Dog(name) {
  this.name = name;
}

Dog.prototype = new Animal("dog");

let dog = new Dog("Bobby");
dog.say(); // Output: "I am a dog"

在这个示例中，Dog 对象通过原型链继承了 Animal 对象的 say 方法。

3. 继承

通过原型链，我们可以实现对象之间的继承关系。子对象可以共享父对象的属性和方法，从而减少重复代码的编写。

示例代码如下：

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

Person.prototype.sayHello = function() {
  console.log("Hello, my name is " + this.name);
};

function Student(name, grade) {
  this.grade = grade;
}

Student.prototype = new Person();

let student = new Student("Alice", 10);
student.sayHello(); // Output: "Hello, my name is Alice"

在这个示例中，Student 对象通过原型链继承了 Person 对象的 sayHello 方法。

4. 原型链的终点

原型链的终点是 Object.prototype，它是所有对象的原型。Object.prototype 的 __proto__ 属性为 null，表示它没有原型。

示例代码如下：

let obj = {};
console.log(obj.__proto__); // Output: {}
console.log(obj.__proto__.__proto__); // Output: null

在这个示例中，obj 对象的原型是 Object.prototype，Object.prototype 的原型是 null。

5. 常用方法

5.1 hasOwnProperty()

hasOwnProperty() 方法用于检查对象自身是否拥有指定的属性。

示例代码如下：

let obj = { name: "Alice" };

console.log(obj.hasOwnProperty("name")); // Output: true
console.log(obj.hasOwnProperty("toString")); // Output: false

在这个示例中，obj 对象自身拥有 name 属性，而 toString 属性是继承而来的。

5.2 isPrototypeOf()

isPrototypeOf() 方法用于检查一个对象是否是另一个对象的原型。

示例代码如下：

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

let person = new Person("Alice");

console.log(Person.prototype.isPrototypeOf(person)); // Output: true

在这个示例中，Person.prototype 是 person 的原型。