JavaScript 学习笔记（七）JavaScript基础；js原型以及原型链
目录
问题2：Person.prototype 的 __proto__ 指向谁？
问题4：Object.prototype 的 __proto__ 指向谁？
问题6：Function.prototype 的 __proto__ 指向谁？
一、原型
原型解决的问题
当我们需要给实例对象添加方法时，直接在构造函数体内直接向实例对象添加方法，这种行为并不好，原型就是解决这一问题的。
不好的原因：当把方法书写在构造函数体内，每次创建实例的时候，都会创建一个函数数据类型，多个函数方法，一模一样，就会占据多的存储空间。
比如：
<script>
function Person(name, age) {
//向实例对象内添加属性
this.name = name
this.age = age
//向实例对象内添加方法
//在构造函数体内直接向实例对象添加方法，这种行为并不好
this.sayHi = function () { console.log('hello') }
}
//创建两个实例
var p1 = new Person('jack', 18)
var p2 = new Person('Pose', 20)
console.log(p1)
console.log(p2)
console.log(p1.sayHi === p2.sayHi) //false
</script>
原型概念
每一个函数天生自带一个 prototype 属性，是一个对象数据类型。当函数出现的时候，就会产生prototype；每一个对象天生自带一个属 __proto__，指向所属构造函数的prototype；当你访问对象成员的时候，首先在自己身上查找，如果没有，自动去到__proto__上查找。
<script>
function Person() {}
Person.prototype.a = 100
Person.prototype.b = 200
console.log(Person.prototype)
//创建一个实例对象
//p1所属的构造函数就是 Person
//p1.__proto__ === Person.prototype
var p1 = new Person()
console.log(p1.__proto__ === Person.prototype) //true
//当你访问 p1 的 a 成员时，自己没有，就会自动去自己的 __proto__ 上查找
//而自己的 __proto__ 就是 Person.prototype，所以其实就是去到Person.prototype上查找
console.log(p1.a)
</script>因此，原型解决问题问题的方式就是 把需要添加给实例的方法，放在构造函数的原型（prototype）上，就可以有实例进行访问使用。
<script>
function Person(name, age) {
//向实例对象上添加属性
this.name = name
this.age = age
}
//把想添加给实例对象的方法，书写原型上
Person.prototype.sayHi = function () { console.log('hello world') }
//创建实例对象，p1 和 p2 所属的构造函数都是Person,
//p1.__proto__ === Person.prototype
//p2.__proto__ === Person.prototype
var p1 = new Person('Jack', 18)
var p2 = new Person('Rose', 20)
console.log(p1.__proto__ === Person.prototype) //true
console.log(p2.__proto__ === Person.prototype) //true
//当你访问p1 的sayHi时，自己没有就会去自己的 __proto__ 上找, p2 同理
console.log(p1.sayHi)
console.log(p2.sayHi)
//p1.__proto__ 和 p2.__proto__ 是同一个对象空间
console.log(p1.sayHi === p2.sayHi) //true
</script>总之，原型就是 构造函数天生自带的一个 prototype ，作用是由构造添加方法，专门给实例对象使用。
二、原型链
问题1：实例对象身上的 __proto__ 指向谁？
==> 指向所属构造函数的prototype
==> p1 所属的构造函数是 Person
==> p1.__proto__ 指向 Person.prototype
问题2：Person.prototype 的 __proto__ 指向谁？
==> Person.prototype 所属的构造函数是谁
==> 因为Person.prototype 是一个对象数据类型（Object），在JS 内所有的Object 数据类型都是属于 Object 这个内置构造函数
==> Person.prototype 是属于 Object 这个内置构造函数的
==> Person.prototype 的 __proto__ 指向 Object.prototype
问题3：Person 的 __proto__ 指向谁？
==> Person 是一个函数，函数本身也是一个对象，就会有 __proto__
==> 在JS 内，所有的函数都是属于内置构造函数 Function 的实例
==> Person.__proto__ 指向 Function.prototype
问题4：Object.prototype 的 __proto__ 指向谁？
==> Object.prototype 是一个对象数据类型，只要是对象，都是数据 Object 这个内置构造函数的
==> 注意：Object.prototype 在JS 内叫做顶级原型，不再有 __proto__ 了
==> Object.prototype 的 __proto__ 指向null
问题5：Object 的 __proto__ 指向谁？
==> Object 是一个内置构造函数，同时也是一个函数，同时也是一个对象
==> 在JS 内，所有的函数都是属于内置构造函数 Function 的实例
==> Object 也是 Function 的实例
==> Object.__proto__ 指向 Function.prototype
问题6：Function.prototype 的 __proto__ 指向谁？
==> Function.prototype 也是一个对象数据类型
==> 只要是对象数据类型都是 Object 的实例
==> Function.prototype 的 __proto__ 指向 Object.prototype
问题7：Function的 __proto__ 指向谁？
==> Function 也是一个内置构造函数，也是一个函数
==> 在JS 中，所有的函数都是属于内置构造函数 Function 的实例
==> Function 自己是自己的构造函数，自己是自己的实例对象
==> Function 所属的构造函数时 Function
什么是原型链
用 __proto__ 串联起来的对象链状结构（注意：是 __proto__），每一个对象数据类型，都有一个属于自己的原型链。作用：为了访问对象成员。
原型链提供的对象访问机制：
当你需要访问对象的时候，首先在自己身上查找，如果有直接使用，如果没有，会自动去 __proto__ 上查找，如果还没有，就再去 __proto__ 上查找，直到 Object.prototype 都没有，那么返回 undefined。
文章参考视频：b站千锋前端学习营：千锋前端JavaScript全套教程_JS零基础完美入门到项目实战https://www.bilibili.com/video/BV1W54y1J7Ed?share_source=copy_web
投递快手等公司10个岗位 >