JavaScript函數(shù)學(xué)習(xí)筆記

wua_wua2012 發(fā)布于2019-08-22 10:33 / 2962人閱讀

摘要：在中通過(guò)關(guān)鍵字方式調(diào)用的函數(shù)都被認(rèn)為是構(gòu)造函數(shù)。這個(gè)新創(chuàng)建的對(duì)象的被指向到構(gòu)造函數(shù)的。上的方法不起效果當(dāng)然你要是這樣的形式指定了返回的內(nèi)容，它自然會(huì)原樣返回啦工廠模型為了不使用關(guān)鍵字，構(gòu)造函數(shù)必須顯式的返回一個(gè)值。

個(gè)人博客原址

函數(shù)

函數(shù)式一塊javascript代碼，定義一次，可以被多次調(diào)用與執(zhí)行，JS中的函數(shù)也是對(duì)象，所以JS函數(shù)可以像其他對(duì)象那樣操作，和傳遞，所以也稱(chēng)函數(shù)對(duì)象
函數(shù)的參數(shù)列表相當(dāng)于函數(shù)的人口，return相當(dāng)于函數(shù)的出口，函數(shù)本身就是一種數(shù)據(jù)類(lèi)型，函數(shù)是可以嵌套定義的。

函數(shù)基礎(chǔ) 　定義函數(shù)的方式

有三種方式可以定義函數(shù)。并且有著如下區(qū)別：

定義方式：	function 語(yǔ)句（函數(shù)聲明）	Function 構(gòu)造函數(shù)	函數(shù)表達(dá)式
解析時(shí)機(jī)：	優(yōu)先解析(聲明前置)	順序解析	順序解析(聲明提前，賦值不提前)
允許匿名：	有名	匿名	匿名
形式：	句子	表達(dá)式	表達(dá)式
性質(zhì)：	靜態(tài)	動(dòng)態(tài)	靜態(tài)
作用域：	具有函數(shù)的作用域	頂級(jí)函數(shù)(頂級(jí)作用域)	具有函數(shù)作用域

主要有下面兩個(gè)需要注意的地方：

理解Function 構(gòu)造函數(shù)的頂級(jí)作用域，直接看代碼就好：很直觀就可以表示出來(lái)

var a = 1;
function test() {
    var a  = 2;
    var func = new Function("console.info(a)");
    func();
}
test();//1;

函數(shù)表達(dá)式的多種創(chuàng)建方式：

// 最簡(jiǎn)單的形式，將函數(shù)賦值給一個(gè)變量
var add = function(a,b){
    //do ..
}
// 立即執(zhí)行匿名函數(shù)表達(dá)式IIFE
(function() {
    //do ..
})();
// 將函數(shù)當(dāng)成返回值
return function(){
    //do ..
}
//命名式函數(shù)表達(dá)式NFE
var add  = function foo(a,b){
    // do..
    // 只在foo函數(shù)內(nèi)部可以使用foo這個(gè)名稱(chēng)(用途如：遞歸調(diào)用)（在新版瀏覽器下可用）
    // 外部訪問(wèn)不到foo這個(gè)函數(shù)名
}

函數(shù)的參數(shù)

在JS中函數(shù)的參數(shù)分為形式參數(shù)和實(shí)際參數(shù)兩個(gè)概念

function test(a,b,c,d) {
    console.log(test.length)//4
    return a+b+c;
}
console.info(test(10,20,30))//60
console.log(test.length)//4
console.log(arguments.length);//3,表示實(shí)際接受的參數(shù)個(gè)數(shù)
console.log(arguments[0]);//10，傳進(jìn)來(lái)的第一個(gè)參數(shù)===a

在 函數(shù)內(nèi)部 ，JS使用了一個(gè)特別的變量arguments的 類(lèi)數(shù)組對(duì)象（以后再來(lái)說(shuō)這個(gè)問(wèn)題），用來(lái)接受傳入函數(shù)的實(shí)際參數(shù)列表。

function arg(a,b,c){
    arguments[0] = 1;
    console.info(a,b,c)
}
arg(143,456,6)//1 456 6

普通模式下可以直接對(duì)于arguments對(duì)象進(jìn)行更改，上面的代碼就是一個(gè)很直觀的例子，我們直接更改了第一個(gè)參數(shù)的值，但建議不要去試圖更改arguments對(duì)象的屬性，不符合規(guī)范。
注：嚴(yán)格模式下arguments對(duì)象是實(shí)參的一個(gè)副本，所以上面的改動(dòng)不會(huì)生效(自行嘗試)

構(gòu)造函數(shù)

什么是構(gòu)造函數(shù)？

其實(shí)構(gòu)造函數(shù)只是普通函數(shù)的一個(gè)變種，它可以當(dāng)成普通的函數(shù)方式調(diào)用，也能通過(guò)new關(guān)鍵字來(lái)調(diào)用。在Javascript中通過(guò) new 關(guān)鍵字方式調(diào)用的函數(shù)都被認(rèn)為是構(gòu)造函數(shù)。
在構(gòu)造函數(shù)內(nèi)部（也就是被調(diào)用的函數(shù)內(nèi)） this 指向新創(chuàng)建的對(duì)象Object。這個(gè)新創(chuàng)建的對(duì)象的 prototype 被指向到構(gòu)造函數(shù)的 prototype。
如果被調(diào)用的函數(shù)沒(méi)有顯式的 return 表達(dá)式，則隱式的會(huì)返回 this 對(duì)象(也就是新創(chuàng)建的對(duì)象)。

這就來(lái)看看實(shí)際中不同情況下的區(qū)別：

使用new關(guān)鍵字嗎，不指定return語(yǔ)句

function Person() {
    this.father = "allen";
}
Person.prototype.getFatherName = function(){
    console.info(this.father);
};
var hong = new Person();
console.info( new Person());//Person {father: "allen"}
hong.getFatherName();//allen

使用new關(guān)鍵字，并且指定return語(yǔ)句

function Person() {
    this.father = "allen";
    return "1";
}
Person.prototype.getFatherName = function(){
    console.info(this.father);
};
var hong = new Person();
console.info( hong);//Person {father: "allen"}
hong.getFatherName();//allen

//把return的值換成一個(gè)對(duì)象：
//return "1";----------->return {a:1};或者return new String("12");
var hong = new Person();
console.info( hong);//Object {a: 1}
hong.getFatherName();//[腳本錯(cuò)誤]

不使用new關(guān)鍵字，當(dāng)成普通函數(shù)直接調(diào)用

function Person() {
    this.father = "allen";
    return function(){
        return {}
    };
}
Person.prototype.getFatherName = function(){
    console.info(this.father);
};
var bai = Person();
console.info(bai);//undefined
console.info(father);//allen
bai.getFatherName();//[腳本錯(cuò)誤]

通過(guò)這三段不同情況的示例代碼，應(yīng)該可以發(fā)現(xiàn)一些區(qū)別：

使用new關(guān)鍵字嗎，不指定return語(yǔ)句時(shí)，將隱式的會(huì)返回 this 對(duì)象(返也就是新創(chuàng)建的對(duì)象)。

使用new關(guān)鍵字，并且指定return語(yǔ)句時(shí)，需分為兩種情況：

返回值為標(biāo)準(zhǔn)類(lèi)型，顯式的 return 表達(dá)式將不會(huì)影響返回結(jié)果

返回值為對(duì)象，將直接返回你顯式設(shè)置的對(duì)象

不使用new關(guān)鍵字，當(dāng)成普通函數(shù)直接調(diào)用時(shí)，this指向全局對(duì)象 window，所以?xún)?nèi)部this指定的屬性與方法，全部都暴露到全局，導(dǎo)致全局變量污染。prototype上的方法不起效果(當(dāng)然你要是這樣的形式指定了return返回的內(nèi)容，它自然會(huì)原樣返回啦！)

工廠模型

為了不使用new關(guān)鍵字，構(gòu)造函數(shù)必須顯式的返回一個(gè)值。

function createPerson(name, age, sex) {
    var obj = {};
    obj.name = name;
    obj.age = age;
    var private = 2;//私有外部不可訪問(wèn)
    obj.sayName = function(){
        console.info(this.name)
    }
    obj.getPrivate = function() {
        return private;
    }
    return obj;
}
var p1 = createPerson("小紅",21,"女")
var p2 = createPerson("小國(guó)",22,"男")
console.info(p1.name);//小紅
console.info(p2.age);//22
p2.sayName();//小國(guó)

這就是一個(gè)簡(jiǎn)單的工廠模型，使用或者不使用 new 關(guān)鍵字沒(méi)有功能性的區(qū)別。這樣的方式比起 new的調(diào)用方式不容易出錯(cuò)，并且可以充分利用 私有變量帶來(lái)的便利，但是也有下面這樣的問(wèn)題

占用更多的內(nèi)存，因?yàn)樾聞?chuàng)建的對(duì)象不能共享原型上的方法。

為了實(shí)現(xiàn)繼承，工廠方法需要從另外一個(gè)對(duì)象拷貝所有屬性，或者把一個(gè)對(duì)象作為新創(chuàng)建對(duì)象的原型。

這一篇博客最主要是對(duì)于函數(shù)學(xué)習(xí)的筆記，不過(guò)用自己的話來(lái)描述總描述的還不夠清晰。
有錯(cuò)誤之處請(qǐng)指出！