当前位置: 首页 > news >正文

js原型链

什么叫原型链 

        原型链是js中的核心,原型链将各个属性链接起来,在原型链上面定义,原型链上的其他属性能够使用,原型链就是保证继承

原型链区分

        原型链分为显式原型和隐式原型

        显式原型:只有函数和构建函数才有显式原型,通过构建函数构建出来的对象的隐式原型执行构建函数的显式原型

        隐式原型:每个对象都有隐式原型,js自动生成,通过隐式原型来执行显式原型,一级一级执行,直到成功匹配。保证继承

 根据上方的图 ,我么一级一级来了解原型链

原型链最顶级是null,至于为什么是null,我也不懂,可能是当初创造js这个语言时留下的烂摊子,我们从第一级将起

1,原型链的第一级是object,也就是对象,所以在js中就有一切皆对象的说法,我们通过代码来演示,

        我们首先打印object.prototype

我们可以很明确的看到他的隐式原型指向的是null

        然后我们给Object.prototype定义一个方法,由于他是最高一级,我们给最高一级定义的方法,就代表着他下级都能使用这个方法,我们来尝试下

        

等于就是说object.prototype相当于是爷爷辈,爷爷辈的东西,儿子和孙子都能用

2,然后我们在来看第二级,也就是构造函数

        我们要先明白,什么是构建,通过new实例化出对象的函数叫构建函数,任何函数函都可以作为构建函数来使用,构建函数在原型链中以大写的F来区分,也就是会所Function.prototype来代表构建函数,

我们首先来创建一个构建函数

        function Stu(name,age){  //创建了一个对象模板,只接受2个参数this.name = name  //这里注意,没用this关键字的函数不是构造函数this.age = age}    

  通过这个构建函数,我们能够实例化出一个对象

通过构建函数,我们实例化出来了一个对象,我们实例化出来的这个对象,相当于是孙子级别,孙子级别可以用父级(构造函数)和爷级(object.prototype)所定义的方法,逐层上找,爷--儿--孙,逐层继承,构建了原型链

所以说,我们在构架函数上添加的方法,实例化出的对象也能使用

function Stu(name,age){  //创建了一个对象模板,只接受2个参数this.name = name  //这里注意,没用this关键字的函数不是构造函数this.age = age}    const stus = new Stu("张三",16)console.log(stus)Stu.prototype.obj=function(data){  //给构建函数上定义一个方法console.log("我是构建函数上的方法被"+data+"调用")}stus.obj("儿子") //实例化出的对象(儿子)调用,并打印  我是构建函数上的方法被儿子调用

原型链的核心就在这里了,我这里只讲了一部分,在结合那个图的话,后续的应该也好理解了,简单来说就是继承,爷爷传递给父亲,父亲在传递给儿子,儿子找父亲,父亲没有在找爷爷。哈哈。很好理解。但是注意咯,他是逐层上找不是往下找,就是父亲不能用儿子的方法。拜拜

相关文章:

  • CVF 在 TNEWS 数据集上测试
  • leetcode:13. 罗马数字转整数(python3解法)
  • 【Linux】:初识git || centos下安装git || 创建本地仓库 || 配置本地仓库 || 认识工作区/暂存区(索引)以及版本库
  • 5G创新突破 | 紫光展锐5G芯片全球首发R17 NR广播端到端业务演示
  • 为什么 conda 不能升级 python 到 3.12
  • python 按字段查询数据库
  • Kubernetes rancher、prometheus、ELK的安装
  • flink状态和检查点
  • Xcode15 framework ‘CoreAudioTypes‘ not found
  • OTP语音 NV040C芯片在智能闹钟的应用
  • Mac安装opencvJava踩坑
  • VS Code Counter统计代码量(vscode扩展工具)
  • linux开机自动挂载目录
  • 怎么学编程效率高,编程练习网站编程软件下载,中文编程开发语言工具下载
  • 高防IP的原理
  • [deviceone开发]-do_Webview的基本示例
  • Create React App 使用
  • ES学习笔记(10)--ES6中的函数和数组补漏
  • JavaScript标准库系列——Math对象和Date对象(二)
  • laravel with 查询列表限制条数
  • Laravel 中的一个后期静态绑定
  • leetcode46 Permutation 排列组合
  • leetcode98. Validate Binary Search Tree
  • MYSQL 的 IF 函数
  • Vultr 教程目录
  • 干货 | 以太坊Mist负责人教你建立无服务器应用
  • 函数式编程与面向对象编程[4]:Scala的类型关联Type Alias
  • 码农张的Bug人生 - 初来乍到
  • 如何用Ubuntu和Xen来设置Kubernetes?
  • 数据可视化之 Sankey 桑基图的实现
  • 微信小程序填坑清单
  • 基于django的视频点播网站开发-step3-注册登录功能 ...
  • ​HTTP与HTTPS:网络通信的安全卫士
  • #调用传感器数据_Flink使用函数之监控传感器温度上升提醒
  • $.ajax,axios,fetch三种ajax请求的区别
  • (31)对象的克隆
  • (42)STM32——LCD显示屏实验笔记
  • (C语言)深入理解指针2之野指针与传值与传址与assert断言
  • (k8s中)docker netty OOM问题记录
  • (剑指Offer)面试题41:和为s的连续正数序列
  • (企业 / 公司项目)前端使用pingyin-pro将汉字转成拼音
  • (四)Controller接口控制器详解(三)
  • (一)python发送HTTP 请求的两种方式(get和post )
  • (原創) 系統分析和系統設計有什麼差別? (OO)
  • (转)关于如何学好游戏3D引擎编程的一些经验
  • .net core Swagger 过滤部分Api
  • .net 微服务 服务保护 自动重试 Polly
  • .NET中使用Redis (二)
  • .py文件应该怎样打开?
  • ::什么意思
  • @vue/cli脚手架
  • [Angular 基础] - 数据绑定(databinding)
  • [ASP.NET MVC]如何定制Numeric属性/字段验证消息
  • [DAX] MAX函数 | MAXX函数
  • [docker] Docker容器服务更新与发现之consul