本篇內(nèi)容主要講解“怎么理解JS原型、原型鏈、對象”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實(shí)用性強(qiáng)。下面就讓小編來帶大家學(xué)習(xí)“怎么理解JS原型、原型鏈、對象”吧!
我們提供的服務(wù)有:成都網(wǎng)站設(shè)計、成都網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、金臺ssl等。為上千企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù),是有科學(xué)管理、有技術(shù)的金臺網(wǎng)站制作公司
一. 普通對象與函數(shù)對象
JavaScript 中,萬物皆對象!但對象也是有區(qū)別的。分為普通對象和函數(shù)對象,Object 、Function 是 JS 自帶的函數(shù)對象。下面舉例說明:
var o1 = {}; var o2 =new Object(); var o3 = new f1(); function f1(){}; var f2 = function(){}; var f3 = new Function('str','console.log(str)'); console.log(typeof Object); //function console.log(typeof Function); //function console.log(typeof f1); //function console.log(typeof f2); //function console.log(typeof f3); //function console.log(typeof o1); //object console.log(typeof o2); //object console.log(typeof o3); //object
在上面的例子中 o1 o2 o3 為普通對象,f1 f2 f3 為函數(shù)對象。
怎么區(qū)分,其實(shí)很簡單,凡是通過 new Function() 創(chuàng)建的對象都是函數(shù)對象,其他的都是普通對象。
f1,f2,歸根結(jié)底都是通過 new Function()的方式進(jìn)行創(chuàng)建的。
Function Object 也都是通過 New Function()創(chuàng)建的。
二. 構(gòu)造函數(shù)
我們先復(fù)習(xí)一下構(gòu)造函數(shù)的知識:
function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function() { alert(this.name) } } var person1 = new Person('Zaxlct', 28, 'Software Engineer'); var person2 = new Person('Mick', 23, 'Doctor');
上面的例子中 person1 和 person2 都是 Person 的實(shí)例。這兩個實(shí)例都有一個 constructor (構(gòu)造函數(shù))屬性,該屬性(是一個指針)指向 Person。 即:
console.log(person1.constructor == Person); //true console.log(person2.constructor == Person); //true
我們要記住兩個概念(構(gòu)造函數(shù),實(shí)例):
person1 和 person2 都是 構(gòu)造函數(shù) Person 的實(shí)例
一個公式:
實(shí)例的構(gòu)造函數(shù)屬性(constructor)指向構(gòu)造函數(shù)。
三. 原型對象
在 JavaScript 中,每當(dāng)定義一個對象(函數(shù)也是對象)時候,對象中都會包含一些預(yù)定義的屬性。其中每個函數(shù)對象都有一個prototype 屬性,這個屬性指向函數(shù)的原型對象。
function Person() {} Person.prototype.name = 'Zaxlct'; Person.prototype.age = 28; Person.prototype.job = 'Software Engineer'; Person.prototype.sayName = function() { alert(this.name); } var person1 = new Person(); person1.sayName(); // 'Zaxlct' var person2 = new Person(); person2.sayName(); // 'Zaxlct' console.log(person1.sayName == person2.sayName); //true
我們得到了本文第「定律」:
1.每個對象都具有一個名為__proto__的屬性;
2.每個構(gòu)造函數(shù)(構(gòu)造函數(shù)標(biāo)準(zhǔn)為大寫開頭,如Function(),Object()等等JS中自帶的構(gòu)造函數(shù),以及自己創(chuàng)建的)都具有一個名為prototype的方法(注意:既然是方法,那么就是一個對象(JS中函數(shù)同樣是對象),所以prototype同樣帶有__proto__屬性);
3.每個對象的__proto__屬性指向自身構(gòu)造函數(shù)的prototype;
4.每個對象都有 、__proto__ 屬性,但只有函數(shù)對象才有 prototype 屬性
四. 原型鏈
原型對象其實(shí)也是普通的對象。幾乎所有的對象都可能是原型對象,也可能是實(shí)例對象,而且還可以同時是原型對象與實(shí)例對象。這樣的一個對象,正是構(gòu)成原型鏈的一個節(jié)點(diǎn)。因此理解了原型,那么原型鏈并不是一個多么復(fù)雜的概念。
我們知道所有的函數(shù)都有一個叫做toString的方法。那么這個方法到底是在哪里的呢?
先隨意聲明一個函數(shù):
function add() {}
那么我們可以用如下的圖來表示這個函數(shù)的原型鏈。
原型鏈
其中add是Function對象的實(shí)例。而Function的原型對象同時又是Object原型的實(shí)例。這樣就構(gòu)成了一條原型鏈。原型鏈的訪問,其實(shí)跟作用域鏈有很大的相似之處,他們都是一次單向的查找過程。因此實(shí)例對象能夠通過原型鏈,訪問到處于原型鏈上對象的所有屬性與方法。這也是foo最終能夠訪問到處于Object原型對象上的toString方法的原因。
基于原型鏈的特性,我們可以很輕松的實(shí)現(xiàn)繼承。
具體基本知識了解后,我們分析下圖:
先從實(shí)例add()分析
實(shí)例add() 為 Function的實(shí)例
所以
add()的__proto__指向其構(gòu)造函數(shù)的原型即 Function.prototype
var add = function () {} add.__proto__ === Function.prototype//true
特別注意 構(gòu)造函數(shù)Funciton的__proto__指向自身的Function.prototype
Function.__proto__ === Function.prototype//true
所以構(gòu)造函數(shù)Function的__proto__和prototype都指向Function.prototype
第二
因?yàn)镕unction和Object都是js自帶函數(shù)
且 Object 也是由 new Function創(chuàng)建而來
typeof Function "function" typeof Object "function"
所以 Object的__proto__指向Function的原型對象即 Function.prototype
Object.__proto__ === Function.prototype true
因此 Object 的 prototype 和 Function.prototype的 __proto__都指向 Object.prototype
第三
Object.prototype被稱為原型鏈的E端,因?yàn)樗腳_proto__為null
到此,相信大家對“怎么理解JS原型、原型鏈、對象”有了更深的了解,不妨來實(shí)際操作一番吧!這里是創(chuàng)新互聯(lián)網(wǎng)站,更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢,關(guān)注我們,繼續(xù)學(xué)習(xí)!
當(dāng)前文章:怎么理解JS原型、原型鏈、對象
本文鏈接:http://bm7419.com/article32/psdosc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供虛擬主機(jī)、云服務(wù)器、小程序開發(fā)、網(wǎng)站設(shè)計公司、網(wǎng)站設(shè)計、網(wǎng)站制作
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)