이 글은 프로토타입의 개념, 함수 프로토타입의 생성자 속성, 프로토타입 체인의 이해 등을 포함하여 프로토타입 및 프로토타입 체인과 관련된 문제를 주로 정리한 javascript에 대한 관련 지식을 제공합니다. 함께하면 모두에게 도움이 되기를 바랍니다.
[관련 권장 사항: javascript 비디오 튜토리얼, web front-end]
JavaScript에서 함수는 속성과 유형의 객체입니다. 프로토타입 (Prototype)은 Function 유형 객체의 속성입니다. Function类型的对象。而原型(Prototype)就是Function类型对象的一个属性。
在函数定义时就包含了prototype属性，它的初始值是一个空对象。在JavaScript中并没有定义函数的原型类型，所以原型可以是任何类型。
原型是用于保存对象的共享属性和方法的，原型的属性和方法并不会影响函数本身的属性和方法。
// Function类型的属性->所有函数都具有的属性
console.log(Function.prototype);//[Function]
// 定义函数
function fn() {
console.log('this is function');
}
//原型的默认值是空对象
console.log(fn.prototype);//fn {}
// 函数包含构造函数 ——> 所有引用类型其实都是构造函数
console.log(Number.prototype); //[Number: 0]
console.log(Object.prototype);//{}通过如下两种方式可以获取对象的原型，从而设置共享的属性和方法：
prototype属性getPrototype（obj）方法。function fn() {
console.log('this is function');
}
//使用访问对象的属性语法结构
console.log(fn.prototype);//fn {}
console.log(fn['prototype']);//fn {}
//Object类型提供getPrototypeOf（）方法
console.log(Object.getPrototypeOf(fn));//[Function]Object.getOwnPropertyDescriptors() 方法用来获取一个对象的所有自身属性的描述符。
var result = Object.getOwnPropertyDescriptor(Object.prototype,'constructor');
console.log(result) //输出结果如下：
//{
// value: [Function: Object],
// writable: true,
// enumerable: false,
// configurable: true
// }
constructor是在创建函数的时候自动添加的，指向构造函数本身
通过如下两种方式可以设置原型的属性和方法：
构造函数.prototype.属性名 = 属性值 ;构造函数.prototype.方法名 = function(){} ;当我们需要在原型上添加很多很多属性的时候 一遍一遍的去写
构造函数.prototype.属性名太麻烦了，可以直接修改整个prototype
构造函数.prototype = {
属性名：属性值,
方法名：function(){}}function foo () {}foo.prototype = {
constructor: foo,
name: 'jam',
age: 18,
address: '北京市'}var fn = new foo()console.log(fn.address) // 北京市每个对象中都会具有一个isPrototypeOf()方法，该方法用来判断一个对象是否是另一个对象的原型。
示例代码如下：
// 通过初始化器方式定义对象
var obj = {
name:'jam'
}
// 定义构造函数
function Hero() {}
// 将对象obj赋值给构造函数Hero的原型
Hero.prototype = obj;
// 通过构造函数创建对象
var hero = new Hero();
// isPrototypeOf()方法判断指定对象是否是另一个对象的原型
var result = obj.isPrototypeOf(hero);
console.log(result);//true验证了
obj对象是hero对象的原型
接下来我们使用一段代码来展开对原型链的认识：
场景：查找obj对象身上的address属性 js执行的步骤： 1. 会触发get操作 2. 在当前的对象中查找属性 3. 如果没有找到，这个时候会去原型链(__proto__)对象上查找 1. 查找到结束 2. 没查找到一直顺着原型链查找，直到查找到顶层原型（顶层原型是什么暂时卖个关子）
var obj = {
name: 'jam',
age: 19
}
/*
要求：查找obj对象身上的address属性
*/
// 原型链一层一层向上查找，如果一直没有找到，直到查找到顶层原型结束
obj.__proto__ = {}
obj.__proto__.__proto__ = {}
obj.__proto__.__proto__.__proto__ = {
address: '北京市'
}
console.log(obj.address) // 北京市
console.log(obj.__proto__.__proto__.__proto__) // { address: '北京市' }
最终查找到address属性
那么这里有一个问题，如果一直没有查到，会无穷尽的去查找吗？接下来我们就来了解一下
上面我们说到，顺着原型链不会无休止的去查找，当查到顶层原型的时候，如果还没查到就会返回undefined。
那么顶层原型是什么呢？
示例代码如下：
var obj = { name: 'jam' }console.log(obj.__proto__) // {}console.log(obj.__proto__.__proto__) // null字面量对象obj的原型是：
{}。{}就是顶层的原型
当我们继续向上打印__proto__时，返回一个null值,就证明上一层就已经是顶层原型了
如下图是针对第一段代码中缺少的顶层原型做的补充：
顶层原型就是Object.prototype
3.1 那么什么地方是原型链的尽头呢？比如第三个对象是否也有原型__proto__属性呢？
var obj = {name:'jam'}obj.__proto__ = {}obj.__proto__.__proto__ = {}obj.__proto__.__proto__.__proto__ = {}console.log(obj.__proto__.__proto__.__proto__.__proto__) // {}我们发现上面打印结果为 空对象{}
var obj = {
name: 'jam',
age: 19
}
console.log(obj.__proto__) // {}
console.log(Object.prototype) // {}
console.log(obj.__proto__ === Object.prototype) // trueObject是所有类的父类
所以obj.__proto__其实就是Object.prototype ,console.log(obj.__proto__ === Object.prototype) // true我们可以看出结果Object.prototype就是顶层原型
{}
3.2 那么我们可能会问：{}함수 정의 시 prototype 속성이 포함되며, 초기값은 빈 객체입니다. JavaScript에는 함수에 대해 정의된 프로토타입 유형이 없으므로 프로토타입은 모든 유형이 될 수 있습니다.
console.log(obj.__proto__.__proto__.__proto__.__proto__.__proto__) // null
prototype 속성을 통해 생성자의 getPrototype (obj) 메소드를 통해. <!-- 可以看出是有constructor属性的 ，并不是空的-->console.log(Object.prototype.constructor) // [Function: Object] <!-- constructor 指回了Object -->
Object.getOwnPropertyDescriptors() 이 메서드는 모든 자체 속성을 얻는 데 사용됩니다. 개체 설명자 중 하나입니다. 🎜console.log(Object.getOwnPropertyDescriptors(Object.prototype)) // 如下长截图所示
🎜생성자는 함수가 생성될 때 자동으로 추가되며 생성자 자체를 가리킵니다.🎜🎜4 다음을 통해 프로토타입🎜🎜의 속성과 메서드를 설정합니다. 두 가지 방법 프로토타입의 속성과 메서드를 설정할 수 있습니다. 🎜🎜프로토타입에 많은 속성을 추가해야 할 때rrreeerrreee🎜5.isPrototypeOf() 메서드🎜🎜각 개체에는constructor.prototype.property 이름을 계속해서 작성해야 하는 번거로움이 있습니다. 전체prototype🎜
isPrototypeOf() 메서드가 있으며, 이 메서드는 object 다른 개체의 프로토타입인지 여부. 🎜rrreee🎜🎜 2. 프로토타입 체인🎜🎜🎜1. 프로토타입 체인🎜🎜 🎜다음으로 프로토타입 체인에 대한 이해를 넓히기 위해 코드 조각을 사용합니다. 🎜rrreeeobj객체가hero객체의 프로토타입인지 확인🎜
🎜🎜마침내 주소를 찾으세요 속성🎜2를 살펴보겠습니다. 최상위 프로토타입이 무엇인가요? 🎜🎜위에서 프로토타입 체인을 따라 끝없는 검색은 없을 것이라고 언급했습니다. 최상위 프로토타입이 발견되면 아직 발견되지 않은 경우그럼 여기서 궁금한게 있는데, 찾지 못했다면 끝없이 검색이 될까요? 다음으로🎜
undefine이 반환됩니다. 🎜🎜🎜그럼 최상위 프로토타입은 무엇일까요? 🎜🎜 리터럴 객체 obj의 프로토타입은{}입니다.{}는 최상위 프로토타입입니다.
__proto__를 계속 인쇄하면 null 값이 반환됩니다. 이는 이전 계층이 이미 최상위 프로토타입임을 증명합니다. 레벨 프로토타입🎜🎜다음 그림은 첫 번째 코드 부분에서 누락된 최상위 프로토타입에 대한 보충입니다.🎜
🎜🎜3. 객체의 프로토타입(Object.prototype)🎜🎜🎜3.1 그렇다면 프로토타입 체인의 끝은 어디일까요? 예를 들어, 세 번째 객체에도 프로토타입최상위 프로토타입은 Object.prototype입니다🎜__proto__속성이 있나요? 🎜🎜rrreee🎜위의 인쇄 결과는빈 객체{}🎜🎜🎜입니다. 3.2 그러면 다음과 같이 질문하실 수 있습니다.
- 사실 이 프로토타입은 우리의 최상위 프로토타입입니다. rrreee
🎜Object가 부모입니다. 모든 클래스 중 Class
따라서 obj.__proto__는 실제로 Object.prototype입니다.console.log(obj.__proto__ === Object.prototype) // true우리는 결과 Object .prototype은 최상위 프로토타입입니다🎜- Object에서 직접 생성된 객체의 프로토타입은
{}{}프로토타입의 특별한 점은 무엇입니까? 🎜🎜
- 特殊点1：该对象有原型属性，但是它的原型属性已经指向的是null，也就是已经是顶层原型了；
console.log(obj.__proto__.__proto__.__proto__.__proto__.__proto__) // null로그인 후 복사로그인 후 복사- 特殊点2：该对象上有甚很多默认的属性和方法；
- 虽然打印
Object.prototype的结果为空对象{}，但它不是空的，只是里面的属性不可枚举而已,例如我们就打印constructor属性看看<!-- 可以看出是有constructor属性的 ，并不是空的-->console.log(Object.prototype.constructor) // [Function: Object] <!-- constructor 指回了Object -->로그인 후 복사로그인 후 복사- 我们也可以通过
Object.getOwnPropertyDescriptors()方法获取Object.prototype中的所有自身属性的描述符。console.log(Object.getOwnPropertyDescriptors(Object.prototype)) // 如下长截图所示로그인 후 복사로그인 후 복사
4.原型链关系内存图
【相关推荐：javascript视频教程、web前端】
위 내용은 JavaScript 프로토타입 및 프로토타입 체인 지식 포인트에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![자바스크립트 심층 분석 [웹 프론트엔드의 기본은 알아야 한다]](https://img.php.cn/upload/course/000/000/041/61d3ff1c83b43350.jpg)
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
