函數(shù)

語法格式

// 創(chuàng)建函數(shù)/函數(shù)聲明/函數(shù)定義
function 函數(shù)名(形參列表) {
    函數(shù)體
    return 返回值;
}
// 函數(shù)調(diào)用
函數(shù)名(實(shí)參列表)        // 不考慮返回值
返回值 = 函數(shù)名(實(shí)參列表) // 考慮返回值

• 函數(shù)定義并不會執(zhí)行函數(shù)體內(nèi)容，必須要調(diào)用才會執(zhí)行，調(diào)用幾次就會執(zhí)行幾次。

function hello() {
    console.log("hello");
}
// 如果不調(diào)用函數(shù)，則沒有執(zhí)行打印語句
hello();

• 調(diào)用函數(shù)的時候進(jìn)入函數(shù)內(nèi)部執(zhí)行，函數(shù)結(jié)束時回到調(diào)用位置繼續(xù)執(zhí)行，可以借助調(diào)試器來觀察。
• 函數(shù)的定義和調(diào)用的先后順序沒有要求（這一點(diǎn)和變量不同，變量必須先定義再使用）

// 調(diào)用函數(shù)
hello();
// 定義函數(shù)
function hello() {
    console.log("hello");
}

關(guān)于參數(shù)個數(shù)

實(shí)參和形參之間的個數(shù)可以不匹配，但是實(shí)際開發(fā)一般要求形參和實(shí)參個數(shù)要匹配

1. 如果實(shí)參個數(shù)比形參個數(shù)多，則多出的參數(shù)不參與函數(shù)運(yùn)算

sum(10, 20, 30); // 30

1. 如果實(shí)參個數(shù)比形參個數(shù)少，則此時多出來的形參值為 undefined

sum(10); // NaN，相當(dāng)于 num2 為 undefined

JS 的函數(shù)傳參比較靈活，這一點(diǎn)和其他語言差別較大，事實(shí)上這種靈活性往往不是好事。

函數(shù)表達(dá)式

另外一種函數(shù)的定義方式

var add = function() {
    var sum = 0;
    for (var i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}
console.log(add(10, 20));         // 30
console.log(add(1, 2, 3, 4));     // 10
console.log(typeof add);          // function

此時形如 function() {} 這樣的寫法定義了一個匿名函數(shù)，然后將這個匿名函數(shù)用一個變量來表示，后面就可以通過這個 add 變量來調(diào)用函數(shù)了。JS 中函數(shù)是一等公民，可以用變量保存，也可以作為其他函數(shù)的參數(shù)或者返回值。

作用域

某個標(biāo)識符名字在代碼中的有效范圍。在 ES6 標(biāo)準(zhǔn)之前，作用域主要分成兩個：

• 全局作用域：在整個 script 標(biāo)簽中，或者單獨(dú)的 js 文件中生效。
• 局部作用域 / 函數(shù)作用域：在函數(shù)內(nèi)部生效。

// 全局變量
var num = 10;
console.log(num);
function test() {
    // 局部變量
    var num = 20;
    console.log(num);
}
function test2() {
    // 局部變量
    var num = 30;
    console.log(num);
}
test();
test2();
console.log(num);
// 執(zhí)行結(jié)果
10
20
30
10

創(chuàng)建變量時如果不寫 var，則得到一個全局變量。

function test() {
    num = 100;
}
test();
console.log(num);
// 執(zhí)行結(jié)果
100

另外，很多語言的局部變量作用域是按照代碼塊（大括號）來劃分的，JS 在 ES6 之前不是這樣的。

if (1 < 2) {
    var a = 10;
}
console.log(a);

作用域鏈

背景：

• 函數(shù)可以定義在函數(shù)內(nèi)部
• 內(nèi)層函數(shù)可以訪問外層函數(shù)的局部變量

內(nèi)部函數(shù)可以訪問外部函數(shù)的變量，采取的是鏈?zhǔn)讲檎业姆绞?，從?nèi)到外依次進(jìn)行查找。

var num = 1;
function test1() {
    var num = 10;
    function test2() {
        var num = 20;
        console.log(num);
    }
    test2();
}
test1();
// 執(zhí)行結(jié)果
20

執(zhí)行 console.log(num) 的時候，會現(xiàn)在 test2 的局部作用域中查找 num，如果沒找到，則繼續(xù)去 test1 中查找，如果還沒找到，就去全局作用域查找。

對象

基本概念

對象是指一個具體的事物。

• “電腦” 不是對象，而是一個泛指的類別，而 “我的聯(lián)想筆記本” 就是一個對象。在 JS 中，字符串、數(shù)值、數(shù)組、函數(shù)都是對象。每個對象中包含若干的屬性和方法：
• 屬性：事物的特征。
• 方法：事物的行為。例如，你有一個女票：
• 她的身高、體重、三圍這些都是屬性。
• 她的唱歌、跳舞、暖床都是方法。

對象需要保存的屬性有多個，雖然數(shù)組也能用于保存多個數(shù)據(jù)，但是不夠好。例如表示一個學(xué)生信息（姓名蔡徐坤，身高 175cm，體重 170 斤）：

var student = ["蔡徐坤", 175, 170];

但是這種情況下到底 175 和 170 誰表示身高，誰表示體重，就容易分不清。

JavaScript 的對象和 Java 的對象概念上基本一致，只是具體的語法表現(xiàn)形式差別較大。

1. 使用字面量創(chuàng)建對象 [常用]

使用 {} 創(chuàng)建對象

var a = {}; // 創(chuàng)建了一個空的對象
var student = {
    name: '蔡徐坤',
    height: 175,
    weight: 170,
    sayHello: function() {
        console.log("hello");
    }
};

• 使用 {} 創(chuàng)建對象
• 屬性和方法使用鍵值對的形式來組織。
• 鍵值對之間使用 , 分割，最后一個屬性后面的 , 可有可無。
• 鍵和值之間使用 : 分割。
• 方法的值是一個匿名函數(shù)。

使用對象的屬性和方法：

// 1. 使用 . 成員訪問運(yùn)算符來訪問屬性，. 可以理解成“的”
console.log(student.name);
// 2. 使用 [] 訪問屬性，此時屬性需要加上引號
console.log(student["height"]);
// 3. 調(diào)用方法，別忘記加上 ()
student.sayHello();

2. 使用 new Object 創(chuàng)建對象

var student = new Object(); // 和創(chuàng)建數(shù)組類似
student.name = "蔡徐坤";
student.height = 175;
student["weight"] = 170;
student.sayHello = function () {
    console.log("hello");
}
console.log(student.name);
console.log(student["weight"]);
student.sayHello();

注意：使用 {} 創(chuàng)建的對象也可以隨時使用 student.name = "蔡徐坤"; 這樣的方式來新增屬性。

3. 使用構(gòu)造函數(shù)創(chuàng)建對象

前面的創(chuàng)建對象方式只能創(chuàng)建一個對象，而使用構(gòu)造函數(shù)可以很方便的創(chuàng)建多個對象。例如：創(chuàng)建幾個貓咪對象

var mimi = {
    name: "咪咪",
    type: "中華田園喵",
    miao: function () {
        console.log("喵");
    }
};
var xiaohei = {
    name: "小黑",
    type: "波斯喵",
    miao: function () {
        console.log("貓嗚");
    }
};
var ciqiu = {
    name: "刺球",
    type: "金漸層",
    miao: function () {
        console.log("咕嚕嚕");
    }
}

此時寫起來就比較麻煩，使用構(gòu)造函數(shù)可以把相同的屬性和方法的創(chuàng)建提取出來，簡化開發(fā)過程。

基本語法

function 構(gòu)造函數(shù)名(形參) {
    this.屬性 = 值;
    this.方法 = function...
}
var obj = new 構(gòu)造函數(shù)名(實(shí)參);

注意：

• 在構(gòu)造函數(shù)內(nèi)部使用 this 關(guān)鍵字來表示當(dāng)前正在構(gòu)建的對象。
• 構(gòu)造函數(shù)的函數(shù)名首字母一般是大寫的。
• 構(gòu)造函數(shù)的函數(shù)名可以是名詞。
• 構(gòu)造函數(shù)不需要 return。
• 創(chuàng)建對象的時候必須使用 new 關(guān)鍵字。this 相當(dāng)于 “我”

使用構(gòu)造函數(shù)重新創(chuàng)建貓咪對象

function Cat(name, type, sound) {
    this.name = name;
    this.type = type;
    this.miao = function () {
        console.log(sound); // 別忘了作用域的鏈?zhǔn)皆L問規(guī)則
    }
}
var mimi = new Cat("咪咪", "中華田園喵", "喵");
var xiaohei = new Cat("小黑", "波斯喵", "貓嗚");
var ciqiu = new Cat("刺球", "金漸層", "咕嚕嚕");
console.log(mimi);
mimi.miao();

理解 new 關(guān)鍵字

new 的執(zhí)行過程：

1. 先在內(nèi)存中創(chuàng)建一個空的對象 {}
2. this 指向剛才的空對象（將上一步的對象作為 this 的上下文）
3. 執(zhí)行構(gòu)造函數(shù)的代碼，給對象創(chuàng)建屬性和方法
4. 返回這個對象（構(gòu)造函數(shù)本身不需要 return，由 new 代勞了）

參考 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new

JavaScript 的對象和 Java 的對象的區(qū)別

1.JavaScript 沒有 “類” 的概念

對象其實(shí)就是 “屬性 + 方法”。類相當(dāng)于把一些具有共性的對象的屬性和方法單獨(dú)提取了出來，相當(dāng)于一個 “月餅?zāi)Ｗ?rdquo;。在 JavaScript 中的 “構(gòu)造函數(shù)” 也能起到類似的效果。而且即使不是用構(gòu)造函數(shù)，也可以隨時的通過 {} 的方式指定出一些對象。在 ES6 中也引入了 class 關(guān)鍵字，就能按照類似于 Java 的方式創(chuàng)建類和對象了。

2.JavaScript 對象不區(qū)分 “屬性” 和 “方法”

JavaScript 中的函數(shù)是 “一等公民”，和普通的變量一樣，存儲了函數(shù)的變量能夠通過 () 來進(jìn)行調(diào)用執(zhí)行。

3.JavaScript 對象沒有 private /public 等訪問控制機(jī)制

對象中的屬性都可以被外界隨意訪問。

4.JavaScript 對象沒有 “繼承”

繼承本質(zhì)就是 “讓兩個對象建立關(guān)聯(lián)”，或者說是讓一個對象能夠重用另一個對象的屬性 / 方法。JavaScript 中使用 “原型” 機(jī)制實(shí)現(xiàn)類似的效果。

例如：創(chuàng)建一個 cat 對象和 dog 對象，讓這兩個對象都能使用 animal 對象中的 eat 方法。通過 __proto__ 屬性來建立這種關(guān)聯(lián)關(guān)系（proto 翻譯作 “原型”）

5.JavaScript 沒有 “多態(tài)”

多態(tài)的本質(zhì)在于 “程序不必關(guān)注具體的類型，就能使用其中的某個方法”。

C++/Java 等靜態(tài)類型的語言對于類型的約束和校驗(yàn)比較嚴(yán)格，因此通過子類繼承父類，并重寫父類的方法的方式來實(shí)現(xiàn)多態(tài)的效果。

但是在 JavaScript 中本身就支持動態(tài)類型，程序猿在使用對象的某個方法的時候本身也不需要對對象的類型做出明確區(qū)分，因此并不需要在語法層面上支持多態(tài)。

例如：在 Java 中已經(jīng)學(xué)過 ArrayList 和 LinkedList，為了讓程序猿使用方便，往往寫作：

List<String> list = new ArrayList<>();

然后我們可以寫一個方法：

void add(List<String> list, String s) {
    list.add(s);
}

我們不必關(guān)注 list 是 ArrayList 還是 LinkedList，只要是 List 就行，因?yàn)?List 內(nèi)部帶有 add 方法。

當(dāng)我們使用 JavaScript 的代碼的時候：

function add(list, s) {
    list.add(s)
}

add 對于 list 這個參數(shù)的類型本身就沒有任何限制，只需要 list 這個對象有 add 方法即可，就不必像 Java 那樣先繼承再重寫繞一個圈子。

多態(tài)的優(yōu)點(diǎn)和缺點(diǎn)是什么？

除了JavaScript，還有哪些語言支持多態(tài)？

如何在JavaScript中實(shí)現(xiàn)多態(tài)？

到此這篇關(guān)于JavaScript 核心特性綜合實(shí)戰(zhàn)之 從函數(shù)到對象的深度應(yīng)用的文章就介紹到這了,更多相關(guān)js函數(shù)對象內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論