JavaScript函數和對象

函數

定義函數

  • 創建一個函數需要用到關鍵字function,后面是一個函數名
  • 為函數提供0或多個參數,使用參數向函數傳值
  • 可以返回一個值作為調用這個函數的結果,這是可選的
  • 編寫函數體,包含完成函數工作的所有代碼

JavaScript有兩種方式定義函數,第一種方式如下:

function add(x,y) {
    return x + y;
}

注意,函數體內部的語句在執行時,一旦執行到return時,函數就執行完畢,并將結果返回。因此,函數內部通過運算可以實現非常復雜的邏輯。如果沒有return語句,函數執行完畢后也會返回結果,只是結果為undefined。

由于JavaScript函數也是一個對象,上述定義的add()函數實際上是一個函數對象,而函數名add可以視為指向該函數的變量。
因此,第二種定義函數的方式如下:

var add = function (x,y) {
    return x + y;
};

這種方式下,function{....}是一個匿名函數,它沒有函數名,但是這個匿名函數賦值給了變量add,所有通過變量add就可以調用該函數。

上述兩種定義是等價的,注意第二種方式按照完整語法需要在末尾加一個;號,表示賦值語句結束。

函數聲明可以出現在腳本中的任何位置。使用多個外部JavaScript文件時有一點要記住,如果不同文件中有兩個同名的函數,將使用瀏覽器最后看到的那個函數。

調用函數

調用函數時,按順序傳入參數即可:

var sum = add(1,2); //返回3

由于JavaScript允許任意參數而不影響調用,因此傳入的參數比定義的參數多也沒有問題,雖然函數內部并不需要這些參數:

var sum = add(1,2,3); //返回3

傳入的參數比定義的少也沒有問題:

var sum = add(); //返回NaN

此時,add的參數將受到undefined,計算結果為NaN

變量作用域

全局變量

如果一個變量在函數外聲明,這個變量就是全局變量。可以在JavaScript代碼中的任何地方訪問。

var x = 3; //全局變量
var y = 4;
var add = function (x,y) {

    var z = 4; //局部變量

    return x + y + z;
}

局部變量

如果一個變量在函數內聲明,這個變量就是局部變量。只能在函數體內部使用。

var x = 3; //全局變量
var y = 4;
var add = function (x,y) {

    var z = 4; //局部變量

    return x + y + z;
}

變量提升

JavaScript函數定義有個特點,它會先掃描整個函數體的語句,把所有聲明的變量提升到函數頂部

'use strict'

function foo() {
    var x = "hello," + y;
    alert(x);
    y = "world";
}

foo();

雖然是strict模式,但語句var x = "hello," + y并不報錯,原因是變量y在稍后說明了。但是alert顯示hello,undefined,說明變量y的值為undefined。這正是因為JavaScript引擎自動提升了變量y的聲明,但不會提升變量y的賦值。

function foo() {
    var y; // 提升變量y的申明
    var x = 'Hello, ' + y;
    alert(x);
    y = 'Bob';
}

由于JavaScript的這一特性,我們在函數內部定義變量時,請嚴格遵守“在函數內部首先聲明所有變量”這一規則。最常見的做法是用一個var聲明函數內部所用到的變量:

function foo() {
    var
        x = 1, // x初始化為1
        y = x + 1, // y初始化為2
        z, i; // z和i為undefined
    // 其他語句:
    for (i=0; i<100; i++) {
        ...
    }
}

對象

普通創建對象

創建對象

已經有了一個包含一些屬性的對象。如何使用JavaScript創建這個對象呢?方法如下:

var fido = {
    name: "Fido";
    weight: 40;
    breed: "Mixed";
    loves: ["walks","fetching balls"]
};

訪問和操作對象

  • 使用“點”記法訪問對象屬性
if (fido.weight > 25) {
    alert("Wonderful");
} else {
    alert("keep moving");
}
  • 使用一個串結合[]記法訪問屬性
var breed = fido["breed"];
if (breed == "mixed") {
    alert("Best in show");
}
  • 改變屬性的值
fido.weight = 27; //改變Fido的重量
fido.loves.push("chewing bones"); //向它的loves數組增加一個新元素
  • 枚舉對象的所有屬性
var prop;
for(prop in fido) {
    alert("Fido has a" + prop + " property"); //每次循環迭代時,變量prop會得到下一個屬性名的相應串值
}
  • 處理對象的數組
var likes = fido.loves;
var likesStr = "Fido likes";

for (var i = 0; i < likes.length; i++) {
    likesStr += " " + likes[i];
}
  • 向函數傳入一個對象
function bark(dog) {
    dog.weight = 28; //會同時改變fido中的值
}

bark(fido);

注意:將一個對象賦值給變量時,這個變量會包含這個對象的一個引用,而不是對象的副本,可以把引用想成是對象的一個指針。所有對該變量中屬性的改變都會改變原對象的屬性。

上述代碼中,改變dog對象的weight屬性時,實際上是修改的原對象fido的屬性,而不是副本,所有不僅函數體內的dog對象發生了改變,函數體外的fido對象也發生了改變。

給對象增加方法

var fido = {
    name: "Fido";
    weight: 40;
    breed: "Mixed";
    loves: ["walks","fetching balls"]

    bark: function() {
        alert("Woof Woof");
    }
};

fido.bark(); //調用方法

構造函數創建對象

構造函數

function Dog(name,breed,weight) {

    this.name = name;
    this.breed = breed;
    this.weight = weight;

    this.bark = function() {
        if (this.weight) {
            alert(this.name + " say Woof!");
        }
    };
}

注意這個語法和對象的語法有所不同。這些是語句,所有需要一個“;”結束各語句。this用于指示對象中的屬性,它就代表了新創建的實例對象。

創建對象

var fido = new Dog("Fido","Mixed",38); //new關鍵字創建一個對象
var tiny = new Dog("Tiny","Chawalla",18);

fido.bark();
tiny.bark();

prototype屬性創建對象

prototype屬性包含一個對象,所有實例對象需要共享的屬性和方法,都放在這個對象里面;那些不需要共享的屬性和方法,就放在構造函數里面。

實例對象一旦創建,將自動引用prototype對象的屬性和方法。也就是說,實例對象的屬性和方法分為兩種,一種是本地的,一種是引用的:

  function DOG(name){
    this.name = name;
  }
  DOG.prototype = { species : '犬科' };

  var dogA = new DOG('大毛');
  var dogB = new DOG('二毛');

  alert(dogA.species); // 犬科
  alert(dogB.species); // 犬科

現在,species屬性放在prototype對象中,兩個實例對象共享的,只要修改了prototype對象,就會同時影響到兩個實例對象。

  DOG.prototype.species = '貓科';

  alert(dogA.species); // 貓科
  alert(dogB.species); // 貓科

綜上所述,由于所有實例對象共享同一個prototype對象,那么兇外界看起來,prototype對象就好像是實例對象的原型,而實例對象則好像繼承了prototype對象一樣。

window對象

window對象表示你的JavaScript程序的全局環境,同時還表示應用的主窗口,因此,包含很多核心的屬性和方法,主要有:

|windwo||
|---|---|---
|location|屬性|包含頁面的URL
|status|屬性|包含將在瀏覽器狀態區顯示一個字符串
|onload|屬性|頁面完全加載后調用的函數
|document|屬性|包含DOM
|----|----|
|alert|方法|顯示一個提醒
|prompt|方法|類似于alert,不過會從用戶的到信息
|open|方法|打開一個新的瀏覽器窗口
|close|方法|關閉窗口
|setTimeout|方法|指定的時間間隔后調用一個處理程序
|setInterval|方法|以一個指定間隔反復調用一個處理程序

window是個全局對象,所有即使沒有在前面加上window,window的屬性或方法名也能順利解析。

document對象

document實際上是window對象的一個屬性,主要用于訪問DOM。

元素對象

元素對象就是通過getElementById方法返回的對象。

結尾

window.onload = init();表示希望調用函數init
window.onload = init; 表示把init這個函數值賦給onload屬性。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,885評論 6 541
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,312評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,993評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,667評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,410評論 6 411
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,778評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,775評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,955評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,521評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,266評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,468評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,998評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,696評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,095評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,385評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,193評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,431評論 2 378

推薦閱讀更多精彩內容

  • Mac下升級Python到3.5.2bash update
    深山問閱讀 172評論 0 0
  • 這篇文章敲下題目的時候,我總覺得,對于一個人生還不到第三輪的丫頭,寫這樣的文章似乎不夠資歷,有些早吧?貌似在垂暮之...
    芳芳樂分享閱讀 270評論 0 2
  • 不看這鳥無卵用的書, 竟然敢壓制我僅存的智商。 打擊我的自信心, 欺負我的躊躇滿志。 從此, 單位時間內, 看在眼...
    生活無非就是愛啊閱讀 157評論 0 0
  • 對不起,今天我情緒不太好,可能說的有些話讓你傷心了,但是我也很傷心。 我知道那是你小學同學,他來那樣說你我...
    紫颩閱讀 577評論 0 0
  • 因為除了微信之外,任何新 APP 的打開率都低得令人發指,之前不少圈主抱怨經營圈子困難。無論引導用戶加入圈子,還是...
    唯奇點閱讀 999評論 0 0