对象是包括属性与方法的数据类型,JS中大部分类型都是对象String/Number/Math/RegExp/Date
OOP
- 对象是属性和方法的集合即封装;
- 将复杂功能隐藏在内部,只开放给外部少量方法,更改对象内部的复杂逻辑不会对外部调用造成影响即抽象;
- 继承是通过代码复用减少冗余代码
- 根据不同形态的对象产生不同结果即多态
基本声明
使用字面量形式声明对象是最简单的方式
let obj = { name: '张三', get:function() { return this.name; } } console.log(obj.get()); //张三
属性与方法简写
let obj = { name:'张三', get() { return this.name; } }; console.log(obj.get()); //张三
其实字面量形式在系统内部也是使用构造函数 new Object
创建的
let obj = {}; let obj2 = new Object(); console.log(obj, obj2); console.log(obj.constructor); console.log(obj2.constructor);
操作属性
使用点语法获取
let obj = { name: "张三" }; console.log(obj.name);
使用[]
获取
console.log(obj["name"]);
可以看出使用.
操作属性更简洁,[]
主要用于通过变量定义属性的场景
let obj = { name: "张三" }; let property = "name"; console.log(obj[property]);
如果属性名不是合法变量名就必须使用扩号的形式了
let obj = {}; user["my-age"] = 28; console.log(obj["my-age"]);
对象和方法的属性可以动态的添加或删除。
const obj = { name: "张三" }; obj.age = "10"; obj.show = function() { return `${this.name}已经${this.age}岁了`; }; console.log(obj.show()); console.log(obj); delete obj.show; delete obj.age; console.log(obj); console.log(obj.age); //undefined
对象方法
定义在对象中的函数我们称为方法,下面定义了学生对象,并提供了计算平均成绩的方法
let obj = { name: "李四", age: 22, grade: { math: 99, english: 67 }, //平均成绩 avgGrade: function() { let total = 0,count = 0; for (const key in this.grade) { total += this.grade[key]; count++; } return total / count; } }; console.log(obj.avgGrade());
引用特性
对象和函数、数组一样是引用类型,即复制只会复制引用地址。
let obj = { name: "张三" }; let obj2 = obj; obj2.name = "李四"; console.log(obj.name); //李四
对象做为函数参数使用时也不会产生完全赋值,内外共用一个对象
let obj = { age: 22 }; function handler(obj) { obj.age += 10; } handler(obj); console.log(obj.age); //32
对象的比较是对内存地址的比较所以使用 ==
或 ===
一样
let obj = {}; let obj2 = obj; let obj3 = {}; console.log(obj == obj2); //true console.log(obj === obj2); //true console.log(obj2 === obj3); //false
this
this
指当前对象的引用,始终建议在代码内部使用this
而不要使用对象名,不同对象的this只指向当前对象。
let obj = { name: "张三", show() { return this.name; } }; console.log(obj.show()); //张三
展开语法
使用...
可以展示对象的结构,下面是实现对象合并的示例
let obj = {name:'张三',age:30}; let info = { ...obj, birthday: "2000-10-10" }; console.log(info);
如果对象中有相同参数,在合并时后面的会替换前面的
function upload(params) { let config = { type: "*.jpeg,*.png", size: 10000 }; params = { ...config, ...params }; console.log(params); } upload({ size: 999 });