浅谈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…

--

--