• 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 关键字调用，那么这个函数就是构造函数。

     

    总结：

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

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

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

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


       1、 创建对象


        
        1.字面量对象

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

        2.new Object
      

    1.  // const obj = new 0bject({ uname: 'John' , age: 20 })
    2.  
    3.     const obj = new 0bject( )
    4.     obj.uname = 'John'
    5.     obj.age = 20
    6.     console.log(obj)


     

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

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

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

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

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

    1.  //  定义学生构造函数
    2.       function Student() {
    3.         // 添加属性
    4.         this.school = '大前端学院'
    5.         this.age = 18
    6.       }ƒ
    7.       // 基于Student构造函数创建对象
    8.       const s1 = new Student()
    9.       const s2 = new Student()
    10.       console.log(s1)
    11.       console.log(s2)

    调用
        const s1=new Student( )

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

    2、new执行过程

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

    1.  //  定义学生构造函数
    2.       function Student() {
    3.   
    4.         this.school = '大前端学院'
    5.         this.age = 18
    6.         this.sayHi = function () {
    7.           console.log('sayHi')
    8.         }
    9.       
    10.       }
    11.   
    12.  
    13.     
    14.       const s1 = new Student()
    15.       console.log(s1)
    16.       s1.sayHi()
    17.       const s2 = new Student // 无参数 小括号可省略
    18.       console.log(s2)

     3、带参数构造函数

    1.    function Student(age){
    2.             this.name='张三'
    3.             this.age=age
    4.             this.speek=function() {
    5.                 console.log('speek')
    6.             }
    7.         }
    8.         const s1=new Student(20)
    9.         console.log(s1)
    10.         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)

    1. DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.   head>
    9.   <body>
    10.     <script>
    11.       // 实例(对象) new出来的对象叫实例对象 new过程即实例化对象过程
    12.       // 实例成员指的是new出来的对象中的属性或方法
    13.       function Student(age) {
    14.         // 添加属性 this===创建出来的对象
    15.         this.school = '大前端学院'
    16.         this.age = age
    17.         this.sayHi = function () {
    18.           console.log('sayHi')
    19.         }
    20.       }
    21.       // school age sayHi 都叫实例成员
    22.       const s1 = new Student(19)
    23.       console.log(s1.school)
    24.  
    25.       // 静态成员 通过构造函数.属性  = 值
    26.       // 通过构造函数.属性去访问 
    27.       Student.nation = 'china'
    28.       console.log(Student.nation)
    29.  
    30.       // Date.now() 静态方法
    31.     script>
    32.   body>
    33. html>

    总结：

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

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

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

     

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

    总结：

    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(复制的对象，复制的源对象...)
     

    1. DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <title>Documenttitle>
    8.   head>
    9.   <body>
    10.     <script>
    11.       const obj = {
    12.         name: '华为p60 pro',
    13.         price: 6999,
    14.         color: 'purple',
    15.       }
    16.       // ['name', 'price', 'color']
    17.       //  ['华为p60 pro',6999,'purple']
    18.       // const keys = []
    19.       // const values = []
    20.       // for (let k in obj) {
    21.       //   keys.push(k)·  
    22.       //   values.push(obj[k])
    23.       // }
    24.       // console.log(keys, values)
    25.  
    26.       const keys = Object.keys(obj) // 获取所有属性组成的数组
    27.       const values = Object.values(obj) //  获取所有属性值组成的数组
    28.       console.log(keys, values)
    29.  
    30.       console.log(values.join('-'))
    31.  
    32.       //   Object.assign -> ES6新增方法
    33.       const o = {}
    34.       const o1 = { name: 'longge' }
    35.       const o2 = { age: 18 }
    36.       // o1 o2 源对象
    37.       //  assign实现对象的拷贝
    38.       const r = Object.assign(o, o1, o2)
    39.       console.log(o)
    40.     script>
    41.   body>
    42. html>

    总结：

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

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

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

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

     

     2、包装类型

    1. const str = 'hello'   //const str = new String( 'hello ')
    2. 	//[]-> new Array ( )
    3. 	const r = str.substring(1)// str.substring(1)   str = null
    4. 	console.log(r)

    3、Array

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

    数组的方法

    1、map方法  

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

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

     

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

    2、find方法

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

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

     


    3、findIndex( ) 


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

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

     


    4、some与every

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

      

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


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

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

     


    5、reverse()

     翻转数组

        对原数组进行翻转

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

        第一次 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循环
     

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

     


    forEach没有返回值   影响原数组

    8、filter( )

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

      

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


     

  • 相关阅读:
    【cmake实战九】cmake常用指令
    Leetocde35-搜索插入位置
    【开发教程5】开源蓝牙心率防水运动手环-电池电量检测
    Protocol Buffers语法
    从零开始学JAVA（03）：流程控制语句
    行深智能亮相乌镇互联网大会，荣获直通乌镇全球互联网大赛一等奖
    javaee ssm框架项目添加分页控件
    问题：在额定电压500V以下的电路中,使用的各种用电设备,一般称为（_ _ _)用电设备 #媒体#媒体#媒体
    python经典百题之求前！的和
    【动力节点】最新rabbitmq笔记-1-6章What is RabbitMQ？
  • 原文地址：https://blog.csdn.net/m0_56713342/article/details/134516574