JS篇之原型链

1 函数的三种角色

• 函数：作为普通函数
• 类：作为构造函数Function
• 普通对象：键值对

例题：巩固一下知识点

function Student() {
    let name = '小明';
    this.age = 23;
}
Student.prototype.class = function () {
    console.log('班级');
}
Student.classmate = function() {
    console.log('小红');
}

let stu1 = new Student(); // new 执行，Student作为类角色，创建stu1实例
console.log(stu1.age); // 23
console.log(stu1.name); // undefined  => Student中的name为Student类中执行上下文的私有变量

stu1.class() // 班级 => stu1.__proto__.class() 基于原型链向上查找

Student.classmate() // 小红 => Student作为对象角色

stu1.classmate() // stu1.classmate is not a function  => classmate是Student作为对象角色的方法，和实例并无关系

2 prototype原型

• 每个函数（类）都有一个prototype属性，prototype属性值可当成是一个对象处理，该对象中存储了当前类供实例调取使用的公共属性和方法

• 每个实例都会从原型上继承属性

  

3 constructor

• 类的原型上存在属性constructor，指向当前类(构造函数)本身

4 __proto__原型链

• 除了null，其余对象（实例）都有__proto__属性，这个属性指向当前实例所属类的原型、
  • eg：[].__proto__ === Array.prototype // true
• Object类是js内置的基类，Object.prototype没有原型，所有原型链查找的终点就是Object.prototype
  • Object.prototype.__proto__ === null // true

5 原型链查找机制

操作某个属性或方法的时候，如果当前执行上下文中没有该属性(方法)，则基于__proto__向上查原型上的属性(方法)；

• 若找到，就停止向上查找
• 若没有，则继续基于原型上的__proto__查找，一直找到Obejct.prototype为止。

6 万物皆对象

• 函数也是对象，所以，Student函数也拥有__proto__属性，指向所属类（Function）的prototype原型
• 所有的函数都是js内置类Function的实例

7 综合

• Function instanceof Function; // true
• Function.prototype === Function.__proto__;  // true
  • Function也是函数类型，所以是Function类的实例
• Object.prototype === Object.__proto__.__proto__; // true
  • 基于原型链，Object.__proto__.__proto__=> Function.prototype.__proto__ =>Obecjt.prototype
• Object instanceof Function; // true
  • Object是函数类型，属于Function基类的一个实例
• stu1.constructor === Student; // true
  • stu1 实例上并没有constructor属性，故而基于__proto__向上查找，Student.prototype上存在constructor，且指向Student

参考链接： js深入从原型到原型链、MDN

若有误处，欢迎大佬指出~