JavaScript函數學習筆記

wua_wua2012 發布于2019-08-22 10:33 / 2967人閱讀

摘要：在中通過關鍵字方式調用的函數都被認為是構造函數。這個新創建的對象的被指向到構造函數的。上的方法不起效果當然你要是這樣的形式指定了返回的內容，它自然會原樣返回啦工廠模型為了不使用關鍵字，構造函數必須顯式的返回一個值。

個人博客原址

函數

函數式一塊javascript代碼，定義一次，可以被多次調用與執行，JS中的函數也是對象，所以JS函數可以像其他對象那樣操作，和傳遞，所以也稱函數對象
函數的參數列表相當于函數的人口，return相當于函數的出口，函數本身就是一種數據類型，函數是可以嵌套定義的。

函數基礎 　定義函數的方式

有三種方式可以定義函數。并且有著如下區別：

定義方式：	function 語句（函數聲明）	Function 構造函數	函數表達式
解析時機：	優先解析(聲明前置)	順序解析	順序解析(聲明提前，賦值不提前)
允許匿名：	有名	匿名	匿名
形式：	句子	表達式	表達式
性質：	靜態	動態	靜態
作用域：	具有函數的作用域	頂級函數(頂級作用域)	具有函數作用域

主要有下面兩個需要注意的地方：

理解Function 構造函數的頂級作用域，直接看代碼就好：很直觀就可以表示出來

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

函數表達式的多種創建方式：

// 最簡單的形式，將函數賦值給一個變量
var add = function(a,b){
    //do ..
}
// 立即執行匿名函數表達式IIFE
(function() {
    //do ..
})();
// 將函數當成返回值
return function(){
    //do ..
}
//命名式函數表達式NFE
var add  = function foo(a,b){
    // do..
    // 只在foo函數內部可以使用foo這個名稱(用途如：遞歸調用)（在新版瀏覽器下可用）
    // 外部訪問不到foo這個函數名
}

函數的參數

在JS中函數的參數分為形式參數和實際參數兩個概念

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,表示實際接受的參數個數
console.log(arguments[0]);//10，傳進來的第一個參數===a

在 函數內部 ，JS使用了一個特別的變量arguments的 類數組對象（以后再來說這個問題），用來接受傳入函數的實際參數列表。

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

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

構造函數

什么是構造函數？

其實構造函數只是普通函數的一個變種，它可以當成普通的函數方式調用，也能通過new關鍵字來調用。在Javascript中通過 new 關鍵字方式調用的函數都被認為是構造函數。
在構造函數內部（也就是被調用的函數內） this 指向新創建的對象Object。這個新創建的對象的 prototype 被指向到構造函數的 prototype。
如果被調用的函數沒有顯式的 return 表達式，則隱式的會返回 this 對象(也就是新創建的對象)。

這就來看看實際中不同情況下的區別：

使用new關鍵字嗎，不指定return語句

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關鍵字，并且指定return語句

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的值換成一個對象：
//return "1";----------->return {a:1};或者return new String("12");
var hong = new Person();
console.info( hong);//Object {a: 1}
hong.getFatherName();//[腳本錯誤]

不使用new關鍵字，當成普通函數直接調用

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();//[腳本錯誤]

通過這三段不同情況的示例代碼，應該可以發現一些區別：

使用new關鍵字嗎，不指定return語句時，將隱式的會返回 this 對象(返也就是新創建的對象)。

使用new關鍵字，并且指定return語句時，需分為兩種情況：

返回值為標準類型，顯式的 return 表達式將不會影響返回結果

返回值為對象，將直接返回你顯式設置的對象

不使用new關鍵字，當成普通函數直接調用時，this指向全局對象 window，所以內部this指定的屬性與方法，全部都暴露到全局，導致全局變量污染。prototype上的方法不起效果(當然你要是這樣的形式指定了return返回的內容，它自然會原樣返回啦！)

工廠模型

為了不使用new關鍵字，構造函數必須顯式的返回一個值。

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

這就是一個簡單的工廠模型，使用或者不使用 new 關鍵字沒有功能性的區別。這樣的方式比起 new的調用方式不容易出錯，并且可以充分利用 私有變量帶來的便利，但是也有下面這樣的問題

占用更多的內存，因為新創建的對象不能共享原型上的方法。

為了實現繼承，工廠方法需要從另外一個對象拷貝所有屬性，或者把一個對象作為新創建對象的原型。

這一篇博客最主要是對于函數學習的筆記，不過用自己的話來描述總描述的還不夠清晰。
有錯誤之處請指出！

云服務器 GPU云服務器 javascript學習筆記學習筆記學習筆記一基礎學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/90827.html

重學前端學習筆記（七）--JavaScript對象：面向對象還是基于對象？

摘要：對象有狀態對象具有狀態，同一對象可能處于不同狀態之下。中對象獨有的特色對象具有高度的動態性，這是因為賦予了使用者在運行時為對象添改狀態和行為的能力。小結由于的對象設計跟目前主流基于類的面向對象差異非常大，導致有不是面向對象這樣的說法。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些...

mayaohua 2019-08-02 16:15 評論0 收藏0
重學前端學習筆記（七）--JavaScript對象：面向對象還是基于對象？

摘要：對象有狀態對象具有狀態，同一對象可能處于不同狀態之下。中對象獨有的特色對象具有高度的動態性，這是因為賦予了使用者在運行時為對象添改狀態和行為的能力。小結由于的對象設計跟目前主流基于類的面向對象差異非常大，導致有不是面向對象這樣的說法。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些...

yy736044583 2019-08-29 18:47 評論0 收藏0
重學前端學習筆記（七）--JavaScript對象：面向對象還是基于對象？

摘要：對象有狀態對象具有狀態，同一對象可能處于不同狀態之下。中對象獨有的特色對象具有高度的動態性，這是因為賦予了使用者在運行時為對象添改狀態和行為的能力。小結由于的對象設計跟目前主流基于類的面向對象差異非常大，導致有不是面向對象這樣的說法。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些...

xingpingz 2019-08-23 17:17 評論0 收藏0
重學前端學習筆記（十九）--JavaScript中的函數

摘要：方法在中定義的函數。這種聲明方式會定義一個生成器函數，它返回一個對象。類用定義的類，實際上也是函數。調用函數時使用的引用，決定了函數執行時刻的值。表示當為時，取全局對象，對應了普通函數。四操作的內置函數和可以指定函數調用時傳入的值。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要...

genefy 2019-08-26 13:49 評論0 收藏0
重學前端學習筆記（十九）--JavaScript中的函數

摘要：方法在中定義的函數。這種聲明方式會定義一個生成器函數，它返回一個對象。類用定義的類，實際上也是函數。調用函數時使用的引用，決定了函數執行時刻的值。表示當為時，取全局對象，對應了普通函數。四操作的內置函數和可以指定函數調用時傳入的值。筆記說明重學前端是程劭非（winter）【前手機淘寶前端負責人】在極客時間開的一個專欄，每天10分鐘，重構你的前端知識體系，筆者主要整理學習過程的一些要...

lcodecorex 2019-08-30 10:55 評論0 收藏0