10月25日听课笔记 预解析，作用域，this，递归

预解析，作用域，this，递归

预解析

console.log(a);
var a = 1;
/*输出undefined*/

var a = 1;
console.log(a);
/*输出1*/

预解析：在正式执行前，解析 var function；只有变量和函数，才会提升申明，并不会赋值。
解析是由顺序的，我们要了解清楚。从上至下，解析函数时，是解析函数块。

var a = 10;
function a (){ };
//先得到 var a变量，然后解析 function a函数
 a = 10;

示例：

console.log(a);
var a = 1;
console.log(a);
function a(){
    console.log(2);
}
//输出 function 和 1
// 预解析后的代码，相当于如下所示。
var a ;
function a(){……} ;
console.log(a);
a = 1;
console.log(a);

示例2：

console.log(a);
console.log(a);
function a(){
    console.log(2);
}
var a = 1;
// 输出 
// function   function

作用域

• 全局作用域

var  a = 1;//全局作用域
function(){
   a = 3;
}
function(){
    a  = 2;
}

• 函数作用域

var a = 1;
function b(){
     var b1 = 1; //函数作用域
     if(true){
        var b2 = 2;//函数作用域
     }
}
b();
//输出 2

示例：

var a = 1;
function f1(){
	var b = 2;
	function f2(){
		var c = b;
		b = a;
		a = c;
		console.log(a,b,c);
	}
	f2();
}
f1();
//输出 2  1  2

示例2

var  a = 1;
function fn1(){
	console.log(a);
};
//输出 1

实例3

function fn1(){
	var a = 1;
}
fn1();
consloe.log(a)
//报错

示例4

var  a = 1;
function f1(){
	console.log(a);
	a = 2;
}
f1();
console.log(a);
//输出 1 2

var  a = 1;
function f1(){
	console.log(a);
	var a = 2;
}
f1();
console.log(a);
//输出 undefined 1

var a  = 10;
function fn1(){
	var b = 2 * a;
	var a = 20;
	var c = a + 1;
	console.log(b);
	console.log(c);
}
fn1();

//输出 NAN 和21

全局变量与局部变量同名时，全局变量不作用与局部变量的作用域。

• 块级作用域

this 关键字

window.onload = function () {
            //简单函数中使用this
            function fn1() {
                console.log(this); //window
            }
            fn1();

            //严格模式 use strict
            function fn2() {
                "use strict";
                console.log(this);//undefined
            }
            fn2()

            //在对象的方法中
            var obj ={
                name:"abc",
                action:function(){
                    this.name;  //obj.name this表示当前的对象obj
                }
            }
            //在对象中调用外部函数
            
            var a = 1;
            function fn3(){
                return this.a;   //this 表示obj2对象
            };
            var obj2 ={
                a:2,
                msg:fn3
            }
            console.log(obj2.msg());
            

            //构造函数中的this
            function Fn(name,color){
                this.name = name;  //this当前实例化生成的对象
                this.color = color;
            }
            var f1 = new Fn('abc','red');
            console.log(f1.name)
            
            //改变this指向 applay()   call()
            var mynum = 10;
            function test(){
                return this.mynum;
            }
            var obj = {
                mynum : 5,
                fun:test
            }
            console.log(obj.fun.call()); // 10 没有传 则是window
            console.log(obj.fun.call(obj)); //  5  作用范围 为obj

            //面试题

        }

this 在执行的过程中，在变化，指向的是函数的拥有者。

递归

在运行中的过程中，调用自己。在无限级处理时经常用到

function fn(num) {
    if (num <= 1) {
        return 1;
    }else {
        return num * fn(num - 1);
    }
}
fn(3);
// 3 * 2 * 1

递归示例

//setInterval(函数体，时间) 循环处理
var num = 5;
setInerval(function(){
	if(num >0){
		num --;
	}else{
		//跳转到其他页面
	}
},1000);

//setTimeOut(函数体，时间) 延迟处理,运行一次就停下来
func(5)
function func(num){
	if(num > 0){
		setTimeout(function(){
			num --;
			func();
		},1000)
	}else{
		//跳转到主页
	}
	
}

字体图标，比图片更加灵活；背景，放大，颜色等都可以

感觉这个布局这样写可以，那样写也可以，有没有一种更好，更专业呢？
更好的布局就是 需要根据交互式用户体验设计来做彼岸