C C++最新JavaScript之彻底理解原型与原型链_js contructor，实战讲述Flutter跨平台框架应用

2401_84976182

于 2024-05-15 04:15:28 发布

阅读量612

点赞数 30

分类专栏：程序员文章标签： c语言 c++ 学习

本文链接：https://blog.csdn.net/2401_84976182/article/details/138883257

版权

程序员专栏收录该内容

39 篇文章 1 订阅

订阅专栏

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

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

如果你需要这些资料，可以戳这里获取

JavaScript同样存在由原型指向构造函数的属性：constructor，即Func.prototype.constructor --> Func
在这里插入图片描述

5. `proto`

JavaScript中所有对象(除了null)都具有一个__proto__属性，该属性指向该对象的原型。

function User() {}
var u1 = new User();
// u1.\_\_proto\_\_ -> User.prototype
console.log(u1.__proto__ === User.prototype) // true

显而易见，实例的__proto__属性指向了构造函数的原型，那么多个实例的__proto__会指向同一个原型吗？

var u2 = new User();
console.log(u1.__proto__ === u2.__proto__) // true

其实学到这里就可以产生一些骚想法了，多个实例的__proto__都指向构造函数的原型，那么实例如果能通过一种方式，访问原型上的方法，属性等，就可以实现继承的效果。

我们继续更新一下原型与原型链的关系图：
在这里插入图片描述

6. 原型链

实例对象在查找属性时，如果查找不到，就会沿着__proto__去与对象关联的原型上查找，如果还查找不到，就去找原型的原型，直至查到最顶层，这也就是原型链的概念。

就借助面试题，举几个原型链的例子：

6.1举例

u1.sayHello()：
u1上是没有sayHello方法的，因此访问u1.__proto__(User.prototype)，成功访问到sayHello方法
u2.toString()
u2，User.prototype都没有toString方法，User.prototype也是一个普通对象，因此继续寻找User.prototype.__proto__(Object.prototype)，成功调用到toString方法

7. 提高升华

学完上面那些，大多数面试题都可以做出来了，例如下面这种

function A() {}
function B(a) {
    this.a = a;
}
function C(a) {
    if (a) {
        this.a = a;
    }
}
A.prototype.a = 1;
B.prototype.a = 1;
C.prototype.a = 1;

console.log(new A().a); //1
console.log(new B().a); //undefined
console.log(new C(2).a); //2

但距离解决文章的最初的面试题还欠缺些什么，比如Function.__proto__ === Object.__proto__、Function.prototype.__proto__ === Object.prototype.__proto__等，接着我们来一一攻克它。

7.1 `Objcet.proto` 、 `Object.prototype`、`Object.prototype.proto`

Object是构造函数，在第二部分我们讲过所有的函数都是通过new Function创建了，因此Object相当于Function的实例，即Object.__proto__ --> Function.prototype。
Object.prototype是Object构造函数的原型，处于原型链的顶端，Object.prototype.__proto__已经没有可以指向的上层原型，因此其值为null

// 总结：
Object.__proto__ --> Function.prototype
Object.prototype.__proto__ --> null

7.2 `Function.proto`、`Function.prototype`、`Function.prototype.proto`

Function.prototype是Function的原型，是所有函数实例的原型，例如上面讲的Object.__proto__
Function.prototype是一个普通对象，因此Function.prototype.__proto__ --> Object.prototype
Function.__proto__: __proto__指向创造它的构造函数的原型，那谁创造了Function那？
- 猜想：函数也是对象，那Function.__proto__会指向Object.prototype吗？但上文提到，Object是new Function生成，Object.__proto__ --> Function.prototype。如果真的如此指向，未免有些混乱，因此我去做了一下测试：
  实践证明只存在Object.__proto__ --> Function.prototype
- 苦思冥想没得出结果，难道Function函数是猴子不成，从石头缝里面蹦出来的？于是我进行了一同乱七八糟的测试，没想到找出了端倪。