绪言在 JavaScript 的寰宇里，有一句广为东谈主知的话—— “万物王人对象” 。岂论是咱们正常使用的字符串、数字，照旧自界说的函数、数组，实质上都和“对象”有着千丝万缕的干系。但许多外行在学习对象时，总会被“构造函数”“new 重要字”“包装类”这些见识绕晕，今天就联结具体代码实例，用下里巴人的讲话，把 JS 对象的中枢学问点讲显著、讲透澈。
一、先搞懂：什么是对象？对象（Object）是 JS 中最中枢的数据类型之一，它就像一个“收纳盒”，不错存放多个不同类型的数据（咱们称之为“属性”）和可本质的操作（咱们称之为“才能”）。比如一个“东谈主”不错有姓名、年岁（属性），不错吃饭、睡眠（才能）；一辆车不错有颜料、尺寸（属性），不错行驶、刹车（才能），对象即是用来描述这种“具有多种特征的事物”的。
在 JS 中，数据类型分为两大类，这亦然集合对象的基础： #前端 #JavaScript #日新运筹帷幄原始类型 ：节略数据类型，无法领有属性和才能，包括：string（字符串）、number（数字）、bool（布尔值）、undefined（未界说）、null（空值）、Symbol（独一值）、bigInt（大整数）。援用类型 ：复杂数据类型，实质上都是对象，能领有属性和才能，包括：函数（function）、数组（array）、庸碌对象（object）等。这里要小心一个易错点：原始类型一定无法添加属性和才能 ，属性和才能是对象颠倒的，后头咱们和会过“包装类”详备阐发这少量
二、3种创建对象的样子正常开发中，咱们创建对象的样子主要有3种，各自有不同的使用场景，联结代码实例一看就懂！
1. 对象字面量 {}｜最精真金不怕火常用这是最直不雅、最常用的创建样子，用大括号 {} 包裹属性和值，属性和值之间用冒号 : 分隔，多个属性之间用逗号 ， 分隔，适合创建单个、节略的对象。
// 实例1：创建一个“东谈主物”对象
const person = {
name: '米奇'， // 属性：姓名，值为字符串
age: 18， // 属性：年岁，值为数字
sayHi: function { // 才能：打呼唤
console.log('你好呀，我是米奇～');
}
}
console.log(person); // 输出：{ name: '米奇'， age: 18， sayHi: [Function: sayHi] }
person.sayHi; // 调用才能，输出：你好呀，我是米奇～
// 实例2：创建一个空对象，后续添加属性 const obj = {}; obj.name = '米妮'; obj.age = 17; console.log(obj); // 输出：{ name: '米妮'， age: 17 }
2. new Object｜构造函数创建 ️这是通过 JS 内置的构造函数 Object 创建对象，实质和对象字面量一样，仅仅写法更繁琐，适合动态添加属性的场景。
// 实例：用new Object创建对象，并动态添加属性
const obj = new Object; // 先创建一个空对象
obj.name = '米妮'; // 给对象添加name属性
const abc = 'age'; // 用变量算作属性名
obj[abc] = 18; // 动态添加age属性（括号语法适合属性名是变量的场景）
console.log(obj); // 输出：{ name: '米妮'， age: 18 }
// delete 重要字：删除对象的属性 delete obj[abc]; // 删除 age 属性 console.log(obj); // 输出：{ name: '米妮' }
这里补充一个小学问点：delete 重要字只可删除对象的属性，不成删除变量；何况删除后，再打听该属性会复返 undefined 。
3. new 调用自界说构造函数｜批量创建对象当咱们需要批量创建多个结构相通的对象（比如多个用户、多辆车）时，用前边两种样子就太繁琐了——这时分，自界说构造函数就派上用场了！
先明确一个见识：当一个函数被 new 重要字调用时，这个函数就被称为“构造函数” 。构造函数的定名范例是：首字母大写（折柳庸碌函数），标的是为了批量生成具有相通属性结构的对象。
// 实例1：自界说构造函数Person，批量创建东谈主物对象
function Animal(name， age， role) {
// this指向刻下创建的对象，给对象添加属性
this.name = name;
this.age = age;
this.role = role;
// 也不错添加才能
this.introduce = function {
console.log(`我是${this.name}，本年${this.age}岁，我的变装是${this.role}`);
}
}
// new 调用构造函数，创建2个实例对象 const p1 = new Animal('米奇'， 8， 'animal'); const p2 = new Animal('跳跳虎'， 9， 'tigger');
console.log(p1); // 输出：Animal { name: '米奇'， age: 8， role: 'animal'， introduce: [Function (anonymous)] } console.log(p2); // 输出：Animal { name: '跳跳虎'， age: 9， role: 'tigger'， introduce: [Function (anonymous)] } p1.introduce; // 调用才能，靠谱的滚球app中国官网输出：我是米奇，本年8岁，我的变装是 animal
// 实例2：自界说构造函数 Car，批量创建汽车对象 function Car(color) { // 固定属性（总共汽车都一样） this.name = 'su7'; this.height = '1400'; this.lang = '4800'; this.weight = '1500'; // 动态属性（不同汽车不错不一样） this.color = color; }
// 批量创建2辆汽车 const car1 = new Car('purple'); // 紫色的 su7 const car2 = new Car('pink'); // 粉色的 su7 const car3 = Car('pink'); // 粉色的 su7 console.log(car1); // 输出：Car { name: 'su7'， height: '1400'， lang: '4800'， weight: '1500'， color: 'purple' }
易错点教导：构造函数必须用 new 调用！要是健忘写 new ，函数会造成庸碌函数，this 会指向全局（浏览器中是 window，Node 环境中是 global），此时复返值是 undefined。
失实示例：健忘 new，调用 Car 函数 const car3 = Car(black); console.log(car3); // 输出：undefined（因为庸碌函数莫得 return 值）
三、要点冲突：new重要字到底干了什么？ 许多外行都会狐疑：为什么用 new 调用构造函数，就能创建出对象？其实 new 重要字背后只作念了3件事，节略好记，联结代码拆解： 创建一个空的this对象 ：卓绝于本质 const _this = {} ，这个空对象即是过去要复返的实例对象。本质构造函数中的代码，给this对象添加属性 ：把构造函数中 this.xxx 的内容，都添加到第一步创建的空对象上。复返这个this对象 ：不需要咱们手动写return，new会自动把添加好属性的this对象复返，赋值给变量。咱们不错用一段“模拟 new 操作”的代码，更直不雅地集合这个流程：
// 模拟new重要字的作用，手动齐备构造函数的逻辑
function car {
// 1. 创建一个空对象（对应new的第一步）
const _this = {};
// 2. 给空对象添加属性（对应new的第二步）
_this.name = 'su7';
_this.color = 'green';
// 3. 复返这个对象（对应new的第三步）
return _this;
}
// 调用函数，获取实例对象（卓绝于 new person） const obj = car; console.log(obj); // 输出：{ name: 'su7'， color: 'green' }
new 的中枢即是“自动帮咱们创建对象、添加属性、复返对象”，省去了咱们手动写这些类似代码的吃力～
四、易错点：包装类｜为什么原始类型不成加属性？ 前边咱们说过“原始类型一定无法添加属性和才能”，但许多外行会写出这么的代码，然后狐疑为什么成果不适合预期：
// 看似给数字添加属性，实则无效
var num = 123;
num.a = 'aaa'; // 尝试给原始类型num添加属性a
delete num.a; // 尝试删除属性a
console.log(num.a); // 输出：undefined
// 看似给字符串添加属性，实则无效 var str = 'hello'; str.len = 2; // 尝试给原始类型 str 添加属性 len console.log(str.len); // 输出：undefined
这就波及到 JS 中的“包装类”（Wrapper Class）见识，其实 V8引擎在背后作念了“隐式操作”，咱们拆解一下游程：
什么是包装类？包装类是 JS 内置的、对应原始类型的构造函数，包括：String 、Number 、Boolean 。它们的作用是：当咱们对原始类型进行“属性操作”时，引擎会自动把原始类型调遣成对应的包装类实例对象，操作完成后，再自动断送这个实例对象——这即是“自动装箱”和“自动拆箱”。
拆解上头的失实示例：var num = 123; // 原始类型（number）
num.a = 'aaa'; // 引擎隐式操作：
// 1.
// 2.
delete num.a; // 相同隐式创建实例，删除属性后断送 console.log(num.a); // 再次隐式创建新的实例，新实例莫得 a 属性，是以复返 undefined
中枢追想：
当咱们界说一个原始类型字面量（如var str ='hello'），V8引擎默许本质的照旧 new String('hello') （创建包装类实例），但会自动拆箱成原始类型。包装类的实例对象，参与运算时会自动拆箱成原始类型（比如123 + new Number(456) = 579）。JS是弱类型讲话，唯独在赋值语句本质时，才会判断值的类型；当值被判定为原始类型时，就会自动将包装对象上添加的属性移除——是以咱们给原始类型加属性，经久无效。五、追想｜中枢学问点梳理 看完上头的内容，坚信你还是掌捏了 JS 对象的中枢学问点，咱们用一张表格快速梳理，便捷缅思：
| 对象实质 | 存放属性和才能的“收纳盒”，援用类型的中枢 | 万物王人对象，但原始类型不是对象 | | 创建样子 | 1.
| new 的作用 | 1.
| 包装类 | 原始类型属性操作时的隐式实例，操作后自动断送 | 原始类型无法添加属性和才能 |
终末教导：JS 对象是前端开发的基础滚球app官网，后续的原型、原型链、采纳等学问点，都开辟在对象的基础上。祝全球学习获胜，写出更优雅的 JS 代码！
开云官方体育app下载
备案号: