10月25日听课笔记

预解析，作用域，this，递归预解析作用域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{ //跳转到主页 } }

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

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