js筆記

js 基礎

  1. var val = (1,2,4)
    val //4
  2. var obj = {}
    Object.defineProperty(obj, 'x'{
    configurable:false,
    value:1
    })
    delete obj.x //false
    obj.x //1

3.in

window.x = "1"
"x" in window //true
  1. try {
    throw "test";
    } catch (ex) {
    console.log(ex); // test
    } finally {
    console.log('finally');
    }
  2. 'use strict'
    嚴格模式是一種特殊的執(zhí)行模式,
    它修復了部分語言上的不足,提供更強的錯誤檢查家乘,并增強安全性耕魄。
    不允許用with所有變量必須聲明, 賦值給為聲明的變量報錯容握,而不是隱式創(chuàng)建全局變量芋膘。
    eval中的代碼不能創(chuàng)建eval所在作用域下的變量旦袋、函數兜喻。而是為eval單獨創(chuàng)建一個作用域梦染,并在eval返回時丟棄。
    函數中得特殊對象arguments是靜態(tài)副本朴皆,而不像非嚴格模式那樣,修改arguments或修改參數變量會相互影響泛粹。
    刪除configurable=false的屬性時報錯遂铡,而不是忽略
    禁止八進制字面量,如010 (八進制的8)
    eval, arguments變?yōu)殛P鍵字晶姊,不可作為變量名扒接、函數名等
    一般函數調用時(不是對象的方法調用,也不使用apply/call/bind等修改this)this指向null们衙,而不是全局對象钾怔。
    若使用apply/call,當傳入null或undefined時蒙挑,this將指向null或undefined宗侦,而不是全局對象。
    試圖修改不可寫屬性(writable=false)忆蚀,在不可擴展的對象上添加屬性時報TypeError矾利,而不是忽略。
    arguments.caller, arguments.callee被禁用

prototype //直接聲明的函數 擁有prototype這個屬性馋袜,而new 構造出來的函數不存在prototype這個屬性象男旗。

function foo(){}                                function foo2(){}
undefined                                       undefined
foo.x = 1                                       foo2.prototype.x = 1
1                                               1
foo.y=2                                         foo2.prototype.y = 1
2                             VS                1
var test = new foo()                            var test2= new foo2()
undefined                                       undefined
test2                                           test2
foo {}                                          foo2 {x: 1, y: 1}
test.x                                          test2.x
undefined                                       1
  1. 對象創(chuàng)建

    var a ={} var b = Object.create({x:1})
    undefined undefined
    a.x =1 b.x
    1 1
    a.hasOwnProperty('x') b.hasOwnProperty('x')
    true false

  2. 對象屬性刪除

    var a = {}
    a.x = 1
    delete a.x`

    var globalVal = 1;
    delete globalVal; // false

    (function() {
    var localVal = 1;
    return delete localVal;
    }()); // false

    ohNo = 1;
    window.ohNo; // 1
    delete ohNo; // true

  3. 對象屬性檢測
    in hasOwnProperty propertyIsEnumerable

  4. 枚舉類型

    var o = {x : 1, y : 2, z : 3};
    for (var key in o) {
    console.log(key); // x, y, z
    }

  5. getter setter
    var man = {
    name : 'Bosn',
    weibo : '@Bosn',
    get age() {
    return new Date().getFullYear() - 1988;
    },
    set age(val) {
    console.log('Age can't be set to ' + val);
    }
    }
    console.log(man.age); // 27
    man.age = 100; // Age can't be set to 100
    console.log(man.age); // still 27
    var man = {
    weibo : '@Bosn',
    $age : null,
    get age() {
    if (this.$age == undefined) {
    return new Date().getFullYear() - 1988;
    } else {
    return this.$age;
    }
    },
    set age(val) {
    val = +val;
    if (!isNaN(val) && val > 0 && val < 150) {
    this.$age = +val;
    } else {
    throw new Error('Incorrect val = ' + val);
    }
    }
    }

對象屬性及的權限設置

       var person = {};
       Object.defineProperty(person, 'name', {
       configurable : false, //配置
        writable : false,   //寫
       enumerable : true, //枚舉
       value : "Bosn Ma" //值
       });
       person.name; // Bosn Ma
   person.name = 1;
   person.name; // still Bosn Ma
   delete person.name; // false
        Object.defineProperties(person, {
    title : {value : 'fe', enumerable : true},
    corp : {value : 'BABA', enumerable : true},
    salary : {value : 50000, enumerable : true, writable : true}
});
Object.getOwnPropertyDescriptor(person, 'salary');
// Object {value: 50000, writable: true, enumerable: true, configurable: false}
Object.getOwnPropertyDescriptor(person, 'corp');
// Object {value: "BABA", writable: false, enumerable: true, configurable: false}`
  1. call apply
    1、方法定義
    call方法:
    語法:call([thisObj[,arg1[, arg2[,[,.argN]]]]])
    定義:調用一個對象的一個方法欣鳖,以另一個對象替換當前對象察皇。
    說明:

    call 方法可以用來代替另一個對象調用一個方法。call 方法可將一個函數的對象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對象泽台。
    如果沒有提供 thisObj 參數什荣,那么 Global 對象被用作 thisObj矾缓。

    apply方法:
    語法:apply([thisObj[,argArray]])
    定義:應用某一對象的一個方法,用另一個對象替換當前對象溃睹。
    說明:
    如果 argArray 不是一個有效的數組或者不是 arguments 對象而账,那么將導致一個 TypeError。
    如果沒有提供 argArray 和 thisObj 任何一個參數因篇,那么 Global 對象將被用作 thisObj泞辐, 并且無法被傳遞任何參數.

  2. function bind
    this.x = 9
    9
    var module = {
    x:81,
    getX: function(){
    return this.x
    }
    }
    module.getX()
    81
    var getX = module.getX
    getX()
    9
    var boundGetX = getX.bind(module)
    boundGetX()
    81
    function add(a,b,c){
    return a + b + c
    }
    var func =add.bind(undefined, 100)
    func(1,2)
    103
    var func2 =func.bind(undefined, 200)
    func2(100)
    400
    function getConfig(color, size, otherOptions){
    console.log(color, size, otherOptions)
    }
    var defaultConfig = getConfig.bind(null, "#000", "1024 * 768")`
    defaultConfig("123")
    #000 1024 * 768 123
    defaultConfig("456")
    #000 1024 * 768 456

  3. 閉包 //允許一個函數在立即詞法作用域外調用時,仍可以訪問本地變量
    優(yōu)點: //靈活竞滓、 方便
    缺點: //浪費空間咐吼、內存泄露、性能消耗

  4. arguments caller callee
    arguments :
    // 在函數調用時商佑, 會自動在該函數內部生成一個名為 arguments的隱藏對象锯茄。 該對象類似于數組,
    //但又不是數組茶没〖∮模可以使用[]操作符獲取函數調用時傳遞的實參。

    caller :
    //在一個函數調用另一個函數時抓半,被調用函數會自動生成一個caller屬性喂急,指向調用它的函數對象。
    //如果該函數當前未被調用笛求,或并非被其他函數調用廊移,則caller為null。

    callee :
    //當函數被調用時探入,它的arguments.callee對象就會指向自身狡孔,也就是一個對自己的引用。
    //由于arguments在函數被調用時才有效蜂嗽,因此arguments.callee在函數未調用時是不存在的(即null.callee)苗膝,且解引用它會產生異常。
    //

  5. this

    在函數執(zhí)行時徒爹,this 總是指向調用該函數的對象荚醒。要判斷 this 的指向,其實就是判斷 this 所在的函數屬于誰隆嗅。

    在《javaScript語言精粹》這本書中界阁,把 this 出現(xiàn)的場景分為四類,簡單的說就是:

    有對象就指向調用對象
    沒調用對象就指向全局對象
    用new構造就指向新對象
    通過 apply 或 call 或 bind 來改變 this 的所指胖喳。
    1)函數有所屬對象時:指向所屬對象

    函數有所屬對象時泡躯,通常通過 . 表達式調用,這時 this 自然指向所屬對象。比如下面的例子:

    var myObject = {value: 100};
    myObject.getValue = function () {
    console.log(this.value); // 輸出 100

    // 輸出 { value: 100, getValue: [Function] }较剃,
    // 其實就是 myObject 對象本身
    console.log(this);

    return this.value;
    };

    console.log(myObject.getValue()); // => 100
    getValue() 屬于對象 myObject咕别,并由 myOjbect 進行 . 調用,因此 this 指向對象 myObject写穴。

    1. 函數沒有所屬對象:指向全局對象

    var myObject = {value: 100};
    myObject.getValue = function () {
    var foo = function () {
    console.log(this.value) // => undefined
    console.log(this);// 輸出全局對象 global
    };

    foo();

    return this.value;
    };

    console.log(myObject.getValue()); // => 100
    在上述代碼塊中惰拱,foo 函數雖然定義在 getValue 的函數體內,但實際上它既不屬于 getValue 也不屬于 myObject啊送。foo 并沒有被綁定在任何對象上偿短,所以當調用時,它的 this 指針指向了全局對象 global馋没。

    據說這是個設計錯誤昔逗。

    3)構造器中的 this:指向新對象

    js 中,我們通過 new 關鍵詞來調用構造函數篷朵,此時 this 會綁定在該新對象上勾怒。

    var SomeClass = function(){
    this.value = 100;
    }

    var myCreate = new SomeClass();

    console.log(myCreate.value); // 輸出100
    順便說一句,在 js 中声旺,構造函數笔链、普通函數、對象方法腮猖、閉包卡乾,這四者沒有明確界線。界線都在人的心中缚够。

    1. apply 和 call 調用以及 bind 綁定:指向綁定的對象

    apply() 方法接受兩個參數第一個是函數運行的作用域,另外一個是一個參數數組(arguments)鹦赎。

    call() 方法第一個參數的意義與 apply() 方法相同谍椅,只是其他的參數需要一個個列舉出來。

    簡單來說古话,call 的方式更接近我們平時調用函數雏吭,而 apply 需要我們傳遞 Array 形式的數組給它。它們是可以互相轉換的陪踩。

    var myObject = {value: 100};

    var foo = function(){
    console.log(this);
    };

    foo(); // 全局變量 global
    foo.apply(myObject); // { value: 100 }
    foo.call(myObject); // { value: 100 }

    var newFoo = foo.bind(myObject);
    newFoo(); // { value: 100 }

  6. 閉包的一個坑
    閉包這個概念杖们,在函數式編程里很常見,簡單的說肩狂,就是使內部函數可以訪問定義在外部函數中的變量摘完。
    for (var i = 0; i < 5; i++) {
    setTimeout(function () {
    console.log(i);
    }, 5);
    }
    上面這個代碼塊會打印五個 5 出來,而我們預想的結果是打印 1 2 3 4 5傻谁。
    之所以會這樣孝治,是因為 setTimeout 中的 i 是對外層 i 的引用。當 setTimeout 的代碼被解釋的時候,運行時只是記錄了 i 的引用谈飒,而不是值岂座。而當 setTimeout 被觸發(fā)時,五個 setTimeout 中的 i 同時被取值杭措,由于它們都指向了外層的同一個 i费什,而那個 i 的值在迭代完成時為 5,所以打印了五次 5手素。
    為了得到我們預想的結果鸳址,我們可以把 i 賦值成一個局部的變量,從而擺脫外層迭代的影響刑桑。

    for (var i = 0; i < 5; i++) {
    (function (idx) {
    setTimeout(function () {
    console.log(idx);
    }, 5);
    })(i);
    }

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末氯质,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子祠斧,更是在濱河造成了極大的恐慌闻察,老刑警劉巖,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件琢锋,死亡現(xiàn)場離奇詭異辕漂,居然都是意外死亡,警方通過查閱死者的電腦和手機吴超,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進店門钉嘹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人鲸阻,你說我怎么就攤上這事跋涣。” “怎么了鸟悴?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵陈辱,是天一觀的道長。 經常有香客問我细诸,道長沛贪,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任震贵,我火速辦了婚禮利赋,結果婚禮上,老公的妹妹穿的比我還像新娘猩系。我一直安慰自己媚送,他們只是感情好,可當我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布蝙眶。 她就那樣靜靜地躺著季希,像睡著了一般褪那。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上式塌,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天博敬,我揣著相機與錄音,去河邊找鬼峰尝。 笑死偏窝,一個胖子當著我的面吹牛,可吹牛的內容都是我干的武学。 我是一名探鬼主播祭往,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼火窒!你這毒婦竟也來了硼补?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤熏矿,失蹤者是張志新(化名)和其女友劉穎已骇,沒想到半個月后,有當地人在樹林里發(fā)現(xiàn)了一具尸體票编,經...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡褪储,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了慧域。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片鲤竹。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖昔榴,靈堂內的尸體忽然破棺而出辛藻,到底是詐尸還是另有隱情,我是刑警寧澤互订,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布揩尸,位于F島的核電站,受9級特大地震影響屁奏,放射性物質發(fā)生泄漏。R本人自食惡果不足惜错负,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一坟瓢、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧犹撒,春花似錦折联、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽奕坟。三九已至,卻和暖如春清笨,著一層夾襖步出監(jiān)牢的瞬間月杉,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工抠艾, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留苛萎,地道東北人。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓检号,卻偏偏與公主長得像腌歉,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子齐苛,可洞房花燭夜當晚...
    茶點故事閱讀 42,916評論 2 344

推薦閱讀更多精彩內容

  • js簡介 Js是一種基于事件和對象驅動的解釋性翘盖、松散性的語言。 一切皆對象 javascript 布蘭登艾奇 ...
    塔庫納瑪哈哈閱讀 1,195評論 0 2
  • 在JavaScript中凹蜂,一切都是對象馍驯。 使用深度優(yōu)先遍歷,element是一個DOM元素,selectors是一...
    garble閱讀 564評論 0 1
  • 第5章 引用類型(返回首頁) 本章內容 使用對象 創(chuàng)建并操作數組 理解基本的JavaScript類型 使用基本類型...
    大學一百閱讀 3,212評論 0 4
  • 塵埃在陽光中飛舞 陽光在相冊上跳動 相冊在雙膝間安詳 樹蔭打落在幽徑 小窗擋住了陽光 也遮住了老人的心 只由小路載...
    一雙長短不一的筷子閱讀 188評論 0 1
  • 上班路上炊甲,總要騰出幾分鐘的時間泥彤,拐進家附近的公園,沿著公園的小路穿行卿啡,一邊走吟吝,一邊用手機記錄著那些花花草草。 門口...
    曉曉的窩閱讀 480評論 0 0