本文深入解析JavaScript中的原型与原型链机制。详细阐述显示原型（prototype）与隐式原型（__proto__）的区别与联系，说明属性查找规则、原型链的构建过程以及instanceof运算符的实现原理。通过代码示例解析属性读写差异及常见应用场景，帮助开发者理解JS对象模型的核心逻辑。
原型(prototype)
在JavaScript中，每个函数都拥有一个名为 prototype 的属性，该属性默认指向一个空的 Object 实例，通常被称为原型对象。
<script>
console.log(Date.prototype, typeof Date.prototype);
function fun(){
}
fun.prototype.test = function(){ //给原型对象添加一个方法
console.log('test()');
}
console.log(fun.prototype); // 默认指向一个Object空对象(没有我们的属性)
</script>
在这个原型对象内部，存在一个 constructor 属性，它指向创建该原型对象的函数本身。
<script>
function fun(){
}
console.log(Date.prototype.constructor === Date);
console.log(fun.prototype.constructor === fun);
</script>
若向原型对象中添加属性（通常用于定义方法），则通过该构造函数创建的实例对象均可访问这些属性或方法。
在某些场景下，开发者希望为所有已存在的对象实例统一添加新的属性或方法。
此外，有时也需要在对象的构造函数内部直接定义属性或方法。
利用 prototype 属性，可以向构造函数的原型对象中添加新的属性或方法。
<script>
function fun(){
}
fun.prototype.test = function(){//给原型对象添加方法(属性)
console.log('test()');
}
var fn = new fun()//函数的所有实例对象自动拥有原型中的方法(属性)
fn.test()
</script>
显示原型与隐式原型
每个函数 function 都具备一个 prototype 属性，即显示原型，其默认值是一个空的 Object 对象。
<script>
function fun(){
}
console.log(fun.prototype);
</script>
每个通过构造函数创建的实例对象都拥有一个 __proto__ 属性，这被称为隐式原型。
<script>
function fun(){
}
var fn = new fun()
console.log(fn.__proto__);
</script>
实例对象的隐式原型（__proto__）的值，等于其对应构造函数的显示原型（prototype）的值。
<script>
function fun(){
}
// console.log(fun.prototype);
var fn = new fun()
// console.log(fn.__proto__);
console.log(fun.prototype === fn.__proto__); //结果是 true
</script>总结：
函数的 prototype 属性是在定义函数时自动创建的，默认指向一个空的 Object 对象。
对象的 __proto__ 属性是在创建对象时自动添加的，其默认值为该对象构造函数的 prototype 属性值。
程序员可以直接操作显示原型，但在 ES6 之前，无法直接操作隐式原型。
原型链
原型链的本质是隐式原型链，主要用于查找对象的属性或方法。当访问对象的某个属性时，引擎会先在对象自身属性中查找，若找到则返回；若未找到，则沿着 __proto__ 指向的原型对象向上查找，直到找到该属性并返回；若遍历至原型链末端仍未找到，则返回 undefined。
<script>
console.log(Object.prototype.__proto__);
function Fun(){
this.test1 = function(){
console.log('test1()');
}
}
console.log(Fun.prototype);
Fun.prototype.test2 = function(){
console.log('test2()');
}
var fun = new Fun()
fun.test1()
fun.test2()
console.log(fun.toString())
fun.test3()
</script>
总结：
JavaScript 对象维护着一个指向原型对象的链式结构。当尝试访问对象的属性时，引擎不仅会在当前对象上搜索，还会依次搜索该对象的原型、原型的原型，层层向上，直至找到匹配的属性名称或到达原型链的终点。
<script>
function Fun(){
}
//函数的显示原型指向的对象默认是空 Object 实例对象(但 Object 不满足)
console.log(Fun.prototype instanceof Object);
console.log(Object.prototype instanceof Object);
console.log(Function.prototype instanceof Object);
//所有函数都是 Function 的实例(包括 Function)
console.log(Function.__proto__ === Function.prototype);
// Object 的原型对象是原型链的尽头
console.log(Object.prototype.__proto__);
</script>
原型链属性问题
在读取对象属性值时，JavaScript 会自动沿原型链向上查找；但在设置对象属性时，不会查找原型链。如果当前对象中不存在该属性，则直接在该对象上添加此属性并赋值。通常，方法定义在原型中，而属性通过构造函数定义在对象实例本身。
<script>
function Fun(){
}
Fun.prototype.a = 'xxx'
var fun = new Fun()
console.log(fun.a,fun);
var fun1 = new Fun()
fun1.a = 'yyy'
console.log(fun.a,fun1.a,fun1);
function Person(name,age){
this.name = name
this.age = age
}
Person.prototype.setName = function(name){
this.name = name
}
var p1 = new Person('Tom',12)
p1.setName('Bob')
console.log(p1);
var p2 = new Person('Jack',12)
p2.setName('andy')
console.log(p2);
console.log(p1.__proto__ === p2.__proto__);
</script>
原型链 instanceof 使用
表达式 A instanceof B 用于判断：如果 B 函数的显示原型对象位于 A 对象的原型链中，则返回 true，否则返回 false。值得注意的是，Function 是通过 new 自身产生的实例。
<script>
function Fun(){}
var fn = new Fun()
console.log(fn instanceof Fun);
console.log(fn instanceof Object);
console.log(Object instanceof Function);
console.log(Object instanceof Object);
console.log(Function instanceof Function);
console.log(Function instanceof Object);
function Foo(){}
console.log(Object instanceof Foo);
</script>
练习
<script>
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);
</script>
其实现原理如下图所示（图有点草，凑合看吧哈哈）
<script>
function F(){}
Object.prototype.a = function(){
console.log('a()');
}
Function.prototype.b = function(){
console.log('b()');
}
var f = new F()
f.a()
F.a()
F.b()
console.log(f);
console.log(Object.prototype);
console.log(Function.prototype);
</script>
到此这篇关于JavaScript原型与原型链深入探究使用方法的文章就介绍到这了,更多相关JS原型与原型链内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！