javascript构造函数及原型链梳理

一、JavaScript构造函数和原型链

构造函数和原型链是JavaScript中重要的概念，本文将介绍它们的基本概念和用法。

1. 构造函数

构造函数是一种特殊的函数，用于创建对象。与普通函数不同的是，构造函数必须使用 new 关键字来调用。

1.1. 构造函数基本使用

JavaScript构造函数采用function关键字声明，约定函数名首字母大写，下面是一个构造函数声明示例：

function Person(name) {
  this.name = name;
  this.say = '说话';
};

1.2. 构造函数的继承

在 JavaScript 中，使用构造函数的继承方式有两种：

1. 继承构造函数实例上的方法和属性
2. 继承构造函数原型上的属性和方法

继承构造函数实例上的方法和属性是通过使用 call 或 apply 方法来实现的。这种方式会继承父类实例上的方法和属性，但无法继承父类原型上的方法和属性。

继承构造函数原型上的属性和方法是通过使用 Object.create 方法来实现的。这种方式会继承父类原型上的方法和属性。

// 继承构造函数实例上的方法和属性
function Person(name) {
  // 实例属性
  this.name = name;
  this.say = '说话';
};

// 公有属性
Person.prototype.sec = '男';

function Man(name) {
  this.name = name;
  this.age = 20;

  // 实现继承父类上的方法及属性（让父类执行一次，并将 this 指向修改为子类）
  Person.call(this);
};

Man.prototype.play = function () {
  console.log('写代码');
}

// 继承构造函数原型上的属性和方法
// Man.prototype.__proto__ = Person.prototype;
Man.prototype = Object.create(Person.prototype);

const man = new Man();
console.log(man.say); // 说话
console.log(man.sec); // 男

2. 原型链

每个构造函数都有一个 prototype 属性，我们把它称为原型，它是一个对象，包含构造函数的公有属性和方法。每个实例都有一个 __proto__ 属性，它指向所属类的原型。实例的 constructor 属性指向构造函数。访问一个方法或属性时，如果当前实例上没有此方法的时候，会通过__proto__ 向上级查找，直到找到为止，如果找不到则指向null，这条线路就是原型链。

下面是一些 prototype 及__proto__ 属性的示例：

// 构造函数
function Person(name) {
  this.name = name;
  this.arr = [1, 2, 3];
};
// 向构造函数原型上添加属性
Person.prototype.age = 18

// 生成实例对象
let p1 = new Person('hello');
let p2 = new Person('world');
console.log(p1.arr === p2.arr); // true
console.log(p1.age === p2.age); // false 指向不同的引用地址，因此不相等

// 每个实例都有一个__proto__指向所属类的原型
console.log(p1.__proto__ === Person.prototype); // true

// 每个实例的constrctor属性指向构造函数
console.log(p1.constructor === Person); // true

// 每个实例的__proto__指向构造函数所属类的原型
console.log(Person.__proto__ === Function.prototype); // true

// 一级一级向上查找，形成原型链
console.log(p1.__proto__.__proto__ === Object.prototype); // true

// 一级一级向上查找，形成原型链, 最终指向null
console.log(p1.__proto__.__proto__.__proto__); // null

结合下面的图片，理解原型及原型链：

总结

构造函数和原型链是 JavaScript 中的重要概念，它们可以用于创建对象和实现继承功能。掌握构造函数和原型链的基本概念和用法，有助于提高 JavaScript 编程技能。下次再见。