函数自执行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{
width: 100px;
height: 100px;
background: red;
}
.box2{
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div class="box" title="123"></div>
<div class="box2"></div>
<script>
var box = document.querySelector('.box');
box.onclick = function(){
alert(box.title)
}
var box = document.querySelector('.box2');
//鼠标移入
box.onclick= function(){
alert(2);
}
</script>
</body>
</html>
工作中,也许两个事件出自不同的人,这时,就有可能出现重名,这避免的方法就是都使用作用域。
// 作用域
// 在函数内部,它作用域的概念就是局部的函数它只能调用局部作用域的变量
// 这时就可以把函数封装起来自执行 - 避免命名冲突
(function(){})();
// 这样这个var box就是局部变量了,就算外面有相同的命名,也不会影响到当前代码本身的逻辑
(function(){
var box = document.querySelector('.box');
box.onclick = function(){
alert(box.title)
}
})();
(function(){
var box = document.querySelector('.box2');
//鼠标移入
box.onclick= function(){
alert(2);
}
})();
// 原生js逻辑基本上就是采用这种方式去分离代码业务的
闭包题思考
function fn(){
var n = 0;
function fn2(){
n++;
return n;
}
return fn2; //不加括号的函数返回的只是函数体
}
var fn3 = fn(); // 这里调用时相当于声明了一个 n 等于 0
var num = fn3(); // 第二次执行时相当于 n++ 了,就等于 1 ,n++不是变量,所以调用时改变的是 var n的值
var num2 = fn3();
var num3 = fn3();
console.log(num3) //3
function fn(){
var n = 0;
function fn2(){
n++;
return n;
}
return fn2; //不加括号的函数返回的只是函数体
}
var fn3 = fn();
var num = fn3();
var num2 = fn3();
var num3 = fn3();
console.log(num3) //3
var fn4 = fn(); // 这里调用时相当于又声明了一个新的 n 等于 0 ,影响的是fn4 这个函数
var num4 = fn4();
console.log(num4) //1
return
function fn(){
function a(){
alert(1)
// return 'lalala'; // 如果加了return且写了值,才不会返回undefined
};
// 局部函数在外部可以调用的原因是它加了return
return a;
}
var n = fn(); // 把函数体存起来
// 既然n是函数 就可以 n() 去执行
console.log(n()) // 执行结果,弹出 1 ,然后打印 undefined ,打印undefined的原因是a这个函数里没有return,没return默认就返回undefined
function a(n1){
var b = 6;
function c(n2){
return n2*2;
}
return [c,arguments[0]-c(b)+b];
}
var n = a(5)[1];
console.log(n)
// ----------------------------
function a(n1){ // 2.这时a(n1)就是a(5)
var b = 6;
function c(n2){
return n2*2;
}
return [c,arguments[0]-c(b)+b]; //3. 这里返回的是一个数组,这时就看拿的是第几个数,a(5)[1] 可知要的是第一个,第0个的c不用去管他
// arguments[0]-c(b)+b
// arguments[0] 它是 函数a(n1)的不定参列表,第0个就是 n1 ,n1 为 5
// c(b) 子函数调用父函数变量 这时c(n2)的 n2 就是 6 ,里面 return n2*2就是return 6*2, 这时的c(b)就是 12
// b 就是父函数里 var b 的值 6
// 5-12+6;
}
var n = a(5)[1]; // 1.遇到函数,首先看在什么地方调用
console.log(n) // -1
function a(n1){
var b = 6; //3. 这时,因为函数里也声明了b,这时返回出来的值同时影响了父级的局部变量 也把它变成了 b =12
function c(n2){
b = n2*2; // 1. 6*2等于12后,赋值给了b
return b; // 2. 这里返回的 b 就是 12
}
// arguments[0] = 5;
// c(6) = 12
// b = 12
return [c,arguments[0]-c(b)+b]; //5-12+12;
}
var n = a(5)[1];
console.log(n) // 5