[JavaScript知识库] JS原型和原型链

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> JS原型和原型链 -> 正文阅读

[JavaScript知识库]JS原型和原型链

原型和原型链

1. prototype

在JavaScript中，每一个函数对象都有一个 prototype 属性（引用变量属性），该属性指向指向一个空的Object对象，该对象叫做原型对象

function Person(){}
Person.prototype.name = "protoName"
var person = new Person()
console.log(person.name) // protoName

person由于本身没用name这个属性，所以他会去构造函数Person找，而Person函数本身也没有name属性，所以会去Person.prototype上面找，也就是去Person的原型上面找，这就是最基本的原型链了

在这里插入图片描述

2. proto

每一个对象都有一个__proto__属性，他指向该对象的原型

function Person(){}
var person = new Person()
console.log(person.__proto__ === Person.prototype) // true

在这里插入图片描述

3. constructor

每个原型都有一个constructor属性（也就是说，constructor是存在于prototype上面的属性），指向该关联的构造函数。

function Person(){}
var person = new Person()
console.log(Person.prototype.constructor === Person) // true
console.log(Person.prototype.constructor === person.constructor) // true

在这里插入图片描述

4. 原型的原型

原型本质也是一个对象，那么对象就可以通过 new Object() 构建
那么也就是说，原型的__proto__属性指向原型的原型，也就是 Object.prototype
在这里插入图片描述

4. 整个原型链图

    var fn = new Fun();
    // console.log(Fun.prototype)
    console.log(fn.__proto__ === Fun.prototype) //true
    // console.log(fn.__proto__.__proto__);

    console.log(Object.prototype === Fun.prototype.__proto__) //true
    console.log(Object.prototype === fn.__proto__.__proto__) //true
    console.log(fn.__proto__.__proto__.__proto__) // null
    console.log(Function.prototype.__proto__ === Object.prototype) //true

    console.log(Fun.__proto__ === Function.__proto__) //true