这是我参与 8 月更文挑战的第 22 天，活动详情查看： 8月更文挑战

感激相遇你好我是阿ken

作者：请叫我阿ken
链接：juejin.cn/user/109118…
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

🌊🌈关于前言：

文章部分内容及图片出自网络，如有问题请与我本人联系(主页介绍中有公众号)

本博客暂适用于刚刚接触JS以及好久不看想要复习的小伙伴。

🌊🌈关于内容：

JavaScript对象

5.1_初始对象

5.1.1_什么是对象

例如：在JavaScript中描述一个手机对象，则手机拥有的属性和方法如下：

手机的属性：颜色、重量、屏幕尺寸。
手机的方法：打电话、发短信、看视频、听音乐。
在代码中，属性可以看成是对象中保存的一个变量，使用“对象.属性名”表示；方法可以看成是对象中保存的一个函数，使用“对象.方法名（）”进行访问。

// 假设现在有一个手机对象p1，通过代码创建出来
var p1 = {
color: '黑色',
weight: '188g',
screenSize: '6.5',

call: function (num) {
console.log('打电话给'+num);
},

sendMessage: function (num, message) {
console.log ('给'+ num + '发短信，内容为:' + message);
},

playVideo: function() {
console.log ('播放视频');
},

playMusic: functlon() {
console.log ('播放音乐');
}

};

//访向p1的属性
console.log (pl.color);     // 输出结果:"黑色"，表示手机的颜色为黑色
console.log (p1.weight);    // 输出结果: "188g"，表示手机的重量为188克
console.log (p1.screenSize);// 输出结果:"6.5",表示手机的屏幕尺寸为6.5英寸

//调用p1的方法
p1.call('123');           // 调用手机的拨打电话方法，拨打号码为123
p1.sendMessage('123', 'hello'); // 给电话号码123发短信，内容为hello
p1.playVideo();    // 调用手机的播放视频方法
p1.playMusic();    // 调用手机的播放音乐方法

从上述代码可以看出，对象的属性和变量的使用方法类似，对象的方法和函数的使用方法类似。
通过对象可以把一系列的属性和方法集合起来，用一个简单的变量名p1来表示。

5.1.2_利用字面量创建对象

在 JavaScript 中，对象的字面量就是用花括号“{"来包裹对象中的成员，每个成员使用"key：value"的形式来保存，key 表示属性名或方法名，value 表示对应的值。多个对象成员之间用“,"隔开。

案例：

// 创建一个空对象
var obj = {};
// 创建一个学生对象
var stul = {
name: '小明',  // name 属性
age: 18,       // age属性
sex: '男',     // sex属性

sayHello: function () {  // sayHello方法
console.log ('Hello');
}

};

在上述代码中，obj是一个空对象，该对象没有成员。stu1对象中包含4个成员，分别是name、age、sex和sayHello，其中name，age和sex是属性成员，sayHello是方法成员。

5.1.3_访问对象的属性和方法

在将对象创建好以后，就可以访问对象的属性和方法了。
示例代码如下：

//访同对象的属性(语法1)
console.log (stul.name);   // 输出结果:小明
//访同对象的属性(语法2)
console.log (stul['age']); // 输出结果:18

//调用对象的方法(语法1)
stul.sayHello();        // 输出结果: Hello
//调用对象的方法(语法2)
stul['sayHello']();     // 输出结果: Hello

如果对象的成员名中包含特殊字符，则可以用字符串来表示，
示例代码如下:

var obj = {
'name-age': '小明-18'
};
console.log (obj['name-age']);  
// 输出结果:"小明-18"

JavaScript的对象具有动态特征。如果一个对象没有成员，用户可以手动赋值属性或方法来添加成员，
具体示例如下：

var stu2 = {}；      // 创建一个空对象
stu2.name = 'Jack';  // 为对象增加name属性
stu2.introduce = function() {     // 为对象增加introduce方法
alert ('My name is ' + this.name);// 在方法中使用this代表当前对象
};

alert (stu2.name);//访问name属性，输出结果: Jack
stu2.introduce();//调用introduce()方法，输出结果:My name is Jack

在上述代码中，在对象的方法中可以用 this 来表示对象自身，因此，使用 this.name 就可以访问对象的 name 属性。

如果访问对象中不存在的属性时，会返回undefined。
示例代码如下:

var stu3 = {};      //创建一个空对象
console.log(stu3.name); //输出结果: undefined

5.1.4_利用 new Object 创建对象

前面在学习数组时，我们知道可以使用 new Array 创建数组对象。而数组是一种特殊的对象，如果要创建一个普通的对象，则使用 new Object 进行创建。

示例代码如下：

var obj = new Object(); //创建了一个空对象
obj.name = '小明';  //创建对象后，为对象添加成员
obj.age = 18;
obj.sex = '男';
obj.sayHello = function(){
console.log('Hello');
};

5.1.5_利用构造函数创建对象

前面学习的字面量的方式只适合创建一个对象，而当需创建多个对象时，还要将对象的每个成员都写一遍，显的比较麻烦，因此，可以用构造函数来创建对象。使用构造函数来创建对象的语法为“new 构造函数名()”，在小括号中可以传递参数给构造函数，如果没有参数，小括号可以省略。

实际上，“new Object()”就是一种使用构造函数创建对象的方式，Object 就是构造函数的名称，但这种方式创建出来的是一个空对象。

其基本语法如下：

//编写构造函数
function 构造函数名() {
this.属性 = 属性;
this.方法 = function() {
//方法体
};
}

//使用构造函数创建对象
var obj = new 构造函数名();

在上述语法中，构造函数中的 this 表示新创建出来的对象，在构造函数中可以通过 this 来为新创建出来的对象添加成员。需要注意的是，构造函数的名称推荐首字母大写。

案例：

// 编写一个Student构造函数
function Student (name, age) {
this.name = name;
this.age = age;
this.sayHello = function() {
console.log ('你好，我叫' + this.name);
};
}

//使用Student构造函数创建对象
var stul = new Student('小明', 18);
console.log(stul.name);         // 输出结果:小明
console.log(stu1.sayHello());   // 输出结果:你好，我叫小明
var stu2 = new Student('小红', 17);
console.log(stu2.name);         // 输出结果:小红
console.log(stu2.sayHello());   // 输出结果:你好，我叫小红

JavaScript 中的构造函数类似于传统面向对象语言(如Java)中的类(class)，所以 JavaScript 中也可以使用面向对象编程中的一些术语。

抽象: 将一类对象的共同特征提取出来，编写成一个构造函教(类)的过程，称为抽象。
实例化: 利用构造函数(类)创建对象的过程，称为实例化。
实例: 如果 stu1对象是由Student构造函数创建出来的，则stu1对象称为Student构造函数的实例(或称为实例对象)。

小提示:
在一些文档中，经常把对象中的方法也称为函数，或者把构造函教称为构造器或构造方法，我们只需明白这些称呼所指的是同一个事物即可。

多学一招: 静态成员

在面向对象编程中有静态( static )的概念，JavaScript也不例外。JavaScript 中的静态成员，是指构造函数本身就有的属性和方法，不需要创建实例对象就能使用。

下面我们通过代码演示静态成员的创建与使用：

function Student(){
}

Student.school = 'x大学';       // 添加静态属性school
Student.sayHello = function() { // 添加静态方法sayHello
console.log('Hello');
};

console.log(Student.school);    //输出结果:x大学
Student.sayHello();             //输出结果:Hello

5.1.6_遍历对象的属性和方法

使用 for.in 语法可以遍历对象中的所有属性和方法，
示例代码如下：

// 准备一个待遍历的对象
var obj = {name:'小明', age:18, sex:'男'};

// 遍历obj对象
for(var k in obj){
// 通过k可以获取遍历过程中的属性名或方法名
console.log(k);        // 依次输出:name、age、sex
console.log (obj[k]);  // 依次输出:小明、18、男
}

在这里插入图片描述

在上述代码中，k 是一个变量名，可以自定义，习惯上命名为 k 或者 key，表示键名。当遍历到每个成员时，使用 k 来获取当前成员的名称，使用 obj[k] 获取对应的值。另外，如果对象中包含方法，则可以通过“ obj[k] () " 进行调用。

多学一招: 判断对象成员是否存在

当需要判断一个对象中的某个成员是否存在时，可以使用 in 运算符，
案例：

var obj = (name:'Tom', age: 16);
console.log('age' in obj);   // 输出结果: true
console.log('gender' in obj);// 输出结果: false

从上述代码可以看出，当对象的成员存在时返回 true ，不存在时返回 false。

今日入门学习暂时告一段落
Peace

🌊🌈往期回顾：

【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十八）
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（十九）
【HTML干货分享 | 建议收藏】挑战最短时间带你走进HTML（二十）

🌊🌈关于后记：

感谢阅读，希望能对你有所帮助博文若有瑕疵请在评论区留言或在主页个人介绍中添加联系方式私聊我感谢每一位小伙伴不吝赐教

原创不易，「点赞」+「关注」 谢谢支持❤

【JS干货分享 | 建议收藏】挑战最短时间带你走进JS（七）