当前位置：首页 > news >正文

js进阶笔记之构造函数

news 2026/2/21 6:41:11

一、构造函数

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>

总结：

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

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

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

构造函数内部的 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>

总结：

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

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

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

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

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

总结：

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

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

静态成员方法中的 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>

总结：

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

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

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

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)

一、构造函数

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( )

相关文章：

1、创建对象