javaScript 基础知识汇总（十）

1、New Function

　　语法：let func = new Function ([arg1[, arg2[, ...argN]],] functionBody)

　　//无参数示例：

　　let sayHi = new Function('alert ("Hello")');

　　sayHi();//Hello

　　//有参数示例

　　let sum = new Function('a','b','return a + b');

　　alert(sum(1,2));//3

2、调度：setTimeout 和 setInterval

　　setTimeout 将函数的执行推迟到一段时间后再执行

　　setInterval 让函数间隔一定时间周期性执行

　　setTimeout 语法：let timerId = setTimeout(func|code, delay[, arg1, arg2...])

　　func|code 想要执行的代码或者代码字符串

　　delay：执行前的延时单位为毫秒

　　arg1,arg2..：参数列表，ie9 以下不支持

　　无参数示例

　　function sayHi(){

　　　　alert('hello');

　　}

　　setTimeout(sayHi,1000);//1秒后执行

　　带参数示例

　　function sayHi(pthrase,who){

　　　　alert(phrase+','+who);　　

　　}

　　setTimeou(sayHi,1000,"Hello","Jhon");//Hello,John

　　箭头函数的形式

　　setTimeout(()=>alert('hello'));

　　用claerTimeout 来取消调度

　　setTimeout 在调用时会返回一个定时器id

　　cleatTimeout 使用的方法

　　let timerId = setTimeout(....);

　　clearTimeout(timerId);

　　示例：

 let timerId = setTimeout(() => alert("never happens"), );

 alert(timerId); // 定时器 id

 clearTimeout(timerId);

 alert(timerId); // 还是那个 id 没变（并没有因为调度被取消了而变成 null）

　　setInterval

　　语法： let timerId = setInterVal(func|code,delay,[，arg1,arg2...])

　　用法和setTimeout 相同，但是执行的方式不一样，这个是每间隔相同的时间执行一次。

　　递归版 setTimeout

 let i = ;

 setInterval(function() {

   func(i);

 }, );

 let i = ;

 setTimeout(function run() {

   func(i);

   setTimeout(run, );

 }, );

　　setTimeout(...,0);

　　这种用法，虽然时间为0，但是还是会被延时执行，放到一般函数后执行

3、装饰和转发，call/apply

　1) 使用“func.call" 作为上下文

　　语法： func.call(context,arg1,arg2,...)　　

 function sayHi() {

   alert(this.name);

 }

 let user = { name: "John" };

 let admin = { name: "Admin" };

 // 使用 call 将不同的对象传递为 "this"

 sayHi.call( user ); // this = John

 sayHi.call( admin ); // this = Admin

 function say(phrase) {

   alert(this.name + ': ' + phrase);

 }

 let user = { name: "John" };

 // user becomes this, and "Hello" becomes the first argument

 say.call( user, "Hello" ); // John: Hello

 let worker = {

   someMethod() {

     return ;

   },

   slow(x) {

     alert("Called with " + x);

     return x * this.someMethod(); // (*)

   }

 };

 function cachingDecorator(func) {

   let cache = new Map();

   return function(x) {

     if (cache.has(x)) {

       return cache.get(x);

     }

     let result = func.call(this, x); // "this" 现在被正确的传递了

     cache.set(x, result);

     return result;

   };

 }

 worker.slow = cachingDecorator(worker.slow); // 现在让他缓存起来

 alert( worker.slow() ); // 生效了

 alert( worker.slow() ); // 生效了, 不会调用原始的函数了。被缓存起来了

 为了清楚地说明，让我们更深入地了解 this 是如何传递的：

 在经过装饰之后，worker.slow 现在是包装器 function (x) { ... }。

 因此，当执行 worker.slow() 时，包装器将  作为参数并且 this=worker（它是点之前的对象）。

 在包装器内部，假设结果尚未缓存，func.call(this, x) 将当前的 this (=worker) 和当前参数 (=)
 传递给原始方法。

　　2)使用"func.apply" 来传递多参数

　　　语法：func.apply(context,args)

 function say(time, phrase) {

   alert(`[${time}] ${this.name}: ${phrase}`);

 }

 let user = { name: "John" };

 let messageData = ['10:00', 'Hello']; // 成为时间和短语

 // user 成为 this，messageData 作为参数列表传递 (time, phrase)

 say.apply(user, messageData); // [10:00] John: Hello (this=user)

4、函数绑定

　　丢失this

　　在JavaScript中this很容易就会丢失。一旦一个方法被传递到另一个对象分离的地方-----this就会丢失

　　丢失示例：

　　let user = {

　　　　firstName:"Jhon",

　　　　sayHi(){

　　　　　　alert(`Hello,${this.firstName}!`);

　　　　}

　　};

　　setTimeout(user.sayHi,1000);//Hello,undefined!

　　这种情况下上下文丢失

　　解决方案一：包装层

　　let user = {

　　　　firstName:"John",

　　　　sayHi(){

　　　　　　alert(`Hello,${this.firstName}!`);

　　　　}

　　};

　　setTimeout(function(){

　　　　user.sayHi();//Hello,Jhon!

　　},1000);

　　这种方式存在一种风险，就是在1秒之内如果user被改之后，操作的user可能就不是之前的

　　解决方案二：bind

　　基本的语法： let boundFunc = func.bind(context);　

　　func.bind(context) 的结果是一个特殊的像函数一样的“外来对象”，它可以像函数一样被调用并且透明的将　调用传递给 func 并设置 this=context。

　　换句话说，调用 boundFunc 就像是调用 func 并且固定住了 this。　

　　举个例子，这里 funcUser 将调用传递给了 func 同时 this=user：

 let user = {

   firstName: "John"

 };

 function func() {

   alert(this.firstName);

 }

 let funcUser = func.bind(user);

 funcUser(); // John

　　处理对象的方法

 let user = {

   firstName: "John",

   sayHi() {

     alert(`Hello, ${this.firstName}!`);

   }

 };

 let sayHi = user.sayHi.bind(user); // (*)

 sayHi(); // Hello, John!

 setTimeout(sayHi, ); // Hello, John!