首页 > 其他分享 >原型和原型链

原型和原型链

时间:2024-04-13 17:11:39浏览次数:23  
标签:__ Function .__ proto Person 原型

1、首先构造函数为中心

function Person() { }
var p = new Person();
console.log('Person::', p)
console.log(p.constructor === Person)

打印如下:
image
可以看出构造函数通过new得到实例,实例可以通过【constructor】得到构造函数。
访问原型的方式:
① 显示原型 构造函数通过prototype访问原型

② 隐私原型(向上) 实例通过__proto__访问原型

也就是 p.__proto === Person.prototype
根据上述画出他们的关系图如下:
image

2、以Object为中心

对象的一些创建方式:

var obj1 = {};
var obj2 = new Object();

这里我们用new的方式创建一个对象:

var obj = new Object();

打印对象实例的原型(obj.__proto__);)如下图:

image

有上图可以看出实例obj的__proto__已经到顶,如果在__proto__去找,就找到了null,也就是obj.__proto__.__proto__ === null。
接下来我们在拿上边的Person举例

function Person(){};
var p1 = new Person();
console.log(p1.__proto__.__proto__.__proto__ === null ) // true

通过Person的实例去找原型,通过三次__proto__才找到null,p1为什么要比obj多一层呐?其实主要就是构造函数中存在 Person 比Object多一层prototype作为自定义属性原型使用。
下边在画一下已Object为中心的关系图如下:
image
将上边两个关系图连起来:
image

3、下边已Function为中心:

首先我们定义一个函数var fn = new Function();
然后打印这个fn,结果如下图:
image
有打印机结果,可以看出实例fn 也可以通过两次__proto__找到object原型,到这里有个疑问就是实例fn 一次__proto__是什么?
打印一下fn.__proto__结果如下(这里注意下Function.prototype也是这个结果,也就是fn.__proto__ ===Function.prototype的结果是true ):
image
可以看出是[native code], 而native code 是底层的一个函数,其实负责函数的调用,底层代码我们是看不到的,在这里我么也可以看出函数也需要具备对象的能力。

和上边的已构造函数和Object为中心的关系连起来如下图:
image

这里再重点说下Function:
首先思考一个问题,__prroto__其实在任何的对象上都可以用,那么函数其实也是一个对象,那么Function.__proto__是什么呐?__proto__是用来找原型的,那么Function.__proto__就是再找函数的原型,我们打印Function.proto__可以看下,也是一个[native code],所以到这里我们可以知道Function. proto __ === Function.prototype的结果也是true,也就是他们都会找到底层的一个函数,这里我们可以得出一个结论:无论是Function.proto 找原型还是Function.prototype的方式找原型都是一样的结果,如下图:
image
总结:由于Function既是对象也是函数,所以自身和创建的实例,都指向function原型。
补充:基本类型的包装类型也是有原型的如下图:
image

标签:__,Function,.__,proto,Person,原型
From: https://www.cnblogs.com/lvkehao/p/18133083

相关文章

  • 实验一keep原型设计
    一、对墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点的分析1.墨刀适用领域:墨刀同时也是协作平台,项目成员可以协作编辑、审阅,展示产品想法,向客户收集产品反馈以及在团队内部进行协作沟通。网页设计和移动应用界面设计快速原型制作和协作设计用户体验设计和交互设......
  • 原型设计工具比较及实现
    原型设计工具比较及实践目录一,原型设计工具比较1.墨刀2.Axure3.Mockplus二,原型设计1.主题名称2.功能3.界面设计考虑因素4.切换界面一,原型设计工具比较1.墨刀使用领域​墨刀是界面原型设计工具,用于创建应用程序、网站和其他软件的交互原型。......
  • 实验一二手车交易APP原型设计
    一、实验题目:原型设计二、实验目的:掌握产品原型设计方法和相应工具使用三、实验要求:(1)对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点(至少3条)。1.墨刀适用领域:网页设计和移动应用界面设计快速原型制作和协作设计用户体验设计和交互设计优点:界面直观,上......
  • 原型设计工具比较及实现
    1、对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点1.墨刀优点:用户界面:墨刀的用户界面非常直观和易用,适合新手和非技术背景的设计师。协作功能:支持多用户实时在线编辑和项目管理,便于团队协作。资源丰富:内置了大量的模板和元件库,可以快速拖拽来......
  • 原型设计工具比较及实践
    一、对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点。适用领域:1.墨刀:墨刀适用于快速创建交互式原型,特别适合小型项目和初期设计阶段。它提供了简洁易用的界面和丰富的组件库,适合设计师、产品经理和开发人员之间的快速协作。2.Axure:AxureRP适用于复杂......
  • 原型设计工具比较及实践
    一、分析1、Mockplushttps://www.mockplus.cn/Mockplus(摩客)是一款简洁快速的原型图设计工具。适合软件团队、个人在软件开发的设计阶段使用。其低保真、无需学习、快速上手、功能够用。并能够很好地表达自己的设计。2、Axurehttps://www.axure.com/AxureRP是一个专业的快速......
  • 原型设计工具比较及实践
    一、对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点1.墨刀:适用领域:快速原型设计团队协作移动应用设计优点:界面简洁,易于上手,适合初学者或快速原型设计需求。在线协作功能强大,支持多人实时编辑,适合团队协作。提供丰富的模板和组件库,能够快速构建出......
  • 原型设计工具比较及实现
    以下是对墨刀、Axure和Mockplus的对比分析:墨刀适用领域:快速原型设计:墨刀提供了简单易用的界面,适合快速原型设计和迭代。团队协作:墨刀支持多人实时协作,团队成员可以即时查看和编辑原型。云端存储:墨刀的云端存储功能使得原型可以轻松地分享和访问。优点:易于上手:用户界面简......
  • 原型设计工具比较及实践
    一、对墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点的分析1.墨刀(Modao)适用领域:快速原型设计移动应用和网页设计团队协作优点:界面简洁,上手快,适合新手支持多人实时在线协作提供丰富的模板和组件库缺点:功能相对有限,不适合复杂的交互设计导出和分享功......
  • 百度APP原型设计
    一、实验题目:原型设计二、实验目的:掌握产品原型设计方法和相应工具使用。三、实验要求(1)对比分析墨刀、Axure、Mockplus等原型设计工具的各自的适用领域及优缺点(至少3条)。1.墨刀:适用领域:墨刀适用于快速创建简单的交互原型,尤其适合设计师、产品经理和开发人员等各个领域的用户......