JavaScript-11-对象的概念

最新推荐文章于 2022-05-20 16:41:34 发布

原创最新推荐文章于 2022-05-20 16:41:34 发布 · 190 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #开发语言

JavaScript 专栏收录该内容

12 篇文章

订阅专栏

1、对象简介：

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

1.1 创建对象的三种方式

利用字面量创建对象
利用 new Object 创建对象
利用构造函数创建对象

1.2 使用字面量创建对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 1.利用对象字面量创建对象 {}
        // var obj = {};  // 创建了一个空的对象 
        var obj = {
                // 里面的属性或者方法我们采取键值对的形式
                uname: 'Echo',
                age: 18,
                sex: '男',
                sayHi: function() {
                    console.log('hi~');

                }
            }
            // 2. 使用对象 对象名.属性名
        console.log(obj.uname);
            //  对象名['属性名']
        console.log(obj['age']);
        // 3. 调用对象的方法  对象名.方法名()
        obj.sayHi();
    </script>
</head>
<body>
</body>
</html>

1.3 使用New关键字

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 利用 new Object 创建对象
        var obj = new Object(); // 创建了一个空的对象
        obj.uname = 'Echo';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function() {
                console.log('hi~');
            }
        console.log(obj.uname);
        console.log(obj['sex']);
        obj.sayHi();
    </script>
</head>
<body>
</body>
</html>

1.4 使用构造函数创建

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 利用构造函数创建对象  构造函数名字首字母要大写
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);

            }
            // 构造函数不需要return 就可以返回结果
        }
        // 调用构造函数 必须使用 new
        var ldh = new Star('Echo', 18, '男'); // 调用函数返回的是一个对象
        console.log(typeof ldh);
        console.log(ldh.name);
        console.log(ldh['sex']);
        ldh.sing('乌云然');
    </script>
</head>
<body>
</body>
</html>

1.5 遍历对象

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // 创建一个对象
        var obj = {
                name: 'Echo',
                age: 18,
                sex: '男',
                fn: function() {}
            }
        // 遍历对象 
        // for in 
        for (var k in obj) {
            console.log(k); // k 变量 输出  得到的是 属性名
            console.log(obj[k]); // obj[k] 得到是 属性值

        }
    </script>
</head>
<body>
</body>
</html>