08JavaScript入门-对象

创建对象的三种方式:
- 1.利用字面量创建对象

使用对象字面量创建对象
就是花括号 { } 里面包含了表达这个具体事物(对象)的属性和方法;{ } 里面采取键值对的形式表示
键:相当于属性名
值:相当于属性值,可以是任意类型的值(数字类型、字符串类型、布尔类型,函数类型等)

 // 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();

对象的使用

  • 对象的属性

    • 对象中存储具体数据的 "键值对"中的 "键"称为对象的属性,即对象中存储具体数据的项
  • 对象的方法

    • 对象中存储函数的 "键值对"中的 "键"称为对象的方法,即对象中存储函数的项
  • 访问对象的属性

    • 对象里面的属性调用 : 对象.属性名 ,这个小点 . 就理解为“ 的 ”

    • 对象里面属性的另一种调用方式 : 对象[‘属性名’],注意方括号里面的属性必须加引号

console.log(star.name)     // 调用名字属性
console.log(star['name'])  // 调用名字属性
  • 调用对象的方法
    对象里面的方法调用:对象.方法名() ,注意这个方法名字后面一定加括号
    变量、属性、函数、方法总结

属性是对象的一部分,而变量不是对象的一部分,变量是单独存储数据的容器

  • 变量:单独声明赋值,单独存在
  • 属性:对象里面的变量称为属性,不需要声明,用来描述该对象的特征
  • 函数:单独存在的,通过“函数名()”的方式就可以调用
  • 方法:对象里面的函数称为方法,方法不需要声明,使用“对象.方法名()”的方式就可以调用,方法用来描述该对象的行为和功能。

- 2.利用 new Object 创建对象

// 利用 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();

注意:

  • Object() :第一个字母大写
  • new Object() :需要 new 关键字
  • 使用的格式:对象.属性 = 值;
-3利用构造函数创建对象:

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

  • 构造函数用于创建某一类对象,其首字母要大写
  • 构造函数要和 new 一起使用才有意义
  • 构造函数的封装格式
function 构造函数名(形参1,形参2,形参3) {
     this.属性名1 = 参数1;
     this.属性名2 = 参数2;
     this.属性名3 = 参数3;
     this.方法名 = 函数体;
}

构造函数的调用格式:

var obj = new 构造函数名(实参1,实参2,实参3)
      • 注意事项

        1. 构造函数约定首字母大写
        2. 函数内的属性和方法前面需要添加 this ,表示当前对象的属性和方法。
        3. 构造函数中不需要 return 返回结果
        4. 当我们创建对象的时候,必须用 new 来调用构造函数
      • 其他

        构造函数,如 Stars(),抽象了对象的公共部分,封装到了函数里面,它泛指某一大类(class)
        创建对象,如 new Stars(),特指某一个,通过 new 关键字创建对象的过程我们也称为对象实例化

  • new关键字的作用

    1. 在构造函数代码开始执行之前,创建一个空对象;
    2. 修改this的指向,把this指向创建出来的空对象;
    3. 执行函数的代码
    4. 在函数完成之后,返回this---即创建出来的对象

    // 构造函数和对象
        // 1. 构造函数  明星 泛指的某一大类  它类似于 java 语言里面的  类(class)
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);

            }
        }
        // 2. 对象 特指 是一个具体的事物 刘德华 ==  {name: "刘德华", age: 18, sex: "男", sing: ƒ}
        var ldh = new Star('刘德华', 18, '男'); // 调用函数返回的是一个对象
        console.log(ldh);
        // 3. 我们利用构造函数创建对象的过程我们也称为对象的实例化
new关键字执行过程:
    1. new 构造函数可以在内存中创建了一个空的对象
    1. this 就会指向刚才创建的空对象
    1. 执行构造函数里面的代码 给这个空对象添加属性和方法
    1. 返回这个对象
function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function(sang) {
                console.log(sang);

            }
        }
        var ldh = new Star('刘德华', 18, '男');

遍历对象:

  • 语句用于对数组或者对象的属性进行循环操作
 // 遍历对象 
        var obj = {
                name: 'pink老师',
                age: 18,
                sex: '男',
                fn: function() {}
            }
            // console.log(obj.name);
            // console.log(obj.age);
            // console.log(obj.sex);
            // for in 遍历我们的对象
            // for (变量 in 对象) {

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

        }
        // 我们使用 for in 里面的变量 我们喜欢写 k  或者  key

你可能感兴趣的:(08JavaScript入门-对象)