前端面试需要掌握的一些知识点
来源：互联网 发布：linux系统克隆 编辑：程序博客网 时间：2024/05/17 08:49
DOM结构——两个节点之间可能存在哪些关系以及如何在节点之间任意移动。
document.documentElement 返回文档的根节点<html>
document.body <body>
document.activeElement 返回当前文档中被击活的标签节点(ie)
event.fromElement 返回鼠标移出的源节点(ie)
event.toElement 返回鼠标移入的源节点(ie)
event.srcElement 返回激活事件的源节点(ie)
event.target 返回激活事件的源节点(firefox)
当前对象为node
返回父节点：node.parentNode, node.parendElement,
返回所有子节点：node.childNodes（包含文本节点及标签节点）,node.children
返回第一个子节点：node.firstChild
返回最后一个子节点： node.lastChild
返回同属上一个子节点：node.previousSibling
返回同属下一个子节点：node.nextSibling
parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和
childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持
,所以大家只要记得有parentElement和children就行了
DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
IE 5.5: div -> body -> document
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window
（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。
DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。
XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
XMLHttpRequest 对象提供了在网页加载后与服务器进行通信的方法。
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url){
xmlhttp=null;
if(window.XMLHttpRequest){ //code for all new browsers
xmlhttp=newXMLHttpRequest();
}else if(window.ActiveXObject){ //code for IE5 and IE6
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
if(xmlhttp!=null){
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}else{
alert("Your browser does not support XMLHTTP.");
}
}
function state_Change(){
if(xmlhttp.readyState==4){ //4 = "loaded"
if(xmlhttp.status==200){ //200 = OK
//...our code here...
}else{
alert("Problem retrieving XML data"); //取回xml数据错误
}
}
}
</script>
严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
//DTD 文档类型定义 URI 通用资源标识符
URI
一、主机名。
二、标志符
三、相对URI
URL的格式由下列三部分组成：
第一部分是协议（或称为服务方式）；
第二部分是存有该资源的主机IP地址（有时也包括端口号）；
第三部分是主机资源的具体地址。，如目录和文件名等。
在标准模式中，浏览器根据规范呈现页面；
在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。
对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。
包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML
，XHTML文档以混杂模式呈现。
盒模型——外边距、内边距和边框之间的关系，IE 8以下版本的浏览器中的盒模型有什么不同。
一个元素盒模型的层次从内到外分别为：内边距、边框和外边距
IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框
块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
块级元素，用CSS中的display:inline;属性则变为行内元素
行内元素，用CSS中的display:block;属性则变为块级元素
影响：周围元素显示在同一行或换行显示，根据具体情况调整样式
浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
需要浮动的元素可使用CSS中float属性来定义元素的浮动位置，left：往左浮动，right：往右浮动
浮动元素引起的问题：
（1）父元素的高度无法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素会跟随其后
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决方法：
使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：
.clearfix:after{content: "";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
主要区别：
XHTML 元素必须被正确地嵌套
XHTML 元素必须被关闭，空标签也必须被关闭，如 <br> 必须写成 <br />
XHTML 标签名必须用小写字母
XHTML 文档必须拥有根元素
XHTML 文档要求给所有属性赋一个值
XHTML 要求所有的属性必须用引号""括起来
XHTML 文档需要把所有 < 、>、& 等特殊符号用编码表示
XHTML 文档不要在注释内容中使“--”
XHTML 图片必须有说明文字
XHTML 文档中用id属性代替name属性
JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。
JSON建构于两种结构：
“名称/值”对的集合（A collection of name/value
pairs）。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表
（hash table），有键列表（keyed list），或者关联数组 （associative array）。
值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。
DOM结构、DOM操作、事件处理、XHR和JSON。
WebSocket、HTML、WebGL、客户端数据库
WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。在 WebSocket API，浏览器和服务器只需要要做一个握手的动作，
然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中，为我们实现即时服务带来了两大好处：
1. Header
互相沟通的Header是很小的-大概只有 2 Bytes
2. Server Push
服务器可以主动传送数据给客户端
websocket api在浏览器端的广泛实现似乎只是一个时间问题了, 值得注意的是服务器端没有标准的api, 各个实现都有自己的一套api, 并且jcp也没有类似的提案,
所以使用websocket开发服务器端有一定的风险.可能会被锁定在某个平台上或者将来被迫升级.
WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，
这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。
显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。WebGL完美地解决了现有的Web交互式三维动画的两个问题：
第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;
第二，它利用底层的图形硬件加速功能进行的图形渲染，
是通过统一的、标准的、跨平台的OpenGL接口实现的。
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。
这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成。
在BOM API中，把Web浏览器的各个主要外显特性、Web页面及其标记、内容等都封装成一个个对象，通过这些对象提供的成员访问窗口、文档、元素对象等，并在此基础上实现了对象的事件支持机制。所有BOM对象之间存在一定的关联关系。
§DOM技术的核心是把XML（包括XHTML）文档结构解析为树状结构，每个标记看作是一个节点Node，各节点之间存在某种关系，并通过这些关系来相互访问。
ECMAScript中描述了原型链的概念。我们知道ECMAScript并不像C++，Java那样使用类，但是对象仍然可以通过多种方式创建，其中就有构造函数方式。每个构造函数都有一个原型对象，同时都有一个prototype属性， prototype属性指向构造函数的原型对象，它被用来实现基于原型的继承和共享。
而原型对象又都默认会取得一个constructor属性，这个属性包含一个指向构造函数(prototype属性所在函数)的指针。每个通过调用构造函数创建的实例对象都拥有一个指向原型对象的指针，ECMA-262第5版中叫这个指针为[[prototype]]，虽然在脚本上没有标准的方式访问[[prototype]]，
但Chrome、Firefox和Safari在每个对象上都支持一个属性_proto_，
而在其他实现中，这个属性对脚本是完全不可见的。假如原型对象等于另一个类型的实例，那么它就拥有指向创建该实例的构造函数的原型对象的指针，依此类推，就形成了一条指针链，这就是原型链的概念。
对象实例中的指针[[prototype]]只指向原型对象，并不指向构造函数
函数是一个非常特殊的对象，是一个function类的实例，其实在内存中存储的操作是通过一个键值对来存储的
函数虽然是一个对象，但是却和对象有一些区别，对象是通过引用的指向完成对象的赋值的，而函数却是通过对象的拷贝来完成的
函数的参数和调用没有关系，如果函数只有一个参数，但是却传入了两个参数，仅仅只会匹配一个
在js中函数不存在重载，只存在覆盖，后面定义会覆盖前面定义的
通过以下的例子，充分的说明函数就是一个对象
var fn = new Function("num1","num2","alert('fun:'+(num1+num2))");
fn(12,22);
对于js而言，sort()函数
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
function Person(name,age){
this.name = name;
this.age = agel
}
var p1 = new Person("aaa",22);
var p2 = new Person("ddd",11);
var p3 = new Person("ccc",33);
var p = [p1,p2,p3];
function sortByProperty(property){
var fn = function(obj1 , obj2){
if(obj1[(property)] > obj2[(property)]) return 1;
else if(obj1[(property)] < obj2[(property)]) return -1;
else return 0;
}
return fn;
}
p.sort(sortByProperty("name"));
函数的内部属性arguments，this
由于函数是对象，所以可以直接把函数通过参数传递进来，也可以返回一个可以调用的函数
在函数对象中有一个属性叫做arguments，通过这个属性可以获取相应的参数值，这个属性是一个数组，其实就是传递进来的参数
arguments.callee(arg)可以反向调用函数 函数名解耦合 主要用来实现递归
当需要创建一个类的时候，设置类的属性和方法需要通过this关键字来引用，this关键字会在调用时会根据不同的调用对象变的不同
函数的属性length,prototype,方法call,apply
length指的是该函数期望传递进来的参数个数
在js中并不存在类，所以可以直接通过Object来创建对象
json就是js的对象，但是它省去了xml中标签，而是通过{}来完成对象的说明
var person = {
name:"zhangsan",
age:23,
say:function(){
alert(this.name + "," + this.age);
}
}
通过json依然可以创建对象数组，创建的方式和js的数组一样
var ps = [
{
name:"leon",
age:22,
friends:["ada","alice"]
},
{
name:"ada",
age:33,
friends:["ada","chris"]
}
];
使用工厂的方式创建Person对象，虽然有效的解决了类的问题，但是依然存在另一个问题，我们无法检测对象p1,p2的数据类型
通过构造函数的方式创建对象，和基于工厂的创建类似，最大的区别就是函数的名称就是类的名称，在函数内部是通过this关键字来完成属性的定义
使用构造函数创建所带来的第一个问题就是每一个对象中都会存在一个方法的拷贝，如果对象的行为很多的话，空间的占用率就会大大增加。
可以将函数放到全局变量中定义，这样可以让类中的行为指向同一个函数。如果将所有的方法都设计为全局函数的时候，这个函数就可以被window调用，
此时就破坏对象的封装性，而且如果某个对象有大量的方法，就会导致整个代码充斥着大量的全局函数
通过原型创建对象，可以将属性和方法设置为Person专有的，不能再通过window调用
function Person(){
}
Person.prototype.name = "Leon";
Person.prototype.age = 22;
Person.prototype.say = function(){
alert(this.name + "," + this.age);
}
var p1 = new Person();
p1.say();
alert(Person.prototype.isPrototypeOf(p1));
var p2 = new Person();
p2.name = "ada";
p2.say();
原型是js中非常特殊的一个对象，当一个函数创建之后，会随之产生一个原型对象，当通过这个函数的构造函数创建一个具体的对象之后，在这个具体的对象中就会有一个属性指向原型
以下方法可以检测出p1是否有_prop_指向Person的原型
alert(Person.prototype.isPrototypeOf(p1));
检测某个对象的constructor
alert(p1.constructor == Person);
检测某个属性是否是自己的属性
alert(p1.hasOwnProperty("name")); //false p1自己的空间没有值
alert(p2.hasOwnProperty("name")); //true p2在自己的空间设置了name
删除属性
delete p2.name;
检测某个对象在原型或自己中是否包含有某个属性，通过in检测
alert("name" in p1); //true
alert("address" in p1); //false 在自己和空间中都没有
可以通过如下方法检测某个属性是否在原型中存在
function hasPrototypeProperty (obj,prop){
return ((!obj.hasOwnProperty(prop))&&(prop in obj));
}
alert(hasPrototypeProperty(p1,"name"));
以下方式会重写原型,由于原型重写，而且没有通过Person.prototype来指定，此时的constructor不会在指向Person而是指向Object
如果constructor真的比较重要，可以在json中说明原型的指向
var p1 = new Person();
Person.prototype.sayHi = function(){
alert(this.name + ":hi");
}
//如果把重写放置在new Person之后，注意内存模型
Person.prototype = {
constructor:Person,//手动指定constructor
name:"Leon",
age:23,
say:function(){
alert(this.name +","+this.age);
}
}
p1.sayHi(); //不会报错，但没有this.name
var p2 = new Person();
p2.sayHi(); //此时p2没有sayHi,所以会报错
基于原型的创建虽然可以有效完成封装，但是依然有一些问题
1.无法通过构造函数来设置属性值
2.当属性中有引用类型变量时，可能存在变量值重复
为了解决原型所带来的问题，此处需要通过构造函数和原型组合来实现对象的创建
将属性在构造函数中定义，将方法在原型中定义
function Person(name,age,friends){
//属性在构造函数中定义
this.name = name;
this.age = age;
this.friends = friends;
}
Person.prototype = {
//方法在原型中定义
constructor:Person,
say:function(){
alert(this.name+"["+this.friends+"]");
}
}
var p1 = new Person("leon",22,["ada","chris"]);
p1.name = "john";
p1.friends.push("mike");
p1.say();
var p2 = new Person("ada",33,["leon"]);
p2.say();
为了让定义的方式更加符合java的需求，就把定义方法的原型代码放置到Person这个构造函数中
function Person(name,age,friends){
this.name = name;
this.age = age;
this.friends = friends;
if(!Person.prototype.say){
Person.prototype.say = function(){
alert(this.name+"["+this.friends+"]");
}
}
}
js实现继承的第一种方式是基于原型链的方式
function Parent(){
this.pv = "parent";
}
Parent.prototype.showParentValue = function(){
alert(this.pv);
}
function Child(){
this.cv = "child";
}
//让chile的原型链指向Parent对象，也就等于完成一次继承
Child.prototype = new Parent();
Child.prototype.showChildValue = function(){
alert(this.cv);
}
var p1 = new Child();
p1.showParentValue();
p1.showChildValue;
在使用原型链进行继承一定要注意以下问题
1.不能在设定了原型链之后，在重新为原型链赋值
2.一定要在原型链赋值之后才能添加或覆盖方法
使用原型链继承最大的缺点是无法从子类中调用父类的构造函数
这样就无法把子类的属性赋值到父类
第二个缺点是如果父类中有引用类型，此时这个引用类会添加到子类的原型中，
当第一个对象修改了这个引用 之后，其他对象的引用同时修改
所以一般都不会单纯的使用原型链来实现继承
基于函数伪造的方式实现继承
function Parent(){
this.color = ["red","blue"];
}
function Child(){
//在Child中的this明显指向Child的对象
//在调用Parent方法的时候,而且this又是指向了Child
//此时就等于在这里完成this.color = ["red","blue"];
//也就等于在Child中有了this.color属性，这样也就变相的完成了继承
Parent.call(this);
//这种调用方式，就仅仅完成了函数的调用，根本无法实现继承
//Parent();
}
---------------------------
function Parent(name){
this.name = name;
this.color = ["red","blue"];
}
/*由于使用伪造的方式，不会完成Child的原型指向Parent
*所以say方法不存在，解决方法是，将这个方法放置到
*Parent中使用this来创建，但此时每个对象有存在say
*空间占用太大，所以也不会单独的使用伪造的方式实现继承
*
*Person.prototype.say = function(){
* alert(this.name);
*}
*/
function Child(name,age){
this.age = age;
//使用伪造的方式就可以把子类的构造函数参数传递到父类中
Parent.call(this,name);
}
//组合的实现方式是属性通过伪造的方式实现，方法通过原型链的方式实现
function Parent(name){
this.color = ["red","blue"];
this.name = name;
}
Parent.prototype.ps = function(){
alert(this.name + "[" + this.color + "]");
}
function Child(name,age){
Parent.call(this,name);
this.age = age;
}
Child .prototype = new Parent(); //原型重写
Child .prototype.say = function(){
alert(this.name +","+this.age+ "[" + color + "]");
}
var c1 = new Child("leon",22);
c1.color.push("green");
c1.say();
c1.ps();
var c2 = new Child("ada",33);
c2.say();
c2.ps();
-------------------------
//用如下方式定义函数，不会被先执行，如果再之前调用，会报错
//如下方式定义是在现在内存中创建了一块区域，之后通过一个fn2的变量
//指向这块区域，这块区域的函数开始是没有名称的，这种函数就叫做匿名函数
var fn2 = function(){
alert("fn2");
}
-----------------------
/*在js中进行函数的调用，会为每一个函数增加一个属性SCOPE，通过这个属性来指向一块内存，
*这块内存中包含所有的上下文使用的变量，当在某个函数中调用了新函数之后，新函数依然
*会有一个作用域来执行原有的函数的SCOPE和自己新增加的SCOPE，这样就形成了一个链式结构
*这就是js中的作用域链
*/
var color = "red";
var showColor = function(){
alert(this.color);
}
function changeColor(){
var anotherColor = "blue";
function swapColor(){
var tempColor = anotherColor;
anotherColor = color;
color = tempColor;
}
swapColor();
}
changeColor();
showColor();
-----------------------------------
/*通过以下操作带来的最大的好处是，compareObjectFunction的作用域变大了
*当compareObjectFunction结束之后，prop这个变量依然存在
*
*/
function compareObjectFunction(prop){
//匿名函数
return function(obj1,obj2){
if(obj1[prop] > obj2[prop]) return 1;
else if(obj1[prop] < obj2[prop]) return -1;
else return 0;
}
}
var o1 = {name:"leon",age:22};
var o2 = {name:"ada",age:33};
/*在java或C++中，以下代码执行完成之后，需要进行内存的释放，prop会被释放
*但是在js中，这个作用域被放大了
*
*/
var compare = compareObjectFunction("name");
//在js中，prop在这里依然可以被访问，这种通过返回函数来扩大函数作用域的方法就是闭包
//使用闭包虽然可以延长作用域链，但是会占用更多的内存，一般非特殊情况不要使用闭包
var rel = compare(o1,o2);
alert(rel);
------------------------------
function fn1(){
var fns = new Array();
// i这个变量是保存在fn1这个作用域中
for(var i=0;i<10;i++){
//数组中的值是一组函数
fns[i] = function(){
return i;
}
}
return fns;
}
var fs = fn1();
for(var i=0;i<fs.length;i++){
//此时通过闭包来调用所有函数，当输出i的时候会去上一级的作用域中查找
//这个时候i的值已经为10，所以连续输出10个10
document.write(fs[i]() +"<br/>");
}
------------------------------------
function fn1(){
var fns = new Array();
// i这个变量是保存在fn1这个作用域中
for(var i=0;i<10;i++){
//num这个变量是保存在fns这个tf这个作用域，每一个闭包的num都是不一样
//所以此时所消耗的内存特别大
var tf = function(num){
fns[num] = function(){
return num;
}
}
tf(i);
}
return fns;
}
var fs = fn1();
for(var i=0;i<fs.length;i++){
//每一个fs都是在不同的作用域链中，num也是保存在不同的作用域链中，所以输出0-9
document.write(fs[i]() +"<br/>");
}
--------------------------------
var name = "window";
var person = {
name:"zhangsan",
age:23,
say:function(){
return function(){
return this.name;
}
}
};
/*当完成person.say()之后，这个函数就调用结束了，在这个函数调用结束之前
*this是指向person的，但是在调用匿名函数的时候，this就指向window
*所以得到的结果是window
*/
alert(person.say()());
--------------------------------------------
var name = "window";
var person = {
name:"zhangsan",
age:23,
say:function(){
//that就指向person
var that = this;
return function(){
return that.name;
}
}
};
/*
*此时that是指向person的，所以调用that.name就是person的name
*/
alert(person.say()());
----------------------------------
for(var i=0;i<10;i++){
}
/*在js中没有块作用域，解决的方式是匿名函数，不管是使用循环还是判断之后，这个变量会一直存在
*所以当在全局使用某个变量进行循环或者判断之后，这个变量可能会影响
*到函数中的变量，所以在特殊情况不要使用全局变量，而且使用全局变量
*在作用域链的最上层，访问是最慢的
*/
var i;
alert(i);
-------------------------------------
/*在开发中要把全局变量的代码放到一个匿名函数，并且马上调用匿名函数，这样
*也可以执行全局变量的代码，但是这些变量就被控制在开发人员想要控制的作用域中了
*
*在function的()后不能直接调用，一定要加上括号
*/
(function(){
for(var i=0;i<10;i++){
}
})();
function fn(){
alert(i);
}
fn();
------------------------------------
//静态私有变量
var Person;
(function(){
var name = "";
Person = function(value){
name = value;
}
Person.prototype.setName = function(value){
name = value;
}
Person.prototype.getName = function(){
return name;
}
})();
var p1 = new Person("aa");
alert(p1.getName());
p1.setName("bb");
alert(p1.getName());
------------------------------------------------------------
preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。
当Event对象的cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。
stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。什么是冒泡事件？如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素。
现在很多js代码都直接使用jQuery来写，在jQuery中使用return false时，相当于同时使用event.preventDefault和event.stopPropagation，它会阻止冒泡也会阻止默认行为。但是使用原生js写时，return false只会阻止默认行为
-------------------------------------------------------------------
clientX
观点：鼠标相对于WINDOWS的坐标。
这里这个WINDOWS是指我们能看见的浏览器大小。所以不可能超过显示器的大小，如screen.width,screen.height
pageX
这个东西是相对于DOCUMENT的。只是IE678不支持，IE9支持！
offsetLeft
这个是表示对象定位的坐标，而非鼠标事件的坐标！
如果设置定位非STATIC的元素，那么就是相对于他们的位置！而应该注意也不全是定位的距离，而是物体offsetWidth的周围起，也就是说要加上左外边距的距离！
clientLeft
表示从内边距起，到元素自身的offsetLeft的终点位置或者说是起点的位置，取决于你是从左往右算，还是从右往左算。那么就是到滚动条，或者边框的地方。其实我想寻找到滚动条的位置，于是设置了左边框，但是突然发现只有LEFT而没有RIGHT，所以这种情况不会出现，所以应该能说明，就是边框的距离！
scrollTop
给出元素已经滚动的距离（像素值）。当你设置这些属性的时候，页面滚动到新坐标。
解释：像素值表示这个值的单位是px。如果你设置值为100px，那么不会生效，因为值的单位已经有默认了，你只需要用‘100’。
layerX\offsetX
不被所有浏览器支持。只在你想要取得一个元素相对于它的绝对定位的父元素的位置时有用处。
var x = [the element];
var pos = x.layerX || x.offsetX;
----------------------------------------------------------------
Ajax(Asynchronous Javascript And XML”（异步JavaScript和XML）)是使用客户端脚本与Web服务器交换数据的Web应用开发方法。Web页面不用打断交互流程进行重新加裁，就可以动态地更新。
使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
一个Ajax交互从一个称为XMLHttpRequest的JavaScript对象开始。如同名字所暗示的，它允许一个客户端脚本来执行HTTP请求，并且将会解析一个XML格式的服务器响应。
Ajax处理过程中的第一步是创建一个XMLHttpRequest实例。使用HTTP方法（GET或POST）来处理请求，并将目标URL设置到XMLHttpRequest对象上。
当你发送HTTP请求，你不希望浏览器挂起并等待服务器的响应，取而代之的是，你希望通过页面继续响应用户的界面交互，
并在服务器响应真正到达后处理它们。要完成它，你可以向XMLHttpRequest注册一个回调函数，并异步地派发XMLHttpRequest请求。
控制权马上就被返回到浏览器，当服务器响应到达时，回调函数将会被调用。
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
send(string)
将请求发送到服务器。
string：仅用于 POST 请求
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
下面是 XMLHttpRequest 对象的三个重要的属性：
属性 描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status
200: "OK"
404: 未找到页面
---------------------------------------------------
具体来说cookie机制采用的是在客户端保持状态的方案，而session机制采用的是在服务器端保持状态的方案。
cookie 和session 的区别：
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、所以个人建议：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中
JQUERY
PS
document.documentElement 返回文档的根节点<html>
document.body <body>
document.activeElement 返回当前文档中被击活的标签节点(ie)
event.fromElement 返回鼠标移出的源节点(ie)
event.toElement 返回鼠标移入的源节点(ie)
event.srcElement 返回激活事件的源节点(ie)
event.target 返回激活事件的源节点(firefox)
当前对象为node
返回父节点：node.parentNode, node.parendElement,
返回所有子节点：node.childNodes（包含文本节点及标签节点）,node.children
返回第一个子节点：node.firstChild
返回最后一个子节点： node.lastChild
返回同属上一个子节点：node.previousSibling
返回同属下一个子节点：node.nextSibling
parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和
childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持
,所以大家只要记得有parentElement和children就行了
DOM操作——怎样添加、移除、移动、复制、创建和查找节点。
（1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
（2）添加、移除、替换、插入
appendChild()
removeChild()
replaceChild()
insertBefore()
（3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
事件——怎样使用事件以及IE和DOM事件模型之间存在哪些主要差别。
（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
IE 5.5: div -> body -> document
IE 6.0: div -> body -> html -> document
Mozilla 1.0: div -> body -> html -> document -> window
（2）捕获型事件(event capturing)：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)。
（3）DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。
DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。
XMLHttpRequest——这是什么、怎样完整地执行一次GET请求、怎样检测错误。
XMLHttpRequest 对象提供了在网页加载后与服务器进行通信的方法。
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url){
xmlhttp=null;
if(window.XMLHttpRequest){ //code for all new browsers
xmlhttp=newXMLHttpRequest();
}else if(window.ActiveXObject){ //code for IE5 and IE6
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
if(xmlhttp!=null){
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}else{
alert("Your browser does not support XMLHTTP.");
}
}
function state_Change(){
if(xmlhttp.readyState==4){ //4 = "loaded"
if(xmlhttp.status==200){ //200 = OK
//...our code here...
}else{
alert("Problem retrieving XML data"); //取回xml数据错误
}
}
}
</script>
严格模式与混杂模式——如何触发这两种模式，区分它们有何意义。
//DTD 文档类型定义 URI 通用资源标识符
URI
一、主机名。
二、标志符
三、相对URI
URL的格式由下列三部分组成：
第一部分是协议（或称为服务方式）；
第二部分是存有该资源的主机IP地址（有时也包括端口号）；
第三部分是主机资源的具体地址。，如目录和文件名等。
在标准模式中，浏览器根据规范呈现页面；
在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式呈现。
对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。
包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML
，XHTML文档以混杂模式呈现。
盒模型——外边距、内边距和边框之间的关系，IE 8以下版本的浏览器中的盒模型有什么不同。
一个元素盒模型的层次从内到外分别为：内边距、边框和外边距
IE8以下浏览器的盒模型中定义的元素的宽高不包括内边距和边框
块级元素与行内元素——怎么用CSS控制它们、它们怎样影响周围的元素以及你觉得应该如何定义它们的样式。
块级元素，用CSS中的display:inline;属性则变为行内元素
行内元素，用CSS中的display:block;属性则变为块级元素
影响：周围元素显示在同一行或换行显示，根据具体情况调整样式
浮动元素——怎么使用它们、它们有什么问题以及怎么解决这些问题。
需要浮动的元素可使用CSS中float属性来定义元素的浮动位置，left：往左浮动，right：往右浮动
浮动元素引起的问题：
（1）父元素的高度无法被撑开，影响与父元素同级的元素
（2）与浮动元素同级的非浮动元素会跟随其后
（3）若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构
解决方法：
使用CSS中的clear:both;属性来清除元素的浮动可解决2、3问题，对于问题1，添加如下样式，给父元素添加clearfix样式：
.clearfix:after{content: "";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;} /* for IE/Mac */
HTML与XHTML——二者有什么区别，你觉得应该使用哪一个并说出理由。
主要区别：
XHTML 元素必须被正确地嵌套
XHTML 元素必须被关闭，空标签也必须被关闭，如 <br> 必须写成 <br />
XHTML 标签名必须用小写字母
XHTML 文档必须拥有根元素
XHTML 文档要求给所有属性赋一个值
XHTML 要求所有的属性必须用引号""括起来
XHTML 文档需要把所有 < 、>、& 等特殊符号用编码表示
XHTML 文档不要在注释内容中使“--”
XHTML 图片必须有说明文字
XHTML 文档中用id属性代替name属性
JSON——它是什么、为什么应该使用它、到底该怎么使用它，说出实现细节来。
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。
JSON建构于两种结构：
“名称/值”对的集合（A collection of name/value
pairs）。不同的语言中，它被理解为对象（object），纪录（record），结构（struct），字典（dictionary），哈希表
（hash table），有键列表（keyed list），或者关联数组 （associative array）。
值的有序列表（An ordered list of values）。在大部分语言中，它被理解为数组（array）。
DOM结构、DOM操作、事件处理、XHR和JSON。
WebSocket、HTML、WebGL、客户端数据库
WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。在 WebSocket API，浏览器和服务器只需要要做一个握手的动作，
然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。在此WebSocket 协议中，为我们实现即时服务带来了两大好处：
1. Header
互相沟通的Header是很小的-大概只有 2 Bytes
2. Server Push
服务器可以主动传送数据给客户端
websocket api在浏览器端的广泛实现似乎只是一个时间问题了, 值得注意的是服务器端没有标准的api, 各个实现都有自己的一套api, 并且jcp也没有类似的提案,
所以使用websocket开发服务器端有一定的风险.可能会被锁定在某个平台上或者将来被迫升级.
WebGL是一种3D绘图标准，这种绘图技术标准允许把JavaScript和OpenGL ES 2.0结合在一起，通过增加OpenGL ES 2.0的一个JavaScript绑定，WebGL可以为HTML5 Canvas提供硬件3D加速渲染，
这样Web开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了，还能创建复杂的导航和数据视觉化。
显然，WebGL技术标准免去了开发网页专用渲染插件的麻烦，可被用于创建具有复杂3D结构的网站页面，甚至可以用来设计3D网页游戏等等。WebGL完美地解决了现有的Web交互式三维动画的两个问题：
第一，它通过HTML脚本本身实现Web交互式三维动画的制作，无需任何浏览器插件支持;
第二，它利用底层的图形硬件加速功能进行的图形渲染，
是通过统一的、标准的、跨平台的OpenGL接口实现的。
JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它基于JavaScript（Standard ECMA-262 3rd Edition - December 1999）的一个子集。 JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。
这些特性使JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成。
在BOM API中，把Web浏览器的各个主要外显特性、Web页面及其标记、内容等都封装成一个个对象，通过这些对象提供的成员访问窗口、文档、元素对象等，并在此基础上实现了对象的事件支持机制。所有BOM对象之间存在一定的关联关系。
§DOM技术的核心是把XML（包括XHTML）文档结构解析为树状结构，每个标记看作是一个节点Node，各节点之间存在某种关系，并通过这些关系来相互访问。
ECMAScript中描述了原型链的概念。我们知道ECMAScript并不像C++，Java那样使用类，但是对象仍然可以通过多种方式创建，其中就有构造函数方式。每个构造函数都有一个原型对象，同时都有一个prototype属性， prototype属性指向构造函数的原型对象，它被用来实现基于原型的继承和共享。
而原型对象又都默认会取得一个constructor属性，这个属性包含一个指向构造函数(prototype属性所在函数)的指针。每个通过调用构造函数创建的实例对象都拥有一个指向原型对象的指针，ECMA-262第5版中叫这个指针为[[prototype]]，虽然在脚本上没有标准的方式访问[[prototype]]，
但Chrome、Firefox和Safari在每个对象上都支持一个属性_proto_，
而在其他实现中，这个属性对脚本是完全不可见的。假如原型对象等于另一个类型的实例，那么它就拥有指向创建该实例的构造函数的原型对象的指针，依此类推，就形成了一条指针链，这就是原型链的概念。
对象实例中的指针[[prototype]]只指向原型对象，并不指向构造函数
函数是一个非常特殊的对象，是一个function类的实例，其实在内存中存储的操作是通过一个键值对来存储的
函数虽然是一个对象，但是却和对象有一些区别，对象是通过引用的指向完成对象的赋值的，而函数却是通过对象的拷贝来完成的
函数的参数和调用没有关系，如果函数只有一个参数，但是却传入了两个参数，仅仅只会匹配一个
在js中函数不存在重载，只存在覆盖，后面定义会覆盖前面定义的
通过以下的例子，充分的说明函数就是一个对象
var fn = new Function("num1","num2","alert('fun:'+(num1+num2))");
fn(12,22);
对于js而言，sort()函数
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
function Person(name,age){
this.name = name;
this.age = agel
}
var p1 = new Person("aaa",22);
var p2 = new Person("ddd",11);
var p3 = new Person("ccc",33);
var p = [p1,p2,p3];
function sortByProperty(property){
var fn = function(obj1 , obj2){
if(obj1[(property)] > obj2[(property)]) return 1;
else if(obj1[(property)] < obj2[(property)]) return -1;
else return 0;
}
return fn;
}
p.sort(sortByProperty("name"));
函数的内部属性arguments，this
由于函数是对象，所以可以直接把函数通过参数传递进来，也可以返回一个可以调用的函数
在函数对象中有一个属性叫做arguments，通过这个属性可以获取相应的参数值，这个属性是一个数组，其实就是传递进来的参数
arguments.callee(arg)可以反向调用函数 函数名解耦合 主要用来实现递归
当需要创建一个类的时候，设置类的属性和方法需要通过this关键字来引用，this关键字会在调用时会根据不同的调用对象变的不同
函数的属性length,prototype,方法call,apply
length指的是该函数期望传递进来的参数个数
在js中并不存在类，所以可以直接通过Object来创建对象
json就是js的对象，但是它省去了xml中标签，而是通过{}来完成对象的说明
var person = {
name:"zhangsan",
age:23,
say:function(){
alert(this.name + "," + this.age);
}
}
通过json依然可以创建对象数组，创建的方式和js的数组一样
var ps = [
{
name:"leon",
age:22,
friends:["ada","alice"]
},
{
name:"ada",
age:33,
friends:["ada","chris"]
}
];
使用工厂的方式创建Person对象，虽然有效的解决了类的问题，但是依然存在另一个问题，我们无法检测对象p1,p2的数据类型
通过构造函数的方式创建对象，和基于工厂的创建类似，最大的区别就是函数的名称就是类的名称，在函数内部是通过this关键字来完成属性的定义
使用构造函数创建所带来的第一个问题就是每一个对象中都会存在一个方法的拷贝，如果对象的行为很多的话，空间的占用率就会大大增加。
可以将函数放到全局变量中定义，这样可以让类中的行为指向同一个函数。如果将所有的方法都设计为全局函数的时候，这个函数就可以被window调用，
此时就破坏对象的封装性，而且如果某个对象有大量的方法，就会导致整个代码充斥着大量的全局函数
通过原型创建对象，可以将属性和方法设置为Person专有的，不能再通过window调用
function Person(){
}
Person.prototype.name = "Leon";
Person.prototype.age = 22;
Person.prototype.say = function(){
alert(this.name + "," + this.age);
}
var p1 = new Person();
p1.say();
alert(Person.prototype.isPrototypeOf(p1));
var p2 = new Person();
p2.name = "ada";
p2.say();
原型是js中非常特殊的一个对象，当一个函数创建之后，会随之产生一个原型对象，当通过这个函数的构造函数创建一个具体的对象之后，在这个具体的对象中就会有一个属性指向原型
以下方法可以检测出p1是否有_prop_指向Person的原型
alert(Person.prototype.isPrototypeOf(p1));
检测某个对象的constructor
alert(p1.constructor == Person);
检测某个属性是否是自己的属性
alert(p1.hasOwnProperty("name")); //false p1自己的空间没有值
alert(p2.hasOwnProperty("name")); //true p2在自己的空间设置了name
删除属性
delete p2.name;
检测某个对象在原型或自己中是否包含有某个属性，通过in检测
alert("name" in p1); //true
alert("address" in p1); //false 在自己和空间中都没有
可以通过如下方法检测某个属性是否在原型中存在
function hasPrototypeProperty (obj,prop){
return ((!obj.hasOwnProperty(prop))&&(prop in obj));
}
alert(hasPrototypeProperty(p1,"name"));
以下方式会重写原型,由于原型重写，而且没有通过Person.prototype来指定，此时的constructor不会在指向Person而是指向Object
如果constructor真的比较重要，可以在json中说明原型的指向
var p1 = new Person();
Person.prototype.sayHi = function(){
alert(this.name + ":hi");
}
//如果把重写放置在new Person之后，注意内存模型
Person.prototype = {
constructor:Person,//手动指定constructor
name:"Leon",
age:23,
say:function(){
alert(this.name +","+this.age);
}
}
p1.sayHi(); //不会报错，但没有this.name
var p2 = new Person();
p2.sayHi(); //此时p2没有sayHi,所以会报错
基于原型的创建虽然可以有效完成封装，但是依然有一些问题
1.无法通过构造函数来设置属性值
2.当属性中有引用类型变量时，可能存在变量值重复
为了解决原型所带来的问题，此处需要通过构造函数和原型组合来实现对象的创建
将属性在构造函数中定义，将方法在原型中定义
function Person(name,age,friends){
//属性在构造函数中定义
this.name = name;
this.age = age;
this.friends = friends;
}
Person.prototype = {
//方法在原型中定义
constructor:Person,
say:function(){
alert(this.name+"["+this.friends+"]");
}
}
var p1 = new Person("leon",22,["ada","chris"]);
p1.name = "john";
p1.friends.push("mike");
p1.say();
var p2 = new Person("ada",33,["leon"]);
p2.say();
为了让定义的方式更加符合java的需求，就把定义方法的原型代码放置到Person这个构造函数中
function Person(name,age,friends){
this.name = name;
this.age = age;
this.friends = friends;
if(!Person.prototype.say){
Person.prototype.say = function(){
alert(this.name+"["+this.friends+"]");
}
}
}
js实现继承的第一种方式是基于原型链的方式
function Parent(){
this.pv = "parent";
}
Parent.prototype.showParentValue = function(){
alert(this.pv);
}
function Child(){
this.cv = "child";
}
//让chile的原型链指向Parent对象，也就等于完成一次继承
Child.prototype = new Parent();
Child.prototype.showChildValue = function(){
alert(this.cv);
}
var p1 = new Child();
p1.showParentValue();
p1.showChildValue;
在使用原型链进行继承一定要注意以下问题
1.不能在设定了原型链之后，在重新为原型链赋值
2.一定要在原型链赋值之后才能添加或覆盖方法
使用原型链继承最大的缺点是无法从子类中调用父类的构造函数
这样就无法把子类的属性赋值到父类
第二个缺点是如果父类中有引用类型，此时这个引用类会添加到子类的原型中，
当第一个对象修改了这个引用 之后，其他对象的引用同时修改
所以一般都不会单纯的使用原型链来实现继承
基于函数伪造的方式实现继承
function Parent(){
this.color = ["red","blue"];
}
function Child(){
//在Child中的this明显指向Child的对象
//在调用Parent方法的时候,而且this又是指向了Child
//此时就等于在这里完成this.color = ["red","blue"];
//也就等于在Child中有了this.color属性，这样也就变相的完成了继承
Parent.call(this);
//这种调用方式，就仅仅完成了函数的调用，根本无法实现继承
//Parent();
}
---------------------------
function Parent(name){
this.name = name;
this.color = ["red","blue"];
}
/*由于使用伪造的方式，不会完成Child的原型指向Parent
*所以say方法不存在，解决方法是，将这个方法放置到
*Parent中使用this来创建，但此时每个对象有存在say
*空间占用太大，所以也不会单独的使用伪造的方式实现继承
*
*Person.prototype.say = function(){
* alert(this.name);
*}
*/
function Child(name,age){
this.age = age;
//使用伪造的方式就可以把子类的构造函数参数传递到父类中
Parent.call(this,name);
}
//组合的实现方式是属性通过伪造的方式实现，方法通过原型链的方式实现
function Parent(name){
this.color = ["red","blue"];
this.name = name;
}
Parent.prototype.ps = function(){
alert(this.name + "[" + this.color + "]");
}
function Child(name,age){
Parent.call(this,name);
this.age = age;
}
Child .prototype = new Parent(); //原型重写
Child .prototype.say = function(){
alert(this.name +","+this.age+ "[" + color + "]");
}
var c1 = new Child("leon",22);
c1.color.push("green");
c1.say();
c1.ps();
var c2 = new Child("ada",33);
c2.say();
c2.ps();
-------------------------
//用如下方式定义函数，不会被先执行，如果再之前调用，会报错
//如下方式定义是在现在内存中创建了一块区域，之后通过一个fn2的变量
//指向这块区域，这块区域的函数开始是没有名称的，这种函数就叫做匿名函数
var fn2 = function(){
alert("fn2");
}
-----------------------
/*在js中进行函数的调用，会为每一个函数增加一个属性SCOPE，通过这个属性来指向一块内存，
*这块内存中包含所有的上下文使用的变量，当在某个函数中调用了新函数之后，新函数依然
*会有一个作用域来执行原有的函数的SCOPE和自己新增加的SCOPE，这样就形成了一个链式结构
*这就是js中的作用域链
*/
var color = "red";
var showColor = function(){
alert(this.color);
}
function changeColor(){
var anotherColor = "blue";
function swapColor(){
var tempColor = anotherColor;
anotherColor = color;
color = tempColor;
}
swapColor();
}
changeColor();
showColor();
-----------------------------------
/*通过以下操作带来的最大的好处是，compareObjectFunction的作用域变大了
*当compareObjectFunction结束之后，prop这个变量依然存在
*
*/
function compareObjectFunction(prop){
//匿名函数
return function(obj1,obj2){
if(obj1[prop] > obj2[prop]) return 1;
else if(obj1[prop] < obj2[prop]) return -1;
else return 0;
}
}
var o1 = {name:"leon",age:22};
var o2 = {name:"ada",age:33};
/*在java或C++中，以下代码执行完成之后，需要进行内存的释放，prop会被释放
*但是在js中，这个作用域被放大了
*
*/
var compare = compareObjectFunction("name");
//在js中，prop在这里依然可以被访问，这种通过返回函数来扩大函数作用域的方法就是闭包
//使用闭包虽然可以延长作用域链，但是会占用更多的内存，一般非特殊情况不要使用闭包
var rel = compare(o1,o2);
alert(rel);
------------------------------
function fn1(){
var fns = new Array();
// i这个变量是保存在fn1这个作用域中
for(var i=0;i<10;i++){
//数组中的值是一组函数
fns[i] = function(){
return i;
}
}
return fns;
}
var fs = fn1();
for(var i=0;i<fs.length;i++){
//此时通过闭包来调用所有函数，当输出i的时候会去上一级的作用域中查找
//这个时候i的值已经为10，所以连续输出10个10
document.write(fs[i]() +"<br/>");
}
------------------------------------
function fn1(){
var fns = new Array();
// i这个变量是保存在fn1这个作用域中
for(var i=0;i<10;i++){
//num这个变量是保存在fns这个tf这个作用域，每一个闭包的num都是不一样
//所以此时所消耗的内存特别大
var tf = function(num){
fns[num] = function(){
return num;
}
}
tf(i);
}
return fns;
}
var fs = fn1();
for(var i=0;i<fs.length;i++){
//每一个fs都是在不同的作用域链中，num也是保存在不同的作用域链中，所以输出0-9
document.write(fs[i]() +"<br/>");
}
--------------------------------
var name = "window";
var person = {
name:"zhangsan",
age:23,
say:function(){
return function(){
return this.name;
}
}
};
/*当完成person.say()之后，这个函数就调用结束了，在这个函数调用结束之前
*this是指向person的，但是在调用匿名函数的时候，this就指向window
*所以得到的结果是window
*/
alert(person.say()());
--------------------------------------------
var name = "window";
var person = {
name:"zhangsan",
age:23,
say:function(){
//that就指向person
var that = this;
return function(){
return that.name;
}
}
};
/*
*此时that是指向person的，所以调用that.name就是person的name
*/
alert(person.say()());
----------------------------------
for(var i=0;i<10;i++){
}
/*在js中没有块作用域，解决的方式是匿名函数，不管是使用循环还是判断之后，这个变量会一直存在
*所以当在全局使用某个变量进行循环或者判断之后，这个变量可能会影响
*到函数中的变量，所以在特殊情况不要使用全局变量，而且使用全局变量
*在作用域链的最上层，访问是最慢的
*/
var i;
alert(i);
-------------------------------------
/*在开发中要把全局变量的代码放到一个匿名函数，并且马上调用匿名函数，这样
*也可以执行全局变量的代码，但是这些变量就被控制在开发人员想要控制的作用域中了
*
*在function的()后不能直接调用，一定要加上括号
*/
(function(){
for(var i=0;i<10;i++){
}
})();
function fn(){
alert(i);
}
fn();
------------------------------------
//静态私有变量
var Person;
(function(){
var name = "";
Person = function(value){
name = value;
}
Person.prototype.setName = function(value){
name = value;
}
Person.prototype.getName = function(){
return name;
}
})();
var p1 = new Person("aa");
alert(p1.getName());
p1.setName("bb");
alert(p1.getName());
------------------------------------------------------------
preventDefault它是事件对象(Event)的一个方法，作用是取消一个目标元素的默认行为。
当Event对象的cancelable为false时，表示没有默认行为，这时即使有默认行为，调用preventDefault也是不会起作用的。
stopPropagation也是事件对象(Event)的一个方法，作用是阻止目标元素的冒泡事件，但是会不阻止默认行为。什么是冒泡事件？如在一个按钮是绑定一个”click”事件，那么”click”事件会依次在它的父级元素中被触发 。stopPropagation就是阻止目标元素的事件冒泡到父级元素。
现在很多js代码都直接使用jQuery来写，在jQuery中使用return false时，相当于同时使用event.preventDefault和event.stopPropagation，它会阻止冒泡也会阻止默认行为。但是使用原生js写时，return false只会阻止默认行为
-------------------------------------------------------------------
clientX
观点：鼠标相对于WINDOWS的坐标。
这里这个WINDOWS是指我们能看见的浏览器大小。所以不可能超过显示器的大小，如screen.width,screen.height
pageX
这个东西是相对于DOCUMENT的。只是IE678不支持，IE9支持！
offsetLeft
这个是表示对象定位的坐标，而非鼠标事件的坐标！
如果设置定位非STATIC的元素，那么就是相对于他们的位置！而应该注意也不全是定位的距离，而是物体offsetWidth的周围起，也就是说要加上左外边距的距离！
clientLeft
表示从内边距起，到元素自身的offsetLeft的终点位置或者说是起点的位置，取决于你是从左往右算，还是从右往左算。那么就是到滚动条，或者边框的地方。其实我想寻找到滚动条的位置，于是设置了左边框，但是突然发现只有LEFT而没有RIGHT，所以这种情况不会出现，所以应该能说明，就是边框的距离！
scrollTop
给出元素已经滚动的距离（像素值）。当你设置这些属性的时候，页面滚动到新坐标。
解释：像素值表示这个值的单位是px。如果你设置值为100px，那么不会生效，因为值的单位已经有默认了，你只需要用‘100’。
layerX\offsetX
不被所有浏览器支持。只在你想要取得一个元素相对于它的绝对定位的父元素的位置时有用处。
var x = [the element];
var pos = x.layerX || x.offsetX;
----------------------------------------------------------------
Ajax(Asynchronous Javascript And XML”（异步JavaScript和XML）)是使用客户端脚本与Web服务器交换数据的Web应用开发方法。Web页面不用打断交互流程进行重新加裁，就可以动态地更新。
使用Ajax，用户可以创建接近本地桌面应用的直接、高可用、更丰富、更动态的Web用户界面。
一个Ajax交互从一个称为XMLHttpRequest的JavaScript对象开始。如同名字所暗示的，它允许一个客户端脚本来执行HTTP请求，并且将会解析一个XML格式的服务器响应。
Ajax处理过程中的第一步是创建一个XMLHttpRequest实例。使用HTTP方法（GET或POST）来处理请求，并将目标URL设置到XMLHttpRequest对象上。
当你发送HTTP请求，你不希望浏览器挂起并等待服务器的响应，取而代之的是，你希望通过页面继续响应用户的界面交互，
并在服务器响应真正到达后处理它们。要完成它，你可以向XMLHttpRequest注册一个回调函数，并异步地派发XMLHttpRequest请求。
控制权马上就被返回到浏览器，当服务器响应到达时，回调函数将会被调用。
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
method：请求的类型；GET 或 POST
url：文件在服务器上的位置
async：true（异步）或 false（同步）
send(string)
将请求发送到服务器。
string：仅用于 POST 请求
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。
下面是 XMLHttpRequest 对象的三个重要的属性：
属性 描述
onreadystatechange 存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status
200: "OK"
404: 未找到页面
---------------------------------------------------
具体来说cookie机制采用的是在客户端保持状态的方案，而session机制采用的是在服务器端保持状态的方案。
cookie 和session 的区别：
1、cookie数据存放在客户的浏览器上，session数据放在服务器上。
2、cookie不是很安全，别人可以分析存放在本地的COOKIE并进行COOKIE欺骗
考虑到安全应当使用session。
3、session会在一定时间内保存在服务器上。当访问增多，会比较占用你服务器的性能
考虑到减轻服务器性能方面，应当使用COOKIE。
4、单个cookie保存的数据不能超过4K，很多浏览器都限制一个站点最多保存20个cookie。
5、所以个人建议：
将登陆信息等重要信息存放为SESSION
其他信息如果需要保留，可以放在COOKIE中
JQUERY
PS
0 0
- 前端面试需要掌握的一些知识点
- 面试需要掌握知识点
- 面试需要掌握知识点
- 前端开发必须掌握的一些知识点
- java面试需要掌握知识点
- java面试需要掌握知识点
- java面试需要掌握知识点
- java面试需要掌握知识点
- web前端面试知识点的一些总结
- 需要掌握的知识点
- 需要掌握的知识点
- 前端的面试知识点
- 需要掌握的flex知识点
- 秋招前端笔试面试的一些知识点
- 面试-需要掌握的基础知识
- 面试需要掌握的知识
- 前端工程师必须掌握的知识点
- 前端工程师必须掌握的知识点
- 今天本地调试的时候出现几次com.mchange.v2.resourcepool.CannotAcquireResourceException:
- CPU的利用率是怎么计算的
- 软件测试面试
- LeetCode - Plus One - Frequent
- 监听网络的广播接收者接收两次解决方案
- 前端面试需要掌握的一些知识点
- UVA - 10306 e-Coins
- PE 6 Sum square difference
- 1068. Find More Coins (30)
- hrbust 1161 树状数组模版
- 【计算机基础】 常用的排序算法的时间复杂度和空间复杂度
- Maximum Subsequence Sum【PAT 1007题】---简单的动态规划
- （二）yii使用原生html不使用yii生成html表单如何忽略m层验证无法通过
- js深层次知识点
