js function (2019-06-28)

review

1- while 和 do-while

    初始化循环变量
    while(条件){
        循环体;    
        更新变量操作;
    }

    do{
        循环体;  
    }while(条件);

2-break and continue break the cycle continue throughout the end of the end of the current round of cycle, the next cycle continues
```
    for(var i = 0; i < 5; i++){
        if(i==2){
            break;
        }
        console.log(i);
    }
```

3- for-in (designed to traverse the object)

    var obj = {name:'ujiuye',2:'bbb',age:18,1:'aaa'};
    for(var key in obj){
        key:属性名
        obj[key]: 值
    }

4- this

    var aLi  = document.getElementsByTagName('li'); //[li,li,li] 0-2
    var aDiv  = document.getElementsByTagName('div'); //[div,div,div] 0-2
    for(var i = 0; i < aLi.length; i++){

        oLi[i].index = i;

        oLi[i].onclick = function(){
            console.log(i);
            this.style.backgroundColor = "red";
            console.log(this.index);
            var a = this.index; //a = 1
            aDiv[a].style.display = "block"; 
        }
    }
    // i = 3;

(A) function

A code block is a function which can be reused
1- function to create
- Function to create a process to find a heap memory space, the body of the function code is stored in, the memory address assigned to the function name
```
    function 函数名(){       
        //函数体
    }
```
2- calling function
- After the function declaration may be called multiple times
- Will have to call a function every time a new private scope, the scope can not access variables between each other, the global scope can not access the private scope of variables inside
```
    函数名();
```
3- function return value
- After the implementation of the results of the function wants to stay, return a value return
- If you do not return, leaving the function is undefined (the default function return value is undefined)
- return function body may suspend execution
```
    function sum(){
        var total = 1+3;
        return total; //返回的是total代表的值
        console.log(total);//这个代码不会运行
    }

    var n = sum();  //n = 4
```

4- function parameters

In order to function function parameters enables a more flexible functionality
The default parameter values are undefined unassigned

    function sum(n,m){  //函数定义同时定义形参,相当于声明了两个变量
        var total = n+m;
        return total;
    }
    var t = sum(100,200);//调用函数时传递实参
    console.log(t);

5- style operations
- Setting: ele.style.width is set inline style
- Gets: ele.style.width style can only get between the lines
- AfDB room style:
  - Standard browser: getCoumputedStyle (ele) .width
  - ie browser: ele.currentStyle.width
- Get function package style
```
    function getCss(ele,attr){
        return  ele.currentStyle==="undefined" ? getCoumputedStyle(ele)[attr] : ele.currentStyle[attr];
    }
    getCss(box,'width');
```

6-arguments are built into a function object that represents the collection of arguments

    function fn(){
        console.log(arguments);
    }

    fn(1);  //arguments [1]   
    fn(1,2);     // arguments [1,2]

7- different functional form

1) - named function

    function sum(){    
    }
    sum();

2) - Event handler

    //事件处理函数,一般使用的是匿名函数
    box.onclick = function(){

    }
    //如果事件绑定使用的是命名函数,不能加(),不能传参
    box.onclick = fn;

    //如果命名函数需要传参,需要放在匿名函数里面
    box.onclick = function(){
        fn('hello');
    }

3) - Method as a function of object

When the attribute value of the object function, the call attribute object methods

    var obj = {
    name:'ujiuye',
    age:18,
    eat:function(){ //eat方法
            console.log('吃面条!');
        }
    }
    obj.eat();

8- function of the same name issue

    // 函数名相同时,后面会覆盖前面的
    fn1();  //222
    function fn1(){
        console.log(111);
    }
    fn1(); //222
    function fn1(){
        console.log(222);
    }
    fn1();//222

9-this point

1) - this refers to a normal function window object

    //命名函数(普通函数)
    function fn(){
        console.log(this);// 普通函数里面的this是window
    }
    fn();

2) - Event handler inside this, pointing to the element that triggered the event

    var oBox = document.getElementById('box');
    //事件处理函数,一般使用的是匿名函数
    oBox.onclick = function(){
        console.log(this); // oBox
    }

-3) - Method inside this object pointing object retrieval method

    var obj = {
        name:'ujiuye',
        age:18,
        eat:function(){ //eat方法
            console.log(this);
        }
    }
    obj.eat(); // obj

10- global scope and the private scope & global variables and local variables
- Global scope: Browse allocated js runtime stack memory (public space)
- Global variables: global scope variable declaration, called a global variable, can be accessed from anywhere, as long as no global variables are declared inside the function
- Private scope: produce private scope when the function is executed
- Local variables: the variables inside a function declaration or the function parameter, all local variables, the effect can not be accessed outside
- Scope chain: the variables used in the function and look inside from the current scope, if not, look up the scope level, if you do not keep looking up, until you find the global scope, if not on the error (you can find a parent child, father can not find child)
11- preresolved (variable mentioned sound)
- We will do some things before the browser run js, find var, function declarations in advance
- Var statement with no assigned value for the time being undefined
- With the statement and function assignment
- After the pre-parsing is finished before executing code from the top down
- Pre-parsing occurs when the current scope, the function will be performed inside the first pre-parsed, and then run the code

The difference between 12- and function of an ordinary function expression declaratively

    fn1();//因为函数在预解析时已经被声明并且赋值,所以可以在再函数定义之前调用
    function fn1(){  }

    fn2(); // 因为函数写在等号后面不会被预解析,所以这种方式不能再函数定义之前调用
    var fn2 = function(){  }

js function (2019-06-28)

review

(A) function

Guess you like