js进阶笔记之构造函数

目录

一、构造函数

[1、 创建对象](#1、 创建对象)

2、new执行过程

3、带参数构造函数

4、实例成员与静态成员

二、内置构造函数

1、Object静态方法

2、包装类型

3、Array

1、map方法

2、find方法

[3、findIndex( )](#3、findIndex( ))

4、some与every

5、reverse()

6、reduce方法

[7、forEach() 方法](#7、forEach() 方法)

[8、filter( )](#8、filter( ))


一、构造函数

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

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

总结:

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

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

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

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

1、 创建对象

1.字面量对象

javascript 复制代码
    const obj = { uname: 'John' , age: 20 }

2.new Object

javascript 复制代码
 // const obj = new 0bject({ uname: 'John' , age: 20 })

    const obj = new 0bject( )
    obj.uname = 'John'
    obj.age = 20
    console.log(obj)

3.通过构造函数(自定义)创建

构造函数--->1.构造出对象的函数,

2.将来通过new调用

3.构造函数名首字母建议大写

内置内构函数(Array,Date,Object)

自定义构造函数

定义学生构造函数

function Student( ) {

//添加属性 this===创建出来的对象

this.属性名=属性值

this.方法名=funcion() { }

//不需要写return,默认会返回this,假如显示指定return

// return基本类型会被忽略, return引用类型将来new得到的也是该引用类型

//return [ ]

}

javascript 复制代码
 //  定义学生构造函数
      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.返回这个对象

javascript 复制代码
 //  定义学生构造函数
      function Student() {
  
        this.school = '大前端学院'
        this.age = 18
        this.sayHi = function () {
          console.log('sayHi')
        }
      
      }
  

    
      const s1 = new Student()
      console.log(s1)
      s1.sayHi()
      const s2 = new Student // 无参数 小括号可省略
      console.log(s2)

3、带参数构造函数

javascript 复制代码
   function Student(age){
            this.name='张三'
            this.age=age
            this.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)

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>
      // 实例(对象) new出来的对象叫实例对象 new过程即实例化对象过程
      // 实例成员指的是new出来的对象中的属性或方法
      function Student(age) {
        // 添加属性 this===创建出来的对象
        this.school = '大前端学院'
        this.age = age
        this.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 中底层函数本质上也是对象类型,因此允许直接为函数动态添加属性或方法,构造函数的属性和方法被称为静态成员。

javascript 复制代码
<script>
  // 构造函数
  function Person(name, age) {
    // 省略实例成员
  }
  // 静态属性
  Person.eyes = 2
  Person.arms = 2
  // 静态方法
  Person.walk = function () {
    console.log('^_^人都会走路...')
    // this 指向 Person
    console.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(复制的对象,复制的源对象...)

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 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、包装类型

javascript 复制代码
const str = 'hello'   //const str = new String( 'hello ')
	//[]-> new Array ( )
	const r = str.substring(1)// str.substring(1)   str = null
	console.log(r)

3、Array

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

数组的方法

1、map方法

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

javascript 复制代码
    arr.map(function( item,index, arr) {
    
    // item -数组每一个元素
    //index -数组元素的索引
    / / arr-----原数组

    })
javascript 复制代码
  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

返回的是满足条件的元素

javascript 复制代码
    arr.find ( function ( item, index , arr) {

    })
javascript 复制代码
 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( ) 只能找具体的值

javascript 复制代码
    arr.findIndex ( function ( item, index , arr) {

    })
javascript 复制代码
    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

javascript 复制代码
  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,

javascript 复制代码
     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()

翻转数组

对原数组进行翻转

javascript 复制代码
 const arr=[1,2,3,4,5,6]
 console.log(arr.reverse())//[6, 5, 4, 3, 2, 1]
6、reduce方法
javascript 复制代码
    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循环

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

    })
 console.log(sum)//95

forEach没有返回值 影响原数组

8、filter( )

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

javascript 复制代码
  const newArr = arr.filter(function (item,index) {
    return item > 9
    })
    console.log( newArr)
相关推荐
丫丫72373417 小时前
Raycaster(鼠标点击选中模型)
javascript·webgl
北慕阳17 小时前
选择采购单按钮
前端·javascript·数据库
华仔啊17 小时前
Vite 到底能干嘛?为什么 Vue3 官方推荐它做工程化工具?
前端·javascript·vue.js
悟能不能悟17 小时前
目前流行的前端框架
开发语言·javascript·ecmascript
计算机学姐17 小时前
基于Python的智能点餐系统【2026最新】
开发语言·vue.js·后端·python·mysql·django·flask
赵庆明老师17 小时前
NET 中深度拷贝一个对象
前端·javascript·ui
北友舰长17 小时前
基于Springboot+vue大型商场应急预案管理系统的设计与实现【Java毕业设计·安装调试·代码讲解·文档报告】
java·vue.js·spring boot·mysql·商场·应急处理·应急
馬致远17 小时前
Vue 脚手架&环境配置
前端·javascript·vue.js
syt_101317 小时前
grid布局之-子项放置1
前端·javascript·css
一字白首17 小时前
Vue 项目实战,从组件缓存到 Vant UI 集成:项目初始化全流程
vue.js·ui·缓存