JavaScript——对象的构造函数

搜捕鸟了

已于 2023-03-25 20:00:01 修改

阅读量475

点赞数 1

分类专栏： JavaScript 文章标签： javascript 前端 java

于 2023-03-22 12:05:16 首次发布

本文链接：https://blog.csdn.net/weixin_43599321/article/details/129706902

版权

JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

对象的构造函数

文章目录

对象的构造函数

1. 构造函数

构造函数是什么？

构造函数是一种特殊的函数，主要用来初始化对象。

使用场景：常规的{…}语法允许创建一个对象，比如我们创建了佩奇对象，继续创建乔治对象还需要重新写一遍，此时我们可以通过构造函数来快速创建多个类似的对象。

分别创建对象

// 创建佩奇对象
const Peppa = {
    name: '佩奇',
    age: 6,
    gender: '女'
}
// 创建乔治对象
const Dad = {
    name: '乔治',
    age: 32,
    gender: '男'
}

使用构造函数创建对象

function Pig(name, age, gender) {
    this.name = name
    this.age = age
    this.gender = gender
}
// 创建佩奇对象
const Peppa = new Pig('佩奇', 6, '女')
// 创建乔治对象
const Dad = new Pig('乔治', 32, '男')

注意：构造函数在技术上是常规函数，不过它有两个约定：

它们的命名以大写字母开头。
它们只能由new操作符来执行。

说明：

使用new关键字调用函数的行为称为实例化。
实例化构造函数时没有参数时可以省略()。
构造函数内部无需写return，返回值即为新创建的对象。
构造函数内部的return返回的值无效，所以不要写return。
new Objec()和new Date()也是实例化构造函数。

2. 实例成员&静态成员

实例成员是什么？

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

说明：

为构造函数传入参数，创建结构相同但值不同的对象。
构造函数创建的实例对象彼此独立互不影响。

静态成员是什么？

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

说明：

静态成员只能由构造函数来访问。
静态方法中的this指向构造函数。

比如Date.now()、Math.PI和Math.random()等。

总结：

实例对象的属性和方法即为实例成员，构造函数的属性和方法被称为静态成员。
实例对象相互独立，实例成员只供当前实例对象使用，静态成员只能由构造函数访问。

3. 内置构造函数

最常用的内置构造有下面四大类。

Object
Array
String
Number

众所周知，在JavaScript中最主要的数据类型有6种：

基本数据类型：1.字符串、2.数值、3.布尔、4.undefined、5.null。

引用类型：6.对象

但是我们会发现有些特殊情况：

const str = 'wjr'
// 普通字符串居然自带长度的属性？？
console.log(str.length)  // 3

普通字符串居然自带长度的属性？？

其实字符串、数值、布尔等基本类型都有专门的构造函数，这些我们称之为包装类型，JS中几乎所有的数据都可以构成函数创建。

所以

const str = 'wjr'
// 就等同于
const str = new String('wjr')

1.Object的常用静态方法

1.Object.keys()和Object.values()

常规方法获取对象里面的属性和值

const o = {name: '佩奇', age: 6}
for (let k in o) {
    console.log(k)  // 属性
    console.log(o[k])  // 值
}

Object.keys()静态方法获取对象里面的属性和值

const o = {name: '佩奇', age: 6}
// 获得对象的所有键，并且返回的是一个数组
const arr = Object.keys(o)
console.log(arr)  // ['name', 'age']
console.log(o[arr[0]])  // 佩奇
console.log(o[arr[1]])  // 6
// 获取对象的所有值
console.log(Object.values(o))  // ['佩奇', 6]

2.Object.assign()

Object.assign()静态方法常用于对象拷贝，经常使用的场景是给对象添加属性。

const o = {name: '佩奇', age: 6}
Object.assign(o, {gender:'女'})
console.log(o)  // {name: '佩奇', age: 6, gender:'女'}

2.Array的常用方法

1.实例方法array.forEach()、filter()、map()

方法	作用	说明
forEach	遍历数组	不返回数组，经常用于查找遍历数组元素
filter	过滤数组	返回新数组，返回的是筛选满足条件的数组元素
map	迭代数组	返回新数组，返回的是处理之后的数组元素，想要使用返回的新数组
reduce	累计器	返回累计处理的结果，经常用于求和等

2.实例方法array.reduce()

作用：arr.reduce()返回累计处理的结果，经常用于求和等。

基本语法：

1.arr.reduce(function(){}, 起始值)

2.数组求和：arr.reduce(function(上一次的值, 当前的值){}, 初始值)

注意：初始值并不表示索引值，而是第一次累加的值。

const arr = [1, 5, 8]
// 1. 没有初始值
const total = arr.reduce(function(prev, current) {
    return prev + current
})
console.log(total)  // 14

// 2. 有初始值
const total2 = arr.reduce(function(prev, current){
    return prev + current
}, 10)
console.log(total2)  // 24

arr.reduce()执行过程

如果没有起始值，则以数组的第一个数组元素的值为上一次的值
每一次循环都会把返回值作为下一次循环的起始值
如果有其实值，则起始值作为上一次的值

3.数组的其他实例方法

实例方法join数组元素拼接为字符串，返回字符串（重点）
实例方法find查找元素，返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回undefined（重点）
实例方法every检测数组所有元素是否都符合指定条件，如果所有元素都通过监测返回true，否则返回false（重点）
实例方法some检测数组中的元素是否满足指定条件，如果数组中有元素满足条件返回true，否则返回false。
实例方法concat合并两个数组，返回生成新数组。
实例方法sort对原数组单元值排序。
实例方法splice删除或替换原数组单元。
实例方法reverse反转数组。
实例方法findIndex查找元素的索引值。

4.数组常用静态方法

静态方法Array.from()把伪数组转换为真数组。

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
    <script>
        const lis = document.querySelectorAll('ul li')
        console.log(lis);
        // lis.pop() 报错
        const liss = Array.from(lis)
        liss.pop()
        console.log(liss);
    </script>
</body>

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zBC0Ahbq-1679457666077)(C:\Users\22706\AppData\Roaming\Typora\typora-user-images\image-20230322113459497.png)]$

3.String的常用方法

1.String常用实例方法

实例属性length用来获取字符串的长度（重点）
实例方法split('分隔符')用来将字符串拆分成数组（重点）——数组转字符串arr.join()
实例方法substring(需要截取的第一个字符的索引[,结束的索引号])用于字符串截取（重点）
实例方法startWith(检测字符串[,检测位置索引号])检测是否以某字符开头（重点）
实例方法includes(搜索的字符串[,检测位置索引号])判断一个字符串是否包含在另一个字符串中，根据情况返回true或false（重点）
实例方法toUpperCase用于将字母转换成大写
实例方法toLowerCase用于将字母转换成小写
实例方法indexOf检测是否包含某字符
实例方法endsWith检测是否以某字符结尾
实例方法replace用于替换字符串，支持正则匹配
实例方法match用于查找字符串，支持正则匹配

4.Number的常用方法

1.num.toFixed()

让数字指定保留小数位数。

const num = 10.923
console.log(num.toFixed(1))  // 10.9
console.log(num.toFixed(2))  // 10.92
const num2 = 10
console.log(num2.toFixed(2))  // 10.00

搜捕鸟了

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript——对象的构造函数

构造函数是什么？构造函数是一种特殊的函数，主要用来初始化对象。使用场景：常规的{...}语法允许创建一个对象，比如我们创建了佩奇对象，继续创建乔治对象还需要重新写一遍，此时我们可以通过构造函数来快速创建多个类似的对象。
复制链接

扫一扫

专栏目录