JavaScript原型初解

前言

说起JavaScript原型，我就有点头大，几乎每次面试都会问到这个问题，而且每次都回答的不好，曾经有面试官提醒过我，说我相信是我自己是明白了的，但是我没听明白你讲的，所以你应该背一下网上的面经，感觉我现在都有阴影了，每次遇到我都尽量不回答，就怕回答不清楚，反而减分。今天翻红红宝书正好翻到这儿，就来尝试给我自己讲一下，看看能不能讲清楚。

正文

首先我们来记住一句非常重要的话：每一个函数都有一个prototype属性，这个属性是一个对象，包含应该有特定引用类型的实例共享的属性和方法。 这个对象就是原型，原型上的属性和方法可以被对象实例共享。

1.使用function关键字创建函数
function Person(){}
Person.prototype.name = 'shanshan'
Person.prototype.sayName = function(){
  console.log(this.name)
}
const p1 = new Person()
const p2 = new Person()
p1.sayName()  // shanshan
p2.sayName()  // shanshan
2.使用函数表达式创建函数
const Person = function(){}
Person.prototype.name = 'shanshan'
Person.prototype.sayName = function(){
  console.log(this.name)
}
const p1 = new Person()
const p2 = new Person()
p1.sayName()  // shanshan
p2.sayName()  // shanshan

接下来我们记住第二句话：所有原型对象都有一个constructor属性，指向与之关联的构造函数

function Person(){}
Person.prototype.constructor === Person  // true

第三句话：每个对象都有一个__proto__属性，指向对象的原型

function Person(){}
const p = new Person()
p.__proto === Person.constructor  // true

接下来我们通过一张图来理解这三句话之间的关系。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cc9PPM6f-1665910829826)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8d596353467d40e78164dbb3e19845a0~tplv-k3u1fbpfcp-watermark.image?)]

1.每一个函数都有一个prototype属性，这个属性是一个对象，包含应该有特定引用类型的实例共享的属性和方法。
2.所有原型对象都有一个constructor属性，指向与之关联的构造函数
3.每个对象都有一个__proto__属性，指向对象的原型
4.正常的原型对象都会终止于Object,Object的原型是null
所有有以下等式
Person.prototype.constructor === Person // true 第二句
Person.prototype.__proto__ === Object.prototype // true 第三句
Person.prototype.__proto__.constructor === Object // true // 第二句
Person.prototype.__proto__.__proto__ === null // true // 第四句
p.__proto__ === Person.prototype // true  第三句
p.__proto__.constructor === Person // true 第二局第三局结合

总结

以上就是今天我学习的JavaScript原型内容，总的来说就是以下三句：
1.每一个函数都有一个prototype属性，这个属性是一个对象，包含应该有特定引用类型的实例共享的属性和方法。
2.所有原型对象都有一个constructor属性，指向与之关联的构造函数
3.每个对象都有一个__proto__属性，指向对象的原型
最后记住一句特殊的话：正常的原型对象都会终止于Object,Object的原型是null