http://www.cnblogs.com/LS-tuotuo/p/5898708.html
讲述了特详细的基础知识，数据类型和函数等。

二，在HTML中使用javascript###

1，Defer=“dafer”可以立即下载加载延缓执行
2，Async 异步记载，可以让脚本不必等待其他脚本再执行，不兼容ie
3，< noscript>当脚本无效的时候，才会显示这段话</noscript>

第三章：基本概念

【数据类型】####

• 基本类型
• 引用类型
  一，5种基本类型
  String Number Undefined Boolean Null
  基本类型都是按值访问的，就是说你可以操纵变量实际的值。
  特点：
  1，值不可变，
  2，基本类型没有属性和方法，
  3，基本类型比较==如类型不同会自动转化相同类型比较，===不会转化类型，两个类型相同==和===就没什么区别了。
  4，typeof.xx 来检查基本数据类型

1，值不可变
var a="hanna",
a.toUpperCase()//HANNA
alert（a）//依然是hanna

** 二，引用类型**
1，Object 2，Array 3，data类型 4，RegExp类型 5，function类型
特点：
1，包含引用类型值的变量实际上包含的不是对象本身，而是指向对象的指针。
2，复制引用类型的值，也是赋值其引用的指针，因此两个变量执行同一个地址。
3，Array.isArray(arr)//来检查是不是引用类型，返回true/false。istanceOf有作用域的问题。

Object类型
js中没有类的概念，因此引用类型也被称为对象定义。因为是一种将数据和功能组织在一起的数据结构，也就是说是描述一类对象的属性和方法。

1》，new 创建
var person = new Object();
person.name = "Nicholas";
person.age = 21;

2》对象字面量表示法
var person = {
name:"Nicholas",
age:21,
5:true //数值属性名会自动转化为字符串
};
在通过对象字面量定义对象时，实际上不会调用Object构造函数。

访问对象属性的方法：

1》点表示法2》方括号表示法
2》方括号表示法
alert(person.name); //"Nicholas"
alert(person["name"]); //"Nicholas"

Array类型
array就是数组类型，可以保存任何类型的数据

1》使用Array构造函数
var colors = new Array();
var colors = new Array(20);
var colors = new Array("red","blue","green");
var colors = Array(3);
var colors = Array("Greg");
2》使用数组字面量
var colors = ["red","blue","green"];
var colors = [];
var colors = [1,2,];//不推荐使用，会创建一个包含2或3项的数组
var colors = [,,,,,];//不推荐使用，会创建一个包含5或6项的数组
与对象一样，使用数组字面量表示法时，也不会调用Array构造函数。

1，对象，2，数组,3，函数
//多个值构成的对象，保存在内存中，不能直接操作，需要操作其值的引用对象 ```
3，基本包装类型3种
Boolean Number String
//基本包装类型可以当做对象来访问，操作基本类型值一经完毕会立即销毁，

Null==Undefined //true
Number（"xxxxx"）//可用于任何类型的转化为数值
Number（""）//0
parseInt("xxxx")//字符串转化为整数数值
parseInt("")//NaN
parseFloat("xxxx")//字符串转化为浮点数数值
parseFloat("")//NaN ```

**
1，parselnt（"22.5"） // 22
2，parseFloat(“22.5”) //22.5
3, var age =11;
　var a= age.toString(); //字符串“11”
　null和undefined没有toString方法
4，var nu=null；var nu；
　var a= String（nu）// 输出“null”和“undefined”
　String（） 任何值都是转化。
５，--a 和a--的区别//a--第一次运算不减，第二次再减去
　　var a=10;
　　var b= --a-1 ; 　 　//8
　　var a; 　　　　　　//9
　　　var c=a-- +1；　//11
　　　var d=a+1；　　//10
6，var a= i %2 　　　　//求模或求余 能被2整除的都是偶数,2除以 i
7,== 和=== 　　　　　//==如果不是同类型，会自动转化后比较。
　　　　　　　　　　//===不会转化，会直接比较，如何比较的是对象，
　　　　　　　　　　会比较对象的指引是不是同一个
８，+= 　　　　　　 //加赋值 。　-= //减赋值，*=，/=，%=，<<=,　>>=
9,do-while 　　　　　//至少执行一次，符合条件再执行
10，for -in　　　　　//可以用来枚举对象的属性。
　　　　　　　　　//使用for-in之前，请先检测对象是不是null或者undefined
11, label语句 start: for (var i=0; i < count; i++) {}//以后可以由break或者continue语句引用
12，brack和continue的区别，break立即退出循环不再继续执行，continue退出单层循环，会继续执行下面的。
13，switch case 中的default 的意思是，都不满足case中的选项就会执行
**

四，变量，作用域和内存（86-100）

1，typeOf x //是检查对象是那种基本类型
2，instanceOf //是检查对象是那种引用类型，如果用来检查基本类型会始终返回 false
3，局部环境中代码执行完毕，函数，变量都会自动销毁，全局环境直到程序关闭，比如关闭网页或者浏览器时会全部销毁。
4， 特殊情况下，也可以延长作用域链，try-catch和with
5，if 和for里面的声明的变量会在循环条件结束后，依然存在，且在全局环境中可以访问得到！切记

五，引用类型（101-155）

1，Object类型
创建引用类型有2种方法
1.1；var person =new Object（），person.name = "Nicholas";person.age = 29;//这是第一种
1.2；var a={name：“哈南”，age：18}；//后者是对象字面量语法，属性名称自动转化为字符串，如果var a={}== new Object //
2,array类型 ,其实就是数组类型
创建array类型有2中方法
1.1；var color=new Array(20); //创建一个包含20项的数组,array类型其实就是数组
var color=new Array{"red","blue","green"}。//创建一个...的数组，数组的length只有3项
1.2；var color=["red","blue"] //创建一个...的数组，数组的length只有2项目
切记如果使用color[0], //读取和使用数组的值时，要使用方括号且是基于0索引的下标。
3，检查某个对象是不是数组，用instanceOf 有作用域的问题，现在可以使用Array.isArray(color)//检查color是不是数组。返回true或者flase。
4，colors.join(",")//join（）//数组按照“，”作为分隔符进行返回
5，colors.push("yelloy")//在数组的末端添加一项
6，colors.pop()//取出或者删除数组最后一项值是多少
7，colors.unshift("0","00" );//在数组的前端添加2项
8，colors.shift();//取出或者删除数组的一项
9，data.reverse()//可以对数进行反转数组原来的顺序
10，short() //单独的short（）其实是对字符串进行排序，需是对数组进行排序需要
function sortNumber(a, b)
{
return b - a//如果是a-b就是从大到小 调用的时候就用arr.short("sortNumber")
}
11,concat()// colors.concat("apple")//在colors数组后面追加一组数组，返回合在一起的数组// var newJson = json.concat();数组json的克隆clone
12，slice（） colors.slice(1,4) //返回数组下标1到4的数组
13，splice（）// colors.splice(0,2)//删除数组中的前两项，
splice(1, 0, "yellow", "orange");// 从位置1 开始插入两项，0代表不删除
var newJson = json.splice(0);数组json的克隆 clone
removed = colors.splice(1, 1, "red", "purple"); // 先删除位置下标1的项，再在1位置上插入2项
14，indexOf(),lastIndexOf()//会返回查询数组，位置的下标
15， 数组的迭代方法
every() ,filter() ,for Each() ,map(), some(),
every()//遍历数组中的每一项都返回true，就返回true
some（）//遍历数组中的任何一项返回true，就返回true
forEach（）//遍历数组，给数组中的每一项运行函数，没有返回值
map（）//遍历数组，对数组中的每一项运行函数，返回函数调用结果组成的新数组。
filter（）//遍历数组，对数组中每一项运行函数，返回为函数为true的项组成的新数组
16，归并方法
reduce（）//从数组第一项开始，逐个遍历
reduceRigth（）//从数组最后一项开始，逐个遍历
var values = [1,2,3,4,5];
var sum = values.reduce(function(prev, cur, index, array){//第一个参数前一个
return prev + cur;
});
alert(sum); //15这个案例是个求和案例
17，日期，var d=new Date();d.getFullYear()年 ,d.getMonth()+1月 （这个要加1是因为）d.getDate();当前日期
d.getHours()//时，d.getMinutes（）//分，d.getSeconds()//秒，d.getMilliseconds（）//毫秒
18，RegExp实例属性 ？????(找个机会 好好看看)
19，每个函数都包含2个属性：length 和prototype
函数名.length// 此函数接受参数的个数
20，JQ中bind（）的用法

$(document).ready(function(){
  $("button").bind({
    click:function(){$("p").slideToggle();},
    mouseover:function(){$("body").css("background-color","red");},  
    mouseout:function(){$("body").css("background-color","#FFFFFF");}  
  });
});

21，num.toFixed(2)//数字保留2位小数，超过2位则四舍五入
22，使用new操作符创建的引用类型的实例，在执行流离开当前作用域之前都一直保存在内存中。而自动创建的基本包装类型的对象，则只存在于一行代码的执行瞬间，然后立即被销毁。
23，stringValue.charAt(1)//返回下标为1的字符串。
24，stringValue.concat（“world”）//hello world，concat连接字符串的
25，slice()和substring()和substr()的区别

 var stringValue = "hello world";
alert(stringValue.slice(3)); //"lo world"
alert(stringValue.substring(3)); //"lo world"
alert(stringValue.substr(3)); //"lo world"
alert(stringValue.slice(3, 7)); //"lo w"
alert(stringValue.substring(3,7)); //"lo w"
alert(stringValue.substr(3, 7));  ```
26，indexof(“o”),lastIndexof(“o”)//返回第一个/最后一个字符串所在的下标位置
27，stringValue.trim()//返回清除前后空格的字符串
trimRight()，trimLeft()//返回清除左/右空格的字符串
28，字符串大小写转化的，最经典的两个方法如下，还有特定区域，如土耳其语需要另外两种转化方法。toLocaleLowerCase()和toLocaleUpperCase()

alert(stringValue.toUpperCase()); //"HELLO WORLD"
alert(stringValue.toLowerCase()); //"hello world"

29，在全局作用域中的this指的是 Global对象，如果是在浏览器中就是windows对象。
30，URI好URL的区别//uri是资源标识符 ，而URL是资源定位符，后者包含前者，是前者的具体，URI是指定标识web字符串各个不同的部分，有效的Uri不能包含某些字符，比如空格。
31，用来检验URL或者Url是否包含其他字符，可以使用encodeURI()、encodeURIComponent()、decodeURI()和decode-URIComponent()进行编码和解码行为，来保证这是有效的URI和URL!
32，Math对象的计算功能

Math.min(1,3,6,8,9)//直接比较最小值
Math.max(1,3,6,8,9)//直接比较最小值

var values = [1, 2, 3, 4, 5, 6, 7, 8];
var max = Math.max.apply(Math, values);//传入参数进行比较

33，四舍五入

Math.ceil(25.1)//26 向上舍入
Math.floor(25.9)//25 向下舍入
Math.round(25.9)//26 标准四舍五入

34，随机数random

parseInt(10Math.random()) //输出0～10之间的随机整数
Math.floor(Math.random()10+1)//输出0～10之间的随机整数

值 = Math.floor(Math.random() * 数值的总数 + 第一个值)//

function selectFrom(lowerValue, upperValue) {//参数的最大值和最小值
var choices = upperValue - lowerValue + 1;//总数等于，最大值-最小值+1，第一个值就是最小数
return Math.floor(Math.random() * choices + lowerValue);
}
var num = selectFrom(2, 10);
alert(num); // 介于 2 和10 之间（包括 2 和 10）的一个数值

//也可以用于数组间的随机
var colors = ["red", "green", "blue", "yellow", "black", "purple", "brown"];
var color = colors[selectFrom(0, colors.length-1)];//随机数组的下标
aler t(color); // 可能是数组中包含的任何一个字符串

####六，面向对象的程序设计（156-192）
**1，java和js面向对象理解**
java是类式面向对象语言，对象的状态（state）由对象的实例（instance）所持有，对象的行为和方法（method）则有声明该对象的类所持有，并且只有对象的结构和方法能够被继承
js是原型式面向对象语言，对象的行为和属性，状态都属于对象本身，并且都能一起别继承
**2，创建对象2种方式**

创建一个对象最简单的方式就是创建一个Object的实例，然后为他添加方法和属性如下：
var person = new Object();
person.name = "Nicholas";
person.age = 29;
person.job = "Software Engineer";
person.sayName = function(){
alert(this.name);
};
---------------第二种---------对象字面量是创建对象的首选模式，如下：
var person={
name: "Nicholas",
age: 29,
job: "Software Engineer",
sayName: function(){
alert(this.name);
}
}

**数据的4种属性**
1，表示能通过delete删除属性从而重新定义属性，就是能否修改属性的特性
2，能否通过for-in 循环返回属性
3，能否修改属性的值
4，包含这个属性的数据值，就是读取属性的时候，从这个位置读。写入属性的时候，把新值保存到这个位置。

**3，工厂模式，封装以特定接口创建对象的细节**

function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");

**4,构造函数模式**

**构造函数模式略胜于工厂模式**
创建自定义构造函数意味着可以将它的实例标识为一种特定的类型，这正是构造函数略胜于工厂模式的地方。


**调用构造函数会经历4中步骤**
1，创建一个新对象
2，将构造函数的作用域赋给新对象（this就指向了这个新对象）
3，执行构造函数中的代码（为这个新对象添加属性和方法）
4，返回新对象

//按照惯例，构造函数始终都是以一个大写字母开头，非构造函数都是以一个小写字母开头。
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");

4.1 什么是构造函数
 > 构造函数和其他函数的区别，在于调用他们的方式不同
任何函数，只要是new操作符来调用，就可以称之为构造函数
反之任何函数，如果不是new操作符来调用，那么就是普通函数

// 当作构造函数使用
var person = new Person("Nicholas", 29, "Software Engineer");
person.sayName(); //"Nicholas"
// 作为普通函数调用
Person("Greg", 27, "Doctor"); // 会添加到window对象上来
window.sayName(); //"Greg"
// 在另一个对象的作用域中调用
var o = new Object();
Person.call(o, "Kristen", 25, "Nurse");//在o作用域中调用，就拥有了Person的对象和实例
o.sayName(); //"Kristen"

**5，原型模式prototype**
原型模式的构造函数好处是：让所有对象的实例共享它的方法和属性。
换句话说：不必在构造函数中定义对象的实例信息，而是将这些实例信息添加到原型对象上去。 
> ``` function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.name="lilei"
person1.sayName(); //"lilei"  因为会先去实例搜索，实例搜索不到才会去原型，如果实例有就算是null也只是返回实例属性。可以使用delete删除属性。hasOwnProperty可以查出来自实例还是来自原型
alert(person1.hasOwnProperty("name")); //ture实例属性返回true
**------------------------- 
delete person1.name;
person1.sayName(); //"Nicholas" 
alert(person1.hasOwnProperty("name")); //false原型属性返回false
**---------------- 
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true
alert(person1.hasOwnProperty("name")); //false原型属性返回false

还可以写成这种格式的原型函数

}
Person.prototype = {
//使用对象字面量重写原型，如果已经已经创建了实例它会切换和现有实例和新原型之间的联系，所以需要后new
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
sayName : function () {
alert(this.name);
}
};
var friend = new Person();//这里切记要后new，先new出报错。
//如果是 Person.prototype.sayHi = function(){ alert("hi");};这种格式，先new后new都无所谓了
friend.sayName(); //Nicholas

也可以给原生对象添加属性和方法但是一般不建议这么做，因为如果以后有一方要调用，可能会出现冲突。
> ```String.prototype.startsWith = function (text) {
return this.indexOf(text) == 0;
};
var msg = "Hello world!";
alert(msg.startsWith("Hello")); //true 给原生对象String添加方法，msg为String类型调用的时候可以用，但是下个String 可能就。。。有命名冲突的问题

6，原型对象的问题
1，它省略了构造函数参数初始化的问题，所有的实例在默认的情况下都是相同的值，这不是最大的问题
2，有共享的本性所导致的。如果有2个实例，操作其中一个实例A的给其属性数组添加一个数据"Lili"，由于是共享的，所以另一个实例B中也会存在“Lili”。如下：

/ / 这里有一个很神奇的地方，如果是firends是定义在构造函数内的一个数组，
/ / 输入的结果person1和person2的.friends的值就是不相同的
function Person(){
//this.firends= ["Shelby", "Court"];//在这里创建属性，new出来的实例，后有push上的就不会重复。
}
Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
friends : ["Shelby", "Court"],
sayName : function () {
alert(this.name);
}
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court,Van"
alert(person1.friends === person2.friends); //true

因此创建自定义类型最常见的方式就是：组合使用构造函数模式和原型模式
**构造函数模式用于定义实例属性，而原型模式用于定义方法和共享属性**
这样每个函数都有自己的一套实例副本但同时又共享着对方法的引用。

**7，构造函数和原型混合模式**(重要)

>``` 
//也就是说，构造函数有自己的私有方法，而原型模式用来定义共享的的属相和方法
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}//在这里实例的属性都是在构造方法中定义的，而由所有实例共享的属性和方法则是在原型中定义的。
Person.prototype = {
constructor : Person,
sayName : function(){
alert(this.name);
}
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Count,Van"
alert(person2.friends); //"Shelby,Count"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true

因此这种构造函数和原型混合模式是最广泛认识度最高的一种创建自定义类型的方法，可以说未来默认的一种方式

8，动态原型模式

//构造方法的属性
//切记在已经创建了实例的情况下，不可以使用对象字面量形式，会切断和新原型之间的联系。
this.name = name;
this.age = age;
this.job = job;
//动态添加的方法
//此方法只有在sayName不存在的情况下，才会添加
if (typeof this.sayName != "function"){
Person.prototype.sayName = function(){//注意在这里对原型的修改，会共享在所有实例里面，因为是在原型中定义的。
alert(this.name);
};
}
}

**9，寄生构造函数模式**
巴拉巴拉 ，不建议使用。
**10，稳妥构造函数模式**
稳妥对象指的是没有公共属性，而且其方法也不引用this对象
>```function Person(name, age, job){
//创建要返回的对象
var o = new Object();
//可以在这里定义私有变量和函数
//添加方法
o.sayName = function(){
alert(name);
};
//返回对象
return o;
}
**----------
var friend = Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"
**---------------------
变量friend 中保存的是一个稳妥对象，而除了调用sayName()方法外，没有别的方式可
以访问其数据成员。即使有其他代码会给这个对象添加方法或数据成员，但也不可能有别的办法访问传
入到构造函数中的原始数据。稳妥构造函数模式提供的这种安全性，使得它非常适合在某些安全执行环
境——

11，原型链继承
当以读取模式访问一个属性时，首先会搜索实例中该属性，如果没有找到，就会继续搜索实例的原型的该属性，再没有，就搜索该实例有无继承的。进行到原型末端才会停下来。
1，同样是原型链添加方法，重写同名方法，后者会替换前者。
2，通过原型链实现继承时，不能使用对象字面量创建原型方法，因为这样会重写原型链，会切断实例和原型之间的联系。设想现原型包含的是一个某Object的实例，如果使用对象字面量会直接把指针重定向了。

寄生组合式继承

开发人员普遍认为寄生组合式继承是引用类型最理想的继承范式！
所谓寄生组合式继承，即通过借用构造函数来继承属性，通过原型链的混成形式来继承方法

这个函数接受2个参数子类型构造参数和超类型构造参数。
在函数的内部，第一步是创建超类型原型的一个副本，
第二步是为创建副本添加constructor属性，从而弥补因重写原型而失去的默认的constructor属性，
最后一步，将新创建的对象（即副本）赋值给子类型的原型。
function inheritPrototype(subType, superType){
var prototype = object(superType.prototype); //创建对象
prototype.constructor = subType; //增强对象
subType.prototype = prototype; //指定对象
}

###七，函数的表达式 193- 210
**1，定义函数有两种方式**
1，函数声明，2，函数表达式
匿名函数定义：匿名函数的name是空字符串，也就是匿名函数没有函数名。
 >```function functionName(arg0, arg1, arg2) {  //1，函数声明
//函数体 有函数声明提升的作用
}
var functionName = function(arg0, arg1, arg2){   //2，函数的表达式
//函数体  
};

2，arguments.callee 是一个正在执行的函数的指针。
可以用arguments.callee 代替当前执行函数的函数名
但是在严格模式执行下，访问这个属性会导致错误，可以修改如下

if (num <= 1){
return 1;
} else {
return num * f(num-1);
}
});

    
**2，闭包**
1，闭包定义：有权访问另一个函数作用域中的**变量**的函数。
      也就是说：函数用到外部的变量，不要传参就可以获取。
2，创建闭包：在一个函数内部创建另一个函数。
3，闭包中的外部函数执行完毕，其执行环境的作用域链会被销毁，但是其活动参数,变量也不会被销毁，因为匿名函数的作用域链仍引用着这个活动对象，直到匿名函数被销毁后，外部函数的活动对象才会被销毁。
4，依据3，故由于闭包会携带包含它的函数的作用域，因此会比其他类型的函数占更多的内存，再三靠考虑后再用。
5，闭包最大的用处：1，可以读取函数内部的变量。2，可以让这些变量保存在内存中，不会在外部函数调用结束后销毁。
6，闭包应用的2种情况如下：
1，第一，函数作为返回值
 
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4034743-c1c3d08cf3cf54cb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
 
如上代码，bar函数作为返回值，赋值给f1变量。执行f1(15)时，用到了fn作用域下的max变量的值。至于如何跨作用域取值，可以参考上一节。

 

第二，函数作为参数被传递

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4034743-b25cde6aced16e06.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

>```
//闭包就是将函数内部和函数外部连接起来的一座桥梁。//f2（）就是一个闭包。
function f1(){
　　　　var n=999;
　　　　function f2(){
　　　　　　alert(n); 
　　　　}
　　　　return f2;
　　}
　　var result=f1();
　　result(); // 999

在jq中闭包的用法

//这里的$只是形参，但是jq是全局变量，所以不需要调用该函数就会自动执行，或者分2步，就是转化成正常的函数，先写函数，后调用。
(function($){
$("div p").click();
})(jQuery);

**3，this对象**
this的对象的运行时基于函数执行环境绑定的：
1，全局函数中调用，this指向windows。
2，被构造函数调用时，指向是调用对象，即new出来的对象。
3，call或者apply调用 this指向call apply传递的上下文。
  在闭包中this的使用问题
> ```
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()()); //"The Window"（在非严格模式下）
//匿名函执行具有全局性，所以。。。

var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name;
};
}
};
alert(object.getNameFunc()()); //"My Object"
//如果想要访问某个作用域中的arguments对象，必须将该对象的引用保存到另一个闭包能够访问的变量中。

**4，内存泄露**
**5，模仿块级作用域**
>```
(function(){
//这里是块级作用域
})();//这里的小括号，意思是直接调用的意思。且只有函数表达式可以跟小括号，函数声明不可以后面跟这个。

//一般在for循环的外部，也可以访问到i。如果给这个for循环外部加个私有作用域的匿名函数。
//即在匿名函数中定义的任何变量，都会在执行结束时被销毁。
//而且这个还可以访问到count，因为它是一个闭包。
function outputNumbers(count){
(function () {//这种做法还可以减少闭包占用内存的问题，因为没有指向匿名函数的引用，执行完毕后就可以销毁了。
for (var i=0; i < count; i++){
alert(i);
}
})();
alert(i); //导致一个错误！
}

**6，私有变量**207  226


##13，事件
**1，事件流**   
“DOM2级事件流”规定事件流包括三个阶段:事件捕获阶段，处于目标阶段，和事件冒泡阶段，其中冒泡阶段和捕获阶段是相反的流。
由于浏览器的兼容性，一般建议用事件冒泡，特殊情况下在使用事件捕获。
**2，动态移除onclick事件**
jq中使用操作元素属性的方法：$("#a").removeAttr("onclick");  添加为：$("#a").attr("onclick","test()")
js中：a.onclick=null;或者a.onclick=function(){//空方法};
**3，事件处理程序添加或者删除**
> ```var btn = document.getElementById("myBtn");
var handler = function(){
alert(this.id);
};
btn.addEventListener("click", handler, false);//true是代表捕获阶段的事件。
//还可以给btn添加其他事件处理程序也可以添加2个click同样的事件，按照先后的执行顺序。
btn.removeEventListener("click", handler, false); //有效！remove不了匿名函数
------------------------------在IE下添加事件处理程序------------------------
btn.attachEvent("onclick",handler);//添加事件处理程序
btn.detachEvent("onclick",handler)//删除事件处理程序

需要注意的一点是：
1，IE事件处理程序 是“onclick”，非IE处理程序是“click”，且参数一个是2个，另一个是3个。
2，作用域不一样 IE处理程序的作用域会在全局作用域中运行this===windows，非IE是当前作用域中运行。
3，IE,为一个按钮添加不同的事件处理程序，其执行的顺序是按照其相反的添加顺序执行的。
4，IE9以及以上兼容addEventListent，全IE包括9以下都兼容attachEvent
5，支持IE事件处理程序的只有ie浏览器和opera

4，跨浏览器事件处理程序

浏览器事件兼容性代码如下:

window.onload = function() {
var EventUtil = {
addHandler: function(element, type, handler){
//若浏览器支持addEventListener，则使用addEventListener来添加事件
if(element.addEventListener){
element.addEventListener(type, handler, false);
} else if(element.attachEvent){
element.attachEvent("on" + type, handler);
} else {
//若以上两种添加事件的方法都不支持，则使用默认的行为来添加事件
element["on" + type] = handler;
}
},
//移除事件
removeHandler: function(element, type, handler){
if (element.removeEventListener){
element.removeEventListener(type, handler, false);
} else if(element.detachEvent){
element.detachEvent("on" + type, handler);
} else{
element["on" + type] = null;
}
}
}
var btn1 = document.getElementById("myBtn1");
var handler = function(){
alert("hello handler");
}
EventUtil.addHandler(btn1, "click", handler);//调用，传参，使用
}

**5，事件对象**
event对象代表事件的状态。
所有的事件都会有下表列出的成员

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4034743-f5ecebe0b4aebda8.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4034743-49356c41831f3331.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

为一个元素添加多个事件时，可以使用type属性，如下：
> ```var btn = document.getElementById("myBtn");
var handler = function(event){
switch(event.type){
case "click":
alert("Clicked");
break;
case "mouseover":
event.target.style.backgroundColor = "red";
break;
case "mouseout":
event.target.style.backgroundColor = "";
break;
}
};
btn.onclick = handler;
btn.onmouseover = handler;
btn. onmouseout = handler;

**

6，IE下的事件对象

Paste_Image.png

7，跨浏览器（兼容性）的事件对象

var EventUtil = {
addHandler: function(element, type, handler){
//省略的代码
},
getEvent: function(event){
return event ? event : window.event;
},
getTarget: function(event){
return event.target || event.srcElement;
},
preventDefault: function(event){
if (event.preventDefault){
event.preventDefault();
} else {
event.returnValue = false;
}
},
removeHandler: function(element, type, handler){
//省略的代码
},
stopPropagation: function(event){
if (event.stopPropagation){
event.stopPropagation();
} else {
event.cancelBubble = true;
}
}
};
--------------------一下是代码调用兼容IE的事件对象Event-----------------------------
//注意IE不支持事件捕获
var btn = document.getElementById("myBtn");
btn.onclick = function(event){
alert("Clicked");
event = EventUtil.getEvent(event);
EventUtil.stopPropagation(event);
};
document.body.onclick = function(event){
alert("Body clicked");
};

**8，事件类型**
  ``` 1，焦点事件。2，鼠标事件。3，滚轮事件。4，文本事件。5，键盘事件。6，合成事件。7，变动。 ```


**8.1，UI事件**
 
![Paste_Image.png](http://upload-images.jianshu.io/upload_images/4034743-ab5bb94ad795f670.png?imageMogr2/auto-orient/strip%7CimageView2/2/
+/1240)
**8.2，焦点事件**
1，blur :元素失去焦点时触发，此事件不会冒泡，所有浏览器都支持。
2，focus：在元素获得焦点时触发，次事件不会冒泡。
3，其他一些 失去获得焦点的事件，浏览器支持步统一。
**8.3，鼠标与滚轮事件**
9个鼠标事件：click（单击）dblclick（双击）mousedown（按下任意鼠标）mouseup（释放鼠标时触发  ）mouseenter（移动到）mouseleave（移出）mousemove（内部重复移动触发，谨慎使用）
【mouseout（）mouseover（移动到）//可能子元素经过也会触发，冒泡】
**8.4，客户区坐标位置**
鼠标位置坐标信息：
 screenX( )    screenY(  )       //鼠标相对于整个电脑屏幕的坐标  和滚动条无关。
clientX（左到鼠标）clienY(上到鼠标)// 鼠标相对于浏览器内容显示的视窗  和滚动条无关  
pageX()  pageY()  //鼠标相当于浏览器内容显示的视窗，但是会加上滚动的区域。
 **8.5，鼠标滚轮事件**
mousewheel
scroll
**8.6，触摸设备**
**8.7，移除事件**
**8.8，插入节点事件**
**9，键盘与文本事件**
keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件
keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。
keyup：当用户释放键盘上的键时触发
**9.1，键码**
**10，HTML5事件**
1，contextmenu事件
-------------------以上是N多事件------------------------------》



 ####为每个按钮添加事件处理程序，性能会不好，因为每个函数都是一个对象，对象是占内存的，所以对象越多，性能越差，解决“事件处理程序过多”的问题可以用到事件委托如下
>```
//JS中事件委托代码：利用冒泡事件，给所在的父元素添加一个事件。
var list = document.getElementById("myLinks");
EventUtil.addHandler(list, "click", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);  //目标事件target
switch(target.id){
case "doSomething":
document.title = "I changed the document's title";
break;
case "goSomewhere":
location.href = "http://www.wrox.com";
break;
case "sayHi":
alert("hi");
break;
}
});

建议在浏览器卸载页面之前移除页面中的所有事件处理程序。onunload，特别是在ie浏览器下，建议这么做。
428

第十章，DOM节点 265-

DOM的属性和方法整理：

1,创建节点createElement

    var createNode = document.createElement("div");
    var createTextNode = document.createTextNode("hello world");
    createNode.appendChild(createTextNode);
    document.body.appendChild(createNode);

2,删除和替换节点remove/replaceChild

//删除节点
   document.body.removeChild(createNode);//需要删除的新节点一定要是子节点
-------------------------------------------------------------
//替换节点
 document.body.replaceChild(createNode,div1);//div1是被替换的节点。createNode是新节点

3，插入节点appendChild，insertBefore，insertBefore

//可以使用appendChild，insertBefore，insertBefore接收两个参数，
//第一个是插入的节点，第二个是参照节点，如insertBefore(a,b)，则a会插入在b的前面
     var createNode = document.createElement("div");
    var createTextNode = document.createTextNode("hello world");
    createNode.appendChild(createTextNode);
    var div1 = document.getElementById("div1");
    document.body.insertBefore(createNode,div1);
//  document.body一定要是父节点，且是在指定的子节点div1前面插入新的子节点createNode。

4，节点的属性，父节点，子节点，兄弟节点last/firstChild/nextElementtSibling

 //lastElementChild;//nextElementtSibling (下一同级节点))
//previousElementSibling 上一同级节点
 if(ul.lastElementChild){ 
            console.log("111E"+ul.lastElementChild.innerHTML);
        }else {
            console.log("11"+ul.lastChild.innerHTML);
        }
 ---------------------------------------------------------
//父节点
   console.log(li.parentNode.innerHTML）
 //子节点
children是指元素的第一层子节点。chiledren是Element的属性，
childNotes 也是指元素的第一层子节点，但是在高级浏览器中它还包括很多其它的类型，比如说文本节点等，childNotes是node的属性

5，克隆节点（没有兼容性问题）cloneNode(true)

var ul = document.getElementById("ul");
var a=  ul.cloneNode(true);//设为false，则是轻度克隆，不会复制子节点。
document.getElementById("div").appendChild(a);
-------------------------
$("p").clone();//jq中clone的使用

6， innerHTML和outerHTML

<div id="test"> 
   <span style="color:red">test1</span> test2 
</div>
test的innerHTML值是<span>....</span>
test的outerHTML值是<div></div>
//注意：因为用innerHTML时会创建一个HTML解析器，效率要高很多，但是一定要避免循环操作innerHTML

7，insertAdjacentHTML在文本容器前后插入代码（没有兼容性问题）

document.getElementById("a").insertAdjacentHTML("afterBegin","<h1> 在文本前容器内插入内容1</h1>");
document.getElementById("a").insertAdjacentHTML("beforeEnd","<h1> 在文本后容器内插入内容2</h1>");
document.getElementById("a").insertAdjacentHTML("beforeBegin","<h1> 在文本前容器外插入内容4</h1>");
document.getElementById("a").insertAdjacentHTML("afterEnd","<h1> 在文本后容器外插入内容5</h1>");

8，JS选择器querySelector/querySelectorAll

1，getElementById 
2，getElementsByName 
3，getElementsByTagName  
4，getElementsByClassName //IE8以及以下浏览器不兼容
5，document.querySelector('#foo > div.bar')//返回第一个匹配元素
6，document.querySelectorAll('.bar')//所有匹配元素的集合
----------**注意事项**：---------------
1，querySelector（）不是实时的，所以动态添加一个元素的时候，元素集合不会更新。
     IE8以及以上浏览器支持，IE8以下 不支持
2，想要获得集合中每个元素，需要遍历解决,如下：
// Using Array.from()
Array.from(myElements).forEach(doSomethingWithEachElement)
// Or prior to ES6
Array.prototype.forEach.call(myElements, doSomethingWithEachElement
// Shorthand:
[].forEach.call(myElements, doSomethingWithEachElement)
3，因为Element接口继承自Node接口，它也有以下的属性：
myElement.children，myElement.firstElementChild，myElement.lastElementChild，myElement.previousElementSibling，myElement.nextElementSibling
或者
myElement.childNodes，myElement.firstChild，myElement.lastChild，myElement.previousSibling，myElement.nextSibling，myElement.parentNode，myElement.parentElement

9，修改classname,.classList.add()/.remove/.toggle（）

//IE10 以及以上浏览器才支持
document.querySelector("div>span").classList.add(“boo”)//添加class
document.querySelector("div>span").classList.remove(“boo”)//删除class
document.querySelector("div>span").classList.toggle(“xx”)//再添加一个class
document.querySelector("div>span").classList.contains('myclass');//检查是否包含myclass类

10，设置和获取和删除属性值getAttribute

//IE7以及以下浏览器不
var div=document.getElementById("a");
  if(div.getAttribute("class")){
            console.log(div.getAttribute("class"));//在IE8以及以上浏览器获取class的值
        }else {
            console.log(div.getAttribute("className"));//在IE7以及以上浏览器获取class的值
        }
//div.setAttribute("value"，“xxx”)；//设置元素的value，也可以设置class和id以及其他属性值。
注意class和className在IE下的区别
//div.removeAttribute("value")；//删除这个属性
//div.hasAttribute("onclick")；//查看元素是否有onclick属性，返回true和false，
// div.hasAttributes()//查看元素是否有任何属性，有一个则返回true，否则false
 //检查元素div是否有子元素
document.getElementById("div").hasChildNodes();

11,各种宽高

**width：**
1,标准盒子模型：width=元素的内容
2,怪异盒子模型：width=元素的内容+内边距pading+边框border
**clientWidth：可视区域的宽度**
1，标准：clientWidth 可视区域的宽度，出去滚动条17px
**offsetHeight：**与Height的区别是增加了border的高度,
http://blog.csdn.net/piziliweiguang/article/details/7762770
网页可见区域宽： document.body.clientWidth;//即border
网页可见区域高： document.body.clientHeight;
网页可见区域宽： document.body.offsetWidth (包括borfer的宽);
网页可见区域高： document.body.offsetHeight (包括边线的宽);
网页正文全文宽： document.body.scrollWidth;
网页正文全文高： document.body.scrollHeight;
网页被卷去的高： document.body.scrollTop;
网页被卷去的左： document.body.scrollLeft;
网页正文部分上： window.screenTop;
网页正文部分左： window.screenLeft;
屏幕分辨率的高： window.screen.height;
屏幕分辨率的宽： window.screen.width;
屏幕可用工作区高度： window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;

12，自定义属性：挂钩data-

<div id="a"  data-appId="12345">    测试     </div>//设置data-appId
取值：
var div = document.getElementById("myDiv");
div.getAttribute("data-appId");
-------------------------------------------------
  div.setAttribute("data-appId","123454");//设置data-appId
取：div.getAttribute("data-appId");
------------------------------------
div.dataset.appId = 23456;//设置data-appId
取值“” console.log( div.dataset.appId);

**13，scrollIntoView 滚动页面

1,document.getElementById('showscroll').scrollIntoView();//true,false ;true元素顶端对其浏览器顶端
2,相当于锚点，写法<a href="divId.scrollIntoView(false)">//divId是某个元素id名称

14，表单脚本430-462 32

1，阻止表单提交

var form = document.getElementById("myForm");
EventUtil.addHandler(form, "submit", function(event){//以便跨浏览器执行
//取得事件对象
event = EventUtil.getEvent(event);
//阻止默认事件
EventUtil.preventDefault(event);
//提交表单
form.submit();3
});

2，阻止重复提交表单

 <form action="${pageContext.request.contextPath}/servlet/DoFormServlet" onsubmit="return dosubmit()" method="post">
 <script type="text/javascript">
       var isCommitted = false;//表单是否已经提交标识，默认为false
        function dosubmit(){
          if(isCommitted==false){
           isCommitted = true;//提交表单后，将表单是否已经提交标识设置为true
             return true;//返回true让表单正常提交
           }else{
            return false;//返回false那么表单将不提交
           }
         }
    </script>
------------------------------
//避免多次提交表单
EventUtil.addHandler(form, "submit", function(event){
event = EventUtil.getEvent(event);
var target = EventUtil.getTarget(event);
//取得提交按钮
var btn = target.elements["submit-btn"];
//禁用它
btn.disabled = true;
});

3，重置表单
form.reset();//表单值全部重置原始，可能会清空
<select>...</select> "select-one"//单选特性
<select multiple>...</select>//多选特性
focus：获得焦点事件
brur：失去焦点事件
<input type="number" min="0" max="100" step="5" name="count">//数字可以按5递加.stepDown(10);10递减
<input type="text" size="25" maxlength="50" value autofocus >//autofocus是不用js即可获取焦点的方法，另外显示25个字符输入不能超过50个
<textarea rows="2" cols="20">initial value</textarea>//2行，每行20个字符
change：失去焦点且元素value值改变时触发，<select>则是在选项发生改变时触发

 document.getElementById("txt1").select() ;  //选中值
textbox.value = "Hello world!"  
//选择所有文本  IE9以及以上
textbox.setSelectionRange(0, textbox.value.length); //"Hello world!"
//选择前3 个字符
textbox.setSelectionRange(0, 3); //"Hel"
//选择第4 到第6 个字符
textbox.setSelectionRange(4, 7); //"o w"
-----------------------------------
textbox.value = "Hello world!"
//选择所有文本
selectText(textbox, 0, textbox.value.length); //"Hello world!"
//选择前3 个字符
selectText(textbox, 0, 3); //"Hel"
//选择第4 到第6 个字符
selectText(textbox, 4, 7); //"o w"

tabForward()//实现自动切换焦点

十五：canvas

<canvas id="myCanvas" width="200" height="100"style="border:1px solid #000000;"></canvas>
var c=document.getElementById("myCanvas");
//确定浏览器支持<canvas>元素
if (drawing.getContext){
var ctx=c.getContext("2d");
ctx.fillStyle="#FF0000";
ctx.fillRect(0,0,150,75);
}
//-------------后续补充----------

第二十章，JSON

1，json和js对象字面量的区别：json：1，属性值key必须加双引号。2，没有变量，3，没有分号
2，json分类：1，简单值，2，对象，3，数组
3，JSON 对象有两个方法：stringify()和parse()。
JSON.stringify(book);//把js对象序列化成json字符串
JSON.parse(jsonText);//把json字符串转化为js类型格式

var book = {
title: "Professional JavaScript",
authors: [
"Nicholas C. Zakas"
],
edition: 3,
year: 2011
};
1：var jsonText = JSON.stringify(book);//把js对象序列化成json字符串
//{"title":"Professional JavaScript","authors":["Nicholas C. Zakas"],"edition":3,
"year":2011}
2：var jsonText = JSON.stringify(book, ["title", "edition"]);//只返回这2个属性
//{"title":"Professional JavaScript","edition":3}
3：var jsonText = JSON.stringify(book, function(key, value){。。。}）//还可以是个函数，就有些复杂
4：var bookCopy = JSON.parse(jsonText);//把json字符串转化为js类型格式
**4，**toJSON() 方法可以将 Date 对象转换为字符串，并格式化为 JSON 数据格式

第二十一章Ajax和comet

var xmlhttp=new XMLHttpRequest();
1，xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);//true代表异步
2，xmlhttp.send();//启动派发请求的操作
3，responseText：作为响应主体被返回的文本。
4，responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性中将保
存包含着响应数据的XML DOM 文档。
5,status：响应的HTTP 状态//200成功，304说明请求资源没有修改，可以使用缓存数据
6,statusText：HTTP 状态的说明。
7，readyState 属性
0：未初始化。尚未调用open()方法。
 1：启动。已经调用open()方法，但尚未调用send()方法。
 2：发送。已经调用send()方法，但尚未接收到响应。
 3：接收。已经接收到部分响应数据。//可以在3里面做loading
 4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了。
8，get和post的区别：
get：参数放在URL后面？。如果数据是英文字母/数字，原样发送，如果是空格，转换为+，如果是中文/其他字符，则直接把字符串用BASE64加密，得出如：%E4%BD%A0%E5%A5%BD，其中％XX中的XX为该符号以16进制表示的ASCII。
GET 请求可被缓存
GET 请求保留在浏览器历史记录中
GET 请求可被收藏为书签
GET 请求不应在处理敏感数据时使用
GET 请求有长度限制
GET 请求只应当用于取回数据

post：多了xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");和xhr.send(serialize(form));//参数放在这里面
POST 请求不会被缓存
POST 请求不会保留在浏览器历史记录中
POST 不能被收藏为书签
POST 请求对数据长度没有要求
POST 发送敏感数据时post更安全
9.new FormData()表单数据系列话，好处在于不必明确地在XHR 对象上设置请求头
10，timeout和回调函数
11，overrideMimeType(）

<script>
function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200  //这个写在前面可以避免浏览器兼容性
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    xmlhttp.send();
}
</script>

第八章

1，location对象
//假设初始URL 为http://www.wrox.com/WileyCDA/
//将URL 修改为"http://www.wrox.com/WileyCDA/#section1"
location.hash = "#section1";//单页面设计主要思想
//将URL 修改为"http://www.wrox.com/WileyCDA/?q=javascript"
location.search = "?q=javascript";
//将URL 修改为"http://www.yahoo.com/WileyCDA/"
location.hostname = "www.yahoo.com";
//将URL 修改为"http://www.yahoo.com/mydir/"
location.pathname = "mydir";
//将URL 修改为"http://www.yahoo.com:8080/WileyCDA/"
2，history 对象
//后退一页
history.go(-1);
//前进一页
history.go(1);
//前进两页
history.go(2);
//跳转到最近的wrox.com 页面
history.go("wrox.com");
//跳转到最近的nczonline.net 页面
history.go("nczonline.net");

跨域

1，定义：只要协议，域名，端口有任何一个不同的地方就叫跨域
2，我需要跨域的域名，测试啊 测试
http://m.blog.csdn.net/article/details?id=51285688
http://www.jianshu.com/p/26925900a389
3，同源策越，即使同域名，同协议，同端口。如果任意一个不同，需要进行跨域访问。
4，src进行跨域的时候，只能有get请求，get请求进行跨域的时候，主要是jsonp跨域
浏览器限制对其返回的内容无法进行读写。
5，用src进行跨域的时候又叫做jsonp跨域，主要在页面生成script标签 只能有get请求
通常 jsonp请求是src跨域，有回调函数，跨域不同的网站，

3.分类：
（1）主机不同
（2）主域相同子域不同a.c.com和b.c.com
（3）主域不同www.a.com和www.b.com
端口不同www.a.com:8080和www.a.com:8088
协议不同http://www.a.com和https://www.a.com

http://mail.163.com/index.html
http://协议
mial 服务器名
163.com 域名
mail.163.com网站名 由服务器和域名组成
8080:端口号
index.html：默认根目录

子域名和二级域名
例如www.dns0755.net是dns0755.net的子域名，而dns0755.net又是net的子域名。国际顶级域名的子域名叫做二级域名。例如www.dns0755.net和ftp.dns0755.net都是dns0755.net的二级域名。

端口和协议不同而造成的跨域问题只能通过后台代理解决。

回调函数

1，定义：回调函数作为变量传递给另外一个函数的（作为参数传递）函数，在他主体执行完毕后

回调函数代码如下：
function a(callbackFunction){//函数b作为参数传递给函数a
   alert("这是parent函数a");
   var m =1;
   var n=3;
  return callbackFunction(m,n);//同时此回调函数也是一个闭包
 }
 function b(m,n){
   alert("这是回调函数B");
   return m+n;
 }
 $(function(){
   var result = a(b);//执行a(b)
   alert("result = "+ result);
 });
执行顺序为：
这是parent函数a
这是回调函数B
result = 4
----------------------------------
$("#btn_1").click(function() {//jq最简单的回调函数例子
  alert("Btn 1 Clicked");
});
-----------------------
var friends = ["Mike", "Stacy", "Andy", "Rick"];//js的回调函数案例
friends.forEach(function (eachName, index){
console.log(index + 1 + ". " + eachName); // 1. Mike, 2. Stacy, 3. Andy, 4. Rick
});

======================================

this的指向问题

1，在普通函数中，this指向它的直接调用者。如果找不到，则是指向windows对象
2，