JS进阶-原型

news2024/11/28 22:37:03

原型

原型就是一个对象,也称为原型对象

构造函数通过原型分配的函数是所有对象所共享的

JavaScript规定,每一个构造函数都有一个prototype属性,指向另一个对象,所以我们也称为原型对象

这个对象可以挂载函数,对象实例化不会多次创建原型上函数,节约内存

作用:可以把那些不变的方法,直接定义在prototype对象上,这样所有对象的实例就可以共享这些方法

构造函数和原型对象中的this都指向实例化的对象

实例对象可直接访问原型对象中函数与分析

先找实例对象属性或函数,再找原型对象中属性或函数

构造函数和原型对象里面的this指向实例化的对象

console.dir()方法可以在控制台显示指定javascript对象的属性。打印出该对象的所有属性和属性值
    function Star(uname, age) {
      this.uname = uname
      this.age = age
    }
    Star.prototype.sing = function () {
      console.log('唱歌')
    }
    const ldh = new Star('刘德华', 55)
    const zxy = new Star('张学友', 58)
    ldh.sing()
    zxy.sing()
    console.log(ldh.sing === zxy.sing)//true

 公共的属性写到构造函数里面,公共的方法写到原型对象身上。

案例:数组扩展方法

    const arr = [1, 2, 3]
    Array.prototype.sum = function () {
      return this.reduce((prev, item) => prev + item, 0)
    }
    console.log(arr.sum())

constructor属性

每个原型对象和对象原型__proto__里面都有个constructor属性(constructor构造函数)

作用:该属性指向该实例对象/原型对象的构造函数,简单理解就是指向我的爸爸,我是有爸爸的孩子

使用场景:如果有多个对象的方法,我们可以给原型对象采取对象形式赋值。

但是这样就会覆盖构造函数原型对象原来的内容,这样修改后的原型对象constructor就不再指向当前构造函数了

此时,我们可以在修改后的原型对象中,添加一个constructor指向原来的构造函数

    function Star() { }
    Star.prototype = {
      constructor: Star,
      sing: function () {
        console.log('唱歌')
      },
      dance: function () {
        console.log('跳舞')
      }
    }

对象原型__proto__

对象都会有一个属性__proto__指向构造函数的prototype原型对象,之所以我们对象可以使用构造函数prototype原型对象的属性和方法,就是因为对象有__proto__原型的存在。

注意:

__proto__在实例对象里面

__proto__是JS非标准属性

[[prototype]]和__proto__意义相同

只读的,只能获取不能赋值

用来表明当前实例对象指向哪个原型对象prototype

__proto__对象原型里面也有一个constructor属性,指向创建该实例对象的构造函数

原型继承

继承是面向对象编程的另一个特征,通过继承进一步提升代码封装的程度,JavaScript中大多是借助原型对象实现继承的特性。字面量对象继承,构造函数实例化对象继承

    const Person = {
      eyes: 2,
      head: 1
    }
    function Man() {

    }
    Man.prototype = Person
    Man.prototype.constructor = Man
    const pink = new Man()
    console.log(pink)

问题:继承方法时会混乱,会覆盖不独立

    function Person() {
      this.eyes = 2
      this.head = 1
    }
    function Woman() {

    }
    Woman.prototype = new Person()
    Woman.prototype.constructor = Woman
    Woman.prototype.baby = function () {
      console.log('宝贝')
    }
    const red = new Woman()
    console.log(red)

原型链

基于原型对象的继承使得不同构造函数的原型对象关联在一起,并且这种关联的关系是一种链状的结构,我们将原型对象的链状结果关系称为原型链。__proto__属性链状结构

查找规则

1.当访问一个对象的属性(包括方法)时,首先查找这个对象自身有没有该属性。

2.如果没有就查找它的原型(也就是__proto__指向的prototype原型对象)

3.如果还没有就查找原型对象的原型(Object的原型对象)

4.依次类推一直找到Object为止(null)

5.__proto__对象原型的意义就在于为对象成员查找机制提供一个方向,或者说一条路线

6.可以使用instanceof运算符用于检测构造函数的prototype属性是否出现在某个实例对象的原型链上

Array instanceof Object //true,万物皆为对象

案例:模态框封装

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <button id='delete'>删除</button>
  <button id='login'>登录</button>
  <script>
    function Model(title = '', message = '') {
      this.modelBox = document.createElement('div')
      this.modelBox.className = 'model'
      this.modelBox.innerHTML = `<div class="header">${title}<i>x</i></div>
      <div class="body">${message}</div>`
      console.log(this.modelBox)
    }
    //new Model('温馨提示', '您没有删除权限')
    //new Model('友情提示', '您还没登录呢')
    Model.prototype.open = function () {
      const box = document.querySelector('.model')
      box && box.remove()
      document.body.append(this.modelBox)
      this.modelBox.querySelector('i').addEventListener('click', () => {
        this.close()
      })
    }
    document.querySelector('#delete').addEventListener('click', () => {
      const del = new Model('温馨提示', '您没有删除权限')
      del.open()
    })
    document.querySelector('#login').addEventListener('click', () => {
      const login = new Model('友情提示', '您还没登录呢')
      login.open()
    })
    Model.prototype.close = function () {
      this.modelBox.remove()
    }
  </script>
</body>

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

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

相关文章

8 个 Promise 高级用法

在 js 项目中&#xff0c;promise 的使用应该是必不可少的&#xff0c;但我发现在同事和面试者中&#xff0c;很多中级或以上的前端都还停留在promiseInst.then()、promiseInst.catch()、Promise.all等常规用法&#xff0c;连async/await也只是知其然&#xff0c;而不知其所以然…

Vue3实现div拖拽改变宽高

效果图如下&#xff1a; 底部拖拽按钮点击拖拽可自定义父容器的宽高 <template><div id"business_plane"><div class"business_plane" ref"container"><div class"darg_tool"><el-icon class"drag_H…

JavaEE初阶学习:HTTP协议和Tomcat

1. HTTP协议 HTTP协议是一个非常广泛的应用层协议~~ 应用层协议 —> TCP IP 协议栈 应用层 —> 关注数据怎么使用~ 传输层 —> 关注的是整个传输的起点和终点 网络层 —> 地址管理 路由选择 数据链路层 —> 相邻节点之间的数据转发 物理层 —> 基础设置,硬…

Rocky(centos)安装nginx并设置开机自启

一、安装nginx 1、安装依赖 yum install -y gcc-c pcre pcre-devel zlib zlib-devel openssl openssl-devel 2、去官网下载最新的稳定版nginx nginx: downloadhttp://nginx.org/en/download.html 3、将下载后的nginx上传至/usr/local下 或者执行 #2023-10-8更新 cd /usr/…

我在 NPM 发布了新包: con-colors

链接地址&#xff1a;npmjs.com con-colors 安装依赖 yarn add con-colors使用 导入&#xff1a; import { print } from "con-colors";使用&#xff1a; print.succ("成功的消息"); print.err("失败的消息")例子&#xff1a; import { p…

与诈蟹的初次邂逅,你中招了没

中秋国庆双节大家都过得怎么样&#xff1f;有没有吃到螃蟹&#xff1f;不管你们吃没吃到&#xff0c;反正东东是吃到螃蟹...的瓜了&#xff0c;四舍五入一下也算是吃到了吧。 这不节后上班第一天&#xff0c;同事们就已经开始互相问候关于是否收到蟹卡的情况&#xff0c;一开始…

vmware一键启动虚拟机系统脚本

bat脚本 "D:\Program Files (x86)\VMware\VMware Workstation\vmrun.exe" -T ws start "D:\Program Files (x86)\Ginkgo7000\C7-10.10.10.111\CentOS 7-NAS-6.vmx" 脚本内容说明 "D:\Program Files (x86)\VMware\VMware Workstation\vmrun.exe"…

一般香港服务器带宽选多大够用?(带宽计算方法)

​  在海外IDC市场份额中&#xff0c;香港服务器依托自身优越的服务器资源条件&#xff0c;在各个行业中发挥的重要作用。但是&#xff0c;不同业务对网络带宽的要求各不相同&#xff0c;弄清楚如何计算带宽需求对于确保业务平稳运行至关重要&#xff0c;最好从一开始就使用正…

研发质量管理体系

研发质量管理体系的脉络是怎样的&#xff1f;如何建立适合组织发展的研发质量管理体系&#xff1f;质量管理的核心是什么&#xff1f;一些思考&#xff0c;一些线索&#xff0c;欢迎朋友们一起探讨、碰撞。

Tensorflow入门之 Hello World

Tensorflow入门之 Hello World 简介 Tensorflow 是 Google 开源的深度学习框架&#xff0c;来自于 Google Brain 研究项目&#xff0c;在 Google 第一代分布式机器学习框架 DistBelief 的基础上发展起来。 Tensorflow 的官方网址 http://www.tensorflow.org Tensorflow 的 G…

基于Spring Boot和WebSocket的在线聊天室测试

1.测试目标 设计可靠且全面的自动化测试用例&#xff0c;以覆盖项目的核心功能以及不同的使用场景。通过有效的测试策略和测试工具选择&#xff0c;提高测试效率&#xff0c;减少手动测试所需的工作量&#xff0c;从而加速项目的交付周期。保障持续集成与持续交付流程的顺利进…

保护数据安全:防病毒防木马的重要性与策略

随着科技的进步&#xff0c;我们的生活已经离不开互联网。网络为我们的工作、学习、娱乐带来了极大的便利&#xff0c;但同时也带来了新的挑战——数据安全问题。病毒、木马等恶意软件&#xff0c;是威胁数据安全的主要因素。因此&#xff0c;我们必须采取有效的防病毒防木马措…

react中预览excel表格

查了很多资料&#xff0c;很多插件&#xff0c;有很多也用不了&#xff0c;最后试了xlsx这个插件&#xff0c;可以使用。 话不多少了&#xff0c;直接放代码吧&#xff1a; 1.代码实现 fetch(API).then((res: any) > {res?.blob().then((r: any) > {const reader ne…

论文降重:我从论文重复率75%降到4.5%,顺利毕业

去年我在撰写毕业论文的过程中遇到了一个巨大的挑战&#xff0c;那就是论文的重复率过高&#xff0c;高达75%。这个问题严重威胁着我的学位和未来职业发展&#xff0c;因此我决定付出一切努力来解决这个难题。在花费大量时间和努力后&#xff0c;并借助智元兔AI写作助手(http:/…

【高效办公_PDF】如何快速批量整合多个PDF???---Python方法

高效办公 PDF 如何快速批量整合多个PDF??? 今日方法:如何使用Python代码实现合并当前目录PDF文件 市场上当然有许许多多的形形色色的软件可以进行PDF整合等操作; 那么我们用代码(r如:python怎么实现高效办公呢? ) # [注] 在合并过程中,程序是按照所在文件夹的存放顺…

Javascript 笔记:函数调用与函数上下文

在 JavaScript 中&#xff0c;函数上下文通常指的是函数在执行时的当前对象的引用&#xff0c;这通常用 this 关键字表示。this 关键字在不同的执行上下文中可能引用到不同的对象。 1 全局上下文 当 this 关键字用在全局上下文&#xff08;不在任何函数内部&#xff09;&#…

【微客云】外卖霸王餐项目来啦 免费提供霸王餐系统

它终于出来啦&#xff01;微客云分站终于正式发布&#xff01;&#xff01; 先前的文章就已经预告过微客云要搞分站&#xff0c;很多小伙伴们一直在问老许分站什么时候出来&#xff0c;想加盟分站怎么做&#xff1f;有什么条件&#xff1f;本来是不打算这么快正式官宣分站的&am…

[网鼎杯 2020 白虎组]PicDown python反弹shell proc/self目录的信息

[网鼎杯 2020 白虎组]PicDown - 知乎 这里确实完全不会 第一次遇到一个只有文件读取思路的题目 这里也确实说明还是要学学一些其他的东西了 首先打开环境 只存在一个框框 我们通过 目录扫描 抓包 注入 发现没有用 我们测试能不能任意文件读取 ?url../../../../etc/passwd …

css图形化理解--扭曲函数skew()

transform: skewX(30deg);transform: skewY(45deg);transform: skew(30deg,45deg);transform: skewX(angleX);transform: skewY(angleY);transform: skew(angleX,angleY); 是CSS中的一个2D变换方法&#xff0c;它用于对元素沿X轴、Y轴进行倾斜变换。其中&#xff0c;angle表示倾…

【物联网】Arduino+ESP8266物联网开发(二):控制发光二极管 按钮开关控制开关灯

【物联网】ArduinoESP8266物联网开发(一)&#xff1a;开发环境搭建 安装Arduino和驱动 2.ESP8266基础应用 学习过程中会用到的基础引脚如下。开发板提供3V电源&#xff0c;一般传感器工作电压都是3V&#xff0c;可通过开发板供电。如果设备需要的电压超过3V&#xff0c;如水泵…