• 說明：該文屬于 大前端全棧架構(gòu)白寶書專欄，目前階段免費(fèi)，如需要項(xiàng)目實(shí)戰(zhàn)或者是體系化資源，文末名片加V！
• 作者：哈哥撩編程，十余年工作經(jīng)驗(yàn), 從事過全棧研發(fā)、產(chǎn)品經(jīng)理等工作，目前在公司擔(dān)任研發(fā)部門CTO。
• 榮譽(yù)：2022年度博客之星Top4、2023年度超級個(gè)體得主、谷歌與亞馬遜開發(fā)者大會特約speaker、全棧領(lǐng)域優(yōu)質(zhì)創(chuàng)作者。

---

• ?? 白寶書系列
  • ?? 啟示錄 - 攻城獅的自我修養(yǎng)
  • ?? Python全棧白寶書
  • ?? ChatGPT實(shí)踐指南白寶書
  • ?? 產(chǎn)品思維訓(xùn)練白寶書
  • ?? 全域運(yùn)營實(shí)戰(zhàn)白寶書
  • ?? 大前端全棧架構(gòu)白寶書

? 內(nèi)置構(gòu)造函數(shù)

JavaScript有很多內(nèi)置構(gòu)造函數(shù)，比如Array就是數(shù)組類型的構(gòu)造函數(shù)，Function就是函數(shù)類型的構(gòu)造函數(shù)，Object就是對象類型的構(gòu)造函數(shù)

內(nèi)置構(gòu)造函數(shù)非常有用，所有該類型的方法都是定義在它的內(nèi)置構(gòu)造函數(shù)的prototype上的（比如數(shù)組的pop()方法、slice()方法都是定義在Array的prototype上的，由于數(shù)組都可以看作是Array的示例，所以數(shù)組就可以通過原型鏈的方式去調(diào)用這些方法。），我們也可以給這個(gè)對象添加新的方法，從而拓展某類型的功能

下面來敲一些demo驗(yàn)證一下上面的結(jié)論：

// 數(shù)組的內(nèi)置構(gòu)造函數(shù),任何的數(shù)組都可以看作是Array的實(shí)例
console.log([1, 2, 3] instanceof Array);    // true
console.log([] instanceof Array);           // true

var arr = new Array(5);    // 得到一個(gè)長度為5的空數(shù)組
console.log(arr);
console.log(arr.length);

// 函數(shù)的內(nèi)置構(gòu)造函數(shù)
function fun() {

}
function add(a, b) {
    return a + b;
}
console.log(fun instanceof Function);   // true
console.log(add instanceof Function);   // true

var jianfa = new Function('a', 'b', 'return a - b');
console.log(jianfa(8, 3));

// 對象的內(nèi)置構(gòu)造函數(shù)
console.log({ a: 1 } instanceof Object);   // true
console.log({} instanceof Object);       // true

var o = new Object();   // 得到一個(gè)空對象
o.a = 1;
o.b = 1;
console.log(o);

上面還提到，我們可以給對象添加新的方法，從而拓展某類型的功能，那么如何擴(kuò)展一個(gè)對象的方法呢？下面我們就來寫一個(gè)擴(kuò)展數(shù)組對象的方法的demo：

// 拓展數(shù)組的方法，實(shí)現(xiàn)數(shù)組的“求和”
Array.prototype.qiuhe = function () {
    // 備份上下文
    var arr = this;
    // 累加器
    var sum = 0;
    for (i = 0; i < arr.length; i++) {
        sum += arr[i];
    }
    return sum;
}

var arr = [1, 2, 3, 4];
var result = arr.qiuhe();   // 數(shù)組可以調(diào)用求和方法了
console.log(result);

注意：面試的時(shí)候會經(jīng)?？嫉浇o數(shù)組添加一些新的功能，一定要記得可以利用原型鏈的原理往Array.prototype上添加新的方法至于算法方面，就要多刷算法題提高自己的算法思想

? Obejct和Function

• Obeject.prototype是萬物原型鏈的終點(diǎn)。

• 任何函數(shù)都可以看作是Function new 出來的

Object本身是函數(shù)，所以Object又可以看作是Function new出來的。那么Object和Funtion的關(guān)系是怎樣的呢？他們兩者的原型鏈可以用下圖所示：

下面用代碼來驗(yàn)證一下上圖中的關(guān)系：

console.log(Object.__proto__ === Function.prototype);    //true, 任何函數(shù)都可以看作是`Function` `new` 出來的
console.log(Function.__proto__ === Function.prototype);  //true, 任何函數(shù)都可以看作是`Function` `new` 出來的

console.log(Function instanceof Object);        // true, `Obeject.prototype`是萬物原型鏈的終點(diǎn)
console.log(Object instanceof Object);          // true, `Obeject.prototype`是萬物原型鏈的終點(diǎn)
console.log(Function instanceof Function);      // true, 任何函數(shù)都可以看作是`Function` `new` 出來的
console.log(Object instanceof Function);        // true, 任何函數(shù)都可以看作是`Function` `new` 出來的

文章來源地址http://www.zghlxwxcb.cn/news/detail-767592.html

到了這里，關(guān)于〖大前端 - 基礎(chǔ)入門三大核心之JS篇(56)〗- 內(nèi)置構(gòu)造函數(shù)的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！