前言本文是JavaScript基础系列的第五篇系统讲解对象和函数两大核心概念。内容包括对象的定义与意义、对象的创建与属性操作、属性名与属性值的特殊用法、函数的三种创建方式、形参与实参的匹配规则以及对象中方法的定义。掌握这些内容你将真正理解JS中“万物皆对象”的理念。一、对象的基本概念1.1 对象的定义万物皆对象JavaScript中几乎所有事物都是对象。对象的本质一组无序的相关属性和方法的集合。术语含义类比属性事物的特征常用名词人的姓名、年龄方法事物的行为常用动词人吃饭、走路1.2 对象的意义存储方式适用场景缺点变量保存单个值无法保存多个值数组保存多个值元素之间信息不连贯对象保存一组无序的相关数据结构清晰、更强大对象的优势表达结构更清晰、数据之间有联系、减少命名污染、节省内存空间。1.3 对象的分类分类说明示例内建对象ES标准定义任何ES实现都可使用Math、String、Boolean、Function、Object宿主对象JS运行环境提供主要指浏览器BOM浏览器对象模型、DOM文档对象模型自定义对象开发人员自己创建用户自定义的各种对象二、对象的创建与操作2.1 创建对象使用new关键字调用的函数称为构造函数constructor专门用来创建对象。let per new Object(); console.log(typeof per); // object2.2 对象属性的操作添加属性let per new Object(); per.name jack; per.age 18;注意使用赋值运算符添加属性和方法每个属性和方法之间用;分号结束读取属性console.log(per.name); // jack console.log(per.age); // 18必须用[]操作属性的两种情况情况一动态的变量let key prompt(请输入属性名); per[key] 你好; // 属性名由用户输入决定情况二特殊的属性名如数字per[123a] 你好; console.log(per[123a]); // 你好 // per.123a 会报错2.3 使用对象的优势减少命名污染不同对象可以有同名属性数据关联性强相关数据组织在一起节省内存空间引用传递而非复制可使用内置方法继承Object原型的方法三、属性名和属性值的特殊用法3.1 属性名的特殊处理对象的属性名不强制遵守标识符规范什么名字都可以使用但建议尽量按照标识符规范命名特殊属性名如数字、带空格的不能用.操作必须用[]let obj new Object(); obj[123a] 你好; // 添加特殊属性名 console.log(obj[123a]); // 读取特殊属性名3.2 属性名的灵活使用let a prompt(请输入属性名); obj[a] 你好; // 属性名由用户输入决定3.3 属性值的多样性JS对象的属性值可以是任意数据类型甚至可以是另一个对象。let obj new Object(); let num new Object(); num.money 1000; obj.all num; // 属性值为另一个对象3.4 in运算符检查对象中是否含有指定属性有则返回true没有则返回false。let flag name in obj; // true 或 false四、函数的基本概念与使用4.1 函数的概念函数封装一段可被重复调用执行的代码块typeof检查函数对象时返回function函数在使用时分为两步声明函数和调用函数4.2 函数的三种创建方式方式一使用构造函数不常用let fun new Function( for(let i0; i10; i){document.writeln(你好);} ); fun(); // 调用函数注意实际开发中很少使用这种方式因为代码以字符串形式传递不利于维护。方式二函数声明常用function fun() { for (let i 0; i 10; i) { document.writeln(你好); } } fun(); // 调用函数方式三函数表达式匿名函数let fun function () { for (let i 0; i 10; i) { document.writeln(你好); } }; fun(); // 调用函数4.3 函数示例求和函数function getSum() { let sum 0; for (let i 1; i 100; i) { sum i; } console.log(sum); } getSum(); // 调用函数输出5050五、函数的参数5.1 形参与实参术语说明类比形参函数定义时的参数用来接收实参变量声明但未赋值实参函数调用时传递的参数给形参赋值给变量赋值function getSum(m, n) { // m, n为形参 let sum 0; for (let i m; i n; i) { sum i; } console.log(sum); } getSum(1, 100); // 1,100为实参5.2 形参与实参的匹配规则情况结果形参和实参个数一致正常输出结果实参个数多于形参取形参的个数多余的实参被忽略实参个数少于形参多余的形参为undefined建议形参和实参个数保持一致。5.3 实参的数据类型实参可以是任意数据类型包括对象和函数。// 对象作为参数 function fun(obj) { console.log(obj.name); console.log(obj.age); } // 函数作为参数 function fun(val) { val(); // 调用传入的函数 }小技巧当参数过多时可以将参数封装到一个对象中传递。六、对象中的方法6.1 方法的定义如果一个函数作为对象的属性保存那么这个函数被称为这个对象的方法method。let per new Object(); per.name jack; // 创建方法 let sayHello function () { console.log(hello); }; // 将函数作为对象的属性值方法 per.sayHello sayHello; // 调用方法 per.sayHello(); // 输出hello6.2 对象的完整结构let per new Object(); per.name jack; per.age 18; let money new Object(); money.num 1000; money.house 大平层; per.money money; // 对象嵌套 per.sayHello function () { // 方法 console.log(hello); };总结本文系统梳理了JavaScript中对象和函数的核心知识对象一组无序的相关属性和方法的集合比数组更适合表达结构化数据。对象的操作通过.和[]两种方式访问属性[]更灵活支持动态变量和特殊属性名。函数的三种创建方式构造函数不常用、函数声明常用、函数表达式匿名函数。参数传递形参接收实参的值实参可以是任意数据类型包括对象和函数。对象的方法函数作为对象的属性时称为方法。掌握这些内容你就具备了使用对象和函数组织代码的能力。