浅谈JavaScript

Xixibao
17 min readMar 16, 2021

HTML创建了页面的基本元素。CSS让这些元素定位在相应的位置,形成布局与颜色渲染等等。但是这样的页面是静态的,为了让页面更具有交互性,所以用到了JS。
下面将介绍JS中的基本概念:

1、闭包:正常情况下JS函数的内部变量是无法被函数体外部所访问到的,因为JS的语言结构是“链式作用域”结构,子对象会一级一级向上寻找父对象的变量,所以父对象对子对象是可见的,但是子对象不是。下面举一个闭包的🌰。

function f1(){
var n=999;
function f2(){
alert(n);
}
return f2;
}
var result=f1();
result();//999

上面这个🌰就是闭包了。所以闭包其实就是在可以读其他函数内部变量的函数~
下面再看一个🌰!

function f1(){
var n=999;
nAdd=function(){n+=1}
function f2(){
alert(n);
}
return f2();
}
var result = f1()
result(); //999
nAdd();
result(); //1000

闭包的作用除了可以在外部读取函数内部的变量,还可以让这些变量始终保持在内存中,不会被垃圾处理机制处理掉!
那么在上面这个代码中,f2就是闭包函数,它一共运行两次,第一次是999,第二次就是1000了。这说明f1中的局部变量n一直在内存中,没有在f1调用后就被清除。 因为f1是f2的父函数,但是f2 被赋给全局变量,f2依赖f1所以f1也一直在内存中,不会在调用后结束。然后就是nadd , 它没有用var声明,所以他是一个全局变量。然后它的值是一个匿名函数,这个函数也就是一个闭包。所以可以在函数外部对内部变量进行操作。

最后的两个🌰帮助大家理解闭包!

var name  = "The window";
var object = {
name:"my object",
getnamefunc: function(){
return function(){
return this.name;
};
}
};
alert(object.getnamefunc()());

上面代码的返回值是“The window” . 理解: 在调用object.getnamefunc() 的时候,这个时候没有执行this.name, 后面第二个括号的时候,才执行了this.name,不过那个时候this的上下文已经是全局了!所以就得到The window喽!

var name  = "The window";
var object = {
name :"my object",
getnamefunc:function(){
var that =this;
return function(){
return that.name;
};
}
};
alert(object.getnamefunc()());

第二段代码的返回值是The object。 理解:在首先执行object.getnamefunc() 的时候,that=this 执行了,这里的this的上下文就是object,所以that就指向上下文object! 所以在之后第二个括号的时候,执行的that.name 也就是object上下文中的name啦!也就是The window!

2、回调地狱:

回调地狱就是不断的请求,新的请求还会用到之前请求的数据,但是之前的请求结果可能还没有返回,一层一层就会产生回调地狱。
promise可以支持多个并发请求,promise 的精髓就是维护了状态,通过传递状态的方式,使得回调函数可以被及时调用。

3、前端事件流

https://segmentfault.com/a/1190000013265547

应用会通过dispatchEvent()方法分发事件对象,然后事件对象会沿着由DOM事件流决定的DOM树传播。
在传播路径确定之后,事件对象就会经过一个或者多个事件阶段。

Xixibao