原型和原型链简述(prototype、_proto_)

news/2024/7/19 12:59:28 标签: js, prototype, javascript, 面向对象编程

原型链

+ __proto__ 原型

+ 使用 __proto__ 串联起来的对象链状结构

+ 从任何一个数据结构出发, 最终都能找到 Object.prototype

+ 作用: 为了对象访问机制

        => 当你需要访问一个对象的成员的时候

        => 首先在自己身上查找, 自己身上有, 就直接使用, 停止查找

        => 自己没有, 就会自动去自己的 __proto__ 上查找

        => 如果还没有, 就在去 __proto__ 上查找

        => 直到 Object.prototype 上都没有, 返回 undefined

概念:

+ 原型: 构造函数天生自带的一个对象数据类型, 存储方法提供给实例使用的

+ 原型链: 使用 __proto__ 串联起来的对象链状结构, 为了对象访问机制使用的

原型相关概念:

1. 每一个函数天生自带一个属性, 叫做 prototype, 是一个对象数据类型

2. 每一个对象天生自带一个属性, 叫做 __proto__, 指向所属构造函数的 prototype

3. 当一个数据类型, 不确定构造函数是谁的时候, 就是 Object 的实例

案例

javascript">function Person(name, age) {
      this.name = name
      this.age = age
    }
    const p1 = new Person('Jack', 18)

疑问

+ 问题1: Person.prototype 指向谁 ?

        => 指向天生自带的 对象数据类型

+ 问题2: p1(Person 的实例对象) 的 __proto__ 指向谁 ?

        => 指向所属构造函数的 prototype

        => 因为: p1 所属的构造函数是 Perosn

        => 所以: p1.__proto__ 指向 Person.prototype

+ 问题3: Person 的 __proto__ 指向谁 ?

        => 因为 Person 是一个函数, 函数本身也是一个对象

        => 因为: 函数是 JS 的内置数据类型的一种, 所以 JS 内就有一个内置构造函数叫做         Function

        => 只要是一个函数, 那么就是属于 Function 这个内置构造函数的 实例

        => 那么 Person 的 __proto__ 指向 Function.prototype

+ 问题4: Person.prototype 的 __proto__ 指向谁 ?

        => 因为 Person.prototype 也是一个对象

        => 因为: 一个数据结构, 不知道是谁实例化出来的时候, 我们说他是 Object 的实例

        => 所以: Person.prototype 的 __proto__ 就是 Object.prototype

+ 问题5: Function 的 __proto__ 指向谁 ?

        => Function 是一个天生自带的内置构造函数, 但是也是一个函数, 但是也是一个对象

        => Function 是一个内置构造函数, 也是一个函数

        => 因为: 只要是函数, 就是内置构造函数 Function 的实例

        => Function 所属的构造函数是 Function

        => Function 自己是自己的实例, 自己是自己的所属构造函数

+ 问题6: Function.prototype 的 __proto__ 指向谁 ?

        => Function 也会天生自带一个 prototype 是一个对象数据类型, 他的 __proto__ 是谁

        => 但是不知道是谁 实例化 了这个对象

        => 我们就把 Function.prototype 看做 Object 的实例

        => Function.prototype 所属的构造函数就是 Object

        => Function.prototype 的 __proto__ 就是 Object.prototype

+ 问题7: Object 的 __proto__ 指向谁 ?

        => Object 是一个天生自带的内置构造函数, 但是也是一个函数, 但是也是一个对象

        => Objecy 是一个内置构造函数, 是一个函数

        => 因为: 只要是函数, 就是内置构造函数 Function 的实例

        => Object 的所属构造函数就是 Function

        => Object 的 __proto__ 就是 Function.prototype

+ 问题8: Object.protoype 的 __proto__ 指向谁 ?

        => Object 也会天生自带一个 prototype , 是一个对象数据类型

        => Object 的 __proto__ 指向 null

        => 因为 Object 是我们的顶级对象

图例

javascript">// 1. 实例对象的 __proto__
    console.log(p1.__proto__ === Person.prototype)
    console.log(p1.__proto__.__proto__ === Object.prototype)
    Object.prototype.aaa = 100
    console.log(p1.aaa)

// 2. Person 的 __proto__
    console.log(Person.__proto__ === Function.prototype)
    console.log(Person.__proto__.__proto__ === Object.prototype)
    Function.prototype.aaa = 200

    console.log(p1.aaa) // 100
    console.log(Person.aaa) // 200

// 3. Object.prototype 的 __proto__
    console.log(Object.prototype)
    console.log(Object.prototype.__proto__)

http://www.niftyadmin.cn/n/1527298.html

相关文章

如何进入Microsoft 安全公告

首先打开这个URI https://docs.microsoft.com/ 打开以后,在里面随便输入一个已知的security bulletins(安全公告)编号,例如:ms17-010,这个就是大名鼎鼎的永恒之蓝的安全漏洞,Microsoft Window…

Git使用流程(超级详细,值得收藏!)

目录 git 安装 git 首次安装需要进行的配置 git 管理本地文件夹 git 仓库是什么样子的 ? 上传到远程 下载到本地 git 的分支 git 的冲突 和 git 相关的几个文件 git常用命令 1.$ git clone [address] # 复制代码库到本地2.$ git add [file] … # 添加文件到代码库中3.$…

在微软AD域环境下批量部署安装软件

第一步:要保证你的软件是MSI格式的。如果不是,请看第二步。 第二步:制作MSI安装包,我用了Advanced Installer 制作msi安装包 2.1 网上下载的exe的软件,请先将这个软件安装一次,安装好以后,会在…

Vue中的过滤器(filter)

过滤器的写法 首先,过滤器可在new Vue实例前注册全局的,也可以在组件上写局部。 全局过滤器: Vue.filter(globalFilter, function (value) {return value "!!!"}) 组件过滤器(局部): filte…

Wireshark Limit each packet to 80 bytes

今天在winxp中安装了1.10.7 版本wireshark来做一个试验,试验中我只需要抓TCP和IP包,所以要在Wireshark: Capture Options的窗口中把每个数据包的大小(就是Limit each packet to)限制为80字节,按ctrlK调出Wireshark: Ca…

Vue中的scoped

什么是scoped 在vue文件中的 style 标签上,有一个特殊的属性:scoped。当一个 style 标签拥有 scoped 属性时,它的 CSS 样式就只能作用于当前的组件,也就是说,该样式只能适用于当前组件元素。通过该属性,可…

WIN10 PING不通 开启防火墙ICMP回显

今天在Windows防火墙→高级设置→入站规则→文件和打印机共享(回显请求 - ICMPv4-In)→在【已启用】上打勾后还是没有icmp回显。经过一翻努力的查找和试探,终于找到了另一个回显请求。那就是虚拟机监控(回显请求-ICMPv6-In),见下图。开启了虚…

Vue中$bus事件总线

不说废话&#xff0c;直接看用法&#xff1a; 1、在 main.js 中将 $bus 绑定到 vue 原型上 Vue.prototype.$busnew Vue() 2、在需要传递信息的组件上将一个方法发射出去&#xff0c;并需要在某个条件激活这个方法 <div click"busclick"> </div> meth…