隨筆以防止忘記
閉包
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>閉包</h1>
<hr />
<script type="text/javascript">
// var name="我是外部 變量"
// var obj={
// name:'我是內(nèi)部變量',
// getName:function(){
// return function(){
// return this.name
// }
// }
// }
// alert(obj.getName()())
//函數(shù)中的this一般是指向window中的變量
// 閉包 事例 二
// var name="我是外部 變量"
// var obj={
// name:'我是內(nèi)部變量',
// getName:function(){
// var that=this
// return function(){
// return that.name
// }
// }
// }
// alert(obj.getName()())
// 將 this
//閉包 理解 三
function test1(e){
var n=999
add=function(){n+=1}
function test2(){
alert(n)
}
return test2
}
var resout=test1()
resout()
add()
resout()
//f1是f2的父函數(shù)趟畏，而f2被賦給了一個(gè)全局變量偿洁，這導(dǎo)致f2始終在內(nèi)存中，
//而f2的存在依賴(lài)于f1，因此f1也始終在內(nèi)存中离赫，不會(huì)在調(diào)用結(jié)束后，被垃圾回收機(jī)制（garbage collection）回收杠巡。
//這段代碼中另一個(gè)值得注意的地方床估，就是"nAdd=function(){n+=1}"這一行弯囊，
//首先在nAdd前面沒(méi)有使用var關(guān)鍵字，因此nAdd是一個(gè)全局變量胶果，而不是局部變量匾嘱。其次，nAdd的值是一個(gè)匿名函數(shù)（anonymous function）
//早抠，而這個(gè)匿名函數(shù)本身也是一個(gè)閉包霎烙，所以nAdd相當(dāng)于是一個(gè)setter，可以在函數(shù)外部對(duì)函數(shù)內(nèi)部的局部變量進(jìn)行操作蕊连。
</script>
</body>
</html>
移動(dòng)端適配鏈接(淘寶彈性布局方案https://www.cnblogs.com/lyzg/p/5058356.html)
獲取網(wǎng)頁(yè) 寬高 元素定位
因此悬垃，document元素的clientHeight和clientWidth屬性，就代表了網(wǎng)頁(yè)的大小甘苍。
function getViewport(){
if (document.compatMode == "BackCompat"){
return {
width: document.body.clientWidth,
height: document.body.clientHeight
}
} else {
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight
}
}
}
//上面的getViewport函數(shù)就可以返回瀏覽器窗口的高和寬尝蠕。使用的時(shí)候，有三個(gè)地方需要注意：
//1）這個(gè)函數(shù)必須在頁(yè)面加載完成后才能運(yùn)行载庭，否則document對(duì)象還沒(méi)生成看彼，瀏覽器會(huì)報(bào)錯(cuò)。
//2）大多數(shù)情況下昧捷，都是document.documentElement.clientWidth返回正確值闲昭。但是罐寨，在IE6的quirks模式中靡挥，document.body.clientWidth返回正確的值，因此函數(shù)中加入了對(duì)文檔模式的判斷鸯绿。
//3）clientWidth和clientHeight都是只讀屬性跋破，不能對(duì)它們賦值。
//三瓶蝴、獲取網(wǎng)頁(yè)大小的另一種方法
//網(wǎng)頁(yè)上的每個(gè)元素還有scrollHeight和scrollWidth屬性毒返，指包含滾動(dòng)條在內(nèi)的該元素的視覺(jué)面積。
//那么舷手，document對(duì)象的scrollHeight和scrollWidth屬性就是網(wǎng)頁(yè)的大小拧簸，意思就是滾動(dòng)條滾過(guò)的所有長(zhǎng)度和寬度。
//仿照getViewport()函數(shù)男窟，可以寫(xiě)出getPagearea()函數(shù)盆赤。
function getPagearea(){
if (document.compatMode == "BackCompat"){
return {
width: document.body.scrollWidth,
height: document.body.scrollHeight
}
} else {
return {
width: document.documentElement.scrollWidth,
height: document.documentElement.scrollHeight
}
}
}
//但是，這個(gè)函數(shù)有一個(gè)問(wèn)題歉眷。如果網(wǎng)頁(yè)內(nèi)容能夠在瀏覽器窗口中全部顯示牺六，不出現(xiàn)滾動(dòng)條，那么網(wǎng)頁(yè)的clientWidth和scrollWidth應(yīng)該相等汗捡。但是實(shí)際上淑际，不同瀏覽器有不同的處理，這兩個(gè)值未必相等。所以春缕，我們需要取它們之中較大的那個(gè)值盗胀，因此要對(duì)getPagearea()函數(shù)進(jìn)行改寫(xiě)。
function getPagearea(){
if (document.compatMode == "BackCompat"){
return {
width: Math.max(document.body.scrollWidth,
document.body.clientWidth),
height: Math.max(document.body.scrollHeight,
document.body.clientHeight)
}
} else {
return {
width: Math.max(document.documentElement.scrollWidth,
document.documentElement.clientWidth),
height: Math.max(document.documentElement.scrollHeight,
document.documentElement.clientHeight)
}
}
}
獲取元素位置
引用 getBoundingClientRect() 方法
window.onload=function(){
var h1=document.getElementsByClassName('h2')[0]
// var X= h1.getBoundingClientRect().left;
//
// var Y =h1.getBoundingClientRect().top;
console.log(h1.getBoundingClientRect())
// alert(X)
//它返回一個(gè)對(duì)象锄贼，其中包含了left读整、right、top咱娶、bottom四個(gè)屬性米间，分別對(duì)應(yīng)了該元素的左上角和右下角相對(duì)于瀏覽器窗口（viewport）左上角的距離。
//
//所以膘侮，網(wǎng)頁(yè)元素的相對(duì)位置就是
//
// var X= this.getBoundingClientRect().left;
//
// var Y =this.getBoundingClientRect().top;
//
//再加上滾動(dòng)距離屈糊，就可以得到絕對(duì)位置
//
// var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;
//
// var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;
}
javascript this 指向問(wèn)題 http://www.ruanyifeng.com/blog/2010/04/using_this_keyword_in_javascript.html
this是 JavaScript 語(yǔ)言的一個(gè)關(guān)鍵字。
它是函數(shù)運(yùn)行時(shí)琼了，在函數(shù)體內(nèi)部自動(dòng)生成的一個(gè)對(duì)象逻锐，只能在函數(shù)體內(nèi)部使用。
function test() {
this.x = 1;
}
上面代碼中雕薪，函數(shù)test運(yùn)行時(shí)昧诱，內(nèi)部會(huì)自動(dòng)有一個(gè)this對(duì)象可以使用。
那么所袁，this的值是什么呢盏档？
函數(shù)的不同使用場(chǎng)合，this有不同的值燥爷◎谀叮總的來(lái)說(shuō)，this就是函數(shù)運(yùn)行時(shí)所在的環(huán)境對(duì)象前翎。下面分四種情況稚配，詳細(xì)討論this的用法。
情況一：純粹的函數(shù)調(diào)用
這是函數(shù)的最通常用法港华，屬于全局性調(diào)用道川，因此this就代表全局對(duì)象。請(qǐng)看下面這段代碼立宜，它的運(yùn)行結(jié)果是1冒萄。
var x = 1;
function test() {
console.log(this.x);
}
test(); // 1
情況二：作為對(duì)象方法的調(diào)用
函數(shù)還可以作為某個(gè)對(duì)象的方法調(diào)用，這時(shí)this就指這個(gè)上級(jí)對(duì)象赘理。
function test() {
console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
obj.m(); // 1
情況三 作為構(gòu)造函數(shù)調(diào)用
所謂構(gòu)造函數(shù)宦言，就是通過(guò)這個(gè)函數(shù)，可以生成一個(gè)新對(duì)象商模。這時(shí)奠旺，this就指這個(gè)新對(duì)象蜘澜。
function test() {
this.x = 1;
}
var obj = new test();
obj.x // 1
運(yùn)行結(jié)果為1。為了表明這時(shí)this不是全局對(duì)象响疚，我們對(duì)代碼做一些改變：
var x = 2;
function test() {
this.x = 1;
}
var obj = new test();
x // 2
運(yùn)行結(jié)果為2鄙信，表明全局變量x的值根本沒(méi)變。
情況四 apply 調(diào)用
apply()是函數(shù)的一個(gè)方法忿晕，作用是改變函數(shù)的調(diào)用對(duì)象装诡。它的第一個(gè)參數(shù)就表示改變后的調(diào)用這個(gè)函數(shù)的對(duì)象。因此践盼，這時(shí)this指的就是這第一個(gè)參數(shù)鸦采。
var x = 0;
function test() {
console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply() // 0
apply()的參數(shù)為空時(shí)，默認(rèn)調(diào)用全局對(duì)象咕幻。因此渔伯，這時(shí)的運(yùn)行結(jié)果為0，證明this指的是全局對(duì)象肄程。
如果把最后一行代碼修改為
obj.m.apply(obj); //1
運(yùn)行結(jié)果就變成了1锣吼，證明了這時(shí)this代表的是對(duì)象obj。
