JS基础(八) 对象

<script>

        /*

            如果 a.b ,那么a就是对象,b是a的属性

            如果 a.c(),那么a就是对象,c是a的方法

            对象就是拥有一组属性和方法的集合

            定义对象有两种方式:

                1.采用字面量赋值方式直接定义。

                2.采用构造函数的方式new一个对象


            1.采用字面量赋值方式定义对象

            let obj = {

                //定义属性

                //定义方法

            }

            通过对象名.属性,调用对象的属性,可以获取属性的值,也可以修改属性的值,也可以添加新的属性

            通过对象名.方法(),调用对象的方法,执行方法里面的代码

            2.采用构造函数的方式new一个对象

            可以直接new一个Object对象

            let obj = new Object()

            可以定义一个构造函数,再new出这个构造函数的对象


            构造函数也称为:类,是自定义的一种类型

            //定义学生类

            function Student(形参...){

                //定义属性(必须使用this.)

                //定义方法(必须使用this.)

            }

            //创建学生对象

            let s1 = new Student(实参...)    

        */

        let zhangsan = {

            name: '张三',

            age: 18,

            gender: '男',

            sing(){

                console.log(`大家好!我是${this.name},我会唱歌...`);

            },

            raper(){

                console.log(`大家好!我是${this.name},我会raper...`);

            },

            playBsk(){

                console.log(`大家好!我是${this.name},我会打篮球...`);

            }

        }

        console.log(zhangsan);  // Object

        // {name: "张三", age: 18, gender: "男", sing: ƒ, raper: ƒ, …}

        zhangsan.sing()  // 大家好!我是张三,我会唱歌...


        // 通过对象名.属性,调用对象的属性,可以获取属性的值,也可以修改属性的值

        zhangsan.name = '李四'

        console.log(zhangsan);

        // {name: "李四", age: 18, gender: "男", sing: ƒ, raper: ƒ, …}


        // 案例:定义计算器对象,实现加减乘除。

        let clac = {

            // 定义两个属性,用于表示两份数据

            num1: 0,

            num2: 0,

            // 定义计算器对象的方法

            // 方法名: function

            add: function(){

                console.log(`${this.num1} + ${this.num2} = ${this.num1 + this.num2}`);

            },

            sub: function(){

                console.log(`${this.num1} - ${this.num2} = ${this.num1 - this.num2}`);

            },

            cheng: function(){

                console.log(`${this.num1} * ${this.num2} = ${this.num1 * this.num2}`);

            }

        }

        clac.num1 = 100

        clac.num2 = 200

        clac.add()  // 100 + 200 = 300

        clac.sub()  // 100 - 200 = -100

        clac.cheng()  // 100 * 200 = 20000


        // 代码重复写,结构冗余怎么办?

        // 采用构造函数的方式new一个对象

        // 为了区别函数与构造函数,我们习惯性地将构造函数名首字母大写

        // 构造函数也称为:类型,这里也可以理解成定义了一个学生类型

        function Student(name, age, gender){

            // 给学生类型添加三个属性,将来根据这个类型创建出来的每个对象,都会有该属性

            this.name = name

            this.age = age

            this.gender = gender

            // 给学生类型添加方法,将来根据这个类型创建出来的每个对象,都会有该方法

            this.sayHi = function(){

                console.log(`Ladys and gentlemen, listening please! 我叫${this.name},今年${this.age}岁,直${this.gender}一枚。`);

            }

            // 给学生类型,扩展新的方法,所有的学生类的对象,都将拥有该方法。

            this.study = function(time){

                console.log(`我爱学习,学习爱我,每天学习${time}小时,针不戳!`);

            }

        }

        // 通过构造函数new一个新对象

        let s1 = new Student('周杰伦', 20, '男')

        /* let s1 = new Student()

        s1.name = '周杰伦'

        s1.age = 20

        s1.gender = '男' */

        s1.sayHi()  // Ladys and gentlemen, listening please! 我叫周杰伦,今年20岁,直男一枚。

        s1.study(1)  // 我爱学习,学习爱我,每天学习1小时,针不戳!

        let s2 = new Student('张杰', 24, '男')

        s2.sayHi()  // Ladys and gentlemen, listening please! 我叫张杰,今年24岁,直男一枚。

        s2.study(5) // 我爱学习,学习爱我,每天学习5小时,针不戳!

    </script>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容