js的三大对象

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

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对象

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

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

二、 Date对象

1. 创建日期

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

2. get日期

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

3. set日期

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

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

4. 其余方法

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

三、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为负代表后退几页，为正代表前进几页

	<a href="javascript:history.go(-1)">倒退</a>
	<a href="javascript:history.go(1)">前进</a>
	<a href="./前进页面.html">前进页面</a>
	<a href="./倒退页面.html">后退页面</a>

三、几种定时器

几种定时器特点

① 方法中的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)

window.onload = function(){
var count=0;
	function a(){
	count++
		console.log(1)
		if(count>10){
			clearInterval(timer);
		}
	}
	var timer=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刷新一次
② 有浏览器兼容的写法

  var windowrequestAnimationFrame = function (callback) {
  /*浏览器兼容写法*/
     return requestAnimationFrame(callback) || mozRequestAnimationFrame(callback) || webkitRequestAnimationFrame(callback)
     || msRequestAnimationFrame(callback) || function (callback) {
     setTimeout(function () {
     callback();
     }, 16)
     }
     }
     var windowcancelAnimationFrame = function (time) {
     return cancelAnimationFrame(time) || clearTimeout(time);
     }
     var timer = null;
     var count = 0;
     loop();
     function loop() {
     count++;
     console.log(count);
     if (count >= 10) {
     //cancelRequestAnimationFrame  这个代码不认  会报错   认cancelAnimationFrame
     windowcancelAnimationFrame(timer);
     return;
     }
     timer = windowrequestAnimationFrame(loop);
     }

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

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