JavaScript基础语法11-对象

对象

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

对象是由属性和方法组成的

• 属性：事物的特征，在对象中用属性来表示（常用名词）
• 方法：事物的行为，在对象中用方法来表示（常用动词）

创建对象的三种方式

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

1.利用字面量创建对象

    <script>
        // 利用字面量创建对象 {}
        var obj = {}; //创建了一个空的对象
        var obj = {
            uname: '张三',
            uage: 18 ,
            usex: '男',
            sayHi:function(){
                console.log('hi~');
            }
        }
        // (1) 里面的属性或者方法我们采取键值对的形式 键 属性名 ： 值 属性值
        // (2) 多个属性或者方法用逗号隔开的
        // (3) 方法冒号后面跟的是一个匿名函数
 
        // 2.使用对象
        // (1) 调用对象的属性 1. 对象名.属性名 2.对象名['属性名']
        console.log(obj.uname);
        console.log(obj['uage']);
        // (2) 调用对象的方法(匿名函数) 对象名.方法名
        obj.sayHi();
    </script>

变量、属性、函数、方法总结

    <script>
        // 变量、属性、函数、方法的区别
        // 1.变量和属性的相同的  他们都是用来存储数据的
        var num = 10;
        var obj ={
            age : 18,
            fn: function{
                // 方法
            }
        }
        function fn(){
            // 函数
        }
        console.log(obj.age);
        // 变量 单独声明并赋值  使用的时候直接写变量名 单独存在
        // 属性 在对象里面的不需要声明 使用时必须是 对象.属性
        // 2. 函数和方法的相同点 都是实现某种功能 做某件事
        // 函数是单独声明 并且调用的 函数名()  单独存在的
        // 方法 在对象里面 调用的时候 对象.方法()
    </script>

2.new关键字

    <script>
        // 利用 new Object 创建对象
        var obj = new Object(); //创建了一个空的对象
        obj.name = '张三';
        obj.age = 18;
        obj.sex = '男';
        obj.sayHi = function(){
            console.log('Hi');
        }
        // (1) 我们是利用 等号赋值的方法 添加对象的属性和方法
        // (2) 每个属性和方法之间用 ; 号结束
    </script>

new关键字执行过程

 

    <script>
        // new关键字执行过程
        // 1. new 构造函数可以在内存中创建一个空的对象
        // 2. this 就会指向刚才创建的空对象
        // 3. 执行构造函数里面的代码 给这个空对象添加属性和方法
        // 4. 返回这个对象
        function Star(uname, age, sex, sing){
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(){
                console.log(sing);
            }
        }
        var zs = new Star('张三', 18, '男');
    </script>

3.利用构造函数创建对象 

构造函数：一种特殊的函数，主要用来初始化对象，即为对象成员变量赋值初始化。它总与new运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

    <script>
        // 利用构造函数创建对象
        // 创建4个对象  相同的属性：姓名、年龄、性别 相同的方法： 常规
        function 构造函数名(){
            this.属性 = 值;
            this.方法 = function(){

            }
        }
        new 构造函数名();
        // 示例
        function Star(uname, age, sex, sing){
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(){
                console.log(sing);
            }
        }
        var zs = new Star('张三', 18, '男');
        console.log(zs.name);
        zs.sing('张三的歌');
        // 1.构造函数名字首字母大写
        // 2.构造函数不需要return就可以返回结果
        // 3.我们调用构造函数 必须使用 new
        // 4.我们只要new Star() 调用函数就创建一个对象 zs {}
        // 5.我们的属性和方法前面必须添加 this
    </script>

构造函数与对象的区别

    <script>
        // 构造函数和对象
        // 1.构造函数  泛指某一大类
        function Star(uname, age, sex, sing){
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(){
                console.log(sing);
            }
        }
        // 2.对象 特质 是一个具体的事物 刘德华 == {name: '张三', age: 18, sex: '男'}
        var zs = new Star('张三', 18, '男'); // 调用一个函数返回的是一个对象
        console.log(zs.name);

        // 3. 利用构造函数创建对象的过程称为对象的实例化
        
    </script>

遍历对象属性

for...in 用于对数组或者对象的属性进行循环操作

        for (变量 in 对象){ }

    <script>
        // 遍历对象
        var obj = {
            name: '张三',
            age: 18,
            sex: '男',
            fn:function(){}
        }
        // for...in 遍历我们的对象
        for (变量 in 对象){

        }
        for (var k in obj){
            console.log(k); // k 变量 输出 得到的是属性名
            console.log(obj[k]); //obj[k] 得到对象里面的属性值

        }
        // 使用for...in里面的变量 一般使用 k 或者 key
    </script>

小结