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

原型鏈模式擴展

批量設(shè)置原型上的公有屬性
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,現(xiàn)在它們操作的是同一個內(nèi)存空間
pro.getX = function(){
};
pro.getY = function(){
};
pro.getZ = function(){
};
var f1 = new Fn;
  1. 重構(gòu)原型對象的方式 -> 自己新開辟一個堆內(nèi)存,存儲我們共有的屬性和方法,把瀏覽器原來給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 開辟的堆內(nèi)存里面才有constructor,
// 而我們自己開辟的這個堆內(nèi)存沒有這個屬性,這樣constructor指向就不再是Fn而是Object了

// 為了和原來的保持一致, 我們需要手動的增加constructor的指向

console.log(f.constructor) // -> (沒做任何處理之前) Object

a. 只有瀏覽器天生給Fn.prototype 開辟的堆內(nèi)存里面才有constructor, 而我們自己開辟的這個堆內(nèi)存沒有這個屬性,這樣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. 用這種方式給內(nèi)置類增加公有的屬性
給內(nèi)置類Array增加數(shù)組去重的方法

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

這種方式會把之前已經(jīng)存在于原型上的屬性和方法給替換掉, 所以用這種凡是修改內(nèi)置類的話,瀏覽器是會屏蔽掉的

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]

但是可以一個個的修改內(nèi)置的方法,當我們通過下述方式在數(shù)組的原型上增加方法,如果方法名和原來內(nèi)置的重復(fù)了,會把人家內(nèi)置的修改掉 -> 以后在內(nèi)置類的原型上增加方法,命名都需要加特殊的前綴;

Array.prototype.sort = function(){
    console.log(this) // this -> ary 當前要操作的這個數(shù)組  
    // [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]
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 一、原型基礎(chǔ) 在之前的文章:《JavaScript創(chuàng)建對象之單例、工廠、構(gòu)造函數(shù)模式》中詳細介紹了構(gòu)造函數(shù)模式創(chuàng)建...
    iceman_dev閱讀 1,537評論 0 8
  • 第3章 基本概念 3.1 語法 3.2 關(guān)鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡單數(shù)據(jù)類型:Unde...
    RickCole閱讀 5,502評論 0 21
  • 批量設(shè)置原型上的公有屬性和方法: 1、起一個別名(簡單): var pro=Fn.prototype;把原來原型指...
    gaoqizhuhui閱讀 344評論 0 0
  • 一切皆對象 js中的一個常見運算符 typeof 以上代碼列出了 typeof 輸出的集中類型標識, 其中上面的四...
    無跡落花閱讀 2,092評論 0 5
  • 大約二十多年前,那會兒我還在讀高中,把友情看得一等一的重要,我對友情的理解就是,一切為了朋友,為了朋友的一切。我是...
    紙間有煙火閱讀 204評論 0 3

友情鏈接更多精彩內(nèi)容