this关键字:
this是一个使用在作用域内部(块级作用域、函数作用域、全局作用域)的关键字
this关键字是函数声明时自动生成的一个内部对象,只能在函数内部使用总指向调用它的对象
(全局很少使用,大部分在函数内部使用)
this指向:
根据运行时的不同,this指向的对象有所区别
在绝大多数情况下,函数的调用方式决定了this的值
浏览器环境、全局环境下使用this:this指向window对象
console.log(this); // window
console.log(this === window); // this
在函数中使用this:
不管函数怎么定义,不管函数在哪定义,只看函数的调用(箭头函数除外)
<script>
// 在函数中使用this:
// 不管函数怎么定义,不管函数在哪定义,只看函数的调用(箭头函数除外)
// 普通函数(直接调用/全局调用):this指向window
// 函数名()
function fn() {
console.log(this); // window
}
fn() // 普通调用,this指向window
// 定时器函数:this指向window
// setTimeout(function(){},0)
// setInterval(function(){},0)
setTimeout(fn,0) // 把fn函数当作定时器处理函数使用
// 自执行函数: this指向window
// (function(){})()
// 以上都是全局函数,this
</script>
定时器:
<script>
//【setTimeout和setInterval的区别】
// timeout:(体育比赛中的)暂停;超时;
// interval: 间隔;间隙。
// 使用setTimeout()开启的定时器,“时间”一到代码就会执行。
// 即用来指定某个函数或某段代码在多少毫秒之后执行。
// 使用setInterval(()开启的定时器,“时间间隔”一到代码就会执行一次。
// 即每隔一段时间执行一个函数。
setInterval(function(){
console.log(4);
},1000)
// 使用clearTimeout(()和clearInterval(()可以清除定时器。
// 【题目:最后的打印顺序是什么?】
// 第一种情况: console.log(1);
// setTimeout(function(){
// console.log(2);
// },10)
// console.log(3);
// 第二种情况:
console.log("A");
setTimeout(function(){
console.log("B");
},0)
console.log("C");
// setTimeout指定的代码,必须等到本次执行的所有同步代码都执行完,才会执行。
</script>
闭包:
什么是闭包?
闭包就是有权访问另一个函数作用域中变量的函数可以理解为:
1.闭包是定义在函数中的函数
2.闭包能访问包含函数的变量
3.即使包含函数执行完了, 被闭包引用的变量也得不到释放
<script>
// 闭包(closure):闭包是一种代码形式,内部函数访问外部函数的局部变量。
//在JS中,每当创建一个函数,闭包就会在函数创建的同时被创建出来,作为函数内部与外部连接起来的一座桥
// 举例:js函数A里面有一个函数B,函数B访问了函数A里面定义的局部变量,此时就产生了闭包。
// 变量所在的函数就是闭包函数,这里A就是闭包函数。
// 外部函数
function outer(){
// 外部函数中的局部变量
let n =10
// 内部函数
function inner(){
// 内部函数访问外部函数的局部变量
console.log(n);
}
// 将内部函数return出去,这样外部才可以调用
return inner
}
let fn =outer();
console.log(fn);
fn()
</script>
闭包的作用
作用:解决了变量污染问题,让变量函数被保护起来
// 代码演示
let count = 0;
setInterval(function (){
console.log(count++);
},1000)
// 以上代码中的count是一个使用频率
// 为了避免和其他位置的代码冲突,可以再使用一个函数把以上的代码包裹起来,起到保护作用。
function fn(){
let count = 0
setInterval(function(){
console.log(count++);
},1000)
}
fn()
// 以上代码中,setInterval函数与count构成了闭包
function fn(){
let count = 0
function add(){
console.log(count++);
}
setInterval(add,1000)
}
fn()
// 以上代码中,add+count构成了闭包
总结:一个函数内使用了外部的变量,那这个函数和被使用的外部变量一起被称为闭包结构
在实际开发中,通常会再使用一个函数包裹住闭包结构,以起到对变量保护的作用
作用2:
<script>
// 可以延长变量的生命周期
// 变量的声明周期:
// 全局变量:从声明开始 直到 页面关闭
// 局部变量:从声明开始 直到 函数执行结束
// 【全局变量】
// 全局变量n 写在函数外面
let n = 10;
function ck(){
console.log(n);
}
// 函数内部可以访问到全局变量
ck() //10
// 【局部变量】
// function outer(){
// 局部变量:特点1-只能在函数内部访问
// 特点2-函数执行结束后就会被销毁
let b = 20;
// 内部访问局部变量V
console.log(b); //20
// }
// outer();
// 函数作用域外,访问局部变量x
// console.log(b);
</script>
作用3:
<script>
// 提供了有限的访问权限
function data(){
let age = 18
// 读取数值
function getAge(){
return age
}
// 设置数据
function setAge(n){
// 在赋值时,所赋的值进行合理的校验
if(n>0 && n<100){
age = n
}
}
// 返回一个对象到外部 对象带着两个内部函数
return {
getAge:getAge,
setAge:setAge
}
}
let op = data();
op.setAge(80)
console.log(op.getAge());
</script>