構(gòu)造函數(shù)(原型重定向)
應(yīng)用場(chǎng)景:批量給構(gòu)造函數(shù)的原型對(duì)象上擴(kuò)充屬性和方法宏浩。
問(wèn)題:重定向之后知残,原始瀏覽器開(kāi)辟的原型對(duì)象可能會(huì)被釋放掉,這樣導(dǎo)致原始原型對(duì)象上的屬性和方法會(huì)被清除(包含constructor)
針對(duì)上面的問(wèn)題有解決辦法:
- 如果我們知道原始原型對(duì)象上除了constructor沒(méi)有其余的屬性和方法比庄,我們只需要在重定向的原型對(duì)象上自己手動(dòng)設(shè)置constructor即可求妹。
- 如果我們確定或者不確定原始原型對(duì)象是否存在其余的屬性和方法,我們此時(shí)需要把原型對(duì)象上面的內(nèi)容copy一份佳窑,重新賦值給原型對(duì)象(對(duì)象合并)
- 內(nèi)置類(lèi)的原型是不允許重定向的制恍,目的保證這些內(nèi)置屬性和方法不丟失,例如:Array.prototype = {}神凑,不報(bào)錯(cuò)净神,但是沒(méi)有任何的效果嗎,雖然不允許重定向溉委,但是可以把內(nèi)置類(lèi)的原型上的某個(gè)內(nèi)置方法進(jìn)行單一的重寫(xiě)鹃唯;例如:Array.prototype.push = function() {}
代碼:
function fun() {
this.a = 0;
this.b = function () {
alert(this.a);
}
}
fun.prototype = {
b: function () {
this.a = 20;
alert(this.a);
},
c: function () {
this.a = 30;
alert(this.a)
}
}
var my_fun = new fun();
my_fun.b();
my_fun.c();
-------------------------------------------------------------------------------
// Object.assign([obj1],[obj2],...):兩個(gè)或者多個(gè)對(duì)象進(jìn)行淺合并「右側(cè)替換左側(cè)」
// 注意:并沒(méi)有返回全新的一個(gè)合并后的對(duì)象,返回的值依然是obj1這個(gè)堆瓣喊,只是把obj2中的內(nèi)容都合并到obj1中
let obj1 = {
x: 10,
y: 20,
getX: function () {}
};
let obj2 = {
x: 100,
getY: function () {}
};
// console.log(Object.assign(obj1, obj2));
console.log(Object.assign({}, obj1, obj2)); 以一個(gè)新的對(duì)象返回
image.png
內(nèi)置類(lèi)的原型上坡慌,雖然提供很多供其實(shí)例調(diào)取的屬性和方法,但是不一定能完全滿(mǎn)足我們的需求藻三,此時(shí)我們需要自己向內(nèi)置類(lèi)的原型上擴(kuò)充方法....
- 好處:使用起來(lái)方便「實(shí)例.方法」洪橘;可以實(shí)現(xiàn)鏈?zhǔn)綄?xiě)法「核心:函數(shù)執(zhí)行的返回值如果是某個(gè)類(lèi)的實(shí)例,則可以直接繼續(xù)調(diào)用這個(gè)類(lèi)原型上的其他方法」棵帽;
- 弊端:自己寫(xiě)的方法容易覆蓋內(nèi)置的方法「所以起名字最好設(shè)置前綴熄求,例如:myXxx」
例如在數(shù)組的原型上加一個(gè)去重的方法:
代碼:
/* const unique = function unique(arr) {
return Array.from(new Set(arr));
};
console.log(unique(arr)); */
Array.prototype.unique = function unique() {
// this -> arr 一般都是當(dāng)前要操作的實(shí)例「無(wú)需傳遞要處理的數(shù)組,因?yàn)閠his存儲(chǔ)的值就是」
return Array.from(new Set(this));
};
let arr = [1, 2, 3, 4, 2, 3, 4, 5, 6, 2, 3, 4, 5, 6, 7, 2, 2, 3, 4, 6, 7];
// console.log(arr.unique());
let result = arr.unique().sort((a, b) => b - a);
console.log(result);
實(shí)現(xiàn)下面的代碼:
let n = 10;
let m = n.plus(10).minus(5);
console.log(m); //=>15(10+10-5)
代碼:
// 向Number.prototyp擴(kuò)充方法
(function (proto) {
const verification = function verification(num) {
num = +num;
return isNaN(num) ? 0 : num;
};
const plus = function plus(num) {
// this -> 要操作的數(shù)字{對(duì)象類(lèi)型}
let self = this;
num = verification(num);
return self + num;
};
const minus = function minus(num) {
// this -> 要操作的數(shù)字{對(duì)象類(lèi)型}
let self = this;
num = verification(num);
return self - num;
};
proto.plus = plus;
proto.minus = minus;
})(Number.prototype);