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)
相关推荐
码蜂窝编程官方23 分钟前
【含开题报告+文档+PPT+源码】基于SpringBoot+Vue的虎鲸旅游攻略网的设计与实现
java·vue.js·spring boot·后端·spring·旅游
旭日猎鹰33 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
花海少爷1 小时前
第十章 JavaScript的应用课后习题
开发语言·javascript·ecmascript
sinat_384241092 小时前
在有网络连接的机器上打包 electron 及其依赖项,在没有网络连接的机器上安装这些离线包
javascript·arcgis·electron
小牛itbull2 小时前
ReactPress vs VuePress vs WordPress
开发语言·javascript·reactpress
请叫我欧皇i2 小时前
html本地离线引入vant和vue2(详细步骤)
开发语言·前端·javascript
533_2 小时前
[vue] 深拷贝 lodash cloneDeep
前端·javascript·vue.js
GIS瞧葩菜3 小时前
局部修改3dtiles子模型的位置。
开发语言·javascript·ecmascript