JavaScript中new的功能有哪些

這篇“JavaScript中new的功能有哪些”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細(xì)，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“JavaScript中new的功能有哪些”文章吧。

創(chuàng)新互聯(lián)建站服務(wù)項目包括上黨網(wǎng)站建設(shè)、上黨網(wǎng)站制作、上黨網(wǎng)頁制作以及上黨網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，上黨網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到上黨省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

前言

什么是new呢？

new運算符創(chuàng)建一個用戶定義的對象類型的實例或具有構(gòu)造函數(shù)的內(nèi)置對象類型之一。

光看定義還是有幾分晦澀，直接看一個具體的例子，來了解一下JavaScript中的new實現(xiàn)的功能。

舉個例子

// 現(xiàn)實中瘦不了，但網(wǎng)絡(luò)中一定要保持苗條
function Thin_User(name, age) {
    this.name = name;
    this.age = age;
}

Thin_User.prototype.eatToMuch = function () {
    // 白日做夢吧，留下肥胖的淚水
    console.log('i eat so much, but i\'m very thin!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
console.log(xiaobao.name);   // zcxiaobao
console.log(xiaobao.age);    // 18
console.log(xiaobao.isThin); // true
// i eat so much, but i'm very thin!!!
xiaobao.eatToMuch();

通過上面這個例子，我們可以發(fā)現(xiàn)xiaobao可以：

• 訪問到構(gòu)造函數(shù)Thin_User中屬性

• 訪問到Thin_User.prototype中屬性

描述得更直白一點，new做了這些事：

• 創(chuàng)建了一個空對象，對象的__proto__->Thin_User.prototype

• 執(zhí)行構(gòu)造函數(shù)，并將this指向新對象

• 返回新對象

補充說明

由于new是關(guān)鍵字，我們無法像模擬數(shù)組高階方法一樣覆蓋，因此我們寫一個函數(shù)createObject，來模擬new的效果。使用具體如下：

function Thin_User(name, age) {}

const u1 = new Thin_user(...)
const u2 = createObject(Thin_User, ...a\)

初步模擬

根據(jù)上面分析，createObject編寫的大致步驟為：

• 創(chuàng)建一個新對象obj

• 設(shè)置obj.__proto__->constructor.prototype(但JavaScript不推薦直接修改__proto__屬性，提供了setPrototypeOf方法來專門修改原型)

• 使用constructor.call/apply(obj, ...)，將屬性添加到obj上

• 返回obj

__proto__和prototype，可以看JavaScript之徹底理解原型與原型鏈
call/apply，可以看JavaScript之手撕call、apply

學(xué)習(xí)完這些，我們就可以編寫第一版代碼：

function createObject(Con) {
    // 創(chuàng)建新對象obj
    // var obj = {};也可以
    var obj = Object.create(null);

    // 將obj.__proto__ -> 構(gòu)造函數(shù)原型
    // (不推薦)obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    // 執(zhí)行構(gòu)造函數(shù)
    Con.apply(obj, [].slice.call(arguments, 1));

    // 返回新對象
    return obj;}

返回值效果

眾所周知，函數(shù)是有返回值的，那構(gòu)造函數(shù)如果有返回值，最終執(zhí)行new后返回的結(jié)果是怎樣的那？

返回值為基本類型

假設(shè)構(gòu)造函數(shù)返回值為一個基本類型，我們來看一下最后的返回結(jié)果：

function Thin_User(name, age) {
    this.name = name;
    this.age = age;
    return 'i will keep thin forever';
}

Thin_User.prototype.eatToMuch = function () {
    console.log('i eat so much, but i\'m very thin!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
console.log(xiaobao.name);   // zcxiaobao
console.log(xiaobao.age);    // 18
console.log(xiaobao.isThin); // true
// i eat so much, but i'm very thin!!!
xiaobao.eatToMuch();

最后的返回結(jié)果好像受到任何干擾，難道構(gòu)造函數(shù)不會對返回值進行處理嗎？

不急，我們來接著測試一下返回值為對象的情況。

返回值為對象

function Thin_User(name, age) {
    this.name = name;
    this.age = age;
    return {
        name: name,
        age: age * 10,
        fat: true
    }
}

Thin_User.prototype.eatToMuch = function () {
    // 白日做夢吧，留下肥胖的淚水
    console.log('i eat so much, but i\'m very thin!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
// Error: xiaobao.eatToMuch is not a function
xiaobao.eatToMuch();

當(dāng)我執(zhí)行eatToMuch時，控制臺直接報錯，沒有當(dāng)前函數(shù)，于是我打印了xiaobao對象：

發(fā)現(xiàn)xiaobao對象的age發(fā)生了改變，而且增加了fat屬性，正好與構(gòu)造函數(shù)的返回值一樣。

看完這兩個例子，基本可以理清構(gòu)造函數(shù)有返回值的情況：當(dāng)構(gòu)造函數(shù)返回值為對象時，直接返回這個對象。

終版模擬

function createObject(Con) {
    // 創(chuàng)建新對象obj
    // var obj = {};也可以
    var obj = Object.create(null);

    // 將obj.__proto__ -> 構(gòu)造函數(shù)原型
    // (不推薦)obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    // 執(zhí)行構(gòu)造函數(shù)，并接受構(gòu)造函數(shù)返回值
    const ret = Con.apply(obj, [].slice.call(arguments, 1));

    // 若構(gòu)造函數(shù)返回值為對象，直接返回該對象
    // 否則返回obj
    return typeof(ret) === 'object' ? ret: obj;}

以上就是關(guān)于“JavaScript中new的功能有哪些”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享題目：JavaScript中new的功能有哪些
瀏覽路徑：http://muchs.cn/article16/gdsjgg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)、App開發(fā)、網(wǎng)站營銷、App設(shè)計、響應(yīng)式網(wǎng)站、用戶體驗

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)