IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript 原型链 与 继承 -> 正文阅读

[JavaScript知识库]JavaScript 原型链 与 继承

原型链

     // 这是一个函数
      function fn1() {
        this.name = "fn";
      }

    //   这里的函数背new 操作符操作了,一般称 fn1 这个函数为构造函数
      var p = new fn1();

了解概念:

? ? ? ? prototype(显示原型),__proto__(隐式原型)容易记混,所以prototype称为原型对象只有函数有prototype,__proto__称为对象原型,因为只有对象有__proto__

  • 构造函数:被new操作符操作的函数就是构造函数,JS中所有的函数都可以作为构造函数,简单地说就是 前面有new的就是构造函数?var p = new fn1(); 这个 fn1()函数就是构造函数
  • 实例:实例是对象new执行构造函数,返回了实例对象 而接收实例对象的变量被称为实例 var p = new fn1(); p接收了构造函数 new fn1()返回的实例,那么p就可以被称为实例
  • 原型对象__prototype:只有函数才有prototype(原型对象),原型就是原型对象------prototype,每一个构造函数有一个prototype属性,这个属性会初始化出来一个原型对象。fn1的prototype就是一个原型对象? ? ? ? ? ? ? ? ? ? ?
  • 对象原型__proto__:只有对象才会有__proto__(原型对象),对象都有一个__proto__属性,指向构造函数的prototype(原型对象)? (这句话下面有解释)? ? ? ? ? ? ? ? ? ??
  • constructor构造函数:对象原型(__proto__)和构造函数的原型对象(prototype)都有一个属性constructor。我们称为构造函数,因为它指向构造函数本身,它指明了当前这个原型是哪个构造函数的原型
  • 原型链:实例的对象原型(__proto__)指向构造函数的原型对象(prototype)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 构造函数的原型对象指向Object()[对象]的对象原型(__proto__)值为null? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 只要是对象就是对象原型(__proto__)指向?Object()[对象]的对象原型? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? (__proto__)值为null? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 由__proto__对象连接而成的‘链子’就是原型链? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?

关系图

?了解了上面实例、原型、构造函数的概念,下面说说他们的关系

1、通过 new 操作符作用域JS函数得到了实例;

//构造函数 fn1 实例 p  
function fn1() {
        this.name = "fn";
      }
  var p = new fn1();

2、构造函数有原型对象(prototype),实例里面的对象原型(__proto__)就指向构造函数的原型对象(prototype)

     // 构造函数的原型对象
      console.dir(fn1.prototype);
      //   实例的__proto__
      console.dir(p.__proto__);
      //   实例里面的对象原型指向构造函数的原型对象
      console.log(p.__proto__ == fn1.prototype); //true

3.构造函数的原型对象(prototype)也是对象,那么是对象就有对象原型(__proto__),它的对象原型指向Objec【Object是函数】,Objec是函数也有原型对象(prototype)它也有对象原型(__proto__)值为null

      //构造函数的原型对象的对象原型的对象原型
      console.dir(fn1.prototype.__proto__.__proto__); //null
      //因为实例的对象原型指向构造函数的原型对象,所以
      console.dir(p.__proto__.__proto__.__proto__); //null

      console.log(fn1.prototype.__proto__ == Object.prototype); //true

?4.上面介绍了实例的对象原型(__proto__)和构造函数的原型对象(prototype)是怎么形成一条线的,那么说一下对象原型(__proto__)是怎么和原型对象(prototype)连接的,为什么不会连接到其它函数的原型对象上,这是因为原型对象(prototype)和对象原型上(__proto__)有一个constructor属性,这个属性把对象原型(__proto__)和 原型对象(prototype)进行了关联,指明当前这个原型是哪个构造函数的原型? ? ?

?继承

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-09 12:31:32  更:2022-05-09 12:33:52 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 23:40:10-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码