揭秘JavaScript原型机制：从基础到实战，解锁对象继承与原型链的秘密

JavaScript是一种基于原型的编程语言，其原型机制是其核心特性之一。理解JavaScript的原型机制对于深入掌握JavaScript编程至关重要。本文将从基础概念开始，逐步深入，探讨对象继承与原型链的秘密。

一、JavaScript中的对象

在JavaScript中，一切皆对象。对象是由属性和方法组成的实体。每个对象都有一个原型（prototype），通过原型可以访问其他对象的属性和方法。

1.1 对象的创建

JavaScript提供了多种创建对象的方法，以下是几种常见的方式：

使用字面量语法创建对象：

let person = { name: 'John', age: 30 };

使用Object.create()方法创建对象：

let person = Object.create({name: 'John', age: 30});

1.2 对象的属性

对象的属性分为两种：自有属性和继承属性。

自有属性：直接定义在对象上的属性。
继承属性：从原型链上继承而来的属性。

二、原型与原型链

2.1 原型

原型是对象的一个特殊属性，用于存储所有实例共有的属性和方法。在JavaScript中，每个函数都有一个原型属性，该属性是一个对象。

2.2 原型链

原型链是JavaScript中实现继承的一种机制。当一个对象在查找属性或方法时，如果该对象本身没有找到，则会沿着原型链向上查找，直到找到为止。

2.3 `proto`属性

__proto__属性是JavaScript对象的一个非标准属性，用于访问对象的原型。在ES6中，可以使用Object.getPrototypeOf()方法来获取对象的原型。

let person = { name: 'John' }; console.log(person.__proto__); // {name: 'John'}

三、对象继承

JavaScript中的继承是通过原型链实现的。以下是一些常见的继承方式：

3.1 构造函数继承

function Parent() { this.name = 'Parent'; } function Child() { Parent.call(this); this.age = 30; } let child = new Child(); console.log(child.name); // Parent console.log(child.age); // 30

3.2 原型链继承

function Parent() { this.name = 'Parent'; } function Child() {} Child.prototype = new Parent(); let child = new Child(); console.log(child.name); // Parent

3.3 组合继承

function Parent() { this.name = 'Parent'; } function Child() { Parent.call(this); } Child.prototype = new Parent(); let child = new Child(); console.log(child.name); // Parent

3.4 原型式继承

function createObject(obj) { function F() {} F.prototype = obj; return new F(); } let parent = {name: 'Parent'}; let child = createObject(parent); console.log(child.name); // Parent

3.5 寄生式继承

function createObject(obj) { let clone = Object.create(obj); clone.sayName = function() { console.log('Hello'); }; return clone; } let parent = {name: 'Parent'}; let child = createObject(parent); child.sayName(); // Hello

3.6 寄生组合式继承

function createObject(obj) { function F() {} F.prototype = obj; return new F(); } function inheritPrototype(subType, superType) { let prototype = createObject(superType.prototype); prototype.constructor = subType; subType.prototype = prototype; } function Parent() { this.name = 'Parent'; } function Child() { Parent.call(this); } inheritPrototype(Child, Parent); let child = new Child(); console.log(child.name); // Parent