js-对象-学习笔记

51 篇文章 2 订阅
17 篇文章 1 订阅

1、javascript对象

1.1、对象的概念:对象是一组无序的相关相关属性和方法的集合 ,js提供很多内建对象,比如 Object、String、Date、Array等

1.2、对象的划分:自定义对象、内置对象、浏览器对象(本文重要讲解自定义对象和内置对象) 

1.3、对象的构成:

  • 属性:事物的特征,在对象中用属性来表示
  • 方法:事物的行为,在对象中用方法来表示

1.4、创建对象的方法:

三种方法:字面量创建对象 { }、new Object 创建对象 、构造函数 创建对象 new  ​​​​​​​

  • 字面量创建对象 { }

 var 对象名 = {

       属性:属性值;

       方法名:function() {

       }

     }

<script>

  // 字面量创建对象
        var dog = {
            dogname : '可可',
            type : '阿拉斯加犬',
            age : 5,
            color : '棕红色',
            sayhi: function(skill) {  //方法
              return skill;//值返回给调用者
            }
        };
        console.log(dog.age);
        console.log(dog['dogname']);
        console.log (dog.sayhi('汪汪'));

</script>

总结:

  • 里面的属性和方法采用 键值对  键 :值;
  • { } 里面包含来表示具体事物(对象)的属性方法
  • 每个属性用逗号隔开
  • 最后一个键值对不需要在末尾加‘,’,如果加了,有的浏览器(如低版本的IE)将报错。
  • 调用对象属性:对象名.属性名  ||  对象名['属性名']
  • 调用对象的方法:对象名.方法名()
  • 属性名包含特殊字符,就必须用' '括起来 但是注意这个拥有特殊字符的属性名不能通过.来调用属性 而是通过  对象名['属性名']

<script>
   var xiaohong = { 
       name: '小红',
      'middle-school': 'No.1 Middle School' 
    }; 
   console.log(xiaohong['middle-school']);

</script>
  • new Object 创建对象 

var 对象名 = new Object();  //创建了一个空的对象

对象名.属性名 =  属性值 ; //利用等号赋值 结尾为分号

对象名.方法名 = function() {

}

总结:

  • 利用等号赋值 结尾为分号 
<script>
        var obj = new Object; //创建了一个空的对象 对象名是obj
        obj.yourname = '鸣人';
        obj.sex = '男';
        obj.age = 19;
        obj.skill = function () {
            console.log('隐身术');
        };

        console.log(obj.yourname);
        obj.skill();

</script>
  • 构造函数 创建对象 new 

语法格式:
     
 function  构造函数名() {
             this.属性 = 值;
             this.方法名 = function(sang) {
                   console.log (sang);
                  }
      };

调用构造函数 :
  var  对象名1   =    new 构造函数名(); //调用函数返回的是一个对象
  对象名1.方法名('临安县');

  var  对象名2  =    new 构造函数名();  

<script>
   // 构造函数创建对象
        function Star(uname, age, sex) {
            this.name = uname;
            this.age = age;
            this.sex = sex;
            this.sing = function (sang) {
                console.log(sang);
            }
        }

        var td = new Star('刘德华', 18, '男');//调用函数的返回值是一个对象
        td.sing('冰雨');
        console.log(td.name);
        console.log(td['age']);

        var td2 = new Star('张学友', 20, '男');
        console.log(td2.name);

</script>

总结:

  • 构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
  • 前面创建对象的方法一次只能创建一个对象,使用构造函数的方法一次可以创建多个属性值相同的对象
  • 构造函数名字首字母要大写
  • 我们构造函数 必须使用new 来创建对象
  • 我们只要new 构造函数名() 调用函数就创建一个对象​​​​​​​
  • 我们属性和方法前面必须添加 this
  • 构造函数不需要return 就可以返回结果

三种方法调用都是一样的 : 

 1、对象名.属性名  ||  对象名['属性名']

2、对象名.方法名()

但是当属性名带有特殊字符的时候只能用 对象名['属性名']

1.5、补给知识:有很多同学可能不理解为什么要用new来创建对象,它到底是如何实现的,接下来我们就一起来看看吧 

new关键字的执行过程:

  1. new 构造函数可以在内存中创建一个空的对象
  2. this 就会指向刚才创建的空对象
  3. 执行构造函数里面的代码 给这个空对象添加属性和方法
  4. 返回这个对象  所以我们方法就不需要在用return返回

1.6、遍历对象

前面我们学习了很多遍历数组的方法:循环、索引号;

接下来介绍一种遍历对象的方法:

for (var 变量 in 对象名)  {......}

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

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

以下代码是求字符串中出现次数最多的字符 以及输出次数? 

<script>

        var str = 'abcoefoxyozzopp';
        var o = {};
        for (var i = 0; i < str.length; i++) {
            var index = str.charAt(i); //这里的index获取的是str里面的每个字符
            if (o[index]) { //得到的是属性值
                o[index]++;
            } else {
                o[index] = 1;//给属性赋值
            }
        }
        //遍历对象
        var max = 0;
        var ch = '';
        for (var k in o) {
            if (o[k] > max) {
                max = o[k];
                ch = k;
            }
        }
        console.log('最多的次数的字符:' + ch);
        console.log('次数最多的字符次数'+max); 
        
</script>

我们之间学习了简单数据类型和复杂数据类型

现在做一个系统的总结:

简单数据类型:简单数据类型存放在里面 ,里面存放的是值

复杂数据类型:通过存放在栈里面的地址(十六进制)指向的是,在堆里面查找对应的值

 简单数据类型里面有特殊的类型,比如字符串对象,里面拥有属性方法,其实是通过把简单数据类型 包装成为了复杂数据类型,就有了属性和方法---也就是基本包装类型


var str = 'andy';
console.log(str.length); //4
包装过程
1、生成临时变量    var temp = new String('andy');
2、赋值给我们声明的字符变量  str=temp
3、销毁临时变量 temp  = null 

以上就是为初学者总结的对象的一些基础知识 评论加关注哟 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奶茶丶

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值