成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JavaScript面向?qū)ο?~ 原型和繼承（1）

keithyau / 3112人閱讀

摘要：當(dāng)構(gòu)造函數(shù)創(chuàng)建的實例對象需要訪問某個方法或?qū)傩?，而這個對象又沒有該方法或?qū)傩缘臅r候，它會去原型上面去查找。實例成員表示的是實例方法和實例屬性，由構(gòu)造函數(shù)創(chuàng)建的對象，也就是實例對象提供。

經(jīng)過面試的挫折之后，繼續(xù)深入學(xué)習(xí)~~

1、原型概念的提出 
傳統(tǒng)的構(gòu)造函數(shù)對象包含方法時，在構(gòu)造函數(shù)創(chuàng)建時，就會將所有內(nèi)容重新創(chuàng)建一次，導(dǎo)致數(shù)據(jù)的重復(fù)，代碼的冗余，如下所示：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = function () {
    console.log("Hello");
  }
}
var p1 = new Person();
var p2 = new Person();
p1.sayHello === p2.sayHello // 結(jié)果為false，因為p1,和p2的sayHello雖結(jié)構(gòu)一樣，但卻是兩個不同的對象

改良1：將方法提取到外面

function sayHello(){
  console.log("Hello");
}
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHello = sayHello;
}
var p1 = new Person();
var p2 = new Person();
p1.sayHello === p2.sayHello // 結(jié)果為true，但當(dāng)代碼量不斷增加，自定義的函數(shù)越來越多時，可能會和框架中的函數(shù)發(fā)生命名沖突，也不利于代碼的維護

改良2：將方法放到構(gòu)造函數(shù)中，且避免命名沖突，原型概念出現(xiàn)

function Person(name, age) {
  this.name = name;
  this.age = age;
}
Person.prototype.sayHello = function (){
   console.log("Hello");
}
var p1 = new Person();
var p2 = new Person();
p1.sayHello === p2.sayHello // 結(jié)果為true

構(gòu)造函數(shù)一旦被創(chuàng)建，就會有一個原型屬性，也是個對象，可以往里面添加成員，每個由構(gòu)造函數(shù)創(chuàng)建出來的對象都會默認連接到原型屬性上去。

當(dāng)js引擎查找對象屬性時，會先查找對象上是否具有該屬性，如果沒有，就會去原型屬性上去查找。

所以，什么是原型？原型是能夠?qū)崿F(xiàn)繼承的，當(dāng)構(gòu)造函數(shù)被定義的時候，原型也就被創(chuàng)建出來，它可以存儲屬性和方法，既是一個屬性也是一個對象。當(dāng)構(gòu)造函數(shù)創(chuàng)建的實例對象需要訪問某個方法或?qū)傩裕@個對象又沒有該方法或?qū)傩缘臅r候，它會去原型上面去查找。也就是實例對象訪問原型對象的屬性或調(diào)用原型對象的方法，說的通俗一點也就是把別的對象的方法或?qū)傩阅眠^來自己用，就是繼承，所以我們也可以說對象繼承自其原型。

引入：屬性查找機制：對象在訪問屬性或方法時，首先在當(dāng)前對象查找，如果該對象有該屬性或方法，則停止查找，如果沒有，則去原型中查找，如果原型沒有，則去原型的原型中查找，直到原型的頂部，如果還是沒有，則返回undefined（屬性）或 xxx is not a function（方法）

2、一些相關(guān)概念 ① 面向?qū)ο蟮南嚓P(guān)概念

類class：在js中就是構(gòu)造函數(shù)

實例（instance）與對象（object）
實例是指某個構(gòu)造函數(shù)創(chuàng)建出來的對象，我們稱之為xxx構(gòu)造函數(shù)的實例；

鍵值對與屬性和方法
在js中，鍵值對的集合稱之為對象
如果數(shù)據(jù)是值，該鍵值對為屬性prototype
如果數(shù)據(jù)是函數(shù)，該鍵值對為方法method

父類與子類
js中沒有class的概念，由C++引申過來，父類又稱基類，子類又稱派生類
js中稱為父對象、子對象

② 原型的相關(guān)概念

prototype針對構(gòu)造函數(shù)，稱為“原型屬性”

prototype針對構(gòu)造函數(shù)創(chuàng)建出來的對象，稱為“原型對象”

原型屬性與原型對象的關(guān)系：
?。?gòu)造函數(shù)的原型屬性和構(gòu)造函數(shù)創(chuàng)建出來的對象的原型對象，是一個東西
?。?gòu)造函數(shù)的原型屬性所指向的對象，與構(gòu)造函數(shù)創(chuàng)建出來的對象(實例對象)，這是兩個不同的對象（快繞暈了）

3、對象繼承自其原型

構(gòu)造函數(shù)創(chuàng)建出來的對象（實例對象）繼承構(gòu)造函數(shù)的原型屬性和原型對象

4、原型的使用

利用對象的動態(tài)特性：在原來的對象上添加成員
構(gòu)造函數(shù).prototype.xxx = ccc;

直接替換：重新創(chuàng)建一個對象
構(gòu)造函數(shù).prototype = {}；

5、__proto__

通過 proto 允許實例對象直接訪問原型，通常用于在調(diào)試中查看原型的成員（實例對象不允許修改原型）

6、原型的結(jié)構(gòu)

有一個默認屬性：constructor => 構(gòu)造器，表示該原型是與什么構(gòu)造函數(shù)聯(lián)系起來的
∴ 構(gòu)造函數(shù)通過 prototype 的屬性訪問原型，原型可以通過 constructor 訪問構(gòu)造函數(shù)

7、繼承

簡單繼承：將別的對象的方法或?qū)傩灾苯幽眠^來，加到自己身上，于是我就有了該方法或?qū)傩浴?> 簡單粗暴，層次清晰

利用原型繼承：不需要添加成員，只要原型具有，我便有了。=> 提高復(fù)用性

混合式繼承：將方法或?qū)傩岳没烊氲姆椒?，加到?gòu)造函數(shù)原型中，實例對象即有了指定的方法或?qū)傩浴?/p> 8、靜態(tài)成員和實例成員的概念

該概念由其他面向?qū)ο蟮恼Z言引入。

靜態(tài)成員表示的是靜態(tài)方法和靜態(tài)屬性，由構(gòu)造函數(shù)提供。

實例成員表示的是實例方法和實例屬性，由構(gòu)造函數(shù)創(chuàng)建的對象，也就是實例對象提供。

9、小結(jié)

什么是原型？

如何使用原型？

什么是原型繼承？ => 實例對象默認連接到原型中，可以繼承原型的方法和屬性，也可以自己給原型賦值

如何實現(xiàn)？ => 混合式繼承

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/100087.html

相關(guān)文章

  • 面向對象的 JavaScript

    摘要：是完全的面向?qū)ο笳Z言，它們通過類的形式組織函數(shù)和變量，使之不能脫離對象存在。而在基于原型的面向?qū)ο蠓绞街?，對象則是依靠構(gòu)造器利用原型構(gòu)造出來的。 JavaScript 函數(shù)式腳本語言特性以及其看似隨意的編寫風(fēng)格，導(dǎo)致長期以來人們對這一門語言的誤解，即認為 JavaScript 不是一門面向?qū)ο蟮恼Z言，或者只是部分具備一些面向?qū)ο蟮奶卣?。本文將回歸面向?qū)ο蟊疽?，從對語言感悟的角度闡述為什...

    novo 評論0 收藏0

  • JS對象(1)重新認識面向對象

    摘要：對象重新認識面向?qū)ο竺嫦驅(qū)ο髲脑O(shè)計模式上看，對象是計算機抽象現(xiàn)實世界的一種方式。除了字面式聲明方式之外，允許通過構(gòu)造器創(chuàng)建對象。每個構(gòu)造器實際上是一個函數(shù)對象該函數(shù)對象含有一個屬性用于實現(xiàn)基于原型的繼承和共享屬性。 title: JS對象(1)重新認識面向?qū)ο? date: 2016-10-05 tags: JavaScript 0x00 面向?qū)ο?從設(shè)計模式上看，對象是...

    superw 評論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

    摘要：很多情況下，通常一個人類，即創(chuàng)建了一個具體的對象。對象就是數(shù)據(jù)，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

    李昌杰 評論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

    摘要：很多情況下，通常一個人類，即創(chuàng)建了一個具體的對象。對象就是數(shù)據(jù)，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

    Lyux 評論0 收藏0

  • SegmentFault 技術(shù)周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

    摘要：很多情況下，通常一個人類，即創(chuàng)建了一個具體的對象。對象就是數(shù)據(jù)，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

    AaronYuan 評論0 收藏0

  • 重新認識JavaScript面向對象: 從ES5到ES6

    摘要：基于原型的面向?qū)ο笤诨谠偷恼Z言中如并不存在這種區(qū)別它只有對象不論是構(gòu)造函數(shù)，實例，原型本身都是對象。允許動態(tài)地向單個的對象或者整個對象集中添加或移除屬性。為了解決以上兩個問題，提供了構(gòu)造函數(shù)創(chuàng)建對象的方式。 showImg(https://segmentfault.com/img/remote/1460000013229218); 一. 重新認識面向?qū)ο?1. JavaScript...

    VishKozus 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<