JavaScrpt的面向?qū)ο笕娼馕?/h1>

 更新時(shí)間：2017年05月09日 09:59:50   作者：凌云之翼  

javascript面向?qū)ο笾R(shí)很廣泛，想深入理解需要花費(fèi)一些時(shí)間，本文給大家介紹了js面向?qū)ο蟮膭?chuàng)建及相關(guān)屬性介紹，感興趣的小伙伴一起學(xué)習(xí)吧

每次說到j(luò)avascript的面向?qū)ο螅偢杏X自己心里懂，但是卻不知道該怎么說，這就是似懂非懂到表現(xiàn)，于是乎，每次一說，就要到處去查找資料，零零碎碎到看了一些，感覺有懂了，但是過段時(shí)間，好像又不知道是怎么回事了，于是乎，又到處找資料，然道是我本來就缺對(duì)象？才不理解對(duì)象是啥，以至于現(xiàn)實(shí)中找找對(duì)象，javascript中也在找對(duì)象！哎，好尷尬?。≈钡轿铱吹搅艘粋€(gè)妹紙寫到“不可不知的javascript面向?qū)ο蟆?，我才明白面向?qū)ο笫鞘裁?，這是不是說我要找到對(duì)象就是這個(gè)妹紙呢😄，先記錄一下備忘吧，下面是妹紙寫到主要內(nèi)容：

對(duì)象的創(chuàng)建：

1 創(chuàng)建一個(gè)面向?qū)ο?/strong>

var obj = new Object(); 
obj.name = 'haha';
obj.showName = function(){ 
 alert(obj.name);
}
obj.showName();

缺點(diǎn)：當(dāng)我們想創(chuàng)建多個(gè)面向?qū)ο蟮臅r(shí)候，重復(fù)代碼過多，需要封裝，所以有了工廠方法。

2 工廠方式

function CreatePerson(name){ 
 var obj = new Object(); //原料
 obj.name = name;   //加工
 obj.showName = function(){
  alert(this.name);
 } 
 return obj;//出廠
}
var p1 = CreatePerson('haha');
p1.showName();
var p2 = CreatePerson('hehe');
p2.showName();
//其實(shí)就是簡(jiǎn)單的封裝函數(shù)，整個(gè)過程像工廠的流水線，所以叫工廠方式

缺點(diǎn)：無法識(shí)別創(chuàng)建的對(duì)象的類型。因?yàn)槿慷际荗bject，沒有區(qū)分度，不像Date、Array等，因此出現(xiàn)了構(gòu)造函數(shù)模式。

3 構(gòu)造函數(shù)模式

function CreatePerson(name){ 
 this.name = name; 
 this.showName = function(){ 
  alert(this.name);
 } 
} 
var p1 =new CreatePerson('haha'); 
p1.showName();
var p2 = new CreatePerson('hehe'); 
p2.showName(); 

我們通過這二個(gè)方面來改變：

1 函數(shù)名首字母大寫

這是為了區(qū)別于普通的函數(shù)，構(gòu)造函數(shù)本身其實(shí)就是普通的函數(shù)，只是我們專門用它來實(shí)現(xiàn)了構(gòu)造的功能，所以專門起了一個(gè)名字叫構(gòu)造函數(shù)，任何函數(shù)都可以成為構(gòu)造函數(shù)，這取決于你調(diào)用函數(shù)的方式，當(dāng)使用了New的方式調(diào)用就成了構(gòu)造函數(shù)。

2 New 關(guān)鍵字調(diào)用

調(diào)用函數(shù)的時(shí)候用了 New關(guān)鍵字，那么New到底做了什么？用不用New有什么區(qū)別？再來看下面的例子

function CreatePerson(name){
 this.name = name;
 this.showName = function(){
  alert(this.name); 
 }; 
 console.log(this);
} 
new CreatePerson('haha'); //CreatePerson
CreatePerson('haha'); //window

我們會(huì)發(fā)現(xiàn)當(dāng)用New去調(diào)用一個(gè)函數(shù)的時(shí)候，this的指向會(huì)不一樣。其實(shí)New主要做了下面這些事，不過下面寫的只是大概的行為，并不是內(nèi)部源碼。

function CreatePerson(name){ 
 var obj = {}; //聲明一個(gè)空對(duì)象obj 
 obj._proto_= CreatePerson.prototype;
 //把這個(gè)對(duì)象的_proto_屬性指向構(gòu)造函數(shù)的原型對(duì)象,這樣obj就可以調(diào)用CreatePerson原型對(duì)象下的所有方法 ，這里原型先知道結(jié)論，下面會(huì)講。
 CreatePerson.apply(obj); //用apply方法讓this指向obj對(duì)象
 this.name = name; //obj對(duì)象添加屬性，方法
 this.showName = function(){ 
  alert(this.name);
  }; 
 return obj;//返回這個(gè)對(duì)象
}

函數(shù)構(gòu)造模式存在的問題：

alert(p1.showName==p2.showName);//false

缺點(diǎn)：可見這兩個(gè)對(duì)象并不是共用一個(gè)方法，每new一次，系統(tǒng)都會(huì)新創(chuàng)建一個(gè)內(nèi)存，這兩個(gè)對(duì)象各自有各自的地盤，但他們具有相同的功能，還不共用，肯定不是我們所希望的。所以就有了下一種方法，原型+構(gòu)造模式

4 原型+構(gòu)造模式

原型：每個(gè)函數(shù)都有一個(gè)prototype屬性，它是一個(gè)對(duì)象，也稱作原型對(duì)象，我們可以把方法和屬性寫在它上面（不過原型對(duì)象不僅僅有我們寫的屬性和方法，還有別的，下面會(huì)介紹），而通過這個(gè)函數(shù)創(chuàng)建出來的實(shí)例對(duì)象，都能共享這個(gè)原型對(duì)象下的方法和屬性。所以我們只需要把想要共享的東西放在函數(shù)的prototype下，不想共享的東西通過構(gòu)造函數(shù)來創(chuàng)建就可以了。
看個(gè)栗子（原型+構(gòu)造）

function CreatePerson(name){ 
 this.name = name;
}
CreatePerson.prototype.showName = function(){ 
 alert(this.name);
}
var p1 =new CreatePerson('haha');
p1.showName();
var p2 = new CreatePerson('hehe');
p2.showName();
alert(p1.showName==p2.showName);//true

測(cè)試為true，可見showName()方法是共享的，也就是說他們共用一個(gè)內(nèi)存，更進(jìn)一步的說它們存在引用關(guān)系，也就是說你更改了p1的showName也會(huì)影響p2的showName。

_proto_屬性:

同一個(gè)函數(shù)造出來的實(shí)例對(duì)象能共享這個(gè)函數(shù)的prototype下的方法和屬性，但是它是如何做到的呢？這里要出場(chǎng)的就是_proto_屬性.

每個(gè)實(shí)例化對(duì)象都有_proto_屬性，它是一個(gè)指針，指向函數(shù)的prototype，也就是保存了它的地址。（JS中任何對(duì)象的值都是保存在堆內(nèi)存中，我們聲明的變量只是一個(gè)指針，保存了這個(gè)對(duì)象的實(shí)際地址，所以有了地址就能找到對(duì)象），
所以總得來說，每個(gè)實(shí)例化對(duì)象都有_proto_屬性，保存了構(gòu)造函數(shù)的原型對(duì)象的地址，通過這個(gè)屬性就可以擁有原型對(duì)象下的所有屬性和方法，_proto_屬性實(shí)際就是實(shí)例化對(duì)象和原型對(duì)象之間的連接

原型鏈：

每個(gè)函數(shù)都可以成為構(gòu)造函數(shù)，每個(gè)函數(shù)都有原型對(duì)象，每個(gè)原型對(duì)象也可以是一個(gè)實(shí)例化對(duì)象，比如，你創(chuàng)建了一個(gè)函數(shù)fun,它是構(gòu)造函數(shù)function的實(shí)例化對(duì)象，而function的原型對(duì)象，又是Object的實(shí)例對(duì)象。所以fun有個(gè)_proto_屬性可以訪問到function的原型對(duì)象,function原型對(duì)象也是個(gè)實(shí)例對(duì)象，也有個(gè)_proto_屬性,可以訪問到Object的原型對(duì)象，所以通過_proto_屬性，就形成了一條原型鏈。每個(gè)實(shí)例化對(duì)象都可以訪問到鏈子上方的方法和屬性，所以fun是可以訪問Object原型對(duì)象下的方法和屬性的。實(shí)際上所有對(duì)象都可以訪問到Object的原型對(duì)象。

原型鏈的訪問規(guī)則：先在自身的下面尋找，再去一級(jí)一級(jí)的往原型鏈上找。

如下：

function Aaa(){}
Aaa.prototype.num = 3;
var a1 = new Aaa();
a1.num =10;
alert(a1.num); //10

原型對(duì)象：

原型對(duì)象下可能有三種屬性：

1 原型對(duì)象所帶方法和屬性 2 constructor 3_proto_屬性

constructor:構(gòu)造函數(shù)屬性，每個(gè)函數(shù)的原型對(duì)象都有的默認(rèn)屬性，指向函數(shù)。

每個(gè)實(shí)例化對(duì)象本身是沒有constructor屬性的，他們下面默認(rèn)只有一個(gè)_proto_屬性,用來連接原型對(duì)象，而和構(gòu)造函數(shù)本身是沒有直接的聯(lián)系的。所以它的constructor是訪問的原型對(duì)象上的。所以當(dāng)原型對(duì)象的constructor變化了，實(shí)例化對(duì)象的constructor也會(huì)改變。但是如果這個(gè)對(duì)象本身既是原型對(duì)象，又是實(shí)例化對(duì)象，那就擁有了constructor屬性，無需從原型對(duì)象上面訪問。**

看下面的例子，來驗(yàn)證我們所說的：

function CreatePerson(name){ 
 this.name = name;
}
CreatePerson.prototype.showName = function(){ 
 console.log(this.name);
 };
var p1 =new CreatePerson('haha');
p1.showName();
console.log(p1.constructor); // CreatePerson 來自CreatePerson.prototype
console.log(CreatePerson.prototype); 
// {showName:{},constructor:CreatePerson,__proto__:Object.prototype}
//可見，原型對(duì)象保存了
  1 自身添加的方法，
  2 構(gòu)造函數(shù)constructor 
  3 _proto_(和上一層構(gòu)造函數(shù)原型對(duì)象的連接)
console.log(CreatePerson.prototype.__proto__===Object.prototype);
// true 這個(gè)原型對(duì)象本身又是object的實(shí)例化對(duì)象，所有_proto_指向Object的原型對(duì)象
console.log(CreatePerson.prototype.__proto__===Object);
// false 可見是和構(gòu)造函數(shù)下原型對(duì)象的連接，不是構(gòu)造函數(shù)
console.log(CreatePerson.prototype.constructor);
//CreatePerson CreatePerson.prototype是Object實(shí)例化對(duì)象,也是原型對(duì)象，所以自身擁有constructor屬性
console.log(Object.prototype.__proto__); 
// null 原型鏈的終點(diǎn)是null
console.log(CreatePerson.__proto__); //function.prototype
// CreatePerson本身既是構(gòu)造函數(shù)又是function的實(shí)例化對(duì)象，擁有_proto_屬性，指向function的原型對(duì)象
console.log(CreatePerson.constructor); 
// function 繼承自function.prototype
console.log(CreatePerson.prototype instanceof CreatePerson ) 
//驗(yàn)證是否在一條原型鏈上 false

字面量法定義原型：

為了創(chuàng)建對(duì)象的代碼更方便，你一定見過這樣的代碼，就是字面量法：

function Aaa(){}
Aaa.prototype = { 
 showName:function(){},
 showSex:function(){}
}; 
var a1 = new Aaa();
console.log(Aaa.prototype);
//{showName:function(){},_proto_} 
//你會(huì)發(fā)現(xiàn)constructor不見了，因?yàn)檫@種方式相當(dāng)于重新賦值了Aaa.prototype 
console.log(Aaa.prototype.constructor);
//Object 因?yàn)樽陨頉]有了constructor屬性，就去上級(jí)原型對(duì)象找，找到了Object
console.log(a1.constructor );
//Object 也變了，驗(yàn)證了它是訪問的原型對(duì)象上的

因此我們?cè)趯懙臅r(shí)候需要修正一下原型的指向：

function Aaa(){}
Aaa.prototype = { 
constructor:Aaa, 
num1:function(){alert(10);}
}
var a1 = new Aaa();
a1.constructor // Aaa

 以上所述是小編給大家介紹的JavaScrpt的面向?qū)ο笕娼馕?，希望?duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

• Javascript之面向?qū)ο?-封裝
• JavaScript面向?qū)ο蠓謱铀季S全面解析
• js面向?qū)ο髮?shí)現(xiàn)canvas制作彩虹球噴槍效果
• 歸納下js面向?qū)ο蟮膸追N常見寫法總結(jié)
• JavaScript面向?qū)ο缶帉戀?gòu)物車功能

• javascript
• 面向?qū)ο?/a>

相關(guān)文章

• 

  JavaScript求一組數(shù)的最小公倍數(shù)和最大公約數(shù)常用算法詳解【面向?qū)ο?，回歸迭代和循環(huán)】

  這篇文章主要介紹了JavaScript求一組數(shù)的最小公倍數(shù)和最大公約數(shù)常用算法,結(jié)合實(shí)例形式分析了javascript基于面向?qū)ο?，回歸迭代和循環(huán)等算法求解一組數(shù)的最小公倍數(shù)與最大公約數(shù)相關(guān)操作技巧,需要的朋友可以參考下

  2018-05-05
• 

  探析瀏覽器執(zhí)行JavaScript腳本加載與代碼執(zhí)行順序

  本文主要基于向HTML頁面引入JavaScript的幾種方式，分析HTML中JavaScript腳本的執(zhí)行順序問題，通過本文給大家分享瀏覽器執(zhí)行JavaScript腳本加載與代碼執(zhí)行順序，對(duì)瀏覽器執(zhí)行javascript及執(zhí)行順序相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧

  2016-01-01
• 

  前端調(diào)用后端接口時(shí)的超時(shí)問題解決辦法

  這篇文章主要給大家介紹了關(guān)于如何解決前端調(diào)用后端接口時(shí)的超時(shí)問題,還詳細(xì)介紹了在Vue項(xiàng)目中配置axios的全局超時(shí)時(shí)間、使用遞歸和Promise.race()處理異步請(qǐng)求超時(shí)的最佳實(shí)踐,需要的朋友可以參考下

  2024-12-12
• 

  javascript動(dòng)態(tài)添加checkbox復(fù)選框的方法

  這篇文章主要介紹了javascript動(dòng)態(tài)添加checkbox復(fù)選框的方法的相關(guān)資料,需要的朋友可以參考下

  2015-12-12
• 

  DWR中各種java方法的調(diào)用

  DWR是一個(gè)框架，簡(jiǎn)單的說就是能夠在javascript直接調(diào)用java方法，而不必去寫一大堆的javascript代碼。它的實(shí)現(xiàn)是基于ajax的，可以實(shí)現(xiàn)無刷新效果。不少DWR的例子，但大都只是某種方法的調(diào)用只在使用層面上介紹DWR，并不涉更多的技術(shù)與設(shè)計(jì)javascript中是如何調(diào)用的。

  2016-05-05
• 

  微信小程序icon組件使用詳解

  這篇文章主要為大家詳細(xì)介紹了微信小程序icon組件的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2018-01-01
• 

  Javascript動(dòng)畫效果（3）

  這篇文章主要為大家詳細(xì)介紹了第三篇Javascript動(dòng)畫效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2016-10-10
• 

  JavaScript實(shí)現(xiàn)水印效果的示例代碼

  這篇文章主要為大家詳細(xì)介紹了JavaScript如何利用canvas實(shí)現(xiàn)添加水印的效果，文中的示例代碼簡(jiǎn)潔易懂，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

  2023-05-05
• 

  微信小程序?qū)崿F(xiàn)圖片壓縮

  這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)圖片壓縮，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

  2019-12-12
• 

  js取值中form.all和不加all的區(qū)別介紹

  在js里取值，可以用form.xx.value，也可以用form.all.xx.value，那么js取值中form.all和不加all有什么區(qū)別呢？下面就為大家詳細(xì)介紹下

  2014-01-01

最新評(píng)論