原型和原型链的理解

news2024/11/16 1:49:15

记住一句话:万物皆对象
对于原型和原型链,我们要知道一下几个:函数对象,实例对象、原型对象

1)函数对象——就是平时称的对象;

2)实例对象——new出的对象或者{ };

3)原型对象——所有的函数对象都有一定有一个对应的原型对象,所有的原型对象都是被Object函数对象创建出来的。

一、原型


      原型是一个对象,是函数的一个属性prototype;

      通过该函数实例化出来的对象都可以继承得到原型上的所有属性和方法

      原型对象默认有一个属性constructor ,值为对应的构造函数;另外,有一个属性__proto__,值为Object.prototype

二、原型链


        概念:(1)对象的创建(2)对象的组织结构(3)对象访问成员的规定

 在JavaScript中万物都是对象,对象和对象之间并不是独立存在的,对象和对象之间有一定关系。

        通过对象__proto__属性指向函数的原型对象(函数.prototype)一层一层往上找,直到找到Object的原型对象(Object.prototype)为止,层层继承的链接结构叫做原型链(通过proto属性形成原型的链式结构,专业术语叫做原型链)

三、构造函数  


①构造函数本身也是函数

②构造函数,函数名尽量首字母要大写(为了区分普通函数和构造函数)

③构造函数中的this指向实例化对象

④构造函数需要使用new关键字调用

其中new关键字主要做了?

1.实例化了一个对象:

        eg: var 变量a= new son(1); 变量a表示实例化对象

2.将this指向实例化对象 eg:this—>a

3.将实例化对象的__proto__指向构造函数的原型对象上

4.将属性和方法添加到实例化对象上

         eg:this关键字添加

5.隐式的返回this

示例如下:

四、以上之间的关系
1、这个图很重要:不管代码怎么变,实质性的东西都是图中所发展出来的
我们通过一个图来表示它们之间的联系,后面有相关解析:

 function Str(sprot,prise){
        this.mysprot=sprot;
        this.myprise=prise;
        this.say=function(){
            console.log("实例化对象上的方法");
        }
      }
      var s1=new Str("篮球",20);//实例化对象s1
      var s2=new Str("羽毛球",30);//实例化对象s2


1、我们要谨记一个源头:Function函数对象自动产生第一个对象

2、除Function函数对象之外,所有的函数对象都是由Function函数对象创建的。

3、Function会自动创建出很多函数对象出来

4、Function自动创建的第一个对象是Object对象函数,Function还会自动创建出的函数对象有:Object、window、Date等一系列的内置函数对象,我们自己写的函数对象也是Function创建的。

          其中我们可以根据代码知道:Object和我们自己设定的Show函数都是由Function创建出来的

        注意:Math不是函数对象,是实例对象

5、所有的函数对象都一定有一个对应的原型对象,所有的原型对象都是被Object函数对象创建的

6、所有的函数对象中都有一个名字叫prototype的引用类型变量,该引用类型变量是函数对象的成员,它的值是对应的原型对象的引用值,即prototype指向原型对象。

7、所有的原型对象中都有一个名为constructor引用类型变量,该引用类型变量是原型对象的成员,该引用类型变量的值是对应的函数对象的引用值,即constructor指向函数对象

8、实例对象是被对应的函数对象(new出来的那个函数)创建的。

9、所有对象中都有一个名为__proto__的引用类型变量,该引用类型变量是对象的成员

10、Function函数对象中__proto__指向Function原型对象

11、Object函数对象中__proto__值为null。

1、对象中的__proto__的值是哪个对象的引用值?即指向哪个对象?分三种

(1)Function函数对象中的__proto__指向Function原型对象

(2)Object原型对象中__proto__的值为null

(3)除Function函数对象和Object原型对象之外,对象中的__proto__指向~~~谁创建了__proto__所属的对象,就指向谁的原型对象

2、对象访问成员的过程:

1)当前对象中如果有该成员就该到该成员,访问结束;

2)当前对象中如果没有该成员,则到__proto__指向的对象中找到成员,找到就结束,如果没有找到,就继续通过__proto__指向的对象中去找。

一个对象中如果有prototype,则该对象一定是函数对象,如果对象为函数对象,则其中一定有proyotype

一个对象中如果有constructor,则该对象一定有原型对象,如果对象为原型对象,则其中一定有constructor

2、prototype、__proto__、 constructor三者之间的关系
prototype :原型(原型对象)指向的都是原型

__proto__:指向的都是原型

constructor:原型上的属性:指向的是构造函数

①每个对象都有一个隐式的属性(__proto__),属性值本质上就是一个普通的对象

②每个函数对象都有一个原型属性(prototype),属性值本质上就是一个普通的对象

③每个对象的__proto__指向构造函数的原型对象(prototype)

④原型对象上有constrctor属性,指向构造函数

   

  //万物皆对象,实例化也是一个对象,看它是否指向构造函数Str的prototype原型对象,实例化对象是由构造函数创建的
      console.log(s1.__proto__);//指向str的原型对象
      console.log(Str.prototype);//指向str的原型对象
      console.log(s1.__proto__ === Str.prototype);//true
 
      console.log(s2.__proto__);//指向str的原型对象
      console.log(Str.prototype);//指向str的原型对象
      console.log(s2.__proto__ === Str.prototype);//true
 
      //Str也是一个对象,有一个隐式的属性(__proto__),构造函数的原型对象是由Object创建的
      console.log(Str.prototype.__proto__);//指向Object的原型对象
      console.log(Object.prototype);//指向Object的原型对象
      console.log(Str.prototype.__proto__ === Object.prototype);//true
 
      //Object也是一个对象,有一个隐式的属性(__proto__),Object的原型对象__proto__ 为null
      console.log(Object.prototype.__proto__);//null,指向为空


3、实战结论
1、Object的原型对象中的成员,可以所有对象访问,Object是原型链的尽头,Object原型对象通过Object.prototype得到。

        示例:Object.prototype.show(){.......},所有对象就可以访问show函数里面的......。

2、所有的原型对象都是由Object函数对象创建的。

3、new 出的对象是由函数对象创建的。

4、所有的对象中都自带属性__proto__,__proto__指向一个对象

5、Object原型对象中__proto__特殊,它的值为null

6、Function函数对象中__proto__特列,它指向Function原型对象。

7、所有的函数对象中都有prototype属性,原型对象和new 出来的对象中没有

8、prototype总是指向对应的原型对象。

代码如下:

 function Fun(){
            this.a=1;
        }
        Fun.prototype={     //fun的原型对象
           aa:10,
           constructor:Fun  //做一个指向,不然后面有关的constructor都为false,可以知道Fun是由Fun构造出来的
        }
        var fn1=new Fun();//实例化创建一个新函数,实例化对象为fn1
        console.log(fn1.aa);  //10
        
        console.log(Object.prototype);
        console.log(Fun.prototype.__proto__);
        console.log(Object.prototype.__proto__); //null
        //访问原型有两种方式:一是通过实例方式,二是通过构造函数
        console.log(fn1.__proto__ === Fun.prototype);//true
        //Object.prototype是Fun.prototype的父亲,Fun.prototype是fn1.__proto__的父亲
        //Object.prototype是原型的终点
        console.log(Object.prototype === fn1.__proto__);//false
        console.log(Object.prototype === fn1.__proto__.__proto__);//true
          //等于console.log(Object.prototype === Fun.prototype.__proto__);
 
        //实例上的能拿到原型上的属性和方法
        console.log(Fun.prototype.constructor === Fun);//true(若没有做constructor指向,则为false,没有定义)
        console.log(fn1.constructor === Fun);//true(若没有做donstructor指向,则为false,没有定义)
        console.log(Object.prototype.constructor === Object);//true

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1152484.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

医疗安全不良事件管理系统源码(PHP+ vue+laravel)

医疗安全不良事件管理系统全套源码 不良事件上报系统源码 不良事件管理系统帮助医院梳理建立不良事件上报与管理的一体化解决方案,包含上报内容、归口科室、上报流程及管理办法。提供面向医院的不良事件全过程管理平台,包含事件上报、事件处理、事件追踪…

线性代数 第一章 行列式

一、概念 不同行不同列元素乘积的代数和(共n!项) 二、性质 经转置行列式的值不变,即; 某行有公因数k,可把k提到行列式外。特别地,某行元素全为0,则行列式的值为0; 两行互换行列式…

goland setup go env

go env -w设置的变量,在goland中不生效,需要额外配置。 点击goland->preference,在go module里,设置go环境变量即可。

Istio实战(九)-Envoy 流量劫持

前言 Envoy 是一款面向 Service Mesh 的高性能网络代理服务。它与应用程序并行运行,通过以平台无关的方式提供通用功能来抽象网络。当基础架构中的所有服务流量都通过 Envoy 网格时,通过一致的可观测性,很容易地查看问题区域,调整整体性能。 Envoy也是istio的核心组件之一…

JS获取阿里云oss私有图片需要通过SDK加签名访问问题

文章目录 一、问题背景二、了解一些概念1. 防盗链2. 公有和私有两种链接的区别 三、下载SDK的地址四、js的SDK对url加签名实现方法实现示例 五、另外1. 跨域问题 六、文章用到的官方文档链接 一、问题背景 我们项目中平时需求都是上传一张原始图片到阿里云OSS公共空间&#xf…

利用OSG和GLSL实现彩色图转为灰度图

目录 1. 前言 2. 开发环境说明 3. 预备知识 4. 功能实现 4.1. 代码 4.2. 代码说明 5. 附加说明 1. 前言 灰色图片其rgb值是一样的,比如(0.5, 0.5, 0.5)就是一张灰度图。彩色转黑白算法有很多种。因此由彩色转黑白关键就是由彩色的rgb算出灰度gray&#xff0…

7+共病思路。WGCNA+多机器学习+实验简单验证,易操作

今天给同学们分享一篇共病WGCNA多机器学习实验的生信文章“Shared diagnostic genes and potential mechanism between PCOS and recurrent implantation failure revealed by integrated transcriptomic analysis and machine learning”,这篇文章于2023年5月16日发…

数据结构与算法解析(C语言版)--搭建项目环境

本栏目致力于从0开始使用纯C语言将经典算法转换成能够直接上机运行的程序,以项目的形式详细描述数据存储结构、算法实现和程序运行过程。 参考书目如下: 《数据结构C语言版-严蔚敏》 《数据结构算法解析第2版-高一凡》 软件工具: dev-cpp 搭…

调试AOSP源码的官方神器-Android Studio for Platform(ASfP)

文章目录 下载安装启动AOSP导入调试不足 欢迎关注微信公众号ZZH的Android 下载 下载地址平台版 Android Studio 由于该工具在调试源码时需要对AOSP进行编译,所以目前只有Ubuntu版本,后续应该也只会有Ubuntu版本。 Ubuntu环境下显示可下载 Windows系统…

【Redis】认识Redis-特点特性应用场景对比MySQL重要文件及作用

文章目录 认识redisredis的主要特点redis的特性(优点)redis是单线程模型,为什么效率这么高,访问速度这么快redis应用场景redis不可以做什么MySQL和Redis对比启动RedisRedis客户端Redis重要文件及作用 认识redis redis里面相关的小…

SHCTF2023 山河CTF Reverse Week3 --- ststst easyre WP详解

文章目录 [WEEK3]ststst[WEEK3]easyre [WEEK3]ststst 64 bit 的 ELF 文件 sub_400763点进去看看 mprotect ,这个 这一题是SMC TEA的考察,我写过一篇关于 SMC学习网鼎杯jocker 可以使用idapython写脚本自动修复,也可以使用动态调试&#x…

吉他、班卓琴和贝斯吉他降分器:Arobas Music Guitar 8.1.1

Arobas Music Guitar 是一款专业的吉他、班卓琴和贝斯吉他降分器。在熟练的手中,它不仅可以让您创作,还可以编辑、聆听和录制,以及导入和导出乐谱。如果有人感兴趣的话,录音是在八个轨道上进行的,你可以为每个轨道单独…

1.8 网络安全模型

思维导图: 1.8 网络安全模型笔记: 网络安全模型核心概念: 消息在Internet上从发送方传送至接收方,涉及到源地址、目的地址、通信协议(如TCP/IP)的使用。信息交换的双方需要合作保证交换的可靠性。 安全技术核心组成…

发布一款CAN总线接口的GPS模块

一、模块硬件介绍 GNSS模块:u-blox M9N,支持北斗、GPS、格洛纳斯和伽利略四系统并发处理陶瓷天线:太盟PA025AZ009,支持北斗、GPS、格洛纳斯三系统。根据太盟的回复,25*25*4尺寸的陶瓷天线无法做到完美的四系统兼容&am…

软考系统架构师知识点集锦十:计算机网络、数学与经济管理、知识产权与标准化

一、计算机网络 1.1、考情分析 2.1 TCP/IP协议簇 2.1.1常见协议及功能 网际层是整个TCP/IP体系结构的关键部分,其功能是使主机可以把分组发往任何网络并使分组独立地传向目标。 POP3: 110 端口,邮件收取SMTP: 25 端口,邮件发送FTP: 20数据端口/21控制…

最优值函数

一、最优状态值函数 解决强化学习任务大致上意味着找到一种政策,能够在长期内实现很多奖励。对于有限MDPs,我们可以精确地定义一种最优政策,其定义如下。值函数定义了政策的一种部分排序。如果一个政策的预期回报大于或等于另一个政策π0在所…

VS Code2023安装教程(最新最详细教程)附网盘资源

目录 一.简介 二.安装步骤 三.VS Code 使用技巧 网盘资源见文末 一.简介 VS Code是一个由微软开发的跨平台的轻量级集成开发环境(IDE),被广泛用于编写各种编程语言的代码。它支持多种编程语言,并且可以通过插件扩展功能。 以…

读图数据库实战笔记04_路径与图变异

1. Groovy 1.1. Java编程语言的一个超集 1.2. Gremlin Console的一个特性是能和Groovy配合使用 1.2.1. Gremlin Console会自动地迭代结果 1.3. 从技术上说,Gremlin Console就是Groovy交互式解释器(read-eval-print loop,REPL)…

一篇博客理解Recyclerview的使用

从Android 5.0开始,谷歌公司推出了RecylerView控件,当看到RecylerView这个新控件的时候,大部分人会首先发出一个疑问,recylerview是什么?为什么会有recylerview也就是说recylerview的优点是什么?recylerview怎么用&…

图像视觉特效处理工具:Boris FX Optics 2024.0.1

BorisFX光效插件Optics首发2024版:3大新功能详解 2023年9月15日,全球领先的视觉后期软件开发公司BorisFX推出了旗下知名软件Boris FX Optics的全新2024版本,这款备受后期处理爱好者喜爱的Photoshop插件和独立程序再次升级,为您的…