this指向
一.什么是this指向
根据运行时的不同,this指向的对象有所区别。
在绝大多数情况下,函数的调用方式决定了this的值。
浏览器环境/全局环境下使用this:this指向window对象
console.log(this); //Window
console.log(this === window); //true
二.在函数中使用this
在函数中使用this:不管函数怎么定义,不管函数在哪定义,只看函数的调用(箭头函数除外)。
普通函数(直接调用/全局调用):this指向window
函数名()
setTimeout(function(){},0)
setInterval(function(){},0)
setTimeout(fn, 0) //把fn函数当作定时器处理函数使用
定时器函数:this指向window:
function fn() {
console.log(this); //Window
}
fn() //普通调用,this指向window
自执行函数:this指向window:
(function(){})()
以上都是全局函数,this指向windol
对象调用函数:this指向的是xxx对象
xxx.函数名():
Math.random():
问:a.b.c()函数中的this指向是? 答:a.b
var obj = {
// 把fn存储的地址赋值给了obj的f成员
// 从现在开始obj.f和全局变量的fn指向同一个函数空间
f:fn,
name:'我是obj对象'
}
obj.f() //d对象调用,this指向obj。
setTimeout(obj.f,0) // 把obj.f函数当作定时器处理函数使用
事件处理函数:this指向的是事件源(绑定在谁身上的事件)
xxx.onclick = function(){}
xxx.addEventListener('',function(){})
箭头函数不同于传统JavaScript中的函数,箭头函数没有自己的this。
它所谓的this是捕获其所在上下文的this值,作为自己的this值。
闭包
一.什么是闭包
概念闭包函数:声明在一个函数中的函数,叫做闭包函数。
闭包:闭包是一种代码形式,内部函数访问外部函数的局部变量。内部函数总是可以访问其所在的外部函数中声明的参数和变量,即使在其外部函数被返回(寿命终结)了之后。
举例(面试题)::js函数A里面有一个函数B,函数B访问了函数A里面定义的局部变量,此时就产 生了闭包。变量所在的函数就是闭包函数,这里A就是闭包函数。
特点:
1. 让外部访问函数内部变量成为可能;
2.局部变量会常驻在内存中;
3.可以避免使用全局变量,防止全局变量污染;
4.会造成内存泄漏(有一块内存空间被长期占用,而不被释放)
// 外部函数
function outer(){
// 外部函数中的局部变量
let n =10
// 内部函数
function inner(){
// 内部函数访问外部函数的局部变量
console.log(n);
}
// 将内部函数return出去,这样外部才可以调用
return inner
}
let fn =outer();
console.log(fn);
fn()
二.作用:
作用1:解决变量污染问题,让变量被函数保护起来。
<script>
// 作用1:解决变量污染问题,让变量被函数保护起来。
// 示例代码
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构成了闭包
// 总结:一个函数内使用了外部的变量,那这个函数和被使用的外部变量一起被称为闭包结构
// 在实际开发中,通常会再使用一个函数包裹住闭包结构,以起到对变量保护的作用。
</script>
作用2:可以延长变量的生命周期
<script>
// 作用2:可以延长变量的生命周期
// 变量的声明周期:
// 全局变量:从声明开始 直到 页面关闭
// 局部变量:从声明开始 直到 函数执行结束
// 【全局变量】
// 全局变量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>
// 作用3:提供了有限的访问权限
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>