js的三大对象

谁借莪１个温暖的怀抱￠ 2021-10-23 12:34 286阅读 0赞

###### 先放两篇整理内置对象较全的博客： ######

> https://segmentfault.com/a/1190000011467723  
> https://www.cnblogs.com/liuluteresa/p/6413988.html

###### 再来一篇面试题 ######

> https://blog.csdn.net/mino\_miao/article/details/81167867

###### 对下述定时器面试题中同步异步问题的详解： ######

> https://www.cnblogs.com/hahazexia/p/9446585.html

##### js的三大对象 #####

###### 本地对象 ######

> 与宿主无关，独立于宿主环境的ECMAScript实现提供的对象。  
> 简单来说，本地对象就是 ECMA-262 定义的类（引用类型）。  
> 这些引用类型在运行过程中需要通过new来创建所需的实例对象。  
> 包含：Object、Array、Date、RegExp、Function、Boolean、Number、String等。

###### 内置对象 ######

> 与宿主无关，独立于宿主环境的ECMAScript实现提供的对象。  
> 在 ECMAScript 程序开始执行前就存在，本身就是实例化内置对象，开发者无需再去实例化。  
> 内置对象是本地对象的子集。  
> 包含：Global和Math。  
> ECMAScript5中增添了JSON这个存在于全局的内置对象。

###### 宿主对象 ######

> 由 ECMAScript 实现的宿主环境提供的对象，包含两大类，一个是宿主提供，一个是自定义类对象。  
> 所有非本地对象都属于宿主对象。  
> 对于嵌入到网页中的JS来说，其宿主对象就是浏览器提供的对象，浏览器对象有很多，如Window和Document等。  
> 所有的DOM和BOM对象都属于宿主对象。

###### 一般将内置对象和本地对象统称为内置对象 ######

##### 不同对象的介绍： #####

###### 一、Math对象 ######

> 该对象不需要实例化，直接使用其静态方法

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
   <th>例子</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>Math.abs(num)</code></td> 
   <td>求num的绝对值</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>Math.floor(num)</code></td> 
   <td>向下取整</td> 
   <td><code>Math.floor(-1.2)</code>：-2</td> 
  </tr> 
  <tr> 
   <td><code>Math.ceil(num)</code></td> 
   <td>向上取整</td> 
   <td><code>Math.ceil(-1.2)</code>：-1</td> 
  </tr> 
  <tr> 
   <td><code>Math.round(num)</code></td> 
   <td>四舍五入</td> 
   <td>当num为负数且小数部分不为5时，先对该数的绝对值四舍五入，再加上负号。如果小数部分为5，则该值的结果是更接近与正无穷大的，即舍去该数的小数部分。<code>eg:Math.round(-2.5)=-2</code></td> 
  </tr> 
  <tr> 
   <td><code>Math.max(num1,num2)</code></td> 
   <td>比较num1和num2的最大值，并返回最大值</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>Math.min(num1,num2)</code></td> 
   <td>比较num1和num2的最小值，并返回最小值</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>Math.random()</code></td> 
   <td>在0-1间取一个随机数（不包括1，包括0）</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>Math.sqart(num)</code></td> 
   <td>求num的平方根</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>Math.pow(num,power)</code></td> 
   <td>求num的power次幂，power可为分数，也可以为整数.</td> 
   <td><code>Math.pow(8, 1 / 3)</code>：2</td> 
  </tr> 
  <tr> 
   <td><code>Math.PI</code></td> 
   <td>Π值（3.1415…）</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>Math.cos(radian)</code></td> 
   <td>该方法的参数为弧度值。弧度值=角度*(180/Math.PI)。其中角度为数字</td> 
   <td><code>Math.cos(60*Math.PI/180)</code>：0.5(值可能不为准确的0.5，但是无限接近的)</td> 
  </tr> 
  <tr> 
   <td><code>Math.sin(radian)</code></td> 
   <td></td> 
   <td><code>Math.cos(30*Math.PI/180)</code>：0.5(值可能不为准确的0.5，但是无限接近的)</td> 
  </tr> 
 </tbody> 
</table>

##### 二、 Date对象 #####

###### 1. 创建日期 ######

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
   <th>其他说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>Date date = new Date()</code></td> 
   <td>当前时间</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>Date date = new Date(milliseconds)</code></td> 
   <td>返回从1970年1月1日过了 milliseconds毫秒后的时间对象</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>Date date = new Date(dateString)</code></td> 
   <td>返回dateStrng对应的时间对象</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>Date date = new Date(year, month, date, hours, minutes, seconds, milliseconds)</code></td> 
   <td>返回其中年月日…对应的时间对象</td> 
   <td>生成的时间对象是month+1的结果</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][20190814123845494.png]

###### 2. get日期 ######

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
   <th>其他说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>对象.getDate()</code></td> 
   <td>返回该对象中某月中的某天（1~31）</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>对象.getDay()</code></td> 
   <td>返回该对象中的某周中的某一天（0~6（0代表星期天））</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>对象.getFullYear()</code></td> 
   <td>返回该对象中的年份</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>对象.getMonth()</code></td> 
   <td>返回该对象中的月份（0~11）</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>对象.gerHours()</code></td> 
   <td>返回该对象中的小时（0~23）</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>对象.getMinutes()</code></td> 
   <td>返回该对象的分钟（0~59）</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>对象.getSecound()</code></td> 
   <td>返回该对象的秒数（0~59）</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>对象.getTime()</code></td> 
   <td>返回格林威治时间1970年1月1日到时间对象对应的时间的毫秒数</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>Date.parse(指定日期字符串)</code></td> 
   <td>返回格林威治时间1970年1月1日午夜到指定日期（字符串）的毫秒数</td> 
   <td>Date的静态方法</td> 
  </tr> 
 </tbody> 
</table>

###### 3. set日期 ######

> 下列方法都返回设置后的对象

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
   <th>其他说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>对象.setDate(date)</code></td> 
   <td>设置 Date 对象中月的某一天 (1 ~ 31)</td> 
   <td>如果date&gt;31,则会正常向下一个推算。<code>eg:let date = new Date('2020-1-28');date.setDate(date.getDate()+10)</code>为2020-2-7</td> 
  </tr> 
  <tr> 
   <td><code>对象.setFullYear(year)</code></td> 
   <td>设置 Date 对象中的年份（四位数字）</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>对象.setHours(hour)</code></td> 
   <td>设置 Date 对象中的小时 (0 ~ 23)</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>对象.setMilliseconds(Millisecond)</code></td> 
   <td>设置 Date 对象中的毫秒 (0 ~ 999)</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>对象.setMinutes(Minute)</code></td> 
   <td>设置 Date 对象中的分钟 (0 ~ 59)</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>对象.setMonth(Month)</code></td> 
   <td>设置 Date 对象中月份 (0 ~ 11)</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>对象.setSeconds(Second)</code></td> 
   <td>设置 Date 对象中的秒数 (0 ~ 59)</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>对象.setTime(Millisecond)</code></td> 
   <td>返回在原时间对象的基础上，再增加Millisecond毫秒后的时间对象</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

###### 4. 其余方法 ######

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
   <th>其他说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>toJSON()</code></td> 
   <td>以JSON数据格式返回日期字符串</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>toLocaleDateString()</code></td> 
   <td>根据本地时间格式，把Date对象的日期部分转换为字符串</td> 
   <td>只输出日期</td> 
  </tr> 
  <tr> 
   <td><code>toLocaleTimeString()</code></td> 
   <td>根据本地时间格式，把Date对象的时间部分转换为字符串</td> 
   <td>只输出时间</td> 
  </tr> 
  <tr> 
   <td><code>toLocaleString()</code></td> 
   <td>据本地时间格式，把 Date 对象转换为字符串</td> 
   <td>把所有时间都转换成本地时间格式</td> 
  </tr> 
  <tr> 
   <td><code>toString()</code></td> 
   <td>把 Date 对象转换为字符串</td> 
   <td></td> 
  </tr> 
  <tr> 
   <td><code>toTimeString()</code></td> 
   <td>把 Date 对象的时间部分转换为字符串</td> 
   <td>把时间转成本地时间格式，其余不变，但是还存在！</td> 
  </tr> 
  <tr> 
   <td><code>valueOf()</code></td> 
   <td>返回Date对象的原始值（Date对象的时间值距离格林威治时间1970年1月1日八点的毫秒数）</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>

###### 三、window对象 ######

> ① js中的全局变量可以通过window来调用：`window.temp...`，这些全局变量属于window对象的属性  
> ② js中的各种事件是window对象的方法：`window.onclick=function(){}...`  
> ③ 弹窗、弹框输入、带确认以及取消按钮的弹框输出

###### 四、history和location对象 ######

> ① location对象可以显示当前页面的地址的相关信息，如：`location.href="https://www.baidu.com"`：进入写该语句的页面时会自动跳到百度主页  
> ② history：能够记录当前网页的历史记录.javascript:history.go(num)。num为负代表后退几页，为正代表前进几页

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20190814132429982.png]

###### 三、几种定时器 ######

###### 几种定时器特点 ######

> ① 方法中的function也可以写到外部，但在window.onload中需要通过`functionName`调用，在外部需要通过`"functionName()"`来调用  
> ② 方法的返回值是一个用来标识该计时器的唯一数字标识  
> ③ `requestAnimationFrame`和setTimeout的区别：setTimeout是在等待指定毫秒数之后被调用(实际上是添加到函数的调用队列中)，而requestAnimationFrame则是在每次屏幕被刷新时被调用，注意，这里的屏幕刷新并不是指页面被刷新。requestAnimationFrame方法仅有一个参数，传入的这个方法将会在下一次屏幕刷新时被调用（实际上是被推入调用队列，并未立即执行）  
> ④ 可以不配套地设置定时器和清除定时器，但是最好还是配套写  
> ⑤ 当创建多个计时器却不移除时，计时器中的函数的执行速度会越来越快

###### 1. 循环计时器（延迟多长时间去反复执行）：`setInterval(function(){},time)` ######

setInterval(function () { 
         console.log(1);
         }, 1000);

function a(){ 
    console.log(1)
    }
    setInterval("a()",1000)

###### 清除循环计时器：`clearInterval(定时器名称)` ######

###### 2. 一次性定时器：`setTimeOut(function(){},time)` ######

> ① 在例1-1中，输出1在延迟1s后执行，而在1s时间还未到时便清楚了计时器，故不输出1.  
> ② 在例1-2中，最终会输出10个10。for循环在主进程队列中，而计时器在异步队列中，故先把主进程队列的所有进程运行完毕后，才运行异步队列中的进程。故输出10个10.  
> ③ 将该方法改装成循环计时器的思想是递归

/*例1-1*/
    /*不输出1*/
    	var timer=setTimeout(function (){ 
         console.log(1);
         },1000);
         clearTimeout(timer);

/*例1-2*/
       for(var i=0;i<10;i++)
         { 
         setTimeout(function (){ 
         console.log(i);
         },0)
         }

/*将setTimeout改装成循环计时器*/
     var count = 0;
         var timer=null;
         showtime();
         function showtime() { 
         count++;
         console.log(count);
         if(count>=10)
         { 
         clearTimeout(timer);
         return;
         }
         timer=setTimeout("showtime()", 1000);
         }

###### 清除一次性计时器：`clearTimeOut(计时器名称)` ######

###### 3.`window. requestAnimationFrame(function(){})` ######

> ① 根据电脑屏幕的fps ，16ms刷新一次  
> ② 有浏览器兼容的写法

###### 清除计时器`cancelAnimationFrame(计时器名称)`（不是cancelRequestAnimationFrame(计时器名称)） ######

> 部分内容参考：https://blog.csdn.net/handsomexiaominge/article/details/89057456

[20190814123845494.png]: /images/20211023/0814f2e24ef34754b0d6316c2c0a76e8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70]: /images/20211023/65ccae5213014e708aa67ec37744d6a4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzMxNDg0Ng_size_16_color_FFFFFF_t_70 1]: /images/20211023/07a88042583f4915a7bd7468bbb0c9bf.png
[20190814132429982.png]: /images/20211023/b88402e77a7b41159aeb97baedd06041.png