一、作用域
top 和 left 在全局作用域是关键字，在函数作用域不是关键字
作用域：脚本的有效范围，作用范围。分两大类：全局(
script)和局部（function）
全局(
script)域
1、直接定义在script标签下的变量及函数，他们都作用在一个域，全局作用域，so..
<script>
var a = 123;
alert( window.a ); //123
function abc(){}
alert( window.abc ); //function abc(){}
</script>
2、直接定义在script标签下的变量 称之为全局变量,script标签下的函数，称之为全局函数
3、全局变量及函数 都是window的一个属性,都能通过window.变量名访问
<script>
var a = 123;
alert( window.a );//123
function abc(){}
alert( window.abc );//function abc(){}
</script>
局部（
function）域任何一个
function(){},都会开启一个局部作用域，
定义在function(){}内部的变量称之为 局部变量
var a = 20;
function fn(){
alert(a);
}
//20
4、作用域链 ：局部作用域内部可以访问父级作用域变量及全局作用域变量，也可以访问父级的函数，及全局函数 ( 往上爬 )
function fn(){
var a = 10;
}
5、局部变量会覆盖父级（全局）变量，函数亦如此
var a = 10;
function fn(){
var a = 20;
alert( a ); //20
}
6、变量没有声明，直接赋值，也会泄露成为顶层对象的属性！可以在不用的js文件访问到
<script>
a = 10;
</script>
<script>
console.log(a) // 10
</script>
7、delete可以删除没有定义的泄露的变量，不能删除申明过的变量
let a = 1;
b = 2;
delete a;
delete b;
console.log(a) // 1
console.log(b) // b is not a defined
8、在函数里面开启严格模式，函数不是任何对象的属性的时候，默认 this 返回顶层对象，开启严格模式，返回 undefined
function fn () {
"use strict";
console.log(this) // undefined
}
fn()
9、严格模式下的 var 声明的不会存在变量提升行为，先使用后声明就报错
10、argument.callee() /kɔː'liː/ 被调用者 相当于调用自己本身
严格模式下的function不能使用argument.callee()会报错
function fn () {
"use strict";
arguments.callee(); // 报错
}
fn()
11、开启严格模式 "use strict"
12、函数的 name 返回函数的名字
13、函数的 length 返回形参的长度 返回的 length 不包括带有 默认值的形参 和 剩余参数的形参
function fn(a, b, c, d = 1, ...res) {
}
console.log(fn.length); // 3
二、javascript解析
javascript解析 即读取代码过程
javascript解析 是 致上而下
预解析:正式解析前的工作，预解析过程会出现 变量提升，函数提升
function (){
alert( b ); //undefined
var b = 10 ;
}
1、变量提升：
var声明的变量 在作用域内声明的变量会被提升到作用域的顶部，且对其赋值undefined,这个过程称之为变量提升，上面代码等同于下面还可以访问父级的参数
function (){
var b = undefined；
alert( b );//undefined
var b = 10 ;
}
2、函数提升：在作用域内的函数定义 函数会被提升到作用域的顶部，其值为其函数本身,这个过程称之为函数提升，上面代码等同于下面
function (){
alert( fn ); //function fn(){}
//code....
function fn(){}
}
3、
var和 函数 重名函数优先，留下函数，函数和函数重名 后面定义的覆盖前面的 - 后来居高
alert(a); //function a(){alert('a2');}
var a = 123;
function a(){
alert('a1');
}
function a(){
alert('a2');
}
a() //报错
alert(a); //123
4、不会提升的函数：在作用域内的函数表达式函数不会被提升到作用域的顶部，so ~
function (){
alert( fn ); //undefined
//code....
var fn = function(){}
}
5、
return一个匿名函数出去就是一个函数表达式，所以可以直接加括号执行
function fn () {
var a = 1
return function (){
console.log(1)
}
}
fn()() // 1
三、案例
alert(a); // function a () { alert(20); }
var x = 5;
function a(){
alert(x);
var x = 10;
}
alert(x); // 5
alert(a); // function a () { alert(20); }
var a = 10;
alert(a); // 10
function a(){
alert( 20 );
}
alert(a); // 10
var a = 30;
alert(a); // 30
var a = function a(){
var a = 20;
alert(a);
}
alert(a); // function a () {var a = 20; alert(a);}
a(); // 20
alert(a); // function a () {var a = 20; alert(a);}
四、闭包
想保留之前的状态，又不想声明全局变量，又要是局部函数的变量，让下次调用基于前面的状态时，这时候可以使用闭包
1、js垃圾回收机制
js 中的 变量 函数 不再使用后，会被自动 js 垃圾回收机制回收
2、形成闭包条件
条件一： 函数内部嵌套函数
条件二： 内部函数引用外部函数的 变量 参数
使用 return 返回了 此内部函数,上面的 变量 和参数 不会被回收
function fn(x){
var a = 5;
function innerFn(){
console.log(x);
console.log(a);
}
return innerFn;
}
var c = fn(20);
c();// 20 //5
var 声明 实现输出当前点击的序号
闭包实现
for (var i = 0; i < div.length; i++) {
(function(idx) {
div[idx].onclick = function() {
console.log(idx);
}
}(i))
}
自定义标签属性
for (var i = 0; i < div.length; i++) {
div[i].flag = i;
div[i].onclick = function() {
console.log(this.flag);
}
}
闭包题
image.png
/*
1 undefined 对象属性我fun
m = 1 fun(m, n)
*/
function fun(n, x){
console.log(x);
return {
fun: function(m){
return fun(m, n);
}
};
}
// var a = fun(0); // n = 0; // undefined
// a.fun(1); // m = 1; n = 0 // 0
/*
执行期
return fun(m, n);
*/
// a.fun(2); // 0
// a.fun(3); // 0
var b = fun(0).fun(1).fun(2).fun(3); // undefined 0 1 2
/*
n = 0; x = undefined answer：1、 undefined
m = 1, n = 0; / n = m = 1; x = n = 0 2、 0;
m = 2, n = 0; / n = m = 2; x = (实参(n) = 形参(n)) = 1 answer：3、1
m = 3, n = 2; / n = m = 3; x = (实参(n) = 形参(n)) = 2 answer：4、2
*/
var c = fun(0).fun(1); // undefined 0
/*
n = 0; x = undefined answer: 1、undefined
return {}
m = 1, n = 0
answer: 2、0
*/
c.fun(2); // 1
/*
m = 2, n = 1;
*/
c.fun(3); // 1
/*
m = 3, n = 1
*/
网友评论