JS學習筆記:函數原型、原型鏈、構造函數

function foo() {    
    this.name = 'andy'  ;  
    let vvv = 'vvvvvvvvvvv' ;   
    foo.watermelon = '西瓜'  ; 
    foo.prototype.sex = 'GG' ;   
}    
foo.banana = '香蕉'  ; 
foo.prototype.test = 'test' ; 
let foo1 = new foo(); // `foo1`;上有哪些屬性,這些屬性分別掛載在哪個地方 ？   
foo.prototype.test = 'test2'; // 重新賦值

思考之後再看解釋：

思考之後再看解釋：

思考之後再看解釋：

思考之後再看解釋：

思考之後再看解釋：

思考之後再看解釋：

思考之後再看解釋：

思考之後再看解釋：

思考之後再看解釋：

function foo() {    
    this.name = 'andy'    //foo對象本身的屬性
    let vvv = 'vvvvvvvvvvv'    //foo對象體的變量而已，跟foo沒啥關係
    foo.watermelon = '西瓜'    //此方式是設置爲foo的靜態屬性，只能通過foo.obkoro1 調用，跟foo的實例沒關係
    foo.prototype.sex = 'GG'    //設置foo原型屬性，其掛載在原型對象上即：foo.prototype對象上(foo.prototype是個對象，每個函數都有)
}    
foo.banana = '香蕉'    //也是聲明靜態屬性，必須按foo.banana 才能調用，用實例是訪問不到的
foo.prototype.test = 'test'    //設置原型對象屬性
let foo1 = new foo() // `foo1`上有哪些屬性,這些屬性分別掛載在哪個地方 ？   
foo.prototype.test = 'test2' // 重新賦值

答案：

console.log(foo1);//輸出以下：

========= 輸出結果 ========

1. foo {name: "andy"}
   1. name: "andy"  //普通屬性
   2. __proto__: Object  //原型對象

========= 輸出結果 ========

用鼠標點開 __proto__ 可以發現 ：

1. sex: "GG"
2. test: "test2"

 

console.log(foo.banana);//輸出 香蕉 證明是靜態屬性
console.log(foo.watermelon);//輸出 西瓜 證明是靜態屬性

foo1 只有一個屬性：name=andy

foo1 的原型對象上有 sex=GG  和 test=test 原型對象屬性

而banana 和 watermelon 在foo的靜態對象上，foo1和其原型對象上是沒有的。

end......