js筆記三十四之原型鏈模式擴充套件(1)

原型鏈模式擴充套件

批次設定原型上的公有屬性

function Fn(){    this.x = 100;
}
Fn.prototype.getX = function(){
};
Fn.prototype.getY = function(){
};
Fn.prototype.getZ = function(){
};var f1 = new Fn;

1. 起一個別名

function Fn(){    this.x = 100;
}var pro = Fn.prototype; 
// 把原來原型指向的地址賦值給pro,現在它們操作的是同一個記憶體空間pro.getX = function(){
};
pro.getY = function(){
};
pro.getZ = function(){
};var f1 = new Fn;

1. 重構原型物件的方式  -> 自己新開闢一個堆記憶體,儲存我們共有的屬性和方法,把瀏覽器原來給Fn.prototype開闢的那個替換掉

function Fn(){    this.x = 100;
}
Fn.prototype = {    constructor: Fn, // 手動新增constructor
    x: function(){
        
    },    y: function(){
        
    }
};var f1 = new Fn;
f.a();
f.b();//1. 只有瀏覽器天生給Fn.prototype 開闢的堆記憶體裡面才有constructor,// 而我們自己開闢的這個堆記憶體沒有這個屬性,這樣constructor指向就不再是Fn而是Object了// 為了和原來的保持一致, 我們需要手動的增加constructor的指向console.log(f.constructor) // -> (沒做任何處理之前) Object

a. 只有瀏覽器天生給Fn.prototype 開闢的堆記憶體裡面才有constructor, 而我們自己開闢的這個堆記憶體沒有這個屬性,這樣constructor指向就不再是Fn而是Object了
為了和原來的保持一致, 我們需要手動的增加constructor的指向

function Fn(){    this.x = 100;
}
Fn.prototype = {    constructor: Fn, // 手動新增constructor
    y: function(){
        
    },    z: function(){
        
    }
};var f1 = new Fn;
f1.y();
f1.z();console.log(f1.constructor) // ->Fn(){ this.x = 100; }

b. 用這種方式給內建類增加公有的屬性
給內建類Array增加陣列去重的方法

Array.prototype = {    constructor: Array,    unique: function(){
        
    }
}

這種方式會把之前已經存在於原型上的屬性和方法給替換掉, 所以用這種凡是修改內建類的話,瀏覽器是會遮蔽掉的

var ary = [1,2,2,1,2,3,4,2,1,3];
ary.sort();console.log(ary); // -> [1, 1, 1, 2, 2, 2, 2, 3, 3, 4]

但是可以一個個的修改內建的方法,當我們透過下述方式在陣列的原型上增加方法,如果方法名和原來內建的重複了,會把人家內建的修改掉 -> 以後在內建類的原型上增加方法,命名都需要加特殊的字首;

Array.prototype.sort = function(){    console.log(this) // this -> ary 當前要操作的這個陣列  
    // [1,2,2,1,2,3,4,2,1,3]}var ary = [1,2,2,1,2,3,4,2,1,3];
ary.sort();console.log(ary); // -> [1,2,2,1,2,3,4,2,1,3]

作者：uplyw
連結：