前端【JS】，深入理解原型和原型链

在JavaScript中，每个对象都可以有一个特殊的内部属性，称为原型。原型对象本身也是一个普通对象，它也有自己的原型，直到原型链终止于null。这条链就是所谓的原型链。通过原型，对象可以继承其他对象的属性和方法。

以下是一个示例，演示了如何使用原型和原型链：

// 定义一个构造函数
function Person(name) {
    this.name = name;
}
 
// 在原型上定义一个方法
Person.prototype.greet = function() {
    return 'Hello, my name is ' + this.name;
};
 
// 创建一个Person的实例
var person1 = new Person('Alice');
 
// 使用实例调用原型方法
console.log(person1.greet()); // 输出: Hello, my name is Alice
 
// 继承
function Employee(name, position) {
    Person.call(this, name); // 继承Person的属性
    this.position = position;
}
 
// 继承Person的原型
Employee.prototype = Object.create(Person.prototype);
 
// 在新的原型上添加新的方法
Employee.prototype.introduce = function() {
    return 'I am ' + this.name + ', a ' + this.position + '.';
};
 
// 创建一个Employee的实例
var employee1 = new Employee('Bob', 'Engineer');
 
// 使用实例调用原型方法
console.log(employee1.greet()); // 输出: Hello, my name is Bob
console.log(employee1.introduce()); // 输出: I am Bob, a Engineer.
 
// 输出原型链的结构
console.log(Object.getPrototypeOf(employee1)); // 输出: Person { greet: [Function] }
console.log(Object.getPrototypeOf(employee1).constructor.name); // 输出: Person
console.log(Object.getPrototypeOf(Object.getPrototypeOf(employee1))); // 输出: Object { ... }
console.log(Object.getPrototypeOf(Object.getPrototypeOf(employee1)) === null); // 输出: true，表示原型链顶端是null

在这个例子中，我们定义了一个Person构造函数和一个Employee构造函数。Employee通过Object.create()方法继承了Person的原型，并添加了自己的方法。这样，Employee的实例既拥有自己的属性，也可以通过原型链访问Person的属性和方法。