原型、原型链学习笔记

为什么需要原型原型链？

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.eat = function() {
    console.log(age + "岁的" + name + "在吃饭。");
  }
}

let p1 = new Person("xiaohong", 24);
let p2 = new Person("xiaohong", 24);

console.log(p1.eat === p2.eat); // false

可以看到，对于同一个函数，我们通过 new 生成出来的实例，都会开出新的一块堆区，所以上面代码中 person 1 和 person 2 的吃饭是不同的。

拥有属于自己的东西（例如房子、汽车），这样很好。但它也有不好，毕竟总共就那么点地儿（内存），你不停地建房子，到最后是不是没有空地了？（内存不足）

所以，咱要想个法子，建个类似于共享库的对象（例如把楼房建高），这样就可以在需要的时候，调用一个类似共享库的对象（社区），让实例能够沿着某个线索去找到自己归处。

而这个线索，在前端中就是原型链 prototype。

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

// 通过构造函数的 Person 的 prototype 属性找到 Person 的原型对象
Person.prototype.eat = function() {
  console.log("吃饭");
}

let p1 = new Person("jsliang", 24);
let p2 = new Person("梁峻荣", 24);

console.log(p1.eat === p2.eat); // true

这样我们就通过分享的形式，让这两个实例对象指向相同的位置了。

原型

首先清楚两个概念：

• 引用类型，都具有对象特性，即可自由扩展属性。(引用类型：Object、Array、Function、Date、RegExp)
• 每个函数function都有一个显示原型prototype，每个实例对象都有一个隐式原型__proto__

function Fn() { // 内部语句：this.prototype = {}
        
}
// 1、每个函数function都有一个prototype，即显示原型（属性）
console.log(Fn.prototype);
// 2、每个实例对象都有一个__proto__,可称为隐式原型（属性）
var fn = new Fn(); // 内部语句： this.__proto__ = Fn.prototype
console.log(fn.__proto__);

两个准则

js之父在设计js原型原型链的时候遵循以下两个准则：

**准则一：**原型对象（即Fn.prototype）的constructor指向构造函数本身

**准则二：**实例对象（即 fn ）的__proto__指向其构造函数的显示原型

function Fn() {}
var fn = new Fn();
// 原型对象的 constructor 指向构造函数本身
console.log(Fn.prototype.constructor === Fn); // true
// 对象的隐式原型的值为其对应构造函数的显示原型的值
console.log(Fn.prototype === fn.__proto__); // true

理解Function与Object特例

• 每个函数都是Function的实例，所以每个函数既有显示原型又有隐式原型，所有函数的隐式原型指向**Function.prototype**;构造器Function的构造器是它自身

// function Foo() {} 相当于 var Foo = new Function()

// Function = new Function() => Function.__proto__ = Function.prototype

// Object 作为构造函数时，其 __proto__ 内部属性值指向 Function.prototype
// Object.__proto__ = Function.prototype

// Function.constructor=== Function;//true

• Object 构造函数创建一个对象包装器。JavaScript中的所有对象都来自 Objec，所有对象都是Object的实例；所有对象从Object.prototype继承方法和属性，尽管它们可能被覆盖。

// Fn的原型对象(Fn.prototype)也来自Object，故Fn.prototype.__proto__ = Object.prototype
function Fn() {}

原型链：

• 读取某个对象的属性时，会自动到原型链中查找。

• • 现在自身属性中查找，找到返回
  • 找不到则继续沿着__proto__这条链向上查找，找到返回
  • 如果最终没找到，返回undefined

• 设置对象的属性值时，不会查找原型链，如果当前对象中没有此属性，直接添加此属性并设置其值，

• 方法一般定义在原型中，属性一般通过构造函数定义在对象本身上

原型链就是一个过程，原型是原型链这个过程中的一个单位，贯穿整个原型链

经典面试题

// 测试题1
function A() {

}
A.prototype.n = 1;

var b = new A();
A.prototype = {
    n: 2,
    m: 3
}

var c = new A();
console.log(b.n, b.m, c.n, c.m); 




// 1 undefined 2 3
// 测试题2
var F = function() {

};
Object.prototype.a = function() {
    console.log('a()');
};
Function.prototype.b = function() {
    console.log('b()');
};
var f = new F();
f.a(); 
f.b(); 
F.a(); 
F.b();






f.a(); // a()
f.b(); // 报错：Uncaught TypeError: f.b is not a function
F.a(); // a()
F.b(); // b()

原型、原型链的意义与适用场景

原型对象的作用，是用来存放实例中共有的那部份属性、方法，可以大大减少内存消耗。