JS原型鏈怎么理解
在談原型鏈之前,我們首先要了解自定義函數(shù)與 Function 之間是什么關(guān)系,而構(gòu)造函數(shù)、原型和實(shí)例之間又存在什么千絲萬縷的關(guān)系呢?其實(shí),所有的函數(shù)都是 Function 的實(shí)例。在構(gòu)造函數(shù)上都有一個(gè)原型屬性 prototype,該屬性也是一個(gè)對象;那么在原型對象上有一個(gè) constructor 屬性,該屬性指向的就是構(gòu)造函數(shù);而實(shí)例對象上有一個(gè) _proto_ 屬性,該屬性也指向原型對象,并且該屬性不是標(biāo)準(zhǔn)屬性,不可以用在編程中,該屬性用于瀏覽器內(nèi)部使用。
// _proto_ 在函數(shù)里有一個(gè)屬性prototype 由該函數(shù)創(chuàng)建的對象默認(rèn)會(huì)連接到該屬性上 //prototype 與 _proto_ 的關(guān)系 _proto_是站在對象角度來說的 prototype 是站在構(gòu)造函數(shù)角度來說的
下面,我們來看圖說話。
1、構(gòu)造函數(shù)、原型和實(shí)例之間的關(guān)系
①+Object
②+Function+Object+Array
了解這些之后,我們再來討論什么是原型鏈。說白了,其實(shí)就是有限的實(shí)例對象和原型之間組成有限鏈,就是用來實(shí)現(xiàn)共享屬性和繼承的。下面,我們看代碼說話。
var obj = new Object(); 對象是有原型對象的 原型對象也有原型對象 obj._proto_._proto_._proto_ 原型對象也有原型對象,對象的原型對象一直往上找,會(huì)找到一個(gè)null // 原型鏈?zhǔn)纠? var arr = []; arr -> Array.prototype ->Object.prototype -> null var o = new Object(); o -> Object.prototype -> null; function Foo1(){ this.name1 = '1'; } function Foo2(){ this.name2 = '2'; } Foo2.prototype = new Foo1(); function Foo3(){ this.name = '3'; } Foo3.prototype = new Foo2(); var foo3 = new Foo3(); console.dir(foo3);
接下來就是繼承問題了。
2、繼承
1)原型繼承
function Animal(name){ this.name = name; } function Tiger(color){ this.color = color; } // var tiger = new Tiger('yellow'); // console.log(tiger.color); // console.log(tiger.name); //undefined // Tiger.prototype = new Animal('老虎'); //一種方式 Object.prototype.name = '大老虎'; //第二種方式 var tiger = new Tiger('yellow'); console.log(tiger.color); console.log(tiger.name);
值得注意的是,這里存在兩個(gè)主要的問題:①它不方便給父級類型傳遞參數(shù);②父級類型當(dāng)中的引用類型被所有的實(shí)例共享
2)ES5 提供了Object.create() 方法來實(shí)現(xiàn)繼承
————做兼容 //shim墊片 function create(obj){ if(Object.create){ return Object.create(obj); }else{ function Foo(){} Foo.prototype = obj; return new Foo(); } }
這種方法是ES5的新特性,其實(shí)就是復(fù)制繼承。
3)拷貝繼承
var obj = {}; obj.extend = function(obj){ for(var k in obj){ this[k] = obj[k]; } }
4)借用構(gòu)造函數(shù)繼承——被借用的構(gòu)造函數(shù)中原型上的成員沒有被借過來
function Animal(name){ this.name = name; } function Mouse(nickname){ Animal.call(this,'老鼠'); this.nickname = nickname; } var m = new Mouse('杰瑞'); console.log(m.name); console.log(m.nickname);
存在的問題:可以解決原型繼承當(dāng)中傳參問題,但是父類型當(dāng)中的原型對象上的成員(屬性和方法)不能被繼承到
5)組合繼承——prototype對象是有動(dòng)態(tài)性的
function Person(name){ this.name = name; } Person.prototype.showName = function(){ console.log(this.name); } function Student(name,age){ Person.call(this,name); this.age = age; } Student.prototype = new Person(); Student.prototype.contructor = Student; Student.prototype.showAge = function(){ console.log(this.age); } var stu = new Student('張三',12); stu.showName(); stu.showAge();
【原型繼承+借用構(gòu)造函數(shù)繼承】它的特點(diǎn)就是屬性每個(gè)實(shí)例一份,方法共享
【小結(jié)】套用一句很粗暴的話,所謂原型鏈就是找媽的一種行為方式,就可以理解為人是人他媽生的,妖是妖他媽生的。原型鏈的核心其實(shí)就只有一個(gè):屬性共享和獨(dú)立的控制,當(dāng)你的對象實(shí)例需要獨(dú)立的屬性,所有做法的本質(zhì)都是在對象實(shí)例里面創(chuàng)建屬性。若不考慮太多,你大可以在Person里面直接定義你所需要獨(dú)立的屬性來覆蓋掉原型的屬性??傊?,使用原型繼承的時(shí)候,要對于原型中的屬性要特別注意,因?yàn)樗麄兌际菭恳话l(fā)而動(dòng)全身的存在?,F(xiàn)在最常用的方法是組合模式。
1、原型鏈
1)構(gòu)造函數(shù)、原型和實(shí)例的關(guān)系
①構(gòu)造函數(shù)都有一個(gè)屬性prototype,這個(gè)屬性是一個(gè)對象(Object的實(shí)例) ②原型對象prototype里面有一個(gè)constructor屬性,該屬性指向原型對象所屬的構(gòu)造函數(shù) ③實(shí)例對象都有一個(gè)_proto_屬性,該屬性也指向構(gòu)造函數(shù)的原型對象,它是一個(gè)非標(biāo)準(zhǔn)屬性,不可以用于編程,它是用于瀏覽器自己使用的2)prototype與_proto_的關(guān)系
①prototype是構(gòu)造函數(shù)的屬性
②_proto_是實(shí)例對象的屬性
——這兩者都指向同一個(gè)對象
【總結(jié)】i)函數(shù)也是對象,對象不一定是函數(shù);
ii)對象的本質(zhì):無序的鍵值對集合;鍵值對當(dāng)中的值可以是任意數(shù)據(jù)類型的值
iii)對象就是一個(gè)容器,這個(gè)容器當(dāng)中放的是(屬性和方法)
3)屬性搜索
?、僭谠L問對象的某個(gè)成員的時(shí)候會(huì)先在對象中找是否存在
?、谌绻?dāng)前對象中沒有就在構(gòu)造函數(shù)的原型對象中找
③如果原型對象中沒有找到就到原型對象的原型上找
?、苤繭bject的原型對象的原型是null為止
2、Function
——所有函數(shù)都是Function的實(shí)例
①本地對象:獨(dú)立于宿主環(huán)境(瀏覽器)的對象——包括Object、Array、Date、RegExp、Function、Error、Number、String、Boolean
②內(nèi)置對象——包括Math、Global(window,在js中就是全局變量),使用的時(shí)候不需要new
③宿主對象——包括自定義對象、DOM、BOM
以上所述是小編給大家介紹的JS原型鏈怎么理解的全部敘述,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
javascript框架設(shè)計(jì)讀書筆記之字符串的擴(kuò)展和修復(fù)
本文是司徒正美的《javascript框架設(shè)計(jì)》的第三章第一節(jié)的讀書筆記,簡單介紹了javascript字符串的擴(kuò)展和修復(fù),小伙伴們參考下吧2014-12-12Javascript中JSON數(shù)據(jù)分組優(yōu)化實(shí)踐及JS操作JSON總結(jié)
這篇文章主要介紹了Javascript中JSON數(shù)據(jù)分組優(yōu)化實(shí)踐,文中還對JS操作JSON的要領(lǐng)做了總結(jié),需要的朋友可以參考下2017-12-12javaScript 實(shí)現(xiàn)重復(fù)輸出給定的字符串的常用方法小結(jié)
這篇文章主要介紹了javaScript 實(shí)現(xiàn)重復(fù)輸出給定的字符串的常用方法,總結(jié)分析了JavaScript重復(fù)輸出給定字符串的4種常見操作技巧,需要的朋友可以參考下2020-02-02利用JavaScript實(shí)現(xiàn)防抖節(jié)流函數(shù)的示例代碼
在開發(fā)中我們經(jīng)常會(huì)遇到一些高頻操作,比如:鼠標(biāo)移動(dòng),滑動(dòng)窗口,鍵盤輸入等等,節(jié)流和防抖就是對此類事件進(jìn)行優(yōu)化,降低觸發(fā)的頻率,以達(dá)到提高性能的目的。本文就教大家如何實(shí)現(xiàn)一個(gè)讓面試官拍大腿的防抖節(jié)流函數(shù),需要的可以參考一下2022-08-08