JS(四) ● setTimeout、setInterval和requestAnimationFrame之间的区别 ● 用setTimeout来实现setInterval ● js怎么控制一次加载一张图片,加载完后再加载下一张 ● 代码的执行顺序 ● 如何实现sleep的效果(es5或者es6) ● 简单的实现一个promise ● Function.proto(getPrototypeOf)是什么? ● 实现js中所有对象的深度克隆(包装对象,Date对象,正则对象) ● 箭头函数中this指向举例

JS(四)
● setTimeout、setInterval和requestAnimationFrame之间的区别
● 用setTimeout来实现setInterval
● js怎么控制一次加载一张图片,加载完后再加载下一张
● 代码的执行顺序
● 如何实现sleep的效果(es5或者es6)
● 简单的实现一个promise
● Function.proto(getPrototypeOf)是什么?
● 实现js中所有对象的深度克隆(包装对象,Date对象,正则对象)
● 箭头函数中this指向举例

这里有一篇文章讲的是requestAnimationFrame:http://www.cnblogs.com/xiaohuochai/p/5777186.html

● 用setTimeout来实现setInterval

(1)用setTimeout()方法来模拟setInterval()与setInterval()之间的什么区别?
首先来看setInterval的缺陷,使用setInterval()创建的定时器确保了定时器代码规则地插入队列中。这个问题在于:如果定时器代码在代码再次添加到队列之前还没完成执行,结果就会导致定时器代码连续运行好几次。而之间没有间隔。不过幸运的是:javascript引擎足够聪明,能够避免这个问题。当且仅当没有该定时器的如何代码实例时,才会将定时器代码添加到队列中。这确保了定时器代码加入队列中最小的时间间隔为指定时间。

这种重复定时器的规则有两个问题:1.某些间隔会被跳过 2.多个定时器的代码执行时间可能会比预期小。

● js怎么控制一次加载一张图片,加载完后再加载下一张

JS(四)
● setTimeout、setInterval和requestAnimationFrame之间的区别
● 用setTimeout来实现setInterval
● js怎么控制一次加载一张图片,加载完后再加载下一张
● 代码的执行顺序
● 如何实现sleep的效果(es5或者es6)
● 简单的实现一个promise
● Function.proto(getPrototypeOf)是什么?
● 实现js中所有对象的深度克隆(包装对象,Date对象,正则对象)
● 箭头函数中this指向举例
2.
JS(四)
● setTimeout、setInterval和requestAnimationFrame之间的区别
● 用setTimeout来实现setInterval
● js怎么控制一次加载一张图片,加载完后再加载下一张
● 代码的执行顺序
● 如何实现sleep的效果(es5或者es6)
● 简单的实现一个promise
● Function.proto(getPrototypeOf)是什么?
● 实现js中所有对象的深度克隆(包装对象,Date对象,正则对象)
● 箭头函数中this指向举例

● 代码的执行顺序

setTimeout(function(){console.log(1)},0);
new Promise(function(resolve,reject){
console.log(2);
resolve();
}).then(function(){console.log(3)
}).then(function(){console.log(4)});
process.nextTick(function(){console.log(5)});
console.log(6);

//输出2,6,5,3,4,1
为什么呢?具体请参考文章:
从promise、process.nextTick、setTimeout出发,谈谈Event Loop中的Job queue

● 如何实现sleep的效果(es5或者es6)

(1)while循环的方式

function sleep(ms){
var start=Date.now(),expire=start+ms;
while(Date.now()<expire);
console.log('1111');
return;
}

执行sleep(1000)之后,休眠了1000ms之后输出了1111。上述循环的方式缺点很明显,容易造成死循环。

(2)通过promise来实现

function sleep(ms){
var temple=new Promise(
(resolve)=>{
console.log(111);setTimeout(resolve,ms)
});
return temple
}
sleep(500).then(function(){
//console.log(222)
})

//先输出了111,延迟500ms后输出222

● 简单的实现一个promise

https://github.com/forthealllight/blog/issues/4

● Function.proto(getPrototypeOf)是什么?

获取一个对象的原型,在chrome中可以通过_proto_的形式,或者在ES6中可以通过Object.getPrototypeOf的形式。
那么Function.proto是什么么?也就是说Function由什么对象继承而来,我们来做如下判别。

Function.proto==Object.prototype //false

Function.proto==Function.prototype//true

我们发现Function的原型也是Function。

我们用图可以来明确这个关系:

JS(四)
● setTimeout、setInterval和requestAnimationFrame之间的区别
● 用setTimeout来实现setInterval
● js怎么控制一次加载一张图片,加载完后再加载下一张
● 代码的执行顺序
● 如何实现sleep的效果(es5或者es6)
● 简单的实现一个promise
● Function.proto(getPrototypeOf)是什么?
● 实现js中所有对象的深度克隆(包装对象,Date对象,正则对象)
● 箭头函数中this指向举例

● 实现js中所有对象的深度克隆(包装对象,Date对象,正则对象)

通过递归可以简单实现对象的深度克隆,但是这种方法不管是ES6还是ES5实现,都有同样的缺陷,就是只能实现特定的object的深度复制(比如数组和函数),不能实现包装对象Number,String , Boolean,以及Date对象,RegExp对象的复制。

valueof()函数

对于原始值或者包装类:

function baseClone(base){
return base.valueOf();
}
//Number
var num=new Number(1);
var newNum=baseClone(num);
//newNum->1
//String
var str=new String('hello');
var newStr=baseClone(str);
// newStr->"hello"
//Boolean
var bol=new Boolean(true);
var newBol=baseClone(bol);
//newBol-> true

其实对于包装类,完全可以用=号来进行克隆,其实没有深度克隆一说,

这里用valueOf实现,语法上比较符合规范。

对于Date类型:

因为valueOf方法,日期类定义的valueOf()方法会返回它的一个内部表示:1970年1月1日以来的毫秒数.因此我们可以在Date的原型上定义克隆的方法:

Date.prototype.clone=function(){
return new Date(this.valueOf());
}
var date=new Date('2010');
var newDate=date.clone();
// newDate->  Fri Jan 01 2010 08:00:00 GMT+0800

对于正则对象RegExp:

RegExp.prototype.clone = function() {
var pattern = this.valueOf();
var flags = '';
flags += pattern.global ? 'g' : '';
flags += pattern.ignoreCase ? 'i' : '';
flags += pattern.multiline ? 'm' : '';
return new RegExp(pattern.source, flags);
};
var reg=new RegExp('/111/');
var newReg=reg.clone();
//newReg->  //111//

● 箭头函数中this指向举例

var a=11;
function test2(){
this.a=22;
let b=()=>{console.log(this.a)} // 22
b();
}
var x=new test2();