myFunc.prototype與新myFunc（）。原型之間的區別

Question

function myFunction() {};
myFunction.prototype.foo = "bar";

var myFuncInstance = new myFunction();

console.log('myFunction.foo:   '        + myFunction.foo); // Prints undefined
console.log('myFuncInstance.foo:   '    + myFuncInstance.foo); // Prints bar

為什么myFunction.foo在這里打印undefined ？ 我已經將屬性foo設置為myFunction.prototype.foo = "bar" 。

Answer 1

在這種情況下， myFunc不是對象，它表示對象的類 。 這意味着您可以使用new關鍵字創建與該類prototype具有相同屬性的對象。 這並不意味着您在函數本身上獲得了一系列新屬性。

按照你的例子，這將工作：

function myFunction() {};
myFunction.prototype.foo = "bar";

var myFuncInstance = new myFunction();

console.log('myFunction.prototype.foo: '  + myFunction.prototype.foo);
console.log('myFuncInstance.foo: '        + myFuncInstance.foo);

Answer 2

當你將一些變量聲明到對象的prototype中時，你將值附加到該對象的任何實例，因此定義到prototype的值將可以通過實例訪問，因此當調用myFunction.foo你正在嘗試調用.foo變量as一個靜態變量，因為myFunction是構造函數而不是該構造函數的實例，當你調用myFuncInstance.foo myFuncInstance已經是一個實例，所以你可以訪問.foo變量，因為它被定義為'protototype'。

那么你何時真的需要訪問這個myFunction.foo你應該將它定義為

function myFunction() {};
myFunction.foo = 'static bar'; // it can be accessed without instance

所以當你調用myFunctionInstance.foo ，你應該定義如下

function myFunction() {};
myFunction.prototype.foo = 'instance bar'; // it can be accessed with instance
var myFunctionInstance = new myFunction();
myFunctionInstance.foo; // will print 'instance bar'

Answer 3

眾所周知，JavaScript 對象從原型 繼承 屬性和方法 。

在第二個log您有一個正確的實例( Prototype Inheritance )並且在第一個日志中，您正在訪問function property而沒有任何實例（直接使用函數名稱）。

您將需要一個實例(myFuncInstance)來訪問該屬性而不是function本身。

Answer 4

當你使用時，每個對象都有一個原型. 獲得一個對象的屬性。 首先，它會找到自身的屬性，如果沒有得到目標屬性，它會找到它的原型屬性，如果仍然沒有得到目標屬性，它將繼續查找其proertype屬性的屬性。 在這之后，這個案子變得容易了。

在使用new ，你會得到一個實例myFuncInstance ，當使用myFuncInstance.foo ，beacause本身沒有一個名為foo的屬性，它將從它的構造函數myFunction的原型中獲取屬性foo 。

但是，當使用myFunction.foo ， myFunction alse沒有一個屬性調用foo ，它會找到它的原型Function.prototype ，它也找不到foo ，所以找到Function.prototype的原型Object.prototype ，它仍然可以找不到，所以找到Object.prototype的原型null ，所有的原型鏈都找不到foo ，所以它是undefined 。