js内容整理

js内容整理

一、定时器

JavaScript 提供定时执行代码的功能，叫做定时器（timer），主要由setTimeout()和setInterval()这两个函数来完成。

setTimeout()

setTimeout函数用来指定某个函数或某段代码，在多少毫秒之后执行。它返回一个整数，表示定时器的编号，以后可以用来取消这个定时器。

var timerId = setTimeout(func|code, delay);

上面代码中，setTimeout函数接受两个参数，第一个参数func|code是将要推迟执行的函数名或者一段代码，第二个参数delay是推迟执行的毫秒数。

console.log(1);
setTimeout('console.log(2)',1000);
console.log(3);
延迟1000ms打印 2

还可以用用函数调用

function f() {
  console.log(2);
}
console.log(1);
setTimeout(f, 1000);
console.log(3);

setTimeout还允许更多的参数。回调函数

var x = 1;
var obj = {
  x: 2,
  y: function () {
    console.log(this.x);
  }
};
setTimeout(obj.y, 1000) 

上面代码输出的是1，而不是2。因为当obj.y在1000毫秒后运行时，this所指向的已经不是obj了，而是全局环境。

var x = 1;
var obj = {
  x: 2,
  y: function () {
    console.log(this.x);
  }
};
setTimeout(function () {
  obj.y();
}, 1000);

上面代码中，obj.y放在一个function函数之中，这使得obj.y在obj的作用域执行，而不是在全局作用域内执行，所以能够显示 2
也可以用bind绑定的方法

var x = 1;
var obj = {
  x: 2,
  y: function () {
    console.log(this.x);
  }
};
setTimeout(obj.y.bind(obj), 1000)

`闭包函数的作用`:
			1.内部函数 
			2. 自由变量
			3. 闭包可以记住自由变量的状态

setInterval的一个常见用途是实现轮询。

var hash = window.location.hash;
var hashWatcher = setInterval(() => {
  if (window.location.hash != hash) {
    console.log();
  }
}, 1000);

二、bind、call、apply的作用

关于call、apply、bind函数，它们主要用来改变this指向的。

call的用法

let obj = {
        name: "xiaoming",
        age: 21,
        sayHello: function (job, hobby) {
            console.log(`我叫${this.name},今年${this.age}岁。我的工作是: ${job}，我的爱好是: ${hobby}。`);
        }
    }
    obj.sayHello('学生', '看书'); // 我叫xiaoming,今年24岁。我的工作是: 学生，我的爱好是: 看书。
    
    let obj1 = {
        name: "lihua",
        age: 30
    }
    obj.sayHello.call(obj1, '老师', '听歌'); // 我叫lihua,今年30岁。我的工作是: 老师，我的爱好是: 听歌。

apply的用法

let obj = {
        name: "xiaoming",
        age: 21,
        sayHello: function (job, hobby) {
            console.log(`我叫${this.name},今年${this.age}岁。我的工作是: ${job}，我的爱好是: ${hobby}。`);
        }
    }
    obj.sayHello('学生', '看书'); // 我叫xiaoming,今年24岁。我的工作是: 学生，我的爱好是: 看书。
    
    let obj1 = {
        name: "lihua",
        age: 30
    }
    obj.sayHello.apply(obj1, ['老师', '听歌']); // 我叫lihua,今年30岁。我的工作是: 老师，我的爱好是: 听歌。

bind用法

var x = 1;
var obj = {
  x: 2,
  y: function () {
    console.log(this.x);
  }
};
setTimeout(obj.y.bind(obj), 1000)

三者区别

1、相同点:
		三个都是用于改变this指向；
		接收的第一个参数都是this要指向的对象；
		都可以利用后续参数传参。
2、不同点:
		call和bind传参相同，多个参数依次传入的；
		apply只有两个参数，第二个参数为数组；
		call和apply都是对函数进行直接调用，而bind方法不会立即调用函数，而是返回一个修改this后的函数。