Java教程

JavaScript对象

本文主要是介绍JavaScript对象，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

JavaScript对象

  • 1、对象
    • 1.1、什么是对象？
    • 1.2、为什么需要对象
  • 2、创建对象的三种方式
    • 2.1、利用字面量创建对象
    • 2.2、案例1
    • 2.2、利用new Object()方式创建对象
    • 2.4、案例2
    • 2.5、利用构造函数创建对象
      • 2.5.1、为什么要用构造函数
      • 2.5.2、构造函数创建对象
      • 2.5.3、案例

1、对象

1.1、什么是对象？

在这里插入图片描述

在这里插入图片描述

1.2、为什么需要对象

在这里插入图片描述

2、创建对象的三种方式

在这里插入图片描述

2.1、利用字面量创建对象

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 1、利用对象字面量创建对象
        // var obj = {};创建了一个对象
        var obj = {
            uname: '张三锋',
            age: 18,
            sex: '男',
            sayHi: function() {
                console.log('hi~');
            }
        }
        // (1)里面的属性或者方法我们采取键值对的形式 健 属性名：值 属性值
        // (2)多个属性或者方法中间我们用逗号隔开的
        // (3)方法冒号后面跟的是一个匿名函数

        // 2、使用对象
        // (1).调用对象的属性，我们采取 对象名.属性名  .我们理解为 的
        console.log(obj.uname);
        // (2)调用属性还要另外一种方法 对象名['属性名']
        console.log(obj['age']);
        // (3)调用对象的方法sayHi  对象名.方法名() 千瓦别忘记天机小括号
        obj.sayHi();
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

2.2、案例1

在这里插入图片描述

2.2、利用new Object()方式创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 利用new Object创建对象
        var obj = new Object();//创建了一个对象
        obj.uname = '张三疯';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function(){
            console.log('hi~'); 
        }
        // (1)我们利用 等号 = 赋值的方法 添加对象的属性和方法
        // (2)每个属性和方法之间用 分号结束
        console.log(obj.uname);
        console.log(obj['sex']);
        obj.sayHi();
        
    </script>
</head>
<body>
    
</body>
</html>

在这里插入图片描述

2.4、案例2

在这里插入图片描述

2.5、利用构造函数创建对象

2.5.1、为什么要用构造函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var zxy = {
            uname: '张学友',
            age:58,
            sing :function(){
                console.log('李香兰');
                
            }
        }
        var ldh = {
            uname: '刘德华',
            age:58,
            sing :function(){
                console.log('李香兰');
                
            }
        }
        // 因为我们一次创建一个对象，里面很多的属性和方法是相同的，我们只能复制
        // 因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为构造函数
        // 又因为这个函数不一样，里面封装的不是普通代码 而是 对象
        // 构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
    </script>
</head>
<body>
    
</body>
</html>

2.5.2、构造函数创建对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 利用构造函数创建对象
        // 我么需要创建四大天王的对象 相同的属性：姓名 年龄 性别    相同的方法：唱歌
        // // 构造函数的语法格式
        // function 构造函数名(){
        //     this.属性 = 值;
        //     this.放啊 = function(){}
        // }
        // new 构造函数名();

        function Star(uname,age,sex){
            this.uname = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang){
                console.log(sang);
            }
        }
        var ldh = new Star('刘德华',18,'男');
        // console.log(typeof ldh);
        console.log(ldh.uname);
        console.log(ldh['sex']);
        ldh.sing('冰雨');

        var zxy = new Star('张学友',18,'男');
        console.log(zxy.uname);
        console.log(zxy['sex']);
        // 1、构造函数名字首字母要大写
        // 2、我们构造函数不需要return 就可以返回结果
        // 3、我们调用构造函数 必须使用new 
        // 4、我们只要new Star() 调用函数就创建一个对象 ldh {}
        // 5、我们属性和方法前面必须添加this
     </script>
</head>
<body>
    
</body>
</html>

2.5.3、案例

在这里插入图片描述

这篇关于JavaScript对象的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航