JavaScrit全面总结

前端技术的发展变化太快了，各种各样的框架。再变也离不开js。所以，在此把js的高级语法总结一遍。    js解析和执行包括：全局和函数

一：全局预处理

<script type="text/javascript">
var a=1;
function xx(){
alert(a);
}
</script>

　　这段代码会正常输出a=1；

<script type="text/javascript">
var a=1;
function xx(){
alert(a);
var a=5;
}
</script>

输出 undefined   为什么呢？  不报错  输出undefined 。   这就是js的解析执行过程

js执行过程分为：预处理的阶段和执行阶段　　

预处理阶段：

一：创建一个词法环境  LexicalEnvironment==window

二：扫描js代码：

1.用声明的方法创建的函数

2.用var   定义的变量

预处理js处理命名冲突：

先扫描函数声明后扫描变量（var声明）

处理函数声明有冲突会覆盖

处理变量声明有冲突，会忽略

下面为例子：

 <script type="text/javascript">
alert(a);    //undefined
alert(b);  //报错
alert(f);  //字符串的表达式
alert(g);   //undefined

var a=5;
b=6;
alert(b);
function f(){

	console.log('f');
}

//表达式创建的函数
var g=function(){
console.log('g');

}
alert(g);
 </script>

js分为两个阶段：
一：预处理阶段  1.var  定义的变量   2.声明的方式创建的函数

window
{
   f：指向函数
   a:undefined
   g：undefined    （表达式创建的函数可以当成变量）

}

二：执行时    没有定义var  就一次性赋值
window
{
    f：输出函数的值
    a：5  变量的定义
    b: 6  函数赋值
    g：指向函数

}

　 作用域：

<script type="text/javascript">
alert（a）；   //undefined
alert（b）；   //undefined
alert（c）；   //报错
alert（d）；   //报错

 var a=1；
 if (false) {
var b=2；
 }else{
  c=3；
 }

function f（）{
var d=4；
}

for (var i = 0； i <3; i++) {

}
alert（i）； //输出3

说明：js是没有块作用域的
js是不垮作用域的

　　函数作用域：

function f（）{
 var x
 function g（）{
     //函数  g（）是不能访问 var  x的
 }
}

　　动态作用域 ：   只有在用行时确定

function f（）{
    alert（x）；
 }

 function f1（）{
   var x=5；
   f（）；
 }

  function f2（）{
   var x=6 ；
   f（）；
 }
 f1（）； //报错 (等于window  没有全局变量)  说明js 没有动态作用域

　　静态作用域  别称：词法作用域 （lexical）   闭包

词法作用域的特点：
一：在js解析器读取创建函数的时候
1.给函数 f 添加一个成员 【【scopel】】 ==创建 函数 f 时的词法环境（lexicalEnv）==window
2.调用 f（）； 真正开始执行的时候 创建自己的词法环境 （lexical）==函数本身 f.[[scope]]==window
二：在词法解析解析阶段（在声明的阶段） 确定了相关的作用域

var x=100；
function f（）{
    alert（x）；
 }

 function f1（）{
   var x=5；
   f（）；
 }

  function f2（）{
   var x=6 ；
   f（）；
 }
 f1（）； //输出100

　　作用域链条：

 function f（）{   // 解析  f的 scope==window
 	f  调用时创建自己的词法  （lexical {x=100}）-->f.[[scope]]
   var x=100；
   function g（）{  //创建 g时 g.[[scope]]==f.(lexical)
     // g 运行时创建自己的（lexical）-->指向了  g[[score]]

   }
    g();
 }

　　 形成的链条：

g.lexical-->g。[[scope]]  -->f.lexical  --->f.[[scope]] --->window

js创建函数的方式：

1.声明的方式
function f（）{

}
2.匿名函数
var f=function（）{

}
3.匿名函数
var f=function x（Aargument）{

}
4. var f=new Function（“参数”，“alert（xx）函数体”）

function f（）{  //给f  scope==window  预处理阶段  把x和g 加进去
	var x=100；
	var g=function（）{   //g.score==f.lexical
         alert（x）；
	}
	g（）；
}
f（）； //输出100

function f（）{
	var x=100；
	//g.[[scope]]==window
	var g= new Function（“”，“alert（x）”）；
	g（）；  //报错  x没有定义
}
f（）； 

 </script>

　　

作用域的本质：
当在函数中找到一个变量的时候，首先，会在这个函数本身的词法环境中去找，找到结束--->找不到，去父函数的词法环境中去找--->window 中途找到退出

具体的用法：（作用域就是一个信息隐藏）

全局变量越来越多时，会导致冲突。

匿名的立即调用函数的写法：
（function（）{
 var a=5；
 var b=6；
 function f（）{
   alert（a）；

 }
 window.f=f;  //技巧：在外面能访问到  定义window

}）();
f();  //输出5
这样就只对外面提供了一个f函数，减少了命名的冲突

　　闭包：

定义：是词法闭包的简称，引用了自由变量的函数，这个被引用的自由变量将和这个函数一同存在。即使离开了他的创建环境也不例外。（闭包就是一个对象，里面包含的一个函数，函数中有被他补货的变量）

本质：js支持作用链和函数的嵌套函数

自由变量指父函数的自由变量（a，b）

闭包是什么时候创建的呢：

1.给f2创建一个[[scope]],===父函数f1的词法环境

2.扫描f2的代码，保留f1的词法环境

闭包函数的写法：

如何查看（在浏览器中）：

代码：

<script type="text/javascript">

function f1(){   //父函数
	var a=10;
	var b=20;
	function f2(){  //子函数
		coonsole.log(a);
	}
	f2();
}
f1();

//即使离开了他的创建环境也不例外。
function f1(){
	var a=10;
	var b=20;
	return function f2(){
	coonsole.log(a);
	}
}
var result=f1();
result();
</script>

　　不调用父元素的属性是不会产生闭包的。

代码：

function f1（）{
 	var m=10；
 	function f2（）{

 		coonsole.log("fss");
 	}
 	f2();
 }
 f1();

　　不会看到任何结果：

调用父的父元素：(是可以产生闭包的)

function f1（）{
 var m=10；
    function f2（）{
    	var n=20；

    function f3（）{
    	coonsole.log(m);
    }
    f3（）;
   }
   f2();
 }

　　效果：

使用闭包的优势：

1.减少全局变量

 function add（）{
 	var a=0；
 	return function（）{
 		a++；
 		alert（a）；
 	}
 }
 var result=f（）；
 resul （）；
 resul （）；

2.减少传递给函数的参数数量

 //减少参数
function add（base，max）{

}
//构建一个计算工厂的函数
function calFactory（base）{
	return function（max）{
       var total=0；
     for (var i =   1; i <=max; i++) {
     	total+=i;
     }
     return total+base;
	}
}

var adder=calFactory（2）；
alert(adder(3));   //输出8；
alert（4）；  //输出12

var adder2=calFactory（1）；
alert （adder2（3））；  //输出7

function calFactory（base）{
  return function （max）{
  	var total=0；
  	for (var i = 1 ； i <=max; i++) {
  		total+=i;
  	}
  	return total+base;

  }
}

3.封装

//立即调用的函数
（function（）{
var m=0；
function getM（）{
	return m；
}
funciton setM（）{
	m=val；
}
window.g=getM;
window.f3（）=setM;
}）（）；

f(12);
alert(g());  //输出12

　　

闭包的注意点：

一：对捕获的变量只是个引用，不是复制

function f（）{
 	var num=1；

 	 function g（）{
        alert（num）；
 	 }
 	 num++；
 	 g（）；
 }
f（）；   //输出2

　　

//分析：
1.f调用生成一个f 的词法环境 le==g的[[scope]] 产生闭包 g函数没有真正的运行 num++；
2.f的词法环境是一个对象 （num就是一个成员） num的值就是f函数的词法环境
3.g的[[scope]]==f 的 le==num
所以就是对象的引用

二：父函数每调用一次，会产生不同的闭包

 function f（）{
 	var num=1；
 	return function（）{
 		num++；
 		alert（num）；
 	}
 }
 var result1=f（）；
 result1（）；//2
 result1（）；//3

 var result2=f()；
 result2（）；//2
 result2（）； //3

 分析：
 1.调用两次不同的 f（） 就创建了不同的词法环境
 所以：父函数没调用一次就会产生不同的闭包

　　三：循环中的问题

<div id="1">1</div>
<div id="2">2</div>
<div id="3">3</div>

<script type="text/javascript">
for (var i = 1；i <=3; i++) {
	var ele=document.getElementById(i);
	ele.onclick=function(){
		alert(i);
	}
}
//点击一直输出4

//解决方案  闭包  用匿名函数
for (var i = 1；i <=3; i++) {
	var ele=document.getElementById(i);
	ele.onclick= （function（id）{
return function(){
		alert(id）;
	}
  }）（i）；
}

对象的种类：

1. undefined

2.null

3.string

4.number

5.boolean　

对象的类型：

1.js内置的

2.宿主环境（window）

3.自己创建

对象的创建：

1.对象自变量的创建

<script type="text/javascript">
var p={
     name：“sunliyuan”，
     work：function（）{
     	console.log("working...");
     },

     _age:18,
     get age(){

     return this._aga;

     },

     set age(val){
     	if(val<0||val>150){
      throw new Error("invalid value");
     	}else{
     		this._aga=val;
     	}
     },
     address:
};

console.log(p.name);

</script>

　　

又一访问种方式：

括号的访问：

级联访问实例：

通过Object对象：

自己给自己加上属性：

另一种加法：

　

还是100（不可修改）

//get,set,writable,enuerable,configurable,value
Object.definePropertis(p,{
salary:{
      value：1000，
      writable：false
}，
gender：{
	value：true
},
height:{
get:function(){
	return 180
},
set:function(val){
	console.log(val);
}
}

})；

　　输出的内容：