成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

JavaScript之對象創(chuàng)建

Michael_Lin / 2481人閱讀

摘要：在構(gòu)造函數(shù)的內(nèi)部，的指向是新創(chuàng)建的對象。如果構(gòu)造函數(shù)沒有顯式的表達式，則會隱式的返回新創(chuàng)建的對象對象。原型模式在構(gòu)造函數(shù)模式中提到每次之后創(chuàng)建的新的對象是互相獨立的，是獨享的。

1.構(gòu)造函數(shù)模式

JavaScript中的構(gòu)造函數(shù)是通過new調(diào)用的，也就是說，通過new關(guān)鍵字調(diào)用的函數(shù)都被認為是構(gòu)造函數(shù)。

在構(gòu)造函數(shù)的內(nèi)部，this的指向是新創(chuàng)建的對象Object。

如果構(gòu)造函數(shù)沒有顯式的return表達式，則會隱式的返回新創(chuàng)建的對象——this對象。

function Foo () {
  this.name = "rccoder";
}

Foo.prototype.test = function () {
  console.log (this.name);
}

var bar = new Foo();

bar.name;    // rccoder
bar.test();  // rccoder

在構(gòu)造函數(shù)中，顯式的return會影響返回的值，但是僅限于返回的是 一個對象。當返回值不是一個對象的時候，實際上會返回一個新創(chuàng)建的對象；當返回值就是一個對象的時候，返回的不是新創(chuàng)建的對象，而是本身就要返回的那個對象

function Foo () {
  return 2;
}

new Foo();    // Foo {} 返回的不是2,而是新創(chuàng)建了一個對象

function Bar () {
  this.name = "rccoder";
  return {
    foo: 1
  }
}

new Bar();   // Object {foo: 1}  返回要返回的那個對象
(new Bar()).name  // undefined
(new Bar()).foo   // 1

構(gòu)造函數(shù)模式主要有以下幾個特點：

沒有顯式的返回對象

直接將屬性和方法賦值給this對象

沒有return語句

通過new關(guān)鍵字調(diào)用的函數(shù)都被認為是構(gòu)造函數(shù)。

new之后產(chǎn)生的是一個新的對象，可以在new的時候傳遞參數(shù)，并且把這個參數(shù)的值賦值給this 指針，這樣，傳遞進去的內(nèi)容，就變成了新產(chǎn)生的對象的屬性或者方法。

為了讓代碼看起來更加的“優(yōu)雅”，構(gòu)造函數(shù)的首字母都是大寫。

除此之外，用構(gòu)造函數(shù)產(chǎn)生的實例中，他的原型都會默認的包含一個constructor屬性，會指向構(gòu)造函數(shù)。這樣就能夠知道這個對象是從哪兒創(chuàng)建的，也就是說能夠區(qū)分這個對象的類型了（下面的工廠模式就無法區(qū)分對象的類型）。

function Foo () {
  this.value = 1;
}

test = new Foo ();

test.constructor  == Foo ();

當然，構(gòu)造函數(shù)也是可以直接執(zhí)行的，而不是一定要new，直接執(zhí)行的化“構(gòu)造函數(shù)”中的this指向的就不再是新產(chǎn)生的對象了（實際上這種情況下就和普通的函數(shù)一樣，并不會產(chǎn)生新的對象），往往在瀏覽器中是window.

構(gòu)造函數(shù)在每次new的時候產(chǎn)生的實例都是重新創(chuàng)建的，因此不同實例上的同名函數(shù)是不相等的。

function Foo () {
  this.test = function () {

  };
}

var a = new Foo();
var b = new Foo();

a.test === b.test    // false

所以說，構(gòu)造函數(shù)每次new都是產(chǎn)生一個新的實例，并且這個實例的屬性和方法是獨享的。這樣往往造成了一些浪費（屬性是獨有的可以理解，但是就方法而言，大多數(shù)往往是一樣的，這和我們想要的可能有點差別）。

2.工廠模式

為了不去使用new關(guān)鍵字，上面提到的構(gòu)造函數(shù)必須顯式的返回。當前這個時候就可以理解為不是構(gòu)造函數(shù)了。

function Foo () {
  var value = 1;

  return {
    method: function () {
      return value;
    }
  };

};

Foo.prototype = {
  foo: function () {

  }
};

new Foo();
Foo();

上面加不加new的返回結(jié)果是完全一樣的，都是一個新創(chuàng)建的，擁有method屬性的對象。嗯。如果對閉包有所理解的話，他返回的就是一個閉包！

需要注意的是，上面返回的是一個包含method屬性的自定義對象，所以他并不返回Foo.prototype.

(new Foo()).foo    // undefined
(Foo()).foo        // undefined

按照正常人的思路，一般選擇用new來調(diào)用函數(shù)總是顯得很奇怪，這也估計就是大多人說不要使用new關(guān)鍵字來調(diào)用函數(shù)的原因了，因為如果忘記new就會產(chǎn)生難以察覺的錯誤。

嗯，是時候引出工廠模式了：

function Foo () {
  var obj = {};
  obj.value = "rccoder";

  var privateValue = 2;

  obj.method = function (value) {
    this.value = value;
  };

  obj.getPrivate = function () {
    return privateValue;
  };
  
  return obj;
}

就像上面的代碼一樣，有個工廠，就這樣生產(chǎn)出了一個個的工人。工廠模式解決了多個比較相似的對象重復(fù)創(chuàng)建的問題。但是這個創(chuàng)建只單純的一個創(chuàng)建，但并不知道這個對象是從哪里創(chuàng)建的，也就是說無法去區(qū)分這個對象的類型。

當然還有一些其他的缺點，比如由于新創(chuàng)建的對象只是簡單的創(chuàng)建，所以不能共享原型上的方法，如果要實現(xiàn)所謂的繼承，就要從另外的一個對象去拷貝所有的屬性...嗯，他放棄了原型，為了去防止new帶來的問題。

3.原型模式

在構(gòu)造函數(shù)模式中提到每次new之后創(chuàng)建的新的對象是互相獨立的，是獨享的。

構(gòu)造函數(shù)每次new都是產(chǎn)生一個新的實例，并且這個實例的屬性和方法是獨享的。這樣往往造成了一些浪費（屬性是獨有的可以理解，但是就方法而言，大多數(shù)往往是一樣的，這和我們想要的可能有點差別）

就最后一句而言，我們或許可以這樣寫：

function Foo (value) {
  this.value = value;
  this.method = method;
}

function method () {
  console.log (this.value);
}

這樣把方法去放在外面，在構(gòu)造函數(shù)里面去調(diào)用這個函數(shù)，好像就hack的解決了上面的問題。但是這個函數(shù)好像就是全局函數(shù)了，并且和Foo()看上去并不怎么愉快的是一家人，談封裝也就有些牽強。

這種去共享方法的問題用prototype看似就可以解決，畢竟他產(chǎn)生的屬性和方法是所有產(chǎn)生的實例所共享的。

function Foo () {
  ...
};

Foo.prototype.value = "rccoder";
Foo.prototype.method = function () {
  console.log (this.value);
};

var test = new Foo ();
test.method();    // rccoder

這樣看起來好像是可行的，當需要找某個對象的屬性的時候，往往直接看有沒有這個屬性，沒有的話再按照原型鏈向上尋找，而不是去尋找構(gòu)造函數(shù)。

原型是動態(tài)的，所以不要隨便的去修改原型。這個修改后會立即影響實例的結(jié)果。

如果我們有Foo.prototype = Bar.prototype?的寫法，改變這兩個對象任何一個的原型都會影響另外一個，這在大多的情況下是不可取的。

一般情況下不建議對原型做修改，因為很可能由于代碼量太多導(dǎo)致維護太困難。

另外，還記得用原型模式的初衷嗎？是要公用方法，而不是公用屬性。純粹的用原型會同樣的公用屬性，這在很多情況下看起來是很郁悶的。所以可能需要我們把原型和構(gòu)造函數(shù)結(jié)合起來使用。

4.優(yōu)雅混合使用構(gòu)造函數(shù)與原型

這或許是比較理想話的使用方法了，用構(gòu)造函數(shù)來區(qū)分獨享的屬性，用原型來共享大家都用的方法。

function Foo (value1, value2) {
  this.value1 = value1;
  this.value2 = value2;
}

Foo.prototype.method = function () {
  console.log (this.value1)
};

test1 = new Foo (2, 3);
test1.method();  // 2

test2 = new Foo (4, 5);
test2.method()   // 4

哦，對了，你可能會看見這樣寫上面的代碼

function Foo (value1, value2) {
  this.value1 = value1;
  this.value2 = value2;
}

Foo.prototype = {
  constructor: Foo,
  method: function () {
    console.log (this.value1);
  }
}

test = new Foo (2, 3);
test.method();

別怕，這只是覆蓋了Foo的原型而已，是真的覆蓋到連constructor是誰都不認識了，所以需要手動的是想一下，指向誰呢？正常人的話指向的應(yīng)該是構(gòu)造函數(shù)吧。

參考資料：



JavaScript密碼花園


JavaScript 原型理解與創(chuàng)建對象應(yīng)用-于江水的博客

原文鏈接：http://life.rccoder.net/javascript/1216.html

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/78363.html

相關(guān)文章

  • JavaScript深入之作用域鏈

    摘要：下面，讓我們以一個函數(shù)的創(chuàng)建和激活兩個時期來講解作用域鏈是如何創(chuàng)建和變化的。這時候執(zhí)行上下文的作用域鏈，我們命名為至此，作用域鏈創(chuàng)建完畢。 JavaScript深入系列第五篇，講述作用鏈的創(chuàng)建過程，最后結(jié)合著變量對象，執(zhí)行上下文棧，讓我們一起捋一捋函數(shù)創(chuàng)建和執(zhí)行的過程中到底發(fā)生了什么？ 前言 在《JavaScript深入之執(zhí)行上下文?！分兄v到，當JavaScript代碼執(zhí)行一段可執(zhí)行代...

    waltr 評論0 收藏0

  • JavaScript深入之執(zhí)行上下文

    摘要：深入系列第七篇，結(jié)合之前所講的四篇文章，以權(quán)威指南的為例，具體講解當函數(shù)執(zhí)行的時候，執(zhí)行上下文棧變量對象作用域鏈是如何變化的。前言在深入之執(zhí)行上下文棧中講到，當代碼執(zhí)行一段可執(zhí)行代碼時，會創(chuàng)建對應(yīng)的執(zhí)行上下文。 JavaScript深入系列第七篇，結(jié)合之前所講的四篇文章，以權(quán)威指南的demo為例，具體講解當函數(shù)執(zhí)行的時候，執(zhí)行上下文棧、變量對象、作用域鏈是如何變化的。 前言 在《Jav...

    gougoujiang 評論0 收藏0

  • JavaScript之new運算符

    摘要：之運算符運算符創(chuàng)建一個用戶定義的對象類型的實例或具有構(gòu)造函數(shù)的內(nèi)置對象的實例。使用指定的參數(shù)調(diào)用構(gòu)造函數(shù)，并將綁定到新創(chuàng)建的對象。 JavaScript之new運算符 new運算符創(chuàng)建一個用戶定義的對象類型的實例或具有構(gòu)造函數(shù)的內(nèi)置對象的實例。new關(guān)鍵字會進行如下的操作： 1. 創(chuàng)建一個空的簡單JavaScript對象（即{}）； 2. 鏈接該對象（即設(shè)置該對象的構(gòu)造函數(shù)）到另一個對...

    wwq0327 評論0 收藏0

  • JavaScript深入之變量對象

    摘要：深入系列第四篇，具體講解執(zhí)行上下文中的變量對象與活動對象。下一篇文章深入之作用域鏈本文相關(guān)鏈接深入之執(zhí)行上下文棧深入系列深入系列目錄地址。 JavaScript深入系列第四篇，具體講解執(zhí)行上下文中的變量對象與活動對象。全局上下文下的變量對象是什么？函數(shù)上下文下的活動對象是如何分析和執(zhí)行的？還有兩個思考題幫你加深印象，快來看看吧！ 前言 在上篇《JavaScript深入之執(zhí)行上下文棧》中...

    Zachary 評論0 收藏0

  • JavaScript基礎(chǔ)之創(chuàng)建對象、原型、原型對象、原型鏈

    摘要：在最開始的時候，原型對象的設(shè)計主要是為了獲取對象的構(gòu)造函數(shù)。同理數(shù)組通過調(diào)用函數(shù)通過調(diào)用原型鏈中描述了原型鏈的概念，并將原型鏈作為實現(xiàn)繼承的主要方法。 對象的創(chuàng)建 在JavaScript中創(chuàng)建一個對象有三種方式。可以通過對象直接量、關(guān)鍵字new和Object.create()函數(shù)來創(chuàng)建對象。 1. 對象直接量 創(chuàng)建對象最直接的方式就是在JavaScript代碼中使用對象直接量。在ES5...

    wangbjun 評論0 收藏0

  • JavaScript深入之創(chuàng)建對象的多種方式以及優(yōu)缺點

    摘要：深入系列第十四篇，講解創(chuàng)建對象的各種方式，以及優(yōu)缺點。也就是說打著構(gòu)造函數(shù)的幌子掛羊頭賣狗肉，你看創(chuàng)建的實例使用都無法指向構(gòu)造函數(shù)這樣方法可以在特殊情況下使用。 JavaScript深入系列第十四篇，講解創(chuàng)建對象的各種方式，以及優(yōu)缺點。 寫在前面 這篇文章講解創(chuàng)建對象的各種方式，以及優(yōu)缺點。 但是注意： 這篇文章更像是筆記，因為《JavaScript高級程序設(shè)計》寫得真是太好了！ 1....

    Terry_Tai 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<