深入对象&内置构造函数——学习笔记

_Ezra

已于 2024-05-13 00:29:35 修改

阅读量1.7k

点赞数 43

文章标签： javascript

于 2024-05-13 00:28:31 首次发布

本文链接：https://blog.csdn.net/From_Ezra/article/details/135116537

版权

1.深入对象

1.1 创建对象三种方式

1.利用对象字面量创建对象

2.利用 new Object 创建对象

3.利用构造函数创建对象

1.2 构造函数

构造函数：主要用来初始化对象

使用场景：常规的创建对象是只创建一个对象。如果我们创建了佩奇的对象，还需要创建乔治的对象，其属性都是一样的，但还需要重新写一遍，此时就可以通过构造函数来快速创建多个元素

构造函数在技术上是常规函数。

不过有两个约定： 1. 它们的命名以大写字母开头。 2. 它们只能由 "new" 操作符来执行。

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

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

3. 构造函数内部无需写return，返回值即为新创建的对象

4. 构造函数内部的 return 返回的值无效，所以不要写return

5. new Object（） new Date（）也是实例化构造函数

总结：

1. 构造函数的作用是什么？怎么写呢？

 构造函数是来快速创建多个类似的对象  大写字母开头的函数

2. new 关键字调用函数的行为被称为？

 实例化

3. 构造函数内部需要写return吗，返回值是什么？

 不需要  构造函数自动返回创建的新的对象

实例化执行过程

说明：

1. 创建新对象 只要new了，就会创建一个新对象

2. 构造函数this指向新对象 this指向 new的这个对象

3. 执行构造函数代码，修改this，添加新的属性

4. 返回新对象

1.3 实例成员&静态成员

实例成员：

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

说明：

1.实例对象的属性和方法即为实例成员

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

3.构建函数创建的对象彼此独立互不影响

静态成员

构造函数的属性和方法被称为静态成员

说明:

1.构造函数的属性和方法被称为静态成员

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

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

1. 什么是实例成员？

 实例对象(通过构造函数创建的对象)的属性和方法即为实例成员

2. 什么是静态成员？

 构造函数的属性和方法被称为静态成员

2.内置构造函数

在JavaScript中最主要的数据类型有6种：

基本数据类型：字符串，数值，布尔，undefined，null

引用类型（复杂数据类型）：对象

但是，有些特殊情况：

// 普通字符串
const str = 'andy'
console.log(str.length)  // 4


const str = 'pink'
 // JS 底层完成，把简单数据类型包装为了引用数据类型（复杂数据类型）
const str = new String('pink')  //构造函数 实例化

其实字符串，数值，布尔等基本类型也有专门的构造函数，这些我们称之为包装类型

JS中几乎所有的数据都可以基于构成函数创建

引用类型：Object, Array, RegExp, Date 等

包装类型：String, Number, Boolean 等

2.1 Object

Object 是内置的构造函数，用于创建普通对象

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

补充:

let user = {}             // “字面量”的语法
let user = new Object     // “构造函数”的语法

①Object.keys 静态方法

作用：获取对象中所有的属性（键）

语法：

注意：返回的是一个数组

②Object.values 静态方法

作用：获取对象中所有的属性值

语法:

注意：返回的是一个数组

③Object.assign 静态方法

作用: 常用于对象拷贝

使用:经常使用的场景给对象添加属性

语法:

const o = { name: '佩奇'， age: 6 }
const obj = {}
Object.assign(obj, o)  // 拷贝对象 把 o 拷贝给 obj （即 把小括号里面的第一个看成是容器，把第二个的内容拷贝到第一个里面）
console.log(obj)   //{ name: '佩奇'， age: 6 }

1. 什么是静态方法？  只能给构造函数使用的方法比如 Object.keys()

2. Object.keys()方法的作用是什么？

 获取对象中所有属性（键）

3. Object.values()方法的作用是什么？

 获取对象中所有属性值（值）

2.2 Array

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

1.数组常见实例方法：

方法	作用	说明
forEach	遍历数组	不返回，用于不改变值，经常用于查找打印输出值
filter	过滤数组	筛选数组元素，并生成新数组
map	迭代数组	返回新数组，新数组里面的元素是处理之后的值，经常用于处理数据
reduce	累计器	返回函数累计处理的结果，经常用于求和

reduce 方法

作用:返回函数累计处理的结果，经常用于求和等

使用场景：

循环过程：

    const arr = [{
      name: '张三',
      salary: 10000
    }, {
      name: '李四',
      salary: 10000
    }, {
      name: '王五',
      salary: 10000
    },
    ]

    //  计算薪资案例
    const total1 = arr.reduce((prev, current) => {
      return prev + current.salary
    }, 0)
    console.log(total1)

    // reduce循环过程：
    // 上一次值      当前值         返回值
    //    0         10000          10000（第一次遍历）
    //  10000       10000          20000（第二次遍历）
    //  20000       10000          30000（第三次遍历）

    // 需求：  每个人涨薪30%， 当月支出多少薪资
    const total2 = arr.reduce((prev, current) => prev + current.salary * 1.3, 0)
    console.log(total2)

2.数组常用方法- 伪数组转换为真数组

静态方法 Array.from()

<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
  <script>
    const lis = document.querySelectorAll('ul li')  //返回一个伪数组
    // console.log(lis)
    const liss = Array.from(lis)  //将伪数组转换为真数组

    // 真数组可以使用数组方法，伪数组不能使用
    liss.pop()  //删除最后一个元素
    console.log(liss)
  </script>
</body>