TypeScript原型链踩过的坑

2023-09-30 19:40:07

前言

JavaScript中，函数可以拥有属性，也可以给函数附加属性。每个函数都有一个特性的属性叫做原型（prototype）。在本文中，我们将深入探讨JavaScript中的原型和原型链，通过一些容易理解的示例，帮助您更轻松地掌握JavaScript原型及原型链相关知识。

什么是原型？

原型，是JavaScript中独一无二的概念，它允许我们在创建新对象时，复用已经定义的属性和方法，从而避免了重复的代码。也就是说，我们可以在创建新对象时，直接继承另一个对象的原型，这样就可以访问并使用该原型的属性和方法。

原型也是一种机制，通过它我们可以给所有函数添加属性和方法。通过使用原型，我们可以为所有函数创建一个公共的接口，从而使代码更容易维护。

什么是原型链？

原型链是一种链接，它将对象与它们的原型连接起来。通过原型链，对象可以访问其原型的属性和方法。原型链是从对象开始，一直向上延伸到Object对象为止，也就是说，Object对象是所有对象的根原型。

原型链可以让我们访问和使用继承的属性和方法。当我们调用对象的方法时，如果该方法不存在于该对象中，那么就会沿着原型链向上查找，直到找到该方法或到达Object对象。

实例演示

以下示例演示了原型和原型链的概念：

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

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

const person1 = new Person('John', 30);
person1.greet(); // Hello, my name is John and I am 30 years old.

//访问原型链上的属性和方法
console.log(person1.hasOwnProperty('name')); // true
console.log(person1.hasOwnProperty('greet')); // false

//原型链继承
const person2 = new Person('Jane', 25);
person2.greet(); // Hello, my name is Jane and I am 25 years old.