JavaScript对象

在 JavaScript 中,对象是一组无序的相关属性和方法的集合,所有的事物都是对象。

- 属性:事物的特征,在对象中用属性来表示(常用名词)

- 方法:事物的行为,在对象中用方法来表示(常用动词)

为什么用对象

- 保存一个值时,可以使用变量,保存多个值(一组值)时,可以使用数组。

- 如果要保存一个人的完整信息呢?

- 例如,保存一个人的个人信息:

//数组

var arr = [‘张三’, ‘男', 128,174];  

缺点是:数据只能通过索引值访问,开发者需要清晰的清除所有的数据的排行才能准确地获取数据。

而使用对象:

var obj = {

      "name":"张三",

      "sex":"男",

      "age":128,

      "height":154

  }

创建对象

- 使用对象字面量创建对象:就是花括号 { } 里面包含了表达。

- 键:相当于属性名

- 值:相当于属性值,可以是任意类型的值(数字类型、字符串类型,函数类型等)

//js

 var info= {

        name : '小明',

        age : 18,

        sex : '男',

        say: function(){

            alert('大家好啊~');

        }

};

总结:

- 里面的属性或者方法我们采取键值对的形式  键 属性名 : 值  属性值

- 多个属性或者方法中间用逗号隔开的

- 方法冒号后面跟的是一个匿名函数

- 属性加引号和不加引号使用是一样的,如果键是以数字开头必须加引号,且不能用”.”来调用需要用[]调用。

对象的使用

//js

console.log(info.name)     // 调用名字属性

console.log(info['name'])  // 调用名字属性

info.say(); //调用方法

- 调用对象的属性 我们采取 对象名.属性名 . 我们理解为 的

- 调用属性还有一种方法 对象名['属性名']

- 调用对象的方法 sayHi   对象名.方法名() 千万别忘记添加小括号

  var num = 10;

        var obj = {

            age: 18,

            fn: function() {

                    alert(“1”);

            }

        }

        function fn() {

 alert(“2”);

        }

        console.log(obj.age);

        // console.log(age);

总结:

- 变量 单独声明并赋值  使用的时候直接写变量名 单独存在

- 属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性

- 函数是单独声明 并且调用的 函数名() 单独存在的

- 方法 在对象里面 调用的时候 对象.方法()

new创建对象

利用 new Object 创建对象。

var obj = new Obect();//此时obj已经为对象

利用属性和方法来赋值对象:

obj .name = '小明';

obj .age = 18;

obj.sex = '男';

obj.sayHi = function(){

        alert('大家好啊~');

}

总结:

- Object() :第一个字母大写   

- new Object() :需要 new 关键字

- 使用的格式:对象.属性 =  值;   

构造函数创建对象

- 构造函数:是一种特殊的函数,主要用来初始化对象,

- 即为对象成员变量赋初始值,它总与 new 运算符一起使用。

- 我们可以把对象中一些公共的属性和方法抽取出来,然后封装到这个函数里面。

//js

 function 构造函数名(形参1,形参2,形参3) {

           this.属性名1 = 参数1;

           this.属性名2 = 参数2;

           this.属性名3 = 参数3;

           this.方法名 = 函数体;

 }

- 构造函数的调用格式

var obj = new 构造函数名(实参1,实参2,实参3)

以上代码中,obj即接收到构造函数创建出来的对象。

举例:

// new 构造函数名();

     function student(uname, age, sex) {

            this.name = uname;

            this.age  = age;

            this.sex   = sex;

            this.sing  = function(sang) {

                console.log(sang);

            }

      }

 var info = new student('小明', 18, '男'); // 调用函数返回的是一个对象

为什么使用构造函数?

- 为什么使用构造函数:就是因我们前面两种创建对象的方式一次只能创建一个对象

- 因为我们一次创建一个对象,里面很多的属性和方法是大量相同的 我们只能复制

- 因此我们可以利用函数的方法 重复这些相同的代码 我们就把这个函数称为 构造函数

- 构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

写法总结:

- 构造函数名字首字母要大写

- 我们构造函数不需要return 就可以返回结果

- 我们调用构造函数 必须使用 new

- 我们只要new student() 调用函数就创建一个对象 info {}

- 我们的属性和方法前面必须添加 this

new 关键词的作用

- 在构造函数代码开始执行之前,创建一个空对象;

- 修改this的指向,把this指向创建出来的空对象;

- 执行函数的代码

- 在函数完成之后,返回this---即创建出来的对象

遍历对象

语法:

  for (变量 in 对象名字) {

      // 在此执行代码

  }

  for (var k in obj) {

      console.log(k);      // 这里的 k 是属性名

      console.log(obj[k]); // 这里的 obj[k] 是属性值

  }

总结:

- for in 可以对 对象和数组进行遍历。

- 这个变量(属性也可称键)通常可以用k或者key更符合语义。

例如以下题目:

1:创建一个电脑对象,该对象有颜色,品牌,重量,看电影(方法),打游戏(方法)。

  var Computer = {
            color:'黑色',
            brade:'小米',
            weight:'1kg',
            movie:function(str){
                return '看:'+str;
            },
            playgame:function(str){
                return '玩:'+str;
            }
        }
        console.log('颜色:'+ Computer.color+'\n'+'品牌:'+Computer.brade+'\n'+'重量:'+Computer.weight+'\n'
        +Computer.movie('人生大事')+'\n'+Computer.playgame('英雄联盟'));

2:创建一个构造函数,包括:SID,姓名,年级,爱好(可传参数),创建2个学生对象。

 function Student(sid,name,grade){
            this.sid=sid;
            this.name=name;
            this.grade=grade;
            this.hobby=function(str){
                return '这个人的学号是:'+sid+'姓名是:'+name+ '年级是:'+grade+ '爱好是:'+str+'\n';
            }
        }
        var S1 = new Student(1,'张三','二年级');
        var S2 = new Student(2,'李四','三年级');
        var res1 = S1.hobby('玩游戏');
        var res2 = S2.hobby('睡觉');
        console.log(res1,res2)

  • 49
    点赞
  • 26
    收藏
    觉得还不错? 一键收藏
  • 38
    评论
评论 38
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值