JavaScript的設計模式(一)-構造器模式

構造器模式

在面向對象編程中,構造器是一個當新建對象的內存被分配後,用來初始化該對象的一個特殊函數。在JavaScript中幾乎所有的東西都是對象,我們經常會對對象的構造器十分感興趣。

對象構造器是被用來創建特殊類型的對象的,首先它要準備使用的對象,其次在對象初次被創建時,通過接收參數,構造器要用來對成員的屬性和方法進行賦值。

1.對象創建

/* 創建對象的方法 */
let newObject = {};
// or
let twoObject = Object.create(null);
// or
let threeObject = new Object();

console.log(newObject); //{}
console.log(twoObject); //[Object: null prototype] {}
console.log(threeObject); //{}

2.對象值的設置

/**
 * 對象的賦值
 *  */ 
// 1. 點語法
newObject.test = '我是設置的key';
// 2.方括號語法
newObject['name'] = '我是方括號設置的';
// 3. defineProperty對象設置方法
// 3.1 單屬性的設置
Object.defineProperty(newObject,'define',{
    value : '我是方法設置的',
    writable : true, //是否可以重新定義屬性
    enumerable : true, //是否能被檢舉出來  比如循環的時候能不能拿到這個值
    configurable : true, //是否可以刪除該屬性
});
// 3.2 多屬性的設置
Object.defineProperties(newObject,{
    "one" : {
        value : '我的多屬性的一',
        writable : true,
        configurable : true,
        enumerable : true,
    },
    "two" : {
        value : '我的多屬性的一',
        writable : true,
        configurable : true,
        enumerable : true,
    },

})
/* 
{ test: '我是設置的key',
  name: '我是方括號設置的',
  define: '我是方法設置的',
  one: '我的多屬性的一',
  two: '我的多屬性的一' }
*/
console.log(newObject); 

3.對象的獲取

/**
 * 對象的獲取
 */
let obj = {};
// 1. 點語法
obj.test = '我是設置的key';
console.log(obj.test); //我是設置的key
// 2.方括號語法
obj['name'] = '我是方括號設置的';
console.log(obj['name']); //我是方括號設置的

 4.對象創建類

4.1 構造函數

// 在es6以前  JS是沒有類這個概念的 是通過構造函數 + new 來創建一個類似類的對象
// 關鍵字this引用到剛被創建的對象
// 一般類的創建首字母都是大寫的
function People(name) {
  this.name = name;
  this.say = function () {
    return this.name + "說了話";
  };
}
let jack = new People("jack"),
    tom = new People("Tom");
console.log(jack.say()); //jack說了話
console.log(tom.say()); // Tom說了話

4.2 構造函數改進

/* 
上述的創建對象有幾個弊端
一是難以繼承,
二是每個People構造函數創建的對象中,say()之類的函數都被重新定義,
理想的情況是所有People類型的對象都應該引用同一個函數。 通過原型鏈的形式  因爲JS對象都有屬於自己的原型鏈
*/
function People_1(name) {
    this.name = name;
    
};
People_1.prototype.say = function(){
    return this.name + "說了什麼話";
}
let jack = new People_1("jack"),
    tom = new People_1("Tom");
console.log(jack.say()); //jack說了什麼話
console.log(tom.say()); // Tom說了什麼話
/* 
這樣創建的話  這個say方法就能被所有繼承於 People_1的類所共享使用
*/

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章