JavaScript原型链深度解析,继承与原型模式揭秘 js中原型链

JavaScript原型链深度解析,继承与原型模式揭秘 js中原型链

亲爱的开发者们,今天我们来聊聊JavaScript中不可或缺的原型链。它不仅是实现函数和对象继承的基石,更是JavaScript这门语言灵活性和动态性的体现。领会原型链,就像是掌握了一扇窗,透过它,你可以看到函数、对象以及它们之间关系的本质。在接下来的日子里,让我们一起探索原型链的奥秘,掌握这门语言的精髓。

JavaScript,作为一门广泛使用的编程语言,其核心特性其中一个就是原型链,在JavaScript中,所有函数的原型都是Function.prototype,而所有对象的原型链最终都会指向Object.prototype,这一机制是JavaScript实现继承和原型模式的基础。

让我们深入探讨Foo的原型。Foo一个函数,其构造函数是JavaScript内部的Function(),由于Functionprototype属性指向了一个对象Function.prototype,因此Foo__proto__属性也就指向了Function.prototype,这种关系可以用图示来直观地展示。

对于函数而言,prototype属性是其独有的,以Person为例,Person.prototype一个对象,它包含两个属性:constructor指向其构造函数Person,以及__proto__属性,这个属性一个对象,指向上一层的原型。

函数对象对应的类型是Function,这与数组对象对应的类型是Array相似,当我们使用new Fn()创建一个对象时,实际上就是在调用构造函数。

JavaScript的原型和原型链具有下面内容特点:

– 原型链实现了继承,在JavaScript中,每个函数都有一个prototype属性,默认情况下,所有函数的prototype都是Object的实例。

– 每个继承父函数的子函数的对象都包含一个内部属性proto,这个属性指向父函数的原型。

原型链的具体实现如下:

– 在创建对象时,构造函数内部定义一般成员,而成员函数则定义在原型上。

– JavaScript中有两个独特的对象:ObjectFunction,它们都是构造函数,用于生成对象。

每个JavaScript对象内部都有一个指向其他对象的“指针”或“引用”,通过这种方式在对象之间建立了一种链式结构,这就是所谓的原型链。

原型与原形的异同

在讨论原型链之前,我们先来区分一下“原型”和“原形”这两个词。

1、意义和用法不同:“原型”通常指的是某一个事物或设计的最初构思,也可以表示某个抽象概念的原始形态或最早的雏形。

2、区别

– 原型是事物的所指;

– 原形是指事物的本身;

– 原型是指原来的类型或模型,特指文学艺术作品中塑造人物形象所依据的现实生活中的人;

– 原形本来的形状,原来的形态,本来的情形。

3、具体解释

– 原型:原始的模型,特指文学艺术作品中塑造人物形象所依据的现实生活中的人。

– 原形:指事物本来的样子,孙悟空变成个老太太,那老太太的原形就是孙悟空,它们其实是同一个事物,原型指一个事物的来源的依据,这个事物和原型有某种共性,但不是同一个事物。

基于类的继承与基于原型的继承:优劣比较

在JavaScript中,由于没有类的概念,继承通常是通过原型链来实现的,下面内容是两种继承方式的比较:

1、原型链继承

– 优点:从instanceof关键字来看,实例既是父类的实例,又是子类的实例,看起来似乎是最纯粹的继承。

– 构造函数、原型和实例的关系:每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而实例包含一个指向原型对象的内部指针。

– 原型链基本想法:利用原型让一个引用类型继承另外一个引用类型的属性和技巧。

2、优点与缺点

– 优点:实现简单,易于领会。

– 缺点:在创建实例时,无法向构造函数传递参数,且原型上的技巧会被所有实例共享,可能会导致数据污染。

JavaScript中没有类的概念,只有函数和原型,这种设计主要受到了Self(一种基于原型的编程语言)和Scheme(一门函数式编程语言)的影响,JavaScript的这种能力主要来自于原型。

原型设计的深度解析

原型设计是交互设计师与产品经理、项目经理、网站开发工程师沟通的最好工具,在产品设计经过中,原型设计一个至关重要的步骤,它是对一个产品的可视化呈现,主要传达产品的信息架构、内容、功能和交互方式。

1、原型设计的影响

– 是交互设计师与团队成员沟通的桥梁;

– 是产品设计初期供团队参考、讨论、评估的主要依据。

2、前端与后台原型设计

– 前端的原型设计主要包括产品展示、支付界面、订单购物车界面、图文资讯界面、用户个人中心界面等;

– 后台原型设计主要包括用户管理界面、产品管理界面、订单管理界面、图文管理界面、操作员管理界面等。

3、原型图设计

– 是设计经过中使用的一种技术,通常在设计的早期阶段使用;

– 一个代表了设计概念的可视化模型,允许团队成员对设计的可行性进行讨论和反馈。

4、原型设计的类型

– 纸质原型和电子原型;

– 方便设计师或设计团队之间沟通、协作和迭代产品设计构思。

通过原型设计,设计师可以更好地领会用户需求,优化产品设计,确保产品在开发经过中能够顺利实施。

深入领会原型、原型对象与继承

在JavaScript中,constructor属性指向构造函数,构造函数又通过prototype属性指回原型,并不是所有函数都具有这个属性,例如Function.prototype.bind()就没有这个属性。

原型链的基本想法是利用原型让一个引用类型继承另一个引用类型的属性和技巧,每个构造函数都有一个原型对象,原型对象包含一个指向构造函数的指针,而实例包含一个指向原型对象的指针。

为了创建实例,需要组合使用构造函数模式和原型模式,在构造函数中定义实例的属性,而共享的技巧则定义在原型对象中,在子构造函数中调用父构造函数的call(this, name)实现构造函数之间的属性继承。

原型对象也可以层层继承,而没有继承任何对象的最顶层对象(如})的constructor就是Object这个原生超级根对象构造器。

基于原型链的继承中,JavaScript对象是动态的属性“包”,具有指向一个原型对象的链,在给子类型原型添加技巧时,如果父类上也有同样的名字,子类型将会覆盖这个技巧,达到重新的目的,但这个技巧依然存在于父类中。

版权声明