持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第4天,点击查看活动详情
前言
大家好呀,我是L同学。在上篇文章javascript进阶系列(三)—— 面向对象中,我们学习了javascript中的箭头函数、数组和对象的解构赋值、面向对象等相关知识点等知识。今天,在这篇文章中,我们继续学习对象中的实例成员、静态成员、引用类型等相关知识点。
面向对象
实例成员
通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员。构造函数内部 this 实际上就是实例对象,为其动态添加的属性和方法即为实例成员。为构造函数传入参数,动态创建结构相同但值不同的对象。实例对象的 constructor 属性指向了构造函数。instanceof 用于检测实例对象对应的构造函数
。需要注意的是,构造函数创建的实例对象彼此独立互不影响。
<script>
// 构造函数
function Person() {
// 构造函数内部的 this 就是实例对象
// 实例对象中动态添加属性
this.name = '小明';
// 实例对象动态添加方法
this.sayHi = function () {
console.log('大家好~');
}
}
// 实例化,p1 是实例对象
// p1 实际就是 构造函数内部的 this
let p1 = new Person();
console.log(p1);
console.log(p1.name); // 访问实例属性
p1.sayHi(); // 调用实例方法
</script>
静态成员
在 JavaScript 中底层函数本质上也是对象类型,因此允许直接为函数动态添加属性或方法,构造函数的属性和方法被称为静态成员。静态成员指的是添加到构造函数本身的属性和方法。一般公共特征的属性或方法静态成员设置为静态成员。静态成员方法中的 this 指向构造函数本身。
<script>
// 构造函数
function Person(name, age) {
// 省略实例成员
}
// 静态属性
Person.eyes = 2;
Person.arms = 2;
// 静态方法
Person.walk = function () {
console.log('^_^人都会走路...');
// this 指向 Person
console.log(this.eyes);
}
一切皆对象
在 JavaScript 中最主要的数据类型有 6 种,分别是字符串、数值、布尔、undefined、null 和 对象,常见的对象类型数据包括数组和普通对象。其中字符串、数值、布尔、undefined、null 也被称为简单类型或基础类型,对象也被称为引用类型。
在 JavaScript 内置了一些构造函数,绝大部的数据处理都是基于这些构造函数实现的,例如Date 就是内置的构造函数。甚至字符串、数值、布尔、数组、普通对象也都有专门的构造函数,用于创建对应类型的数据。
<script>
// 实例化
let date = new Date();
// date 即为实例对象
console.log(date);
</script>
引用类型
Object
Object 是内置的构造函数,用于创建普通对象。
<script>
// 通过构造函数创建普通对象
let user = new Object({name: '小明', age: 15});
// 这种方式声明的变量称为【字面量】
let student = {name: '小王', age: 21}
// 对象语法简写
let name = '小红';
let people = {
// 相当于 name: name
name,
// 相当于 walk: function () {}
walk () {
console.log('人都要走路...');
}
}
console.log(student.constructor);
console.log(user.constructor);
console.log(student instanceof Object);
</script>
普通对象在内存中的存储方式是普通对象数据保存在堆内存之中,栈内存中保存了普通对象在堆内存的地址。普通对象在赋值时只是复制了栈内中的地址,而非堆内存中的数据。
普通对象赋值后,无论修改哪个变量另一个对象的数据值也会相当发生改变。推荐使用字面量方式声明对象,而不是 Object 构造函数。Object.assign()。通过Object.keys 静态方法获取对象中所有属性。通过Object.values 表态方法获取对象中所有属性值。
堆与栈的区别:
- 堆和栈是内存中的数据存储空间
- 简单类型的数据保存在内存的栈空间中
- 引用类型的数据保存在内存的堆空间中,栈内存中存取的是引用类型的地址(房间号)
Array
Array 是内置的构造函数,用于创建数组。数组在内存中的存储方式与普通对象一样的。
<script>
// 构造函数创建数组
let arr = new Array(5, 7, 8);
// 字面量方式创建数组
let list = ['html', 'css', 'javascript'];
console.log(list.constructor);
console.log(list instanceof Array);
</script>
数组在赋值时只是复制了栈内中的地址,而非堆内存中的数据。数组赋值后,无论修改哪个变量另一个对象的数据值也会相当发生改变。推荐使用字面量方式声明数组,而不是 Array 构造函数。
数组提供了很多方法。推荐使用字面量方式声明数组,而不是 Array 构造函数。 实例方法forEach用于遍历数组,替代for循环。filter过滤数组单元值,生成新数组。map迭代原数组,生成新数组。join数组单元素拼接成了符串。concat合并两个数组,生成新数组。sort对原数组单元值排序。splice删除或替换原数组单元。indexOf检索数组单元值。reverse反转数组。静态方法from伪数组转成数组。