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"), 1000);
alert(timerId); // 定时器 id

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

　　setInterval

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

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

　　递归版 setTimeout

　　

let i = 1;
setInterval(function() {
  func(i);
}, 100);

let i = 1;
setTimeout(function run() {
  func(i);
  setTimeout(run, 100);
}, 100);

　　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 1;
  },

  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(2) ); // 生效了
alert( worker.slow(2) ); // 生效了, 不会调用原始的函数了。被缓存起来了

为了清楚地说明，让我们更深入地了解 this 是如何传递的：
在经过装饰之后，worker.slow 现在是包装器 function (x) { ... }。
因此，当执行 worker.slow(2) 时，包装器将 2 作为参数并且 this=worker（它是点之前的对象）。
在包装器内部，假设结果尚未缓存，func.call(this, x) 将当前的 this (=worker) 和当前参数 (=2)
 传递给原始方法。

　　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, 1000); // Hello, John!