JavaScript学习-对象

简介: 对象基础

对象

对象:一组无序的相关属性(名词)和方法(动词)的集合。

创建对象的三种方式

(1)利用字面量创建对象(只能创建一个对象)

    • 创建一个空的对象。
    var obj={};

    image.gif

      • 创建一个有内容的对象。例如:
      var obj={
       uname:'guidm',
       age:20,
       sex:'女', 
       helloWorld:function(){
       console.log('hello');
       }
      }

      image.gif

      (1)属性或方法采取键值对的形式

      (2)多个属性或者方法中间用逗号隔开

      (3)方法冒号后面跟的是一个匿名函数

        • 使用对象:

        (1)对象名.属性名

        console.log(obj.uname);

        image.gif

        (2)对象名['属性名']

        console.log(obj['age']);

        image.gif

          • 调用对象的方法:

          对象.方法名()

          obj.helloWorld( );

          image.gif

          变量和属性的相同点:都是用来存储数据的。

          变量和属性的不同点:变量单独声明并赋值,使用的时候直接写变量名,单独存在。

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

          函数和方法的相同点:都实现某种功能。

          函数和方法的不同点:函数是单独声明并且调用的函数名(),单独存在的。

                                             方法在对象里面调用的时候是:对象.方法。

          (2)利用new object创建对象(只能创建一个对象)

          var obj=new Object();
          obj.uname='guidm';
          obj.age='18';
          obj.sex='女';
          obj.sayHi=function(){
           console.log('hi');
          }

          image.gif

          (3)利用构造函数创建对象

          构造函数:利用函数的方法重复这些相同的代码,里面封装的不是普通代码而是对象。

          构造函数主要用来初始化对象,与new运算符一起使用,可以把一些公共的属性和方法抽取出来封装到这个函数里。

          function 构造函数名(){
           this.属性=值;
           this.方法=function(){ }
          }
           new 构造函数名(

          image.gif

          1、构造函数的名字首字母大写

          2、构造函数不需要return

          3、调用构造函数必须使用new

          例如:

          function Person(uname,age,sex){
           this.name=uname;
           this.age=age;
           this.sex=sex;
          }
           var people=new Person('gui',18,'女');

          image.gif

          new执行过程

            1. new构造函数可以在内存中创建一个空的对象。
            2. this会指向创建的空对象。
            3. 执行构造函数里面的代码,给这个空对象添加属性和方法。
            4. 返回这个对象。

            遍历对象(for…in)

            for(变量 in 对象){ }

            image.gif

            for example:

            var obj={
             name='guidm',
             age='18',
             sex='woman'
             }
             for(var k in obj){
             console.log(k);
            }

            image.gif

            使用for in里的变量常用k或key。

            JS内置对象

            JS的对象分为:自定义对象、内置对象、浏览器对象。

            内置对象:JS自带的一些对象,提供了一些常用的或者是最基本而必要的功能。

            常见的内置对象:Math、Date、Array、String

            Math对象

            不是一个构造函数,不需要用new来调用,直接使用里面的属性和方法。

            如:
            console.log(Math.PI);

            image.gif

            (1)Math.abs( ) 绝对值

            console.log(Math.abs(1));//1
            console.log(Math.abs(-1));//1
            console.log(Math.abs('-1'));//1 隐式转换,会把字符型转换为数字型

            image.gif

            (2)Math.floor( )向下取整 (不会四舍五入,小数点后面的直接不要)

            console.log(Math.floor(1.1));//1
            console.log(Math.floor(1.9));//1

            image.gif

            (3)Math.ceil( )向上取整 (有小数点的直接在个位+1,小数点后面不要)

            console.log(Math.ceil(1.1));//2
            console.log(Math.ceil(1.5));//2
            console.log(Math.ceil(1.9));//2

            image.gif

            (4)Math.round( )四舍五入(其他数字都四舍五入除了 .5比较特殊,他往大了取)

            console.log(Math.round(1.1));//1
            console.log(Math.round(1.5));//2
            console.log(Math.round(1.9));//2
            console.log(Math.round(-1.9));//-1
            console.log(Math.round(-1.5));//-1

            image.gif

            (5)随机函数random( )

            random( )返回一个随机的小数0=<x<1

            这个方法里面不跟参数。

            console.log(Math.random());

            image.gif


            案例时间:

            猜数字

            想要得到两个数之间的随机整数并包含这两个数:

            Math.floor(Math.random()*(max-min+1))+min

            function getRandom(min,max){
             return Math.floor(Math.random()*(max-min+1))+min;
            }
             var random=getRandom(1,10);
             while(true){
              var num=prompt('输入一个1~10之间的数');
              if(num>random){
                 alert('猜大了');
               }else if (num<random) {
                 alert('猜小了');
               }else {
                alert('猜对了');
                break;
              }
            }

            image.gif


            目录
            相关文章
            |
            3月前
            |
            前端开发 JavaScript
            个人征信电子版无痕修改, 个人信用报告pdf修改,js+html+css即可实现【仅供学习用途】
            本代码展示了一个信用知识学习系统的前端实现,包含评分计算、因素分析和建议生成功能。所有数据均为模拟生成
            |
            10月前
            |
            JavaScript 前端开发
            如何在 JavaScript 中使用 __proto__ 实现对象的继承?
            使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
            |
            3月前
            |
            前端开发
            个人征信PDF无痕修改软件,个人征信模板可编辑,个人征信报告p图神器【js+html+css仅供学习用途】
            这是一款信用知识学习系统,旨在帮助用户了解征信基本概念、信用评分计算原理及信用行为影响。系统通过模拟数据生成信用报告,涵盖还款记录
            |
            5月前
            |
            编解码 JavaScript 前端开发
            【Java进阶】详解JavaScript的BOM(浏览器对象模型)
            总的来说,BOM提供了一种方式来与浏览器进行交互。通过BOM,你可以操作窗口、获取URL、操作历史、访问HTML文档、获取浏览器信息和屏幕信息等。虽然BOM并没有正式的标准,但大多数现代浏览器都实现了相似的功能,因此,你可以放心地在你的JavaScript代码中使用BOM。
            138 23
            |
            10月前
            |
            Web App开发 JavaScript 前端开发
            如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
            【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
            |
            4月前
            |
            JavaScript 数据可视化 前端开发
            three.js简单实现一个3D三角函数学习理解
            1.Three.js简介 Three.js是一个基于JavaScript编写的开源3D图形库,利用WebGL技术在网页上渲染3D图形。它提供了许多高级功能,如几何体、纹理、光照、阴影等,以便开发者能够快速地创建复杂且逼真的3D场景。同时,Three.js还具有很好的跨平台和跨浏览器兼容性,让用户无需安装任何插件就可以在现代浏览器上观看3D内容。
            149 0
            |
            10月前
            |
            JSON 前端开发 JavaScript
            JavaScript中对象的数据拷贝
            本文介绍了JavaScript中对象数据拷贝的问题及解决方案。作者首先解释了对象赋值时地址共享导致的值同步变化现象,随后提供了五种解决方法:手动复制、`Object.assign`、扩展运算符、`JSON.stringify`与`JSON.parse`组合以及自定义深拷贝函数。每种方法都有其适用场景和局限性,文章最后鼓励读者关注作者以获取更多前端知识分享。
            107 1
            JavaScript中对象的数据拷贝
            |
            10月前
            |
            Web App开发 JavaScript 前端开发
            如何学习JavaScript?
            如何学习JavaScript?
            183 5
            |
            10月前
            |
            JavaScript 前端开发 索引
            JavaScript学习第二章--字符串
            本文介绍了JavaScript中的字符串处理,包括普通字符串和模板字符串的使用方法及常见字符串操作方法如`charAt`、`concat`、`endsWith`等,适合前端学习者参考。作者是一位热爱前端技术的大一学生,专注于分享实用的编程技巧。
            81 2