js学习第十三天

最新推荐文章于 2024-08-04 16:33:59 发布
最新推荐文章于 2024-08-04 16:33:59 发布
阅读量18 收藏
点赞数
文章标签： javascript 学习 原型模式
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45753238/article/details/134528280
版权

原型

原型为了共享公共的成员  prototype

原型: JS为每个构造函数提供一个属性prototype(原型),它的值是一个对象，prototype也叫原型对象

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 面向过程开发(关注具体实现步骤)
      // 面向对象开发(分析涉及的对象，指挥对象完成任务) - 封装、继承、多态
      function Cat(name, age) {
        this.name = name
        this.age = age
        //  给实例添加eat方法，将来每一个对象都有这个eat方法，造成空间浪费
        // this.eat = function () {
        //   console.log('猫吃老鼠')
        // }
      }

      // 给Cat原型添加公共的属性或方法,这样所有new出来的实例都可以访问
      Cat.prototype.eat = function () {
        console.log('猫吃老鼠')
      }

      Cat.prototype.nation = 'china'

      const cat1 = new Cat('加菲猫', 3) // {name:  '',age: ,eat}
      const cat2 = new Cat('银渐层', 4) // {name: '',age: ,eat() {}}
      console.log(cat1.age)
      console.log(cat1.nation)
      cat1.eat()
      cat2.eat()
      console.log(cat1.eat === cat2.eat) // true

     
      console.log(Cat.prototype)
      console.log(Cat.prototype.constructor === Cat) // true

      // function f() {}
      // console.log(f.prototype)
    </script>
  </body>
</html>

 constructor属性

constructor属性，原型对象的默认属性->原型对象的构造函数

例如：Array.prototype.constructor === Array

          console.log(Array.prototype.constructor === Array) //  true

          const arr = [ ] //  new  Object()

          console.log(arr.constructor === Array) // true

          console.log(arr.constructor === Array.prototype.constructor) // true

         console.log(arr.constructor) // 访问arr数组对象的constructor,会到原型去访问

        console.log(Object.prototype.constructor) // Object ;

        const obj = {}

        console.log(obj.constructor) // Object

        const obj2 = { a: 1 }

        console.log(obj.constructor === obj2.constructor) // true

访问对象成员的原则

访问对象成员的原则: 先查找自己身上有没有，有的话就使用，没有去原型查找

<script>
      function Cat(name, age) {
        // this.name = name
        this.age = age
      }

      Cat.prototype.eat = function () {
        console.log('猫抓老鼠')
      }

      Cat.prototype.name = '亚洲猫王'
      const cat = new Cat('小花', 3) // {name: '小花', age: 3}
      // 访问对象成员的原则: 先查找自己身上有没有，有的话就使用，没有去原型查找
      console.log(cat.name)
    </script>

三者关系

<script>
      // 定义构造函数
      function Person(name, age) {
        this.name = name
        this.age = age
      }

      // 在原型上声明一个方法-say()
      Person.prototype.say = function () {
        console.log('saying')
      }

      // 实例化对象
      const p1 = new Person('小明', 20)
      console.log(p1.name)
      p1.say()
      // prototype->原型对象 __proto__ 原型
      console.log(p1.__proto__) // 每个对象都有一个__proto__属性（非标准属性 -> ES6 标准属性）,指向原型对象，它与[[Prototype]]等价
      console.log(p1.constructor.prototype.constructor)

      console.log([].__proto__) // Array.prototype  {constructor: Array,...}
      console.log([].__proto__.constructor) // Array
      console.log([].constructor) // Array

      console.log('123'.constructor) //  String
      console.log(Array.prototype) //  数组原型定义了很多方法 
      const arr   = [1,2,3]
      arr.push(4)
    </script>

 原型应用

给数组拓展方法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      // 给数组拓展方法
      Array.prototype.getSum = function () {
        console.log(this) // this 指向getSum调用着->实例对象
        let sum = 0
        this.forEach(function (item) {
          sum += item
        })
        return sum
      }
      const arr = [1, 2, 3]
      const arr2 = [10, 3, 4]
      arr2.getSum()
      const res = arr2.getSum()
      console.log(res)

     
    </script>
  </body>
</html>

原型链

对象访问成员的机制

         1  首先查找自身有没有，有就就近原则使用

         2  自身没有该成员，通过__proto__找到原型对象，看原型对象上有没有，有就执行

         3  假如原型对象上也没有，再找原型对象的__proto__ ,一直找到Object.prototype

         4  一直找到Object.prototype,找不到就undefined

<script>
      // 定义构造函数
      function Person(name, age) {
        this.name = name
        this.age = age
      }

      // 在原型上声明一个方法-say()
      // Person.prototype.say = function () {
      //   console.log('saying')
      // }
      // Person.prototype = {
      //   constructor: Person,
      //   say: function () {
      //     console.log('saying')
      //   },
      // }
      // Object.prototype.say = function () {
      //   console.log('我是Object原型上的say')
      // }
      // 实例化对象
      const p1 = new Person('小明', 20)
      // p1.say = function () {
      //   console.log('自己对象上的say')
      // }
      console.log(p1.name)
      // console.log(p1.say)
      p1.say()
      console.log(Person.prototype)

     
    </script>

 原型链练习

<script>
      // 内置构造函数Function 创建函数 函数是Function的实例
      function f() {} //  new  Function()
      // f.a = 100
      //  console.log(f.a)
      console.log(f.__proto__ === Function.prototype) // true
      console.log(Function.__proto__ === Function.prototype) // true
      console.log(Function.__proto__.__proto__ === Object.prototype) // Object.prototype
      console.log([].__proto__.__proto__ === Object.prototype) //  true
      console.log(Function.__proto__.__proto__ === [].__proto__.__proto__)
      // const f = new Function('a', 'b', 'return a + b') //  function f(a,b) { return a + b}
      // console.log(f)
      // console.log(f(3, 4))
    </script>

instanceof

  1.typeof 检测数据类型

  string number boolean

console.log(typeof [])   //'object'

console.log(typeof {})   // 'object'

2. 数组原型也提供toString()，自己原型的方法是拼接字符串 

  console.log(Array.prototype) 
      console.log([1, 2, 3].toString()    // [object Array]
      console.log({}.toString())          // [object Object]

3.call调用函数

 console.log(Object.prototype.toString.call([]))

4.instanceof 实例对象 instanceof  构造函数

   判断构造函数的原型对象是不是在实例对象的原型链上

 console.log([] instanceof Array) // true
      console.log([] instanceof Object)   // true
      console.log({} instanceof Array)    // false

qq_45753238
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
JavaScript Event学习第十一章 按键的检测
12-07
对于复杂的情况，可以借助第三方库或使用现代浏览器提供的API来提高跨平台的一致性。 总的来说，JavaScript的键盘事件处理涉及多方面的知识，包括事件模型、属性差异和系统间的兼容性问题。理解这些细节对于构建...
JavaScript 学习笔记（十三）Dom创建表格
10-29
本文将以“JavaScript 学习笔记（十三）Dom创建表格”为基础，详细介绍如何使用JavaScript来动态创建和操作HTML表格。 #### 二、关键概念和技术点 1. **DOM基础**: DOM是一种标准，用于表示和操作HTML或XML文档的...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十：正则表达式
01-20
JavaScript是Web前端开发中不可或缺的一部分，它为网页赋予了动态功能和交互性。在JavaScript中，正则表达式（Regular Expression）是一种强大的文本处理工具，用于执行模式匹配和字符串操作。本篇教程将深入探讨...
JavaScript学习笔记（十）
10-29
### JavaScript学习笔记（十）—— Window对象详解 #### 一、引言 在JavaScript的学习过程中，`window`对象是一个非常重要且实用的概念。它不仅代表浏览器窗口本身，还提供了丰富的API来帮助开发者操作浏览器窗口，...
JavaScript 学习笔记（十一）
10-29
### JavaScript 学习笔记（十一）：深入理解 Document 对象 #### 一、Document 对象概述 在继续探讨 `document` 对象之前，我们先简要回顾一下 `document` 在 Web 开发中的重要性。`document` 对象代表当前加载在...
牛客JS题（二十一）数组扁平化
最新发布
不起眼小菜菜的博客
08-04 595
注释很详细，直接上代码……
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 319
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 935
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 253
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
Springboot+Websocket+Security+Vue 实现弹幕推送功能
Gemini1995的博客
08-01 516
【代码】Springboot+Websocket+Security+Vue 实现弹幕推送功能。
【Vue3】自定义组件
又言又语
07-30 462
本文介绍 Vue3 中如何自定义组件。页面组件：用于构建独立页面，通常存放在src/pages或src/views目录下。功能组件：将页面中一些独立的功能封装成独立组件，譬如：分页组件、日期时间组件等。功能组件通常存放在目录下。本文主要说明如何自定义功能组件。
django+vue项目-制作一个简单的购物网站
码农在写代码
07-30 359
用django框架制作的一个简易的网站后端学习笔记
RN高级interview
流星雨的博客
07-31 495
RN高级interview
vite静态资源处理，处理vite项目中src和url路径问题
WanweI897的博客
08-02 389
处理vite项目中src和url路径问题
我们的前端开发逆天了！1 小时搞定了新网站，还跟我说 “不要钱”
努力做最接地气的编程干货分享，感谢关注
07-29 2558
本文将带你了解一个新的 Web 框架 **Astro**，并手把手带你使用 Astro 搭建一个属于自己的站点，用过的都说真香！
互联网医院系统源码与医保购药APP开发的完整技术指南
meihusdk的博客
07-30 385
开发过程中需注重数据安全、系统性能、用户体验等多个方面，确保系统的高效稳定运行和良好用户体验。希望这篇技术指南能为开发者提供有益的参考，助力互联网医疗健康行业的发展。
linux命令行下使用的浏览器
没刮胡子的程序员专栏
08-01 75
从命令行浏览网页的原因有很多。 命令行工具通常具有丰富的选项和参数，可以根据用户的需求进行调整和配置。这种灵活性使得命令行在自动化和脚本编写方面非常有用。 对于系统管理员来说，命令行是管理和配置服务器的首选方式。通过命令行，管理员可以快速执行各种任务，例如安装软件包、配置网络、管理用户和权限等。与图形界面相比，命令行通常更高效，特别是在处理大量的重复性任务时。 使用Linux命令行浏览器可以提高工作效率，降低系统资源消耗，提高系统的稳定性。
JavaScript 字符串方法2
爱敲代码的卡拉米的博客
07-30 390
方法不会改变调用它的字符串。它返回的是新字符串。正则表达式不带引号,如需替换所有匹配，请使用正则表达式的。所有字符串方法都会返回新字符串。它们不会修改原始字符串。正式地说：字符串是不可变的：字符串不能更改，只能替换。因此不对匹配 MICROSOFT。如需执行大小写不敏感的替换，请使用正则表达式。可搭配正则表达式使用。
vue3学习day01-vue3的优势、新的脚手架工具create-vue、创建vue3项目、vue3的项目文件内容、插件变化
2301_76648183的博客
07-31 468
（4）index.html 单页入口，提供id为app的挂载点。
JavaScript宝典第六版完整学习资源
"JavaScript宝典(第6版).pdf" JavaScript是一种广泛应用于网页和网络应用的脚本语言，尤其在客户端的交互式用户界面设计中扮演着核心角色。《JavaScript宝典(第6版)》是关于这个语言的一部详尽指南，涵盖了从基础...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值