js 原型链详解

简介: js 原型链详解

目录


构造函数和实例

属性Prototype

属性__proto__

访问原型上的方法

以上短暂总结

构造函数也有__proto__

构造函数的原型也有__proto__

Object.prototype这个原型对象很特殊

总结

最后

构造函数和实例



假设你声明一个方法叫做Foo(),那么我们可以通过new Foo()来声明实例。

    function Foo() {
      console.log("我是一个构造方法");
    }
    const f1 = new Foo();

现在你可以很清晰的明白Foo()是构造函数,f1是它的实例。


属性Prototype



Foo()这个构造函数是一个方法。


方法也是对象数据类型,所以可以说方法是个对象。


对象就有属性,不过方法有自己特殊的一个属性,叫做prototype,其他对象没有哦。


这个属性会指向一个原型对象(Foo.prototype),而原型对象也会有一个自己的属性叫做constructor,指向属性包含了一个指针,指回原构造函数。

    function Foo() {
      console.log("我是一个构造方法");
    }
    const f1 = new Foo();
    console.log(Foo.prototype);//Foo的原型对象
    console.log(f1.prototype);//f1没有 underfied

image.png

属性__proto__



上文的prototype是给构造函数的所有实例提供共享方法和属性的。


实例又是怎么访问到共享方法和属性的呢?


f1实例没有prototype,而有一个属性__proto__,这是所有对象都有的属性,它指向到构造自己的构造函数的原型对象,然后js这个语言就是根据这个属性来让实例访问到共享属性和方法的


Foo是f1的构造函数,Foo.prototype是Foo的原型对象,所以f1.__proto__指向Foo.prototype

    function Foo() {
      console.log("我是一个构造方法");
    }
    const f1 = new Foo();
    console.log(Foo.prototype);
    console.log(f1.__proto__);

image.png

访问原型上的方法


Foo这个构造函数如果希望自己的实例能够拥有同一个属性,比如name,就在自己的原型对象上加上

    function Foo() {
      console.log("我是一个方法");
    }
    Foo.prototype.name = "我是Foo创造的实例共享的属性";
    const f1 = new Foo();
    const f2 = new Foo();
    console.log(f1.name);//我是Foo创造的实例共享的属性
    console.log(f2.name);//我是Foo创造的实例共享的属性

image.png

以上短暂总结


image.png


构造函数的原型也有__proto__



Foo.prototype也是对象,所以它也有__proto__。


每当我们要找__proto__,就得找它的构造函数,Foo.prototype是个对象,纯对象,所以它的构造函数是Object,那么Object的原型就是Object.prototype。


Foo.prototype.__proto__指向Object.prototype


Object.prototype这个原型对象很特殊


Array、String、Funtion、Object这些构造函数都是函数,

都是Funtion构造函数的实例,

Array.__proto__、String.__proto__、Funtion.__proto__、Object.__proto__指向Funtion.prototype原型,

可以调用Funtion.prototype原型的一些公共方法,

例如都可以调用.name查看自己的函数名字。

Array.prototype、String.prototype、Funtion.prototype这些原型对象都是对象,

都是Object构造函数的实例,

Array.prototype.__proto__、String.prototype.__proto__、Funtion.prototype.__proto__指向Object.prototype原型,

所以可以调用Object.prototype这个原型对象的公共方法,

而Object.prototype有些特殊,它虽然是对象,但是并不是Object自己的实例,

Object.prototype.__proto__指向null,作为原型链的终点

总结


方法,也就是函数,才有prototype,就是方法的原型。

所以实例,一般都会有个对应的构造方法,也就是构造函数,实例的__proto__指向构造方法的原型。

js有很多自带的构造方法,例如Array、String、Funtion、Object,都是根据js一些对象类型分配的,他们的原型上提供了许多封装好的常用方法。

所有构造方法本身是函数,是Funtion这个js自带构造函数的实例。

除了Object.prototype,所有构造方法的原型本身是对象,是Object这个js自带构造函数的实例。

Object.prototype.__prototype指向null,作为原型链重点。

image.png

最后


如果哪里让你觉得我说的很绕,晦涩难懂,请提出,我会及时修改。

相关文章
|
6月前
|
JavaScript 前端开发 安全
JavaScript原型链的使用
【4月更文挑战第22天】JavaScript中的原型链是理解继承的关键,它允许对象复用属性和方法,减少代码冗余。示例展示如何通过原型链实现继承、扩展内置对象、构造函数与原型链的关系以及查找机制。应注意避免修改`Object.prototype`,使用安全方式设置原型链,并谨慎处理构造函数和副作用。
|
1月前
|
JavaScript 前端开发 开发者
理解JavaScript中的原型链:基础与实践
【10月更文挑战第8天】理解JavaScript中的原型链:基础与实践
|
12天前
|
JavaScript 前端开发
JavaScript 原型链的实现原理是什么?
JavaScript 原型链的实现原理是通过构造函数的`prototype`属性、对象的`__proto__`属性以及属性查找机制等相互配合,构建了一个从对象到`Object.prototype`的链式结构,实现了对象之间的继承、属性共享和动态扩展等功能,为 JavaScript 的面向对象编程提供了强大的支持。
|
12天前
|
JavaScript 前端开发
原型链在 JavaScript 中的作用是什么?
原型链是 JavaScript 中实现面向对象编程的重要机制之一,它为代码的组织、复用、扩展和多态性提供了强大的支持,使得 JavaScript 能够以简洁而灵活的方式构建复杂的应用程序。深入理解和熟练运用原型链,对于提升 JavaScript 编程能力和开发高质量的应用具有重要意义。
|
14天前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
24天前
|
JavaScript 前端开发 开发者
探索JavaScript原型链:深入理解与实战应用
【10月更文挑战第21天】探索JavaScript原型链:深入理解与实战应用
28 1
|
1月前
|
JavaScript 前端开发 开发者
深入理解JavaScript原型链:从基础到进阶
【10月更文挑战第13天】深入理解JavaScript原型链:从基础到进阶
24 0
|
1月前
|
JavaScript 前端开发 开发者
原型链深入解析:JavaScript中的核心机制
【10月更文挑战第13天】原型链深入解析:JavaScript中的核心机制
29 0
|
1月前
|
JavaScript 前端开发 安全
深入理解JavaScript原型链:从基础到进阶
【10月更文挑战第13天】深入理解JavaScript原型链:从基础到进阶
27 0
|
3月前
|
开发者 图形学 iOS开发
掌握Unity的跨平台部署与发布秘籍,让你的游戏作品在多个平台上大放异彩——从基础设置到高级优化,深入解析一站式游戏开发解决方案的每一个细节,带你领略高效发布流程的魅力所在
【8月更文挑战第31天】跨平台游戏开发是当今游戏产业的热点,尤其在移动设备普及的背景下更为重要。作为领先的游戏开发引擎,Unity以其卓越的跨平台支持能力脱颖而出,能够将游戏轻松部署至iOS、Android、PC、Mac、Web及游戏主机等多个平台。本文通过杂文形式探讨Unity在各平台的部署与发布策略,并提供具体实例,涵盖项目设置、性能优化、打包流程及发布前准备等关键环节,助力开发者充分利用Unity的强大功能,实现多平台游戏开发。
100 0