JavaScript学习笔记（二十二）原型及原型链_1小时掌握javascript原型与原型链 qianfeng-CSDN博客

本文链接：https://blog.csdn.net/m0_57473261/article/details/137871197

先自我介绍一下，小编浙江大学毕业，去过华为、字节跳动等大厂，目前阿里P7

深知大多数程序员，想要提升技能，往往是自己摸索成长，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年最新网络安全全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，涵盖了95%以上网络安全知识点，真正体系化！

由于文件比较多，这里只是将部分目录截图出来，全套包含大厂面经、学习笔记、源码讲义、实战项目、大纲路线、讲解视频，并且后续会持续更新

如果你需要这些资料，可以添加V获取：vip204888 （备注网络安全）

正文

原型的出现，就是为了解决 构造函数的缺点
也就是给我们提供了一个给对象添加函数的方法
不然构造函数只能给对象添加属性，不能合理的添加函数就太 LOW 了

prototype

每一个函数天生自带一个成员，叫做 prototype，是一个对象空间
即然每一个函数都有，构造函数也是函数，构造函数也有这个对象空间
这个 prototype 对象空间可以由函数名来访问

function Person() {}

console.log(Person.prototype) // 是一个对象

- 即然是个对象，那么我们就可以向里面放入一些东西

function Person() {}

Person.prototype.name = 'prototype'
Person.prototype.sayHi = function () {}

我们发现了一个叫做 prototype 的空间是和函数有关联的
并且可以向里面存储一些东西
重点： 在函数的 prototype 里面存储的内容，不是给函数使用的，是给函数的每一个实例化对象使用的
那实例化对象怎么使用能？

proto

每一个对象都天生自带一个成员，叫做**__proto__，是一个对象空间**
即然每一个对象都有，实例化对象也是对象，那么每一个实例化对象也有这个成员
这个 __proto__ 对象空间是给每一个对象使用的
当你访问一个对象中的成员的时候
- 如果这个对象自己本身有这个成员，那么就会直接给你结果
- 如果没有，就会去 __proto__ 这个对象空间里面找，里面有的话就给你结果
- 未完待续。。。
那么这个 __proto__ 又指向哪里呢？
- 这个对象是由哪个构造函数 new 出来的
- 那么这个对象的 __proto__ 就指向这个构造函数的 prototype

function Person() {}

var p1 = new Person()

console.log(p1.__proto__ === Person.prototype) // true

- 我们发现实例化对象的 __proto__ 和所属的构造函数的 prototype 是一个对象空间
  - 我们可以通过构造函数名称来向 prototype 中添加成员
  - 对象在访问的时候自己没有，可以自动去自己的 __proto__ 中查找
  - 那么，我们之前构造函数的缺点就可以解决了
    - 我们可以把函数放在构造函数的 prototype 中
    - 实例化对象访问的时候，自己没有，就会自动去 __proto__ 中找
    - 那么也可以使用了

function Person() {}

Person.prototype.sayHi = function () {
   console.log('hello Person')
}

var p1 = new Person()
p1.sayHi()

- p1 自己没有 sayHi 方法，就会去自己的 __proto__ 中查找
  - p1.__proto__ 就是 Person.prototype
  - 我们又向 Person.prototype 中添加了 sayHi 方法
  - 所以 p1.sayHi 就可以执行了
到这里，当我们实例化多个对象的时候，每个对象里面都没有方法
- 都是去所属的构造函数的 protottype 中查找
- 那么每一个对象使用的函数，其实都是同一个函数
- 那么就解决了我们构造函数的缺点

function Person() {}

Person.prototype.sayHi = function () {
   console.log('hello')
}

var p1 = new Person()
var p2 = new Person()

console.log(p1.sayHi === p2.sayHi)

- p1 是 Person 的一个实例
  - p2 是 Person 的一个实例
  - 也就是说 p1.__proto__ 和 p2.__proto__ 指向的都是 Person.prototype
  - 当 p1 去调用 sayHi 方法的时候是去 Person.prototype 中找
  - 当 p2 去调用 sayHi 方法的时候是去 Person.prototype 中找
  - 那么两个实例化对象就是找到的一个方法，也是执行的一个方法
结论
- 当我们写构造函数的时候
- 属性我们直接写在构造函数体内
- 方法我们写在原型上