成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

構(gòu)造函數(shù)內(nèi)的方法與構(gòu)造函數(shù)prototype屬性上方法的對比

Eidesen / 2577人閱讀

摘要：挺有用的一篇文章，今天還有人在問我關(guān)于構(gòu)造函數(shù)的方法和原型，構(gòu)造函數(shù)的方法是定義在函數(shù)內(nèi)容，作為一個私有方法，不對外開放，而則可以通過對象定義，在外面訪問，更加深入請看本文。

挺有用的一篇文章，今天還有人在問我關(guān)于構(gòu)造函數(shù)的方法和原型，構(gòu)造函數(shù)的方法是定義在函數(shù)內(nèi)容，作為一個私有方法，不對外開放，而prototype則可以通過對象定義，在外面訪問，更加深入請看本文。

本文的目的是讓大家理解什么情況下把函數(shù)的方法寫在JavaScript的構(gòu)造函數(shù)上,什么時候把方法寫在函數(shù)的prototype屬性上;以及這樣做的好處.

為了閱讀方便,我們約定一下:把方法寫在構(gòu)造函數(shù)內(nèi)的情況我們簡稱為函數(shù)內(nèi)方法,把方法寫在prototype屬性上的情況我們簡稱為prototype上的方法

首先我們先了解一下這篇文章的重點:

函數(shù)內(nèi)的方法:
使用函數(shù)內(nèi)的方法我們可以訪問到函數(shù)內(nèi)部的私有變量,如果我們通過構(gòu)造函數(shù)new出來的對象需要我們操作構(gòu)造函數(shù)內(nèi)部的私有變量的話,
我們這個時候就要考慮使用函數(shù)內(nèi)的方法.

prototype上的方法:
當(dāng)我們需要通過一個函數(shù)創(chuàng)建大量的對象,并且這些對象還都有許多的方法的時候;這時我們就要考慮在函數(shù)的prototype上添加這些方法.
這種情況下我們代碼的內(nèi)存占用就比較小.

在實際的應(yīng)用中,這兩種方法往往是結(jié)合使用的;所以我們要首先了解我們需要的是什么,然后再去選擇如何使用.

我們還是根據(jù)下面的代碼來說明一下這些要點吧,下面是代碼部分:

// 構(gòu)造函數(shù)A
function A(name) {
    this.name = name || "a";
    this.sayHello = function() {
        console.log("Hello, my name is: " + this.name);
    }
}

// 構(gòu)造函數(shù)B
function B(name) {
    this.name = name || "b";
}
B.prototype.sayHello = function() {
    console.log("Hello, my name is: " + this.name);
};

var a1 = new A("a1");
var a2 = new A("a2");
a1.sayHello();
a2.sayHello();

var b1 = new B("b1");
var b2 = new B("b2");
b1.sayHello();
b2.sayHello();

我們首先寫了兩個構(gòu)造函數(shù),第一個是A,這個構(gòu)造函數(shù)里面包含了一個方法sayHello;第二個是構(gòu)造函數(shù)B, 我們把那個方法sayHello寫在了構(gòu)造函數(shù)B的prototype屬性上面.

需要指出的是,通過這兩個構(gòu)造函數(shù)new出來的對象具有一樣的屬性和方法,但是它們的區(qū)別我們可以通過下面的一個圖來說明:

我們通過使用構(gòu)造函數(shù)A創(chuàng)建了兩個對象,分別是a1,a2;通過構(gòu)造函數(shù)B創(chuàng)建了兩個對象b1,b2;我們可以發(fā)現(xiàn)b1,b2這兩個對象的那個sayHello方法 都是指向了它們的構(gòu)造函數(shù)的prototype屬性的sayHello方法.而a1,a2都是在自己內(nèi)部定義了這個方法.

定義在構(gòu)造函數(shù)內(nèi)部的方法,會在它的每一個實例上都克隆這個方法;定義在構(gòu)造函數(shù)的prototype屬性上的方法會讓它的所有示例都共享這個方法,但是不會在每個實例的內(nèi)部重新定義這個方法. 如果我們的應(yīng)用需要創(chuàng)建很多新的對象,并且這些對象還有許多的方法,為了節(jié)省內(nèi)存,我們建議把這些方法都定義在構(gòu)造函數(shù)的prototype屬性上

當(dāng)然,在某些情況下,我們需要將某些方法定義在構(gòu)造函數(shù)中,這種情況一般是因為我們需要訪問構(gòu)造函數(shù)內(nèi)部的私有變量.

下面我們舉一個兩者結(jié)合的例子,代碼如下:

function Person(name, family) {
    this.name = name;
    this.family = family;

    var records = [{type: "in", amount: 0}];

    this.addTransaction = function(trans) {
        if(trans.hasOwnProperty("type") && trans.hasOwnProperty("amount")) {
           records.push(trans);
        }
    }

    this.balance = function() {
       var total = 0;

       records.forEach(function(record) {
           if(record.type === "in") {
             total += record.amount;
           }
           else {
             total -= record.amount;
           }
       });

        return total;
    };
};

Person.prototype.getFull = function() {
    return this.name + " " + this.family;
};

Person.prototype.getProfile = function() {
     return this.getFull() + ", total balance: " + this.balance();
};

在上面的代碼中,我們定義了一個Person構(gòu)造函數(shù);這個函數(shù)有一個內(nèi)部的私有變量records,這個變量我們是不希望通過函數(shù)內(nèi)部以外的方法 去操作這個變量,所以我們把操作這個變量的方法都寫在了函數(shù)的內(nèi)部.而把一些可以公開的方法寫在了Person的prototype屬性上,比如方法getFull和getProfile.

把方法寫在構(gòu)造函數(shù)的內(nèi)部,增加了通過構(gòu)造函數(shù)初始化一個對象的成本,把方法寫在prototype屬性上就有效的減少了這種成本. 你也許會覺得,調(diào)用對象上的方法要比調(diào)用它的原型鏈上的方法快得多,其實并不是這樣的,如果你的那個對象上面不是有很多的原型的話,它們的速度其實是差不多的

另外,需要注意的一些地方:

首先如果是在函數(shù)的prototype屬性上定義方法的話,要牢記一點,如果你改變某個方法,那么由這個構(gòu)造函數(shù)產(chǎn)生的所有對象的那個方法都會被改變.

還有一點就是變量提升的問題,我們可以稍微的看一下下面的代碼:

func1(); // 這里會報錯,因為在函數(shù)執(zhí)行的時候,func1還沒有被賦值. error: func1 is not a function
var func1 = function() {
   console.log("func1");
};

func2(); // 這個會被正確執(zhí)行,因為函數(shù)的聲明會被提升.
function func2() {
   console.log("func2");
}

關(guān)于對象序列化的問題.定義在函數(shù)的prototype上的屬性不會被序列化,可以看下面的代碼:

function A(name) {
   this.name = name;
}
A.prototype.sayWhat = "say what...";

var a = new A("dreamapple");
console.log(JSON.stringify(a));

我們可以看到輸出結(jié)果是{"name":"dreamapple"}

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/102050.html

相關(guān)文章

  • JS構(gòu)造函數(shù)內(nèi)的方法與構(gòu)造函數(shù)prototype屬性上方法的對比

    摘要：本文的目的是讓大家理解什么情況下把函數(shù)的方法寫在的構(gòu)造函數(shù)上什么時候把方法寫在函數(shù)的屬性上以及這樣做的好處為了閱讀方便我們約定一下把方法寫在構(gòu)造函數(shù)內(nèi)的情況我們簡稱為函數(shù)內(nèi)方法把方法寫在屬性上的情況我們簡稱為上的方法首先我們先了解一下這篇文 本文的目的是讓大家理解什么情況下把函數(shù)的方法寫在JavaScript的構(gòu)造函數(shù)上,什么時候把方法寫在函數(shù)的prototype屬性上;以及這樣做的好...

    SmallBoyO 評論0 收藏0

  • 復(fù)習(xí)筆記（新手向） - JS對象聲明的幾種方式

    摘要：二用操作符構(gòu)造對象屬性名屬性值屬性名屬性值屬性名屬性值屬性名屬性值方法名方法名首先用創(chuàng)建一個空對象，然后用多條語句給對象添加屬性方法。他的寫法與三用函數(shù)聲明的方式構(gòu)造對象比較像，但是稍有不同。 -- 新手向知識，就不用ES6寫法了。 一、字面量聲明 var obj = { 屬性名1 : 屬性值, 屬性名2 : 屬性值, 屬性名3 : 屬性...

    davidac 評論0 收藏0

  • JavaScript繼承理解：ES5繼承方式+ES6Class繼承對比

    摘要：寄生組合式繼承的繼承方式有多種主要有原型鏈繼承借用構(gòu)造函數(shù)組合式繼承寄生式繼承和寄生組合式繼承。中利用定義類，實現(xiàn)類的繼承子類里調(diào)用父類構(gòu)造函數(shù)實現(xiàn)實例屬性和方法的繼承子類原型繼承父類原型，實現(xiàn)原型對象上方法的繼承。 JavaScript中實現(xiàn)繼承 ??在JavaScript中實現(xiàn)繼承主要實現(xiàn)以下兩方面的屬性和方法的繼承，這兩方面相互互補(bǔ)，既有共享的屬性和方法，又有特有的屬性和方法。 ...

    liaoyg8023 評論0 收藏0

  • 淺談 JS 創(chuàng)建對象的 8 種模式

    摘要：模式工廠模式構(gòu)造器模式通過對象實現(xiàn)模式構(gòu)造器與原型方式的混合模式動態(tài)原型模式混合工廠模式模式字面量的表現(xiàn)形式等價于即以對象為一個原型模板新建一個以這個原型模板為原型的對象區(qū)別創(chuàng)建一個原型為的對象在里查看各個新建對象的區(qū)別可以看出前種模式創(chuàng)建 Objct 模式 工廠模式 構(gòu)造器模式 通過 Function 對象實現(xiàn) prototype 模式 構(gòu)造器與原型方式的混合模式 動態(tài)原型模式 混...

    caoym 評論0 收藏0

  • Class：向傳統(tǒng)類模式轉(zhuǎn)變的構(gòu)造函數(shù)

    摘要：所以的類等同于構(gòu)造函數(shù)。只能存在于子類的構(gòu)造方法中，這時它指代父類構(gòu)造函數(shù)。指代父類的構(gòu)造函數(shù)此時指向，打印出。改變了構(gòu)造函數(shù)的行為，一旦發(fā)現(xiàn)其不是通過這種形式調(diào)用的，構(gòu)造函數(shù)會忽略傳入的參數(shù)。 前言 JS基于原型的‘類’，一直被轉(zhuǎn)行前端的碼僚們大呼驚奇，但接近傳統(tǒng)模式使用class關(guān)鍵字定義的出現(xiàn)，卻使得一些前端同行深感遺憾而紛紛留言：還我獨特的JS、凈搞些沒實質(zhì)的東西、自己沒有類還...

    jone5679 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<