JS高级学习历程-9
昨天内容回顾
1. 作用域链(执行环境、AO、作用、变量性质顺序)
执行环境：最外部有window全局环境，每个函数内部也代表一个环境
每个执行环境内部都有AO活动对象
在函数内部访问的变量信息就是AO活动对象的成员信息
许多函数可以彼此嵌套，形成多层的函数嵌套关系。一个变量在当前环境、内部环境、内部深层环境都可以使用的效果称为“作用域链”
作用域链的作用：
① 保证变量按照顺序访问，变量必须“先声明、后使用”
② 内部环境可以访问外部环境的变量信息，外部不可以访问内部环境的变量。
③ 变量的作用域是声明时候决定的，而不是运行时。变量是否可以使用直接通过当前环境AO活动对象就可以判断出来。
执行环境可以访问什么变量信息：
① 局部变量
② 函数
③ 参数
④ 外部变量
局部变量 > 函数 > 参数 > 外部变量
2. 闭包
闭包就是一个函数
形成：一个函数嵌套另外一个函数，里边函数就是闭包
特点：里边闭包函数可以访问父级环境的变量信息。
function f1(){
var name=”tom”;
var age = 23;
function f2(){
console.log(name+”--”+age);
}
return f2;
}
var fn = f1(); //fn是闭包的一个引用，在任何时间、地点访问的时候都可以获得name=tom和age=23的信息
3. 面向对象(3种创建对象方式、函数4种执行方式、this是谁)
创建对象
① var cat = {name:’kitty’,age:5,run:function(){}} 字面量方式(json数据格式)
语法糖
该方式本质也是构造函数方式，构造器是Object
② var dog = new 函数(); 构造函数方式
③var pig = new Object();
普通函数和构造函数：
两者没有区别，就看使用。
return 关键字：
该关键字对实例化对象没有本质影响，仍然可以实例化一个对象出来
不过是return后边的代码就不给执行了
函数具体执行方式：
① 普通函数调用
② 当作构造函数使用
③ 当作对象的成员方法执行
④ call和apply调用（减少新变量生成，降低变量污染的几率）
this关键字是谁：
① 代表window
② 谁调用函数，就代表谁
③ 代表元素节点对象
④ 通过call和apply调用可以任意代表其他对象
构造器：
对象.constructor 获得对象的构造函数
函数的构造器是:Function
作业：
1. 练习闭包，弹出无需列表对应项目的文本信息
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>01-弹出当前项目信息</title> 6 7 <style type="text/css"> 8 li{cursor: pointer;} 9 </style> 10 11 <script type="text/javascript"> 12 window.onload = function(){ 13 lis = document.getElementsByTagName('li'); 14 15 /* 16 for(var i=0; i<lis.length; i++){ 17 lis[i]当前li元素节点对象 18 lis[i].onclick = function(){ 19 //this 代表当前的li元素节点对象 20 alert(this.innerHTML); 21 } 22 } 23 */ 24 25 //闭包实现 26 for(var i=0; i<lis.length; i++){ 27 lis[i].onclick = clk(i); 28 } 29 } 30 31 function clk(n){ 32 function ff(){ 33 alert(lis[n].innerHTML); 34 } 35 return ff; 36 } 37 </script> 38 </head> 39 <body> 40 <ul> 41 <li>曹操</li> 42 <li>刘备</li> 43 <li>吕布</li> 44 <li>貂蝉</li> 45 </ul> 46 </body> 47 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>02-弹出当前项目信息</title> 6 7 <style type="text/css"> 8 li{cursor: pointer;} 9 </style> 10 11 <script type="text/javascript"> 12 window.onload = function(){ 13 lis = document.getElementsByTagName('li'); 14 15 //闭包实现(匿名函数自运行实现闭包效果) 16 for(var i=0; i<lis.length; i++){ 17 lis[i].onclick = (function(n){ 18 return function(){ 19 alert(lis[n].innerHTML); 20 } 21 })(i); 22 } 23 } 24 //clk是一个新的变量名称，是全局的，这个名字容易被其他的同名变量“污染” 25 /* 26 function clk(n){ 27 function ff(){ 28 alert(lis[n].innerHTML); 29 } 30 return ff; 31 } 32 */ 33 </script> 34 </head> 35 <body> 36 <ul> 37 <li>曹操</li> 38 <li>刘备</li> 39 <li>吕布</li> 40 <li>貂蝉</li> 41 </ul> 42 </body> 43 </html>
