JS基础

1. 变量提升

<div id='str'></div>
<script>

    //1. 变量提升 : JavaScript 中，函数及变量的声明都将被提升到函数的最顶部
    
    //例子1
    elem = document.getElementById('str').innerHTML = bb;
    var bb = 'tom';//这样是undefined
    
    
    //例子2
    bb = 'tom';//先设置
    elem = document.getElementById('str').innerHTML = bb;
    var bb;//再声明，显示tom
    
    
    //例子3
    var x = 5; // 初始化 x
    elem = document.getElementById("str"); // 查找元素
    elem.innerHTML = x + " " + y;           // 显示 x 和 y
    var y = 7; // 初始化 y，显示  5 undefined
    
    
    //例子4 等价于 例子3
    var x = 5; // 初始化 x
    var y;     // 声明 y
    elem = document.getElementById("str"); // 查找元素
    elem.innerHTML = x + " " + y;           // 显示 x 和 y
    y = 7;    // 设置 y 为 7

</script>

2. 冒泡和捕获

事件传递定义了元素事件触发的顺序。 将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：
addEventListener(event, function, useCapture);

3. 原型对象prototype

<script>
    function Person(first, last) {
      this.firstName = first;
      this.lastName = last;
    }
    //如果想已存在的对象中添加新的属性是不行的
    Person.age = 18;

    var myFather = new Person("John", "Doe");
    alert(myFather.firstName + ' ' +  myFather.age);//John undefined


    //基于上面的需求可以这样做
    Person.prototype.country = "China";
    alert(myFather.firstName + ' ' +  myFather.country);//John China
</script>

4. 闭包的用处

4.1 不好的方法，因为这个var count 在全局范围内，可能会在其它地方被修改

<script>
    var count = 0;
    function addCount(){
        return count += 1;
    }
    alert(addCount());//1
    alert(addCount());//2
    alert(addCount());//3
</script>

4.2 如果放到内部，不是理想中的情况

<script>
    function addCount(){
        var count = 0;
        return count += 1;
    }
    alert(addCount());//1
    alert(addCount());//1
    alert(addCount());//1
</script>

4.3 利用闭包，完美方案，注意这个adder的写法

<script>
    var adder = (function addCount(){
        var count = 0;
        return function (){return count += 1};
    })();

    alert(adder());
    alert(adder());
    alert(adder());
</script>