JavaScript对象

Posted 2021-12-16 橘猫吃不胖～

javascript对象

• 1 初识对象
• • 1.1 什么是对象
  • 1.2 利用字面量创建对象
  • 1.3 访问对象的属性和方法
  • • 1.3.1 访问学生对象的属性
    • 1.3.2 访问学生对象的方法
    • 1.3.3 当对象成员中包含特殊字符时，可以用字符串来表示
    • 1.3.4 手动赋值属性或方法来添加成员
  • 1.4 用new Object创建对象
  • 1.5 利用构造函数创建对象
  • 1.6 遍历对象的属性和方法
• 2 内置对象

1 初识对象

1.1 什么是对象

在JavaScript中，对象是一种数据类型，它是由属性和方法组成的一个集合。属性是指事物的特征，使用“对象.属性名”访问；方法是指事物的行为，使用“对象.方法名()”进行访问。

对象用“”表示，在“”中包裹了对象的成员（包括属性和方法）。以“key:value”(键-值对)方式存储各成员。"key"是成员名,"value"是成员的值。

在面向对象中，把“属性”称为对象的成员（成员变量），把“方法”称为成员方法（成员函数）

示例：定义了一个手机对象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: function () //播放音乐方法
        console.log('播放音乐');
    

//访问p1的属性和方法
console.log(p1.color);//输出手机颜色
console.log(p1.weight);//输出手机重量
console.log(p1.screenSize);//输出手机尺寸
p1.call("123");//调用打电话方法
p1.sendMessage("123", "hello");//调用发短信方法
p1.playVideo();//调用播放视频方法
p1.playMusic();//调用播放音乐方法

1.2 利用字面量创建对象

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

创建一个空对象：

var obj = ;

创建一个学生对象：

var stu = 
    name: "小明",//属性，姓名
    age: 18,//属性，年龄
    sex: "男",//属性，性别
    sayHello: function () //方法，打招呼
        console.log("Hello");
    

1.3 访问对象的属性和方法

创建好学生对象之后，接下来访问该对象的属性和方法，以上一步创建的学生对象为例：

1.3.1 访问学生对象的属性

stu.name;//方式1

或者：

stu["name"];//方式2

注意：只是访问并不能输出属性的值，如果要输出属性的值，需要使用console.log()，例如：

console.log(stu.name);

输出结果为：小明

1.3.2 访问学生对象的方法

stu.sayHello();//方法1

或者

stu["sayHello"]();//方法2

输出结果：Hello

1.3.3 当对象成员中包含特殊字符时，可以用字符串来表示

示例：

var obj = 
    "name-age": "小明-18"
;
console.log(obj["name-age"]);

输出结果：小明-18

1.3.4 手动赋值属性或方法来添加成员

例如，先创建一个空对象：

var stu = ;

为对象增加name属性：

stu.name = "小明";

为对象增加introduce方法：

stu.introduce = function () 
    console.log("我的名字是：", this.name);

接下来访问name属性和introduce方法：

console.log(stu.name);
stu.introduce();

输出结果为：
小明
我的名字是： 小明

完整代码如下：

var stu = ;//定义一个空对象
stu.name = "小明";//为对象添加name属性
stu.introduce = function () //为对象添加introduce方法
    console.log("我的名字是：", this.name);//this代表当前对象

console.log(stu.name);//输出name属性
stu.introduce();//调用introduce方法

1.4 用new Object创建对象

格式为：

var obj = new Object();//创建一个空对象

示例：

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

1.5 利用构造函数创建对象

使用构造函数创建对象的语法为“new 构造函数名()”，在小括号中可以传递参数给构造函数，如果没有参数，小括号可以省略。

语法：

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

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

1.6 遍历对象的属性和方法

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

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

使用in运算符判断一个对象中的某个成员是否存在

var obj =  name: 'Tom', age: 16 ;
console.log('age' in obj);// 输出：true，表示对象成员存在
console.log('gender' in obj);  // 输出：false ，表示对象成员不存在

2 内置对象

JavaScript提供了很多常用的内置对象，包括数学对象Math、日期对象Date、数组对象Array以及字符串对象String等。

示例：封装自己的数学对象
【案例要求】封装一个数学对象myMath，实现求出数组中的最大值。

var myMath = 
    max: function (arr) //arr为形参，代表一个数组
        var max = arr[0];//假设max是数组中的第一个元素
        for (var i = 1; i < arr.length; i++) //从第二个数开始遍历该数组
            if (arr[i] > max) //如果遍历到的数比设定的max大
                max = arr[i];//将遍历到的数赋值给max
            
        
        return max;//最后返回max的值
    

var a = [1, 2, 3, 4, 5];
console.log(myMath.max(a));

输出结果为：5