JavaScript小练习(1)

2018-10-06

JavaScript小练习与知识点

怎样添加、移除、移动、查找、创建和查找节点？

1）创建新节点
creatDocumentFragment() //创建一个DOM片段
creatElement() //创建一个具体的元素
creatTextNode () // 创建一个文本节点
2) 添加、移除、替换、插入
appendChild() // 添加
removeChild() // 移除
replaceChild() //替换
insertBefore() //插入
3)查找
getElementByTagName() // 通过标签名称  数组查找getElementByTagName()[]
getElementByName() // 通过元素的name属性的值  数组查找getElementByName()[]
getElemrntById() // 通过元素Id，唯一性

如何从外部读取局部变量

先给个函数
function f1(){
  var n = 1;
  function f2(){
    alert(n) // 1
  }
}

在上面代码中，函数f2就包括在函数f1内部，这时f1内部的所有局部变量，对f2都是可见的。反过来就不行了，f2内部的局部变量，对f1来说就是不可见的，这就是JavaScript语言特有的“链式作用域”结构，子对象会一级一级地向上寻找所有父对象的变量。所以，父对象的所有变量，对子对象都是可见的，反之则不成立。

既然f2可以读取f1中的局部变量，那么只要把f2作为返回值，我们就可以在f1外部访问读取他的内部变量了。

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

怎样将变量的值始终保持在内存当中（闭包）？

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

在这段代码中，result实际上就是闭包f2函数。它一共运行了两次，第一次的值是1，第二次的值是2.这就证明了，f1函数中的局部变量n一直保存在内存中，并没有在f1调用后被主动清除。
为什么会这样呢？原因就在于f1是f2的父函数，而f2被赋予给一个全局变量，这就导致f2始终在内存中，而f2的存在依赖于f1，一次f1也始终在内存中，不会在被调用后被垃圾机制（garbage collection）回收。
这一段代码中还有一个要特别注意的地方，就是`“nAdd=function(){n+=1}”`这一行，首先在nAdd前没有用var关键字声明，因此nAdd是一个全局变量，而不是局部变量。其次，nAdd的值是一个你们还是`（anonymous function）`，而这个匿名函数本身也是一个闭包，所以nAdd相当于一个setter，可以在函数外部对函数内部的局部变量进行操作。