TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超9個(gè)贊
讓初學(xué)者更好地理解它
在瀏覽器控制臺(tái)中嘗試以下代碼。
function Foo() {
return this;
}
var a = Foo(); //returns window object
var b = new Foo(); //returns empty object of foo
a instanceof Window; // true
a instanceof Foo; // false
b instanceof Window; // false
b instanceof Foo; // true
現(xiàn)在你可以閱讀社區(qū)wiki的答案 :)
TA貢獻(xiàn)1810條經(jīng)驗(yàn) 獲得超4個(gè)贊
它做了5件事：
它創(chuàng)建了一個(gè)新對(duì)象。該對(duì)象的類型只是對(duì)象。
它將此新對(duì)象的內(nèi)部，不可訪問(wèn)，[[prototype]]（即__ proto__）屬性設(shè)置為構(gòu)造函數(shù)的外部可訪問(wèn)原型對(duì)象（每個(gè)函數(shù)對(duì)象自動(dòng)具有原型屬性）。
它使this變量指向新創(chuàng)建的對(duì)象。
它執(zhí)行構(gòu)造函數(shù)，只要this提到就使用新創(chuàng)建的對(duì)象。
它返回新創(chuàng)建的對(duì)象，除非構(gòu)造函數(shù)返回非null對(duì)象引用。在這種情況下，將返回該對(duì)象引用。
注意：構(gòu)造函數(shù)是指new關(guān)鍵字后面的函數(shù)，如
new ConstructorFunction(arg1, arg2)
完成此操作后，如果請(qǐng)求新對(duì)象的未定義屬性，腳本將檢查該對(duì)象的[[prototype]]對(duì)象。這就是你如何在JavaScript中獲得類似于傳統(tǒng)類繼承的東西。
關(guān)于這一點(diǎn)最困難的部分是第2點(diǎn)。每個(gè)對(duì)象（包括函數(shù)）都有一個(gè)名為[[prototype]]的內(nèi)部屬性。它只能在對(duì)象創(chuàng)建時(shí)設(shè)置，可以是new，使用Object.create，也可以是基于文字（函數(shù)默認(rèn)為Function.prototype，數(shù)字為Number.prototype等）。它只能用Object.getPrototypeOf（someObject）讀取。有沒(méi)有其他的方式來(lái)設(shè)置或讀取此值。
除了[[prototype]]屬性之外，函數(shù)還有一個(gè)名為prototype的屬性，您可以訪問(wèn)和修改這些屬性，為您創(chuàng)建的對(duì)象提供繼承的屬性和方法。
這是一個(gè)例子：
ObjMaker = function() {this.a = 'first';};
// ObjMaker is just a function, there's nothing special about it that makes
// it a constructor.
ObjMaker.prototype.b = 'second';
// like all functions, ObjMaker has an accessible prototype property that
// we can alter. I just added a property called 'b' to it. Like
// all objects, ObjMaker also has an inaccessible [[prototype]] property
// that we can't do anything with
obj1 = new ObjMaker();
// 3 things just happened.
// A new, empty object was created called obj1. At first obj1 was the same
// as {}. The [[prototype]] property of obj1 was then set to the current
// object value of the ObjMaker.prototype (if ObjMaker.prototype is later
// assigned a new object value, obj1's [[prototype]] will not change, but you
// can alter the properties of ObjMaker.prototype to add to both the
// prototype and [[prototype]]). The ObjMaker function was executed, with
// obj1 in place of this... so obj1.a was set to 'first'.
obj1.a;
// returns 'first'
obj1.b;
// obj1 doesn't have a property called 'b', so JavaScript checks
// its [[prototype]]. Its [[prototype]] is the same as ObjMaker.prototype
// ObjMaker.prototype has a property called 'b' with value 'second'
// returns 'second'
這就像類繼承一樣，因?yàn)楝F(xiàn)在，您使用的任何對(duì)象new ObjMaker()也似乎都繼承了'b'屬性。
如果你想要類似子類的東西，那么你這樣做：
SubObjMaker = function () {};
SubObjMaker.prototype = new ObjMaker(); // note: this pattern is deprecated!
// Because we used 'new', the [[prototype]] property of SubObjMaker.prototype
// is now set to the object value of ObjMaker.prototype.
// The modern way to do this is with Object.create(), which was added in ECMAScript 5:
// SubObjMaker.prototype = Object.create(ObjMaker.prototype);
SubObjMaker.prototype.c = 'third';
obj2 = new SubObjMaker();
// [[prototype]] property of obj2 is now set to SubObjMaker.prototype
// Remember that the [[prototype]] property of SubObjMaker.prototype
// is ObjMaker.prototype. So now obj2 has a prototype chain!
// obj2 ---> SubObjMaker.prototype ---> ObjMaker.prototype
obj2.c;
// returns 'third', from SubObjMaker.prototype
obj2.b;
// returns 'second', from ObjMaker.prototype
obj2.a;
// returns 'first', from SubObjMaker.prototype, because SubObjMaker.prototype
// was created with the ObjMaker function, which assigned a for us
在最終找到這個(gè)頁(yè)面之前，我讀了很多關(guān)于這個(gè)主題的垃圾，這里用漂亮的圖表很好地解釋了這個(gè)問(wèn)題。
舉報(bào)