js_面向對象設計和行爲委託設計模式

最近換了新工做，面試過程當中有多多少少的問題沒有給的出答案，爲本身的技術短板而促急。

javascript中萬物皆對象（鍵：值構成的一種數據），暫且不討論這個句話的對與錯，能夠想象對象在javascript中的重要性，而面向對象的設計模式更是走向高級前段開發的必需要技能。

 

---

建立對象的三種方式

字面量建立對象

1 //1.建立一個空對象
2 var obj = {};
3 
4 //2.obj對象添加屬性
5 obj.name = 'obj';
6 //3.obj對象添加方法
7 obj.toString = function(str){
8     return str;
9 }

new + 構造函數建立對象

 1 //1.建立Base構造函數
 2 function Base(){
 3     console.log(888)
 4 }
 5 
 6 //2.使用new+Base()建立obj對象
 7 var obj = new Base();
 8 /*new具體作了下面三件事情
 9 var obj = {};
10 obj.__proto__ = Base.prototype;
11 Base.call(obj);
12 return obj;
13 第一行， 咱們建立了一個空對象obj
14 第二行， 咱們將這個空對象的__proto__成員指向了Base函數對象prototype成員對象
15 第三行， 咱們將Base函數對象的this指針替換成obj， 而後再調用Base函數， 因而咱們就給obj
16 對象賦值了一個id成員變量， 這個成員變量的值是」 base」， 關於call函數的用法。
17 第四行，返回新的對象。
18 * */
19 
20 //3.給obj對象添加原型方法，注意這裏不是obj.prototype，而是Base.prototype。
21 Base.prototype.toString = function(){
22     return this.id;
23 }
24 
25 console.log(obj);

行爲委託模式建立對象（Object.create()）

 1 //1.建立一個行爲對象foo
 2 foo = {
 3     init: function(who) {
 4         console.log(9999)
 5     },
 6     indentify: function() {
 7         console.log(8888)
 8     }
 9 };
10 //2.bar行爲對象繼承foo行爲對象（把foo行爲對象委託給bar行爲對象）
11 bar = Object.create(foo);
12 
13 //3.b1和b2繼承bar行爲對象（把bar行爲對象委託給b1和b2行爲對象）
14 var b1 = Object.create(bar);
15 var b2 = Object.create(bar);
16 
17 
18 //上面的行爲委託都是經過原型鏈的形式進行委託。
19 console.log(foo);
20 console.log(bar);
21 console.log(b1);