JS 创建对象三种方式、构造函数

4,224 阅读3分钟

创建对象有哪三种方式

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

image.png
2.利用 new Object创建对象

image.png
3.使用 构造函数创建对象?
问:什么是构造函数呢?如何通过构造函数创建对象呢?

image.png

构造函数

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

image.png

构造函数也是函数

构造函数的两个约定
1.它们的命名以大字母开头
2.使用[new]操作符来实例化构造函数

基本语法

image.png <h3示例代码

image.png 说明:
1.使用new关键字调用函数的行为被称为实例化
2.实例化构造函数时没有参数时可以省略()
3.构造函数内部无需写return,返回值既为新创建的对象
4.构造函数内部的return返回的值无效,所以不要写return
5.new Object() new Date() 也是实例化构造函数

new的执行过程

new关键字的执行过程是什么呢?

image.png
new的执行过程:
1.创建新空对象
2.构造函数this指向新对象
3.执行构造函数代码,修改this,添加新的属性
4.返回新对象

什么是实例成员?

成员:属性与方法
实例成员:通过构造函数创建的对象称为实例化对象,实例化对象中的属性和方法称为实例成员。

示例代码

image.png

说明:

1.实例对象的属性和方法既为实例成员
2.在构造函数内部创建的成员成为实例成员
3.实例成员只能有实例化对象来访问

静态成员

什么是静态成员?

成员:属性与方法
静态成员:在构造函数本身添加的成员

示例代码

image.png 说明:
1.构造函数的属性和方法被称为静态成员
2.一般公共特征的属性或方法静态成员设置为静态成员
3.静态成员方法中的this指向构造函数本身
4.静态成员只能有构造函数本身来访问

基本包装类型

在JavaScript中最重要的数据类型有6种:
基本数据类型:字符串、数值、布尔、undefined、null
引用类型:对象
但也 我们会发现有些特殊情况比如:

image.png
其实、字符串、数值、布尔、等基本类型也都有专门的构造函数,这些我们称为包装类型。JS中几乎所有的数据都是可以基于构造函数创建。
引用类型:Object,Array,RegExp,Date等
包装类型:String,Number,Boolean等

Object.keys()方法

想要获取对象的属性应该如何做?
Object是内置的构造函数,用于创建普通对象。

image.png
以前我们使用for in循环遍历对象可以获取对象里面的属性
现在可以使用新的方法object.keys获取
object.key()是object对象的静态方法 只能由Object对象来调用

基本语法

image.png
作用:object.keys静态方法获取对象中所有属性(键)
参数:对象
返回值:数组

image.png

示例代码

image.png

Object.values()方法

想要获取对象的属性的值应该如何做?
Object是内置的构造函数,用于创建普通对象。

image.png
以前我们使用for in循环遍历对象可以获取对象的属性得到属性的值
现在可以使用新的方法object.values获取
object.values()是object对象的静态方法 只能由object对象来调用

基本语法

image.png
作用:Object.values静态方法获取对象中所有的属性值
参数:对象
返回值:数组

image.png

示例代码

image.png

Object.assign()方法

基本语法

image.png
作用:object.accign()静态方法常用于对象拷贝
参数:
target目标对象, 接收源对象属性的对象,也是修改后的返回值
sources源对象,包含将被合并的属性。
返回值:目标对象

image.png

示例代码

image.png