JavaScript--原型与原型链

在JavaScript中，原型（prototype）是一个非常重要且独特的概念，它在对象创建和继承方面发挥着关键作用。理解原型及其相关的机制有助于更好地理解JavaScript的对象模型，以及如何设计和使用对象和继承。

JavaScript--原型与原型链

所有函数都有一个特别的属性:
- prototype : 显式原型属性
- 每个函数都有一个 prototype 属性，这个属性是一个对象，它包含了可以被该函数创建的所有实例共享的属性和方法。当我们通过构造函数（使用 new 关键字）创建一个新对象时，该对象内部会链接到构造函数的 prototype 对象上。
- 主要用来实现基于原型的继承，让多个对象实例能够共享同一组属性和方法，从而节省内存。

javascript 复制代码

// 每个函数都有一个prototype属性, 它默认指向一个对象(即称为: 原型对象)
function fn() {

}
console.log(fn.prototype, typeof fn.prototype)//object 'object'

// 原型对象中有一个属性constructor, 它指向函数对象
console.log(fn.prototype.constructor===fn)//true

// 2. 给原型对象添加属性(一般都是方法)
function F() {

}
F.prototype.age = 12 //添加属性
F.prototype.setAge = function (age) { // 添加方法
  this.age = age
}
// 创建函数的实例对象
var f = new F()
console.log(f.age)//12
f.setAge(23)
console.log(f.age)//23

所有实例对象 都有一个特别的属性:
- __ proto __ : 隐式原型属性
- 每个JavaScript对象都拥有一个内部属性 [[Prototype]]，通常可以通过 __ proto __ 访问（虽然这不是标准属性，但在大多数浏览器中是可用的）。从ES5开始，推荐使用 Object.getPrototypeOf 来获取对象的原型。
- 当试图访问对象的一个属性时，如果该对象本身没有此属性或方法，那么引擎就会尝试在其 [[Prototype]] 中查找。这构成了所谓的"原型链"。

javascript 复制代码

//对象的隐式原型的值为其对应构造函数的显式原型的值 
function Fn() {

}
var fn = new Fn()
console.log(Fn.prototype, fn.__proto__)//object  object
console.log(Fn.prototype===fn.__proto__)//true

显式原型与隐式原型的关系
- 函数的prototype: 定义函数时被自动赋值, 值默认为{}, 即用为原型对象
- 实例对象的__ proto__: 在创建实例对象时被自动添加, 并赋值为构造函数的prototype值
- 原型对象即为当前实例对象的父对象

原型链（隐式原型链）

原型链是由一些对象通过其内部的 [[Prototype]] 属性相互关联而形成的一条链路。这条链路用于解析属性：当读取对象的某个属性时，如果该对象自身没有此属性，则会沿着这条链向上寻找，直到找到该属性或到达链的末端。
每当创建一个新的函数，JS引擎会为这个函数添加一个 prototype 属性，指向一个对象。当用这个函数作为构造函数来创建新的对象实例时，这些实例的 [[Prototype]] 将自动指向构造函数的 prototype。这样就形成了一个链，允许属性和方法的继承。所有的实例对象都有__ proto__属性, 它指向的就是原型对象

函数的显示原型指向的对象默认是空object实例对象（但object除外）
- console.log(Object.prototype instanceof Object)//false
所有函数都是Function的实例(包含Function)
- console.log(Function.proto===Function.prototype)//false
Object的原型对象是原型链的尽头
instanceof
- 表达式: A instanceof B
- 如果B函数的显式原型对象在A对象的原型链上, 返回true, 否则返回false

javascript 复制代码

function Foo() {  }
var f1 = new Foo();
console.log(f1 instanceof Foo);//true
console.log(f1 instanceof Object);//true

javascript 复制代码

console.log(Object instanceof Function)//true
console.log(Object instanceof Object)//true
console.log(Function instanceof Object)//true
console.log(Function instanceof Function)//true
function Foo() {}
console.log(Object instanceof  Foo);//false

典例：

javascript 复制代码

var A = function() {

}
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

javascript 复制代码

var F = function () { };
Object.prototype.a = function () {
  console.log('a()')
};
Function.prototype.b = function () {
  console.log('b()')
};
var f = new F();
f.a()//a()
f.b()//报错 原型链找不到
F.a()//a()
F.b()//b()