js进阶笔记之构造函数

目录

一、构造函数

   1、 创建对象

2、new执行过程

 3、带参数构造函数

4、实例成员与静态成员

二、内置构造函数

1、Object静态方法

 2、包装类型

3、Array

1、map方法  

2、find方法

3、findIndex( ) 

4、some与every

5、reverse()

6、reduce方法     

7、forEach() 方法

8、filter( )

一、构造函数

构造函数是专门用于创建对象的函数，如果一个函数使用 new 关键字调用，那么这个函数就是构造函数。

<script>// 定义函数function foo() {console.log('通过 new 也能调用函数...');}// 调用函数new foo;
</script>

 

总结：

  1. 使用 new 关键字调用函数的行为被称为实例化

  2. 实例化构造函数时没有参数时可以省略 ()

  3. 构造函数的返回值即为新创建的对象

  4. 构造函数内部的 return 返回的值无效！


   1、 创建对象


    
    1.字面量对象

    const obj = { uname: 'John' , age: 20 }

    2.new Object
  

 // const obj = new 0bject({ uname: 'John' , age: 20 })const obj = new 0bject( )obj.uname = 'John'obj.age = 20console.log(obj)


 

    3.通过构造函数（自定义）创建

    构造函数--->1.构造出对象的函数，
             2.将来通过new调用
             3.构造函数名首字母建议大写
 

内置内构函数（Array,Date,Object)
    自定义构造函数

    定义学生构造函数
    function Student( ) {
    //添加属性    this===创建出来的对象
    this.属性名=属性值
    this.方法名=funcion() {  }

    //不需要写return，默认会返回this，假如显示指定return
    // return基本类型会被忽略, return引用类型将来new得到的也是该引用类型 
    //return [  ]
    
    }
 

 //  定义学生构造函数function Student() {// 添加属性this.school = '大前端学院'this.age = 18}ƒ// 基于Student构造函数创建对象const s1 = new Student()const s2 = new Student()console.log(s1)console.log(s2)

调用
    const s1=new Student( )

    无参数时  小括号可以省略
    const s1=new Student

2、new执行过程

new 关键字来调用构造函数-->得到一个对象
    1.实际参数传递给形式参数
    2.内部先创建一个空对象 {  }，并且让this指向该空对象
    3.执行函数体
    4.返回这个对象

 //  定义学生构造函数function Student() {this.school = '大前端学院'this.age = 18this.sayHi = function () {console.log('sayHi')}}const s1 = new Student()console.log(s1)s1.sayHi()const s2 = new Student // 无参数 小括号可省略console.log(s2)

 3、带参数构造函数

   function Student(age){this.name='张三'this.age=agethis.speek=function() {console.log('speek')}}const s1=new Student(20)console.log(s1)console.log(s1.age)

4、实例成员与静态成员

通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。

实例(对象)   new出来的对象叫实例对象    new过程即实例化对象过程

    实例成员指的是new出来的对象中的属性或方法
    访问：对象 . 属性名
     school age sayHi 都叫实例成员
    const s1 = new Student( 19)
    console.log(s1.school)

    静态成员   通过构造函数.属性=值
    通过构造函数.属性去访问    

    Student.nation = 'china'
      console.log ( Student.nation)

<!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>// 实例(对象) new出来的对象叫实例对象 new过程即实例化对象过程// 实例成员指的是new出来的对象中的属性或方法function Student(age) {// 添加属性 this===创建出来的对象this.school = '大前端学院'this.age = agethis.sayHi = function () {console.log('sayHi')}}// school age sayHi 都叫实例成员const s1 = new Student(19)console.log(s1.school)// 静态成员 通过构造函数.属性  = 值// 通过构造函数.属性去访问 Student.nation = 'china'console.log(Student.nation)// Date.now() 静态方法</script></body>
</html>

总结：

  1. 构造函数内部 this 实际上就是实例对象，为其动态添加的属性和方法即为实例成员

  2. 为构造函数传入参数，动态创建结构相同但值不同的对象

注：构造函数创建的实例对象彼此独立互不影响。

 

在 JavaScript 中底层函数本质上也是对象类型，因此允许直接为函数动态添加属性或方法，构造函数的属性和方法被称为静态成员。

<script>// 构造函数function Person(name, age) {// 省略实例成员}// 静态属性Person.eyes = 2Person.arms = 2// 静态方法Person.walk = function () {console.log('^_^人都会走路...')// this 指向 Personconsole.log(this.eyes)}
</script>

总结：

  1. 静态成员指的是添加到构造函数本身的属性和方法

  2. 一般公共特征的属性或方法静态成员设置为静态成员

  3. 静态成员方法中的 this 指向构造函数本身

 

 

二、内置构造函数

内置的构造函数：Array   Object    Date    String    Number
    Function  创建函数


静态方法：Object.keys()
    Object.values()
    Object.assign()
    Array.isArray()
    Date.now()
    Array.from()

1、Object静态方法

Object.keys(obj)  获取所有属性组成的数组

 0bject.values(obj)        获取所有属性值组成的数组
 
    Object.assign ->ES6新增方法
    可以对多个元对象进行复制

    Object.assign(复制的对象，复制的源对象...)
 

<!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 obj = {name: '华为p60 pro',price: 6999,color: 'purple',}// ['name', 'price', 'color']//  ['华为p60 pro',6999,'purple']// const keys = []// const values = []// for (let k in obj) {//   keys.push(k)·  //   values.push(obj[k])// }// console.log(keys, values)const keys = Object.keys(obj) // 获取所有属性组成的数组const values = Object.values(obj) //  获取所有属性值组成的数组console.log(keys, values)console.log(values.join('-'))//   Object.assign -> ES6新增方法const o = {}const o1 = { name: 'longge' }const o2 = { age: 18 }// o1 o2 源对象//  assign实现对象的拷贝const r = Object.assign(o, o1, o2)console.log(o)</script></body>
</html>

总结：

  1. 推荐使用字面量方式声明对象，而不是 Object 构造函数

  2. Object.assign 静态方法创建新的对象

  3. Object.keys 静态方法获取对象中所有属性

  4. Object.values 表态方法获取对象中所有属性值

 

 2、包装类型

const str = 'hello'   //const str = new String( 'hello ')//[]-> new Array ( )const r = str.substring(1)// str.substring(1)   str = nullconsole.log(r)

3、Array

Array 是内置的构造函数，用于创建数组  

数组的方法

1、map方法  

 高阶函数----函数的参数接受一个函数或返回值是函数的函数

    arr.map(function( item,index, arr) {// item -数组每一个元素//index -数组元素的索引/ / arr-----原数组})
  const arr=[10,20,30,40]const newArray=arr.map(function(item,index,arr){return item*2})console.log(newArray)//[20, 40, 60, 80]

 

map  映射   
    变异方法
      map对原数组循环，每次函数返回值会放入新数组中
      map不影响原数组

2、find方法

    find( ) 查找满足条件的第一个元素，  找到就返回该元素，找不到是undefined
    返回的是满足条件的元素

    arr.find ( function ( item, index , arr) {})
 const arr=[1,3,7,8,4,2,9,3,6,8]const ele=arr.find(function(item,index,arr){return item===3})console.log(ele)//3

 


3、findIndex( ) 


findIndex( )   查找满足条件的第一个元素的索引，找到就返回该元素的索引，找不到是-1
indexOf( ) 只能找具体的值

    arr.findIndex ( function ( item, index , arr) {})
    const arr=[22,34,66,22,6,7,9,0,6]const index=arr.findIndex(function(item,index,arr){return item===6})console.log(index)//4

 


4、some与every

    some对数组进行循环，发现满足条件的第一个元素则循环结束返回true,  假如所有元素不满足返回false

  

  const arr = [1,-3，20，9,11，12]//数组中是否含有偶数的元素const flag = arr.some(function (item) {return item % 2 === 0})console.log(flag)//true


every对数组进行循环，所有元素都满足返回true,假如遇到第一个不满足的元素结束，返回false,

     const arr=[3,6,8,9,-3,-6,9]const flag = arr.every(function (item) {console.log(item)return item > -9})console.log(flag)//true

 


5、reverse()

 翻转数组

    对原数组进行翻转

 const arr=[1,2,3,4,5,6]console.log(arr.reverse())//[6, 5, 4, 3, 2, 1]
6、reduce方法     
    const arr = [1,2，3，4]arr.reduce( function (prev,current,index, arr) {console.log( prev,current, index)return prev + current})

    第一次 prev指向第一个元素， current指向第二个元素， index是current指向的元素的下标
    第二次prev代表上一次函数返回值，current继续指向下一个元素
    ... .
    最后一次函数的返回值作为reduce最终的结果

    /*
    prev->1 current->2 return 3
    prev->3 current->3 return 6
    prev->6 current->4return 10
    */

arr.reduce(function(prev , current) { }，初始值）
记忆:指定初始值，prev第一次就指向该初始值，以后的prev是上一次函数返回值, current指向第一个元素
      没有指定初始值，prev第一次就指向数组第一个元素,current指向第二个元素,以后的prev是上一次函数返回值


7、forEach() 方法


    forEach代替for循环
 

   arr.forEach(function (item,index, arr) {console.log(item)})
    const arr=[2,4,6,8,9,44,22]let sum=0arr.forEach(function(item){sum+=item})console.log(sum)//95

 


forEach没有返回值   影响原数组

8、filter( )

过滤  把符合条件的元素组成一个新数组

  

  const newArr = arr.filter(function (item,index) {return item > 9})console.log( newArr)


 

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

wget 对整站内容进行爬取

wget 对整站内容进行爬取

如果你想对站点内容进行爬虫&#xff0c;还有一条最简洁的系统原生命令可以搞定&#xff1a; wget --random-wait -r -p -e robotsoff -U mozilla https://example.com/ 加上 -nv 或 --no-verbose 参数后&#xff0c;输出的内容会变得更加简洁&#xff1b; 加上 --accept-re…
阅读更多...
DrugMAP: molecular atlas and pharma-information of all drugs学习

DrugMAP: molecular atlas and pharma-information of all drugs学习

DrugMAP&#xff1a;所有药物的分子图谱和制药信息 - PMC (nih.gov) DrugMAP: the molecular atlas and pharma-information of drugs (idrblab.net) 构建了一个描述药物分子图谱和药物信息的新数据库&#xff08;DrugMAP&#xff09;。它提供了>30 000种药物/候选药物的相…
阅读更多...
bash: ./configure: /bin/sh^M: bad interpreter: No such file or directory

bash: ./configure: /bin/sh^M: bad interpreter: No such file or directory

问题背景&#xff1a; 在linux上编译Qt时&#xff0c;遇到这个问题 “bash: ./configure: /bin/sh^M: bad interpreter: No such file or directory” 问题原因&#xff1a; Qt的configure文件是在windows上写的&#xff0c;现在是在ubuntu上进行编译。而linux和windows在换…
阅读更多...
数字化转型导师坚鹏：数字化时代银行网点厅堂营销5大难点分析

数字化转型导师坚鹏：数字化时代银行网点厅堂营销5大难点分析

数字化时代银行网点厅堂营销存在以下5大难点&#xff1a; 1、识别难。识别有效的客户比较难&#xff0c;传统的厅堂识别主要依据客户的衣着气质等主管感受&#xff0c;判断客户是否为潜在中高端客户&#xff0c;提供相关服务。大堂经理主管识别与智能化系统识别相结合&#xf…
阅读更多...
C++单调向量算法：132 模式解法三枚举1

C++单调向量算法：132 模式解法三枚举1

本题不同解法 包括题目及代码C二分查找算法&#xff1a;132 模式解法一枚举3C二分查找算法&#xff1a;132 模式解法二枚举2代码最简洁C二分查找算法&#xff1a;132 模式解法三枚举1性能最佳C单调向量算法&#xff1a;132 模式解法三枚举1 分析 时间复杂度 2轮循环时间复杂…
阅读更多...
如何选择适合的开源框架来构建微服务架构？

如何选择适合的开源框架来构建微服务架构？

随着科技的飞速发展&#xff0c;云计算和大规模应用的需求日益显著&#xff0c;这促使微服务架构在软件开发领域中占据了主流地位。微服务架构的广泛应用为开发人员提供了灵活性、可伸缩性和高可用性&#xff0c;从而推动了快速的应用程序开发。然而&#xff0c;在构建微服务架…
阅读更多...
NextJS开发：nextjs中使用CkEditor5

NextJS开发：nextjs中使用CkEditor5

NextJS项目中需要使用CkEditor5作为富文本编辑器&#xff0c;按照官网React CkEditor5手册使用出现如下错误&#xff1a; node_modules/ckeditor/ckeditor5-react/dist/index.js (5:242) eval⨯ ReferenceError: self is not defined还是因为nextjs的服务器端渲染造成的错误&…
阅读更多...
快速幂（c++，超级详细）

快速幂（c++，超级详细）

快速幂 如果我们打算求a^b, 我们可能会写一个for循环&#xff0c;乘以b次a&#xff0c;时间复杂度为O(b) 当b比较小的时候还可以运用&#xff0c;但是当b很大&#xff0c;比如b1000000,此时时间复杂度就显然很高了&#xff0c;我们需要对其进行优化 ———快速幂 开始之前&a…
阅读更多...
JDBC快速入门

JDBC快速入门

JDBC快速入门 PS&#xff1a;上传图片有点问题&#xff0c;我整理成了PDF格式&#xff0c;方便看图文。 今日目标 掌握JDBC的的CRUD理解JDBC中各个对象的作用掌握Druid的使用 1&#xff0c;JDBC概述 在开发中我们使用的是java语言&#xff0c;那么势必要通过java语言操作数据库…
阅读更多...
【ARM AMBA AXI 入门 14 -- AXI 窄位传输 | 非对齐传输| 大小端传输】

【ARM AMBA AXI 入门 14 -- AXI 窄位传输 | 非对齐传输| 大小端传输】

请阅读【ARM AMBA AXI 总线 文章专栏导读】 文章目录 窄位传输 (Narrow Transfer)非对齐传输 (Unaligned Transfer)大小端传输 (Endianness Transfer)ARM AMBA AXI (Advanced eXtensible Interface) 是一个高性能、高带宽的总线接口，常用于连接高速微处理器核心与其它部件。在…
阅读更多...
模拟电路总结

模拟电路总结

一、半导体器件 1.1 半导体的特性 导电性能介于导体和绝缘体之间。如&#xff1a;硅&#xff08;Si&#xff09;、锗&#xff08;Ge&#xff09; 1.1.1 本征半导体 纯净的、不含杂质的半导体 温度敏感&#xff1a;T0K时&#xff0c;绝缘&#xff1b;温度升高时&#xff0c;载流…
阅读更多...
Thinkphp-商城项目之oss文件上传及web端直传

Thinkphp-商城项目之oss文件上传及web端直传

4.3头像上传 一般商城网站都会把文件上传到第三方云&#xff0c;例如阿里云(oss)&#xff0c;腾讯云(cos)&#xff0c;当然如果公司有足够的实力&#xff0c;可以自己部署一台文件服务器&#xff0c;用于文件的保存。 头像上传一般是用户在用户中心上传的&#xff0c;后台管理…
阅读更多...
软件需求的三大层次，逐层细化的注意事项

软件需求的三大层次，逐层细化的注意事项

需求逐层分解和转化是一个持续优化的过程&#xff0c;在这个过程中&#xff0c;我们需要明确软件需求的三大层次&#xff0c;从而帮助项目团队理解组织或客户的高层目标和期望&#xff0c;满足用户的期望和需求&#xff0c;有助于产品的系统设计和开发。 一、软件需求三大层次 …
阅读更多...
【力扣的101夜】轮转数组

【力扣的101夜】轮转数组

public void rotate(int[] nums, int k) { } 用 Syst.arraycopy 五个参数是 System.arraycopy(nums, length - step, temp, 0, step); nums&#xff1a;源数组&#xff0c;即要从中复制元素的数组。length - step&#xff1a;源数组的起始位置&#xff0c;即从哪个索引开始复…
阅读更多...
坑惨啦！！！——符号冲突案例分析

坑惨啦！！！——符号冲突案例分析

背景 前段时间在北汽项目中&#xff0c;遇到了一个奇怪现象&#xff1a;程序启动之后&#xff0c;偶现运行一段时间后&#xff0c;crash&#xff0c;复现频率较高。困扰了大家较长时间。最终在和同事的不懈努力下&#xff0c;找到的根因&#xff0c;并找到了解决方法。过程中也…
阅读更多...
影视行业如何远程完整快速传输大文件？

影视行业如何远程完整快速传输大文件？

影视行业是一个充满创意和协作的领域。在影视制作中&#xff0c;涉及到多个环节和部门&#xff0c;包括编剧、导演、摄影、剪辑、配音、视效等。这些环节和部门通常分布在不同的地点&#xff0c;甚至不同的国家。因此&#xff0c;影视制作过程中需要频繁进行远程传输&#xff0…
阅读更多...
前后端-记录

前后端-记录

目录 ApiRESTful API Api api Application Programming Interface 应用程式界面 RESTful API rest Representational State Transfer 表现层状态转移&#xff0c;属于设计风格&#xff0c;不是强制标准 满足rest的 restful
阅读更多...
科技赋能，创新发展！英码科技受邀参加2023中国创新创业成果交易会

科技赋能，创新发展！英码科技受邀参加2023中国创新创业成果交易会

11月17日至19日&#xff0c;2023中国创新创业成果交易会&#xff08;简称&#xff1a;创交会&#xff09;在广州市广交会展馆圆满举行。英码科技受邀参加本届创交会&#xff0c;并在会场展示了创新性的AIoT产品、深元AI引擎和行业热门解决方案。 据介绍&#xff0c;本届创交会由…
阅读更多...
vscode编写verilog的插件【对齐、自动生成testbench文件】

vscode编写verilog的插件【对齐、自动生成testbench文件】

vscode编写verilog的插件&#xff1a; 插件名称&#xff1a;verilog_testbench,用于自动生成激励文件 安装教程&#xff1a;基于VS Code的Testbench文件自动生成方法——基于VS Code的Verilog编写环境搭建SP_哔哩哔哩_bilibili 优化的方法&#xff1a;https://blog.csdn.net…
阅读更多...
CMake 判断操作系统类型

CMake 判断操作系统类型

上回的CMakeLists.txt里面有一句，if (WIN32)......endif(WIN32)； 根据资料，这是判断操作系统是否是Windows； 下面单独看一下； 一个CMakeLists.txt文件如下； if(WIN32)# 如果是 Windowsmessage("当前操作系统为 Windows") elseif(UNIX AND NOT APPLE)# 如果…
阅读更多...
最新文章

Copyright @ 2022~2023