Professional JS 7.2.1闭包与变量----8.1.4窗口大小

1.this对象是由运行时函数的执行环境/上下文决定的，还取决于调用函数的方式。

1.
var name='The Window';
var obj={
name:'My Object',
getNameFunc:function(){
return this.name;
}
};
//()左边是对象的方法
alert(obj.getNameFunc());//My Object

1.
var name='The Window';
var obj={
name:'My Object',
getNameFunc:function(){
return function(){
return this.name;
};
}
};
//()---最后一个圆括号的左边是一个函数
alert(obj.getNameFunc()());//The Window

1.
var name='The Window';
var obj={
name:'My Object',
getNameFunc:function(){
var that=this;//this值为obj对象
return function(){
return that.name;//that也是obj对象
};
}
};
alert(obj.getNameFunc()());//My Object

1.
name='The Window';
var obj={
name:'My Object',
getName:function(){
return this.name;
}
};
obj.getName();//"My Object"
(obj.getName)();//"My Object"
(obj.getName=obj.getName)();//"The Window"

2.闭包会引用包含函数的整个活动对象。—-【内存泄漏】

1.
/*
匿名函数保存着一个对assignHandler()的活动对象的引用，因此只要匿名函数存在
，element的引用数至少为1，导致它所占用的内存永远不会被收回。
*/
function assignHandler(){
var element=document.getElementById('someElement');
element.onclick=function(){
alert(element.id);
};
}

2.
function assignHandler(){
var element=document.getElementById('someElement');
var id=element.id;//将element.id的一个副本保存至一个变量中
element.onclick=function(){
alert(id);//并在闭包中引用该变量消除了循环引用
};
element=null;//彻底消除对DOM对象的引用，顺利减少其引用数，并正常回收其占用内存。
}

3.JS中没有块级作用域的概念，也就是函数作用域+全局作用域（循环语句）。

4.JS从来不会告诉你是否多次声明了同一个变量，遇到这种情况，它只会对后续的声明视而不见（不过，它会执行后续声明中的变量初始化）。

5.模仿块级作用域（私有作用域）—–(function(){//这里是块级作用域})();—-定义并立即调用了一个匿名函数。

(function(){
var now=new Date();
if(now.getMonth()==0&&now.getDate()==1){
alert('Happy new year!');
}
})();

①函数声明放在一对圆括号中，实际上表示的是一个函数表达式。

②变量只不过是值的另一种表现形式。

③同理，函数的值可以直接取代函数名，但是function(){}();//出错!

④因为JS将function关键字当做一个函数声明的开始，而函数声明后面不能跟圆括号。然而，函数表达式却可以，因此只需将函数声明转为函数表达式，方法：(函数声明)

⑤私有作用域的优点：在一个大型项目中，每个开发人员都可以使用自己的变量，而不用担心全局变量和函数的命名冲突。同时也不用担心弄乱全局作用域。

⑥这种做法可以减少闭包占用的内存问题，因为没有指向匿名函数的引用。只要函数执行完毕，就可以立即销毁其作用域链。

6.私有变量

1.
//构造函数中定义特权方法
function MyObject(){
//私有变量和私有函数
var privateVariable=10;
function privateFunction(){
return false;
}
//特权方法
this.publicMethod=function(){
privateVariable++;
return privateFunction();
};
}

2.
//私有作用域中定义私有变量或函数
(function(){
//私有变量和私有函数
var privateVariable=10;
function privateFunction(){
return false;
}
//构造函数保存在一个全局变量中
MyObject=function(){};
//公有/特权方法---全局变量的原型的方法
MyObject.prototype.publicMethod=function(){
privateVariable++;
return privateFunction();
};
})();

3.
(function(){
var name='';
Person=function(value){
name=value;
};
Person.prototype.getName=function(){
return name;
};
Person.prototype.setName=function(value){
name=value;
};
})();
var person1=new Person('yyc');
console.log(person1.getName());//yyc
person1.setName('Greg');
console.log(person1.getName());//Greg

var person2=new Person('asan');
console.log(person1.getName());//asan
console.log(person2.getName());//asan

①任何在函数中定义的变量，都可以认为是私有变量，因为不能在函数的外面访问这些变量。私有变量包括函数的参数、局部变量和在函数中定义的其他函数。

②创建用于访问私有变量的公有（特权）方法？

③特权方法（privileged method）：有权访问私有变量和私有函数的公有方法。

④有两种在对象上创建特权方法的方式：构造函数模式（this+闭包）/原型模式（全局变量=构造函数+原型）

⑤能够在构造函数中定义特权方法，是因为特权方法作为闭包有权访问构造函数中定义的所有变量和函数。

⑥在构造函数中定义特权方法存在一个缺点，你必须使用构造函数模式来达到这个目的。而构造函数模式的特点是针对每个实例都会创建同样一组新方法，但可以使用静态私有变量实现特权方法从而避免这个问题。

⑦初始化未经声明的变量（没有var），总是会创建一个全局变量。但是严格模式下，给未经声明的变量赋值会导致错误。

⑧在私有作用域中定义私有变量或函数，创建特权方法（构造函数+原型）&&构造函数中定义特权方法的主要区别：前者的私有变量和函数是由实例所共享的。

⑨多查找作用域链中的一个层次，就会在一定程度上影响查找速度。而这正是使用闭包和私有变量的一个明显的不足之处。

7.私有变量—-模块模式

//模块模式：为单例创建私有变量和特权方法
var singleton=function(){
//私有变量和私有函数
var privateVariable=10;
function privateFunction(){
return false;
}
//特权/公有方法和属性---对象字面量表示法
return{
publicProperty:true,
publicMethod:function(){
privateVariable++;
return privateFunction();
}
};
}();

①JS是以对象字面量的方式来创建单例对象的。

②模块模式使用了一个返回对象的匿名函数。

③用途：对单例进行某些初始化，同时又需要维护其私有变量时非常有用。

④如果必须创建一个对象并以某些数据对其进行初始化，同时还要公开一些能够访问这些私有数据的方法，那么可以使用模块模式。

var application=function(){
var components=new Array();
components.push(new BaseComponent());
return{
getComponentCount:function(){
return components.length;
},
registerComponent:function(component){
if(typeof component=='object'){
components.push(component);
}
}
};
}();

8.私有变量—-增强的模块模式

①增强的模块模式适合那些单例必须是某种类型的实例，同时还必须添加某些属性和方法对其加以增强。

var singleton=function(){
//私有变量和私有函数
var privateVariable=10;
function privateFunction(){
return false;
}
//创建对象
var object=new CustomType();
object.publicProperty=true;
object.publicMethod=function(){
privateVariable++;
return privateFunction();
};
//返回这个对象
return object;
}();

//如果前面模块模式例子中的application对象必须是BaseComponent的实例
var application=function(){
//私有变量和私有函数
var components=new Array();
//初始化
components.push(new BaseComponent());
//创建application的一个局部副本
var app=new BaseComponent();
//公共接口
app.getComponentCount=function(){
return components.length;
};
app.registerComponent=function(component){
if(typeof component=='object'){
components.push(component);
}
};
//返回这个副本
return app;
}();

9.函数表达式的特点

①函数表达式不同于函数声明。函数声明要求有名字，但函数表达式不需要。没有名字的函数表达式也叫作匿名函数（拉姆达）。

②递归函数可以使用arguments.callee来递归地调用自身（但在严格模式下失效），不要选择使用函数名—-函数名可以会发生变化。

function factorial(i){
if(i<=1){
return 1;
}else{
return i*arguments.callee(i-1);
}
}
factorial(5);//120

var factorial=(function f(i){
'use strict'
if(i<=1){
return 1;
}else{
return i*f(i-1);
}
});
factorial(6);//720

10.当在函数内部定义了其他函数时，就形成了闭包。闭包有权访问包含函数内部的所有变量，原理如下：

①在后台执行环境中，闭包的作用域链包含着它自己的作用域、包含函数的作用域和全局作用域。

②通常，函数的作用域及其所有变量都会在函数执行结束后被销毁。

③但是，当函数返回一个闭包时，这个函数的作用域将会一直在内存中保存，直至闭包不存在为止。

11.使用闭包可以在JS中模仿块级作用域

①即使JS中没有正式的私有对象属性的概念，但可以使用闭包来实现公有（特权）方法，而公有方法可以访问在包含作用域中定义的变量（私有变量）。

②有权访问私有变量的公有方法叫做特权方法。

③可以使用构造函数模式、原型模式来实现自定义类型的特权方法，也可以使用模块模式、增强的模块模式来实现单例的特权方法。

④创建闭包需要维护额外的作用域，所以过度使用闭包会占用大量内存。

12.ECMAScript是JavaScript的核心，但如果要在Web中使用JavaScript，那么BOM(Browser Object Model)无疑是真正的核心。

①BOM的核心对象是window，它表示浏览器的一个实例。

②在浏览器中，window对象有双重角色，它既是通过JavaScript访问浏览器窗口的一个接口，又是ECMAScript规定的Global对象。

③因为window对象同时扮演着ECMAScript中Global对象的角色，因此所有在全局作用域中声明的变量、函数都会成为window对象的属性和方法。

④全局变量和window对象的属性还有一点小的差别：全局变量不能通过delete操作符删除，而直接在window对象上定义的属性可以。—-因为使用var语句添加的window属性有一个名为[[configurable]]的特性，这个特性的值默认为false，因为这样定义的属性不能通过delete操作符删除。

var age=21;
window.color='orange';
delete window.age;//false
delete age;//false
delete window.color;//true
window.color;//undefined

⑤IE8及更早版本在遇到使用delete删除window属性的语句时，不管该属性最初是如何创建的，都会抛出错误，以示警告，IE9及更高版本不会抛出错误。

⑥尝试访问未声明的变量会抛出错误，但是通过查询window对象，可以知道某个可能未声明的变量是否存在。

var newValue=oldValue;//Uncaught ReferenceError:oldValue is not defined
var newValue=window.oldValue;//undefined

13.窗口关系与框架（frameset）

①在使用框架的情况下，浏览器中会存在多个Global对象。在每个框架中定义的全局变量会自动成为框架中window对象的属性。由于每个window对象都包含原生类型的构造函数，因此每个框架都有一套自己的构造函数，这些构造函数一一对应，但并不相等。

14.窗口位置

①需要注意的是，这两个方法（moveTo(),moveBy()）可能会被浏览器禁用，而且，在Opera和IE7（及更高版本）中默认就是禁用的。另外，这两个方法都不适用于框架，只能对最外层的window对象使用。

//将窗口移动在屏幕左上角
window.moveTo(0,0);
//将窗口向下移动100像素
window.moveBy(0,100);
//将窗口移动至(200,300)
window.moveTo(200,300);
//将窗口向左移动50像素
window.moveBy(-50,0);

15.窗口大小

①在IE9+、Safari和Firefox中，outerWidth和outerHeight返回浏览器窗口本身的尺寸（无论是从最外层的window对象还是从某个框架访问）

②在Opera中，outerWidth和outerHeight表示页面视图容器（Opera中单个标签页对应的浏览器窗口）的大小。而innerWidth和innerHeight表示该容器中页面视图区的大小（减去边框宽度）。

③在Chrome中，outerWidth、outerHeight与innerWidth、innerHeight返回相同的值，即视口（viewport）大小而非浏览器窗口大小。

④对于更早版本的浏览器，还可通过DOM提供页面可见区域的相关信息：

IE,Safari,Firefox,Opera,Chrome,IE6的标准模式：document.documentElement.clientWidth/document.documentElement.clientHeight

IE6的混杂模式：document.body.clientWidth/document.body.clientHeight

var pageWidth=window.innerWidth;
var pageHeight=window.innerHeight;
//检查pageWidth中保存的是不是一个数值
if(typeof pageWidth!='number'){
//确定页面是否处于标准模式
if(document.compatMode=='CSS1Compat'){
pageWidth=document.documentElement.clientWidth;
pageHeight=document.documentElement.clientHeight;
}else{
pageWidth=document.body.clientWidth;
pageHeight=document.body.clientHeight;
}
}

⑤对于移动设备，window.innerWidth和window.innerHeight保存着可见视口，也就是屏幕上可见页面区域的大小。移动IE浏览器不支持这些属性，但通过document.documentElement.clientWidth和document.documentElement.clientHeight提供相关的信息。随着页面的缩放，这些值也会相应变化。

⑥移动Web开发—-推荐文章：http://t.cn/zOZs0Tz

⑦resizeTo()和resizeBy()方法可以调整浏览器窗口的大小。这两个方法与移动窗口位置的方法类似，也有可能被浏览器禁用，而且，在Opera和IE7+中默认就是禁用的。另外，这两个方法同样不适用于框架，而只能对最外层window对象使用。

//resizeTo()接受浏览器窗口的新宽度和新高度。
//resizeBy()接受新窗口与原窗口的宽度和高度之差。
//调整到100*100
window.resizeTo(100,100);
//调整到200*150
window.resizeBy(100,50);
//调整到300*300
window.resizeTo(300,300);