前端学习——JS进阶 (Day3)

这篇具有很好参考价值的文章主要介绍了前端学习——JS进阶 (Day3)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

编程思想

面向过程编程

前端学习——JS进阶 (Day3),前端,学习,javascript

面向对象编程 (oop)

前端学习——JS进阶 (Day3),前端,学习,javascript
前端学习——JS进阶 (Day3),前端,学习,javascript
前端学习——JS进阶 (Day3),前端,学习,javascript

构造函数

前端学习——JS进阶 (Day3),前端,学习,javascript

<!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>
    // 构造函数  公共的属性和方法 封装到 Star 构造函数里面了
    // 1.公共的属性写到 构造函数里面
    function Star(uname, age) {
      this.uname = uname
      this.age = age
      // this.sing = function () {
      //   console.log('唱歌')
      // }
    }
    // 2. 公共的方法写到原型对象身上   节约了内存
    Star.prototype.sing = function () {
      console.log('唱歌')
    }
    const ldh = new Star('刘德华', 55)
    const zxy = new Star('张学友', 58)
    ldh.sing() //调用
    zxy.sing() //调用
    // console.log(ldh === zxy)  // false
    console.log(ldh.sing === zxy.sing)

    // console.dir(Star.prototype)
  </script>
</body>

</html>

前端学习——JS进阶 (Day3),前端,学习,javascript
前端学习——JS进阶 (Day3),前端,学习,javascript
前端学习——JS进阶 (Day3),前端,学习,javascript
前端学习——JS进阶 (Day3),前端,学习,javascript

原型

前端学习——JS进阶 (Day3),前端,学习,javascript
前端学习——JS进阶 (Day3),前端,学习,javascript
前端学习——JS进阶 (Day3),前端,学习,javascript
练习
前端学习——JS进阶 (Day3),前端,学习,javascript

<!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>
    // 自己定义 数组扩展方法  求和 和 最大值 
    // 1. 我们定义的这个方法,任何一个数组实例对象都可以使用
    // 2. 自定义的方法写到  数组.prototype 身上
    // 1. 最大值
    const arr = [1, 2, 3]
    Array.prototype.max = function () {
      // 展开运算符
      return Math.max(...this)
      // 原型函数里面的this 指向谁? 实例对象 arr
    }
    // 2. 最小值
    Array.prototype.min = function () {
      // 展开运算符
      return Math.min(...this)
      // 原型函数里面的this 指向谁? 实例对象 arr
    }
    console.log(arr.max())
    console.log([2, 5, 9].max())
    console.log(arr.min())
    // const arr = new Array(1, 2)
    // console.log(arr)
    // 3. 求和 方法 
    Array.prototype.sum = function () {
      return this.reduce((prev, item) => prev + item, 0)
    }
    console.log([1, 2, 3].sum())
    console.log([11, 21, 31].sum())
  </script>
</body>

</html>

constructor 属性

前端学习——JS进阶 (Day3),前端,学习,javascript
前端学习——JS进阶 (Day3),前端,学习,javascript

<!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>
    // constructor  单词 构造函数

    // Star.prototype.sing = function () {
    //   console.log('唱歌')
    // }
    // Star.prototype.dance = function () {
    //   console.log('跳舞')
    // }
    function Star() {
    }
    // console.log(Star.prototype)
    Star.prototype = {
      // 从新指回创造这个原型对象的 构造函数
      constructor: Star,
      sing: function () {
        console.log('唱歌')
      },
      dance: function () {
        console.log('跳舞')
      },
    }
    console.log(Star.prototype)
    // console.log(Star.prototype.constructor)

    // const ldh = new Star()
    // console.log(Star.prototype.constructor === Star)
  </script>
</body>

</html>

前端学习——JS进阶 (Day3),前端,学习,javascript

对象原型

前端学习——JS进阶 (Day3),前端,学习,javascript
前端学习——JS进阶 (Day3),前端,学习,javascript
前端学习——JS进阶 (Day3),前端,学习,javascript
前端学习——JS进阶 (Day3),前端,学习,javascript

原型

原型继承

前端学习——JS进阶 (Day3),前端,学习,javascript
前端学习——JS进阶 (Day3),前端,学习,javascript
前端学习——JS进阶 (Day3),前端,学习,javascript
前端学习——JS进阶 (Day3),前端,学习,javascript

<!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>
    // 继续抽取   公共的部分放到原型上
    // const Person1 = {
    //   eyes: 2,
    //   head: 1
    // }
    // const Person2 = {
    //   eyes: 2,
    //   head: 1
    // }
    // 构造函数  new 出来的对象 结构一样,但是对象不一样
    function Person() {
      this.eyes = 2
      this.head = 1
    }
    // console.log(new Person)
    // 女人  构造函数   继承  想要 继承 Person
    function Woman() {

    }
    // Woman 通过原型来继承 Person
    // 父构造函数(父类)   子构造函数(子类)
    // 子类的原型 =  new 父类  
    Woman.prototype = new Person()   // {eyes: 2, head: 1} 
    // 指回原来的构造函数
    Woman.prototype.constructor = Woman

    // 给女人添加一个方法  生孩子
    Woman.prototype.baby = function () {
      console.log('宝贝')
    }
    const red = new Woman()
    console.log(red)
    // console.log(Woman.prototype)
    // 男人 构造函数  继承  想要 继承 Person
    function Man() {

    }
    // 通过 原型继承 Person
    Man.prototype = new Person()
    Man.prototype.constructor = Man
    const pink = new Man()
    console.log(pink)
  </script>
</body>

</html>

原型链

前端学习——JS进阶 (Day3),前端,学习,javascript
前端学习——JS进阶 (Day3),前端,学习,javascript文章来源地址https://www.toymoban.com/news/detail-588228.html

<!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 Objetc() {}
    console.log(Object.prototype)
    console.log(Object.prototype.__proto__)

    function Person() {

    }
    const ldh = new Person()
    // console.log(ldh.__proto__ === Person.prototype)
    // console.log(Person.prototype.__proto__ === Object.prototype)
    console.log(ldh instanceof Person)
    console.log(ldh instanceof Object)
    console.log(ldh instanceof Array)
    console.log([1, 2, 3] instanceof Array)
    console.log(Array instanceof Object)
  </script>
</body>

</html>

到了这里,关于前端学习——JS进阶 (Day3)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 前端|Day3:CSS基础(黑马笔记)

    层叠样式表 (Cascading Style Sheets,缩写为 CSS),是一种 样式表 语言,用来 描述 HTML 文档的呈现 ( 美化内容 )。 书写位置: title 标签下方添加 style 双标签,style 标签里面书写 CSS 代码 。 提示:属性名和属性值成对出现 → 键值对。 内部 样式表:学习使用 CSS 代码写在 sty

    2024年02月21日
    浏览(41)
  • Web 前端进阶—— JS 学习笔记

    目录 一、JavaScript提升篇 1、什么是跨域? 2、什么是原型? 3、什么是闭包? 4、如何防抖? 5、TCP的三次握手和四次挥手 6、new 操作符原理 7、事件委托做了什么 8、事件代理是什么 9、Eventloop 10、 如何实现跨域 11、写出原生 Ajax 12、暂时性死区是什么 13 、promise 解决回调陷阱的

    2024年04月26日
    浏览(35)
  • 微服务学习Day3

    2024年02月20日
    浏览(41)
  • python系统学习Day3

    python函数的参数共有五种类型 参数定义的顺序必须是:必选参数, 默认参数, 可变参数, 命名参数, 参数 理解起来有两种分类方式:普通参照位置的参数/、 / 参数, 固定个数的参数 / 可变参数。 位置参照在前,固定个数在前。 部分类型可指定默认值

    2024年02月19日
    浏览(43)
  • 【剑指offer】学习计划day3

      目录 一. 前言  二.替换空格         a.题目          b.题解分析           c.AC代码 三. 左旋转字符串          a.题目         b.题解分析         c.AC代码   本系列是针对Leetcode中剑指offer学习计划的记录与思路讲解。详情查看以下链接: 剑指offer-学习计划htt

    2024年02月13日
    浏览(97)
  • 【C++】day3学习成果:类

    1.自行封装一个栈的类,包含私有成员属性:栈的数组、记录栈顶的变量 成员函数完成:构造函数、析构函数、拷贝构造函数、入栈、出栈、清空栈、判空、判满、获取栈顶元素、求栈的大小 头文件stack.h: 源文件stack.cpp: 主函数main.cpp: 运行结果: 2.自行封装一个循环顺序队列

    2024年02月09日
    浏览(42)
  • 学习笔记Day3:数据框、矩阵和列表

    要经常检查代码生成的结果,警惕不报错的错误 向量:一维 表格:二维 列表:三维 判断数据结构:class()或is族函数判断,或根据其生成的函数来判断 二维,每列只允许一种数据类型 数据框来源 用代码新建 由已有数据转换或处理得到 读取表格文件 R语言内置数据(iris,

    2024年03月11日
    浏览(79)
  • [前端系列第3弹]JS入门教程:从零开始学习JavaScript

    本文将带领大家,从零开始学习JavaScript,fighting~ 目录 一、JavaScript简介 二、变量和数据类型 三、注释和分号 四、算术运算符 五、表达式和语句 六、代码块和作用域 七、函数(最重要)          JavaScript(简称JS)是一种运行在浏览器中的脚本语言,它可以让网页变得

    2024年02月13日
    浏览(65)
  • Verilog数据类型/常量/变量[学习笔记day3]

    1 数据类型 数据类型是用来表示数字电路中的 数据存储 和 传递单元 。 Verilog HDL中共有19种数据类型,其中 最基本的有4种 : 常:integer型 parameter型 变:reg型 wire型 其他:large, medium, scalared, small, time, tri, tri0, tri1, triand, trior, trireg, vectored, wand, wor等。 2 常量 在程序运行过程中

    2024年02月05日
    浏览(44)
  • 黑马头条项目学习--Day3: 自媒体文章发布

    自媒体后台搭建 ①:资料中找到heima-leadnews-wemedia.zip解压 拷贝到heima-leadnews-service工程下,并指定子模块 执行leadnews-wemedia.sql脚本 添加对应的nacos配置 ②:资料中找到heima-leadnews-wemedia-gateway.zip解压 拷贝到heima-leadnews-gateway工程下,并指定子模块 添加对应的nacos配置 图片上传的

    2024年02月13日
    浏览(67)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包