JS小技巧總結(jié)

作用域

我們知道,Javascript的變量采用鏈?zhǔn)阶饔糜颉Wx取變量的時候养筒,先在當(dāng)前作用域?qū)ふ以撟兞吭罚绻也坏剑颓巴弦粚拥淖饔糜驅(qū)ふ以撟兞吭畏唷_@樣的設(shè)計挤悉,使得讀取局部變量比讀取全局變量快得多。

    讀取全局變量:
  var a = 0;
  function x(){
    a += 1;
  }
  讀取局部變量:
  function y(){
    var a = 0;
    a += 1;
  }

第二段代碼讀取變量a的時候兵多,不用前往上一層作用域尖啡,所以要比第一段代碼快五六倍。

prototype模式:
  var X = function(name){ this.name = name; }
  X.prototype.get_name = function() { return this.name; };

closure模式:
  var Y = function(name) {
    var y = { name: name };
    return { 'get_name': function() { return y.name; } };
  };

同樣是get_name()方法剩膘,closure模式更快衅斩。

iframe嵌套

"window.location.href"、"location.href"是本頁面跳轉(zhuǎn)
"parent.location.href"是上一層頁面跳轉(zhuǎn)
"top.location.href"是最外層的頁面跳轉(zhuǎn)

舉例說明:

如果A,B,C,D頁面怠褐,引入iframe進(jìn)行頁面嵌套畏梆,
D是C的iframe,C是B的iframe奈懒,B是A的iframe奠涌,
如果D中js這樣寫
"window.location.href"、"location.href":D頁面跳轉(zhuǎn)
"parent.location.href":C頁面跳轉(zhuǎn)
"top.location.href":A頁面跳轉(zhuǎn)
現(xiàn)在終于明白了連接的時候target的用法了:
_blank:重新打開一個窗口
_parent:父窗口執(zhí)行重定向
_self:自身頁面重定向
_top:第一個父窗口重定向

綜上所述可知:parent.window:父窗口對象 top.window:第一個父窗口的對象磷杏。

對象

對象屬性描述符的類型分為兩種:數(shù)據(jù)屬性和訪問器屬性溜畅。

數(shù)據(jù)屬性包含一個數(shù)據(jù)值的位置,在這個位置可以讀取和寫入值极祸。數(shù)據(jù)屬性有4個特性慈格。

1、configurable(可配置性)
  可配置性決定是否可以使用delete刪除屬性遥金,以及是否可以修改屬性描述符的特性浴捆,默認(rèn)值為true。
2稿械、enumerable(可枚舉性)
  可枚舉性決定屬性是否出現(xiàn)在對象的屬性枚舉中选泻,比如是否可以通過for-in循環(huán)返回該屬性,默認(rèn)值為true美莫。
3页眯、writable(可寫性)
  可寫性決定是否可以修改屬性的值,默認(rèn)值為true厢呵。
4餐茵、value屬性值)
屬性值包含這個屬性的數(shù)據(jù)值,讀取屬性值的時候述吸,從這個位置讀忿族;寫入屬性值的時候锣笨,把新值保存在這個位置。默認(rèn)值為undefined道批。

對象屬性是名字错英、值和一組屬性描述符構(gòu)成的。而屬性值可以用一個或兩個方法替代隆豹,這兩個方法就是getter和setter椭岩。而這種屬性類型叫訪問器屬性。
1璃赡、getter
  在讀取屬性時調(diào)用的函數(shù)判哥。默認(rèn)值為undefined。
2碉考、setter
在寫入屬性時調(diào)用的函數(shù)塌计。默認(rèn)值為undefined。

和數(shù)據(jù)屬性不同侯谁,訪問器屬性不具有可寫性(writable)锌仅。如果屬性同時具有g(shù)etter和setter方法废赞,那么它是一個讀/寫屬性碑幅。如果它只有g(shù)etter方法,那么它是一個只讀屬性桐臊。如果它只有setter方法惨撇,那么它是一個只寫屬性伊脓。讀取只寫屬性總是返回undefined。

可枚舉性(enumerable)
可枚舉性決定屬性是否出現(xiàn)在對象的屬性枚舉中魁衙,具體來說报腔,for-in循環(huán)Object.keys()纺棺、JSON.stringify()是否會取到該屬性。
用戶定義的普通屬性默認(rèn)是可枚舉的邪狞,而原生繼承的屬性默認(rèn)是不可枚舉的祷蝌。

對象拷貝

對象拷貝分為淺拷貝(shallow)和深拷貝(deep)兩種。淺拷貝只復(fù)制一層對象的屬性帆卓,并不會進(jìn)行遞歸復(fù)制巨朦。深拷貝不僅將原對象的各個屬性逐個復(fù)制出去,而且將原對象各個屬性所包含的對象也依次采用深拷貝的方法遞歸復(fù)制到新對象上剑令,拷貝了所有層級糊啡。

淺拷貝

【方法一】簡單拷貝
??新建一個空對象,使用for-in循環(huán)吁津,將對象的所有屬性復(fù)制到新建的空對象中棚蓄。

function simpleClone1(obj){
    if(typeof obj != 'object'){
        return false;
    }
    var cloneObj = {};
    for(var i in obj){
        cloneObj[i] = obj[i];
    }
    return cloneObj;
}

var obj1={a:1,b:2,c:[1,2,3]};
var obj2=simpleClone1(obj1);
console.log(obj1.c); //[1,2,3]
console.log(obj2.c); //[1,2,3]
obj2.c.push(4);
console.log(obj2.c); //[1,2,3,4]
console.log(obj1.c); //[1,2,3,4]

【方法二】Object.assign()
Object.assign()方法實行的是淺拷貝堕扶,而不是深拷貝。Object.assign()方法可以接受任意數(shù)量的源對象梭依,并按指定的順序?qū)傩詮?fù)制到接收對象中稍算。在對象合并的過程中,Object.assign()拷貝的屬性是有限制的役拴,只拷貝源對象的自身屬性(不拷貝繼承屬性)糊探,也不拷貝不可枚舉的屬性(enumerable: false。

var obj1 = {a: {b: 1}};
var obj2 = Object.assign({}, obj1);

obj1.a.b = 2;
obj2.a.b // 2

【方法三】使用屬性描述符
??通過對象的原型河闰,建立一個空的實例對象科平。通過forEach語句,獲取到對象的所有屬性的屬性描述符姜性,將其作為參數(shù)瞪慧,設(shè)置到新建的空實例對象中。本質(zhì)上跟方法一是一回事污抬,這種方法更為靈活汞贸,可以為對象屬性設(shè)置需要的描述符。

function simpleClone2(orig){
    var copy = Object.create(Object.getPrototypeOf(orig));
    Object.getOwnPropertyNames(orig).forEach(function(propKey){
        var desc = Object.getOwnPropertyDescriptor(orig,propKey);
        Object.defineProperty(copy,propKey,desc);
    });
    return copy;
}

var obj1={a:1,b:2,c:[1,2,3]};
var obj2=simpleClone1(obj1);
console.log(obj1.c); //[1,2,3]
console.log(obj2.c); //[1,2,3]
obj2.c.push(4);
console.log(obj2.c); //[1,2,3,4]
console.log(obj1.c); //[1,2,3,4]

【方法四】使用jquery的extend()方法印机,還可以用lodash等js庫矢腻。

var obj1={a:1,b:2,c:[1,2,3]};
var obj2=$.extend({},obj1);
console.log(obj1.c); //[1,2,3]
console.log(obj2.c); //[1,2,3]
obj2.c.push(4);
console.log(obj2.c); //[1,2,3,4]
console.log(obj1.c); //[1,2,3,4]
深拷貝

【方法一】遍歷復(fù)制
??復(fù)制對象的屬性時,對其進(jìn)行判斷射赛,如果是數(shù)組或?qū)ο蠖喔蹋瑒t再次調(diào)用拷貝函數(shù);否則楣责,直接復(fù)制對象屬性竣灌。

function deepClone1(obj,cloneObj){
    if(typeof obj != 'object'){
        return false;
    }
    var cloneObj = cloneObj || {};
    for(var i in obj){
        if(typeof obj[i] === 'object'){
            cloneObj[i] = (obj[i] instanceof Array) ? [] : {};
            arguments.callee(obj[i],cloneObj[i]); // 遞歸
        }else{
            cloneObj[i] = obj[i]; 
        }  
    }
    return cloneObj;
}

var obj1={a:1,b:2,c:[1,2,3]};
var obj2=deepClone1(obj1);
console.log(obj1.c); //[1,2,3]
console.log(obj2.c); //[1,2,3]
obj2.c.push(4);
console.log(obj2.c); //[1,2,3,4]
console.log(obj1.c); //[1,2,3]

【方法二】json
??用JSON全局對象的parse和stringify方法來實現(xiàn)深復(fù)制算是一個簡單討巧的方法,它能正確處理的對象只有Number秆麸、String初嘹、Boolean、Array沮趣、扁平對象屯烦,即那些能夠被json直接表示的數(shù)據(jù)結(jié)構(gòu)。

function jsonClone(obj){
    return JSON.parse(JSON.stringify(obj));
}

var obj1={a:1,b:2,c:[1,2,3]};
var obj2=jsonClone(obj1);
console.log(obj1.c); //[1,2,3]
console.log(obj2.c); //[1,2,3]
obj2.c.push(4);
console.log(obj2.c); //[1,2,3,4]
console.log(obj1.c); //[1,2,3]

【方法三】使用jquery的extend()方法

var obj1={a:1,b:2,c:[1,2,3]};
var obj2=$.extend(true,{},obj1);
console.log(obj1.c); //[1,2,3]
console.log(obj2.c); //[1,2,3]
obj2.c.push(4);
console.log(obj2.c); //[1,2,3,4]
console.log(obj1.c); //[1,2,3]
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末房铭,一起剝皮案震驚了整個濱河市驻龟,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌缸匪,老刑警劉巖翁狐,帶你破解...
    沈念sama閱讀 212,718評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異凌蔬,居然都是意外死亡露懒,警方通過查閱死者的電腦和手機(jī)闯冷,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,683評論 3 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來隐锭,“玉大人窃躲,你說我怎么就攤上這事∏账” “怎么了蒂窒?”我有些...
    開封第一講書人閱讀 158,207評論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長荞怒。 經(jīng)常有香客問我洒琢,道長,這世上最難降的妖魔是什么褐桌? 我笑而不...
    開封第一講書人閱讀 56,755評論 1 284
  • 正文 為了忘掉前任衰抑,我火速辦了婚禮,結(jié)果婚禮上荧嵌,老公的妹妹穿的比我還像新娘呛踊。我一直安慰自己,他們只是感情好啦撮,可當(dāng)我...
    茶點故事閱讀 65,862評論 6 386
  • 文/花漫 我一把揭開白布谭网。 她就那樣靜靜地躺著,像睡著了一般赃春。 火紅的嫁衣襯著肌膚如雪愉择。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 50,050評論 1 291
  • 那天织中,我揣著相機(jī)與錄音锥涕,去河邊找鬼。 笑死狭吼,一個胖子當(dāng)著我的面吹牛层坠,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播刁笙,決...
    沈念sama閱讀 39,136評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼破花,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了采盒?” 一聲冷哼從身側(cè)響起旧乞,我...
    開封第一講書人閱讀 37,882評論 0 268
  • 序言:老撾萬榮一對情侶失蹤蔚润,失蹤者是張志新(化名)和其女友劉穎磅氨,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體嫡纠,經(jīng)...
    沈念sama閱讀 44,330評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡烦租,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,651評論 2 327
  • 正文 我和宋清朗相戀三年延赌,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片叉橱。...
    茶點故事閱讀 38,789評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡挫以,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出窃祝,到底是詐尸還是另有隱情掐松,我是刑警寧澤,帶...
    沈念sama閱讀 34,477評論 4 333
  • 正文 年R本政府宣布粪小,位于F島的核電站大磺,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏探膊。R本人自食惡果不足惜杠愧,卻給世界環(huán)境...
    茶點故事閱讀 40,135評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望逞壁。 院中可真熱鬧流济,春花似錦、人聲如沸腌闯。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,864評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽绑嘹。三九已至稽荧,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間工腋,已是汗流浹背姨丈。 一陣腳步聲響...
    開封第一講書人閱讀 32,099評論 1 267
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留擅腰,地道東北人蟋恬。 一個月前我還...
    沈念sama閱讀 46,598評論 2 362
  • 正文 我出身青樓,卻偏偏與公主長得像趁冈,于是被迫代替她去往敵國和親歼争。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,697評論 2 351