[暑假]Js对象部分的学习

原创已于 2022-07-05 20:16:49 修改 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-07-05 17:44:57 首次发布

JavaScript 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍了JavaScript中的对象概念，包括对象的定义、属性与方法的区别、创建方式及对象的调用等核心内容，并提供了实例帮助理解。

什么是对象?

万物皆可对象, 对象是一个具体的事物

对象的本质: 对象就是一组无序的相关属性和方法的集合.

在JS中, 对象是一组无序的相关属性和方法的集合, 所有的事物都是对象, 例如字符串, 数组, 数值, 函数等到

属性:事物的特征, 在对象中用属性来表示(常用名词)

方法: 事物的行为, 在对象中用方法来表示(常用动词)

JavaScript中的对象分为3种:自定义对象,内置对象, 浏览器对象

其中自定义对象和内置对象(就是JS语言自带的一些对象)的内容, 属于ECMAScript

浏览器对象则是JavaScript中独有的对象

为什么需要对象?

保存一个值的时候, 可以使用变量, 保存多个值(一组值)的时候, 可以使用数组. 但是如果是要保存一个人的完整信息, 就只能借助于对象来描述.

同时JS中的对象表达结构会更清晰

对象的创建

1.里面的属性或者方法采取键值对的形式键属性名 : 值属性值

2. 多个属性或者方法中间用逗号隔开

3.方法冒号后面跟的是一个匿名函数

对象的调用:

1) 调用对象的属性对象名.属性名当中的 . 我们可以理解为 " 的 " 的意思

比如: console.log(obj.name);

2) 调用属性还有一种方法对象名['属性名'], 注意其中方括号里面的属性 必须加引号

比如: console.log(obj['age']);

3) 调用对象的方法对象名.方法名() 不要忘记添加小括号

比如: obj.eat();

变量, 属性, 函数, 方法的区别和理解:

变量: 单独声明赋值, 单独存在

属性: 对象里面的变量称为属性, 不需要声明, 用来描述该对象的特征

函数: 单独存在的, 通过"函数名()" 的方式就可以调用

方法: 对象里面的函数称为方法, 方法不需要声明, 使用"对象.方法名()" 的方式就可以调用, 方法用来描述该对象的行为和功能

创建对象的方式:

1.利用对象字面量创建对象:

{} 就是对象的字面量

对象字面量: 就是花括号{}里面包含了表达这个具体事物(对象)的属性和方法.

2.利用new Object创建对象:

var obj = new Object();

obj.name = '小明';

obj.sex = '男';

obj.eat = function() {

console.log('蔬菜');

}

3.构造函数创建对象:

构造函数不需要return就可以返回参数

1).为什么需要构造函数创建对象?

因为我们一次创建一个对象, 里面很多的属性和方法是大量相同的, 我们只能复制

因此我们可以利用函数的方法重复这些相同的代码我们就把这个函数称为构造函数

又因为这个函数不一样, 里面封装的不是普通代码, 而是对象

构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

2) 构造函数中的注意点:

1.构造函数名字首字母要大写

2.构造函数不需要return 就可以返回结果

3.我们调用构造函数必须使用new

4. new关键字的执行过程是什么?为什么构造函数中不需要return返回结果?

第一: new关键字执行过程

1.new构造函数可以在内存中创建一个空的对象

2. this就会指向刚才创建的空对象

3. 执行构造函数中的代码, 给这个空对象添加属性和方法

4. 返回这个对象

第二: 因为new关键字在执行的过程中,以及返回过这个对象,所以才不需要return返回对象

5. 遍历对象

for...in语句遍历对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
<script>
    var obj = {
            name: 'doge',
            age: 3,
            sex: '雄'
    }

    for (var k in obj) {
        alert(k); // k 变量 输出 得到的是 属性名
        alert(obj[k]); // obj[k] 输出 得到的是 属性值
    }
    
</script>
</head>
<body>
</body>
</html>