JavaScript-11-对象的概念

2022-01-25 21:04:09 阅读：144 来源： 互联网

标签：11 obj log 对象 JavaScript 创建对象 sex console

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>

标签：11,obj,log,对象,JavaScript,创建对象,sex,console
来源： https://blog.csdn.net/weixin_45438044/article/details/122660583

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。