整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
具的選擇不是越多人用越好。像Axure這類專業(yè)的原型制作軟件，在標(biāo)尺、對齊上面，是iH5遠(yuǎn)比不上的。但后者在與人溝通以及查看時(shí)有著優(yōu)勢。
最近支付寶進(jìn)行了一次比較大的版本更新，引起了很多人的關(guān)注，無論從視覺還是交互體驗(yàn)上都有了很大的改變，但是從原型制作來說，其實(shí)比之前更加簡單了。
通過臨摹這些知名廠商的產(chǎn)品，是快速進(jìn)步的一種方式，可以更好的借鑒他們的交互與邏輯，比體驗(yàn)觀看，更能深刻的理解，從而更好的改進(jìn)自己的產(chǎn)品。
說到原型，很多人就會(huì)想到Axure，這類常用的原型工具，他們使用的都是HTML規(guī)范，動(dòng)效以及交互大部分引入的jQuery庫或者封裝的JS庫，其效果可以在軟件預(yù)覽以及導(dǎo)出HTML文件在瀏覽器預(yù)覽，同樣類別的還有Justinmind等等。
與其原理類似的也有很多，如定位于開發(fā)工具的Animate，其動(dòng)畫效果比Axure要強(qiáng)大的多，以及谷歌的web design，還有向國內(nèi)線上制作平臺的iH5，他們面向的是基礎(chǔ)交互，可自由編輯度高，不僅可以做出H5實(shí)例，同樣也可以用于原型。
這些工具可以分為線上與離線兩種制作方式，我個(gè)人偏向使用線上的制作工具，因?yàn)殡x線工具生成的原型不方便發(fā)給別人那看，而且制作嚴(yán)重依賴于軟件安裝，不便與即時(shí)查看與他人溝通。
對于臨摹來說，事先無需過多分析，了解一下大致交互，直接上手就可以。
工具：iH5
材料準(zhǔn)備：用手機(jī)把新版支付截屏，調(diào)到PS用切片把其分為各個(gè)模塊，如導(dǎo)航欄，對話框等等。
描述：底部導(dǎo)航的切換交互，跳轉(zhuǎn)頁面并且圖標(biāo)變?yōu)樗{(lán)色。可以用點(diǎn)擊事件控制兩種狀態(tài)，一是遮罩的移動(dòng)，二是頁面的跳轉(zhuǎn)。
新建時(shí)間軸，在其下面新建一個(gè)畫布，將藍(lán)色與灰色兩個(gè)底部導(dǎo)航欄，以及一個(gè)與圖標(biāo)大小的白色矩形，放入其中，在藍(lán)色導(dǎo)航圖片的屬性——遮罩，選擇白色矩形。然后在矩形下建立軌跡，四個(gè)關(guān)鍵幀分別對應(yīng)四個(gè)圖標(biāo)。
在舞臺上建四個(gè)頁面用來存放導(dǎo)航里的內(nèi)容。
在圖標(biāo)位置添加透明按鈕，在其下方添加事件，當(dāng)輕觸時(shí)跳轉(zhuǎn)頁面，以及跳轉(zhuǎn)到該時(shí)間軸的某一幀。
描述：當(dāng)頁面滑動(dòng)一段距離，頂部導(dǎo)航欄發(fā)生變換。通過監(jiān)測時(shí)間軸滑動(dòng)的時(shí)間，來觸發(fā)菜單欄的更換。
在頁面一，新建滑動(dòng)時(shí)間軸，所有素材放入其中，將兩個(gè)頂部導(dǎo)航疊放在一起，為內(nèi)容添加軌跡，讓其讓下滑動(dòng)，一秒時(shí)滑動(dòng)到底部，為初始默認(rèn)的導(dǎo)航添加兩個(gè)事件，當(dāng)滑動(dòng)時(shí)間軸滑動(dòng)0.1秒時(shí)，置于底層，當(dāng)時(shí)間為0時(shí)，至于頂層。
描述：類似圖片的輪播效果，將未顯示的圖片放在屏幕之外或者隱藏，通過手指的左右滑動(dòng)來控制圖片的進(jìn)出。
在頁面二，把準(zhǔn)備好三張輪播的圖，帶有三個(gè)鏤空圓點(diǎn)的PNG圖片，以及一個(gè)大小與圓點(diǎn)差不多的矩形，都放入滑動(dòng)時(shí)間軸下面，新建軌跡，創(chuàng)建三個(gè)關(guān)鍵幀，通過調(diào)整圖片坐標(biāo)來控制在每一幀上顯示的圖片，當(dāng)你滑動(dòng)時(shí)，就會(huì)出現(xiàn)圖片的輪播效果，如果需要在圖片上加入鏈接，直接在該圖片添加點(diǎn)擊事件，動(dòng)作設(shè)置為跳轉(zhuǎn)頁面即可。
描述：點(diǎn)擊按鈕時(shí)彈框出現(xiàn)，然后點(diǎn)擊其周圍彈框消失。為彈框設(shè)置好動(dòng)畫之后，利用事件，來控制其正向與反向播放即可。
在頁面三上，準(zhǔn)備一張黑背景圖片以及設(shè)計(jì)好的彈框，將其放入時(shí)間軸下，利用軌跡制作出想要的效果，在背景上的“+”添加一個(gè)透明按鈕，增加一個(gè)事件，當(dāng)點(diǎn)擊時(shí)讓該時(shí)間軸從頭播放，然后在黑色背景下添加同樣的事件，把動(dòng)作改為反向播放。
其他的一些交互無外乎都是頁面的跳轉(zhuǎn)，原型制作上并沒有多少壓力。
制作完成之后，就可發(fā)布了，會(huì)生成一個(gè)網(wǎng)址鏈接與二維碼，可以在線編輯與查看。
工欲善其事，必先利其器，工具的選擇不是越多人用越好。像Axure這類專業(yè)的原型制作軟件，在標(biāo)尺、對齊上面，是上面所使用的iH5遠(yuǎn)比不上的（后者得通過x|y坐標(biāo)等精確控制），而且其還擁有眾多有手機(jī)圖標(biāo)等模板，可以大大加快原型制作，但后者在與人溝通以及查看時(shí)有著優(yōu)勢，并且隨著H5營銷的流行，其也可以快速制作出相關(guān)的營銷案例，并迅速在網(wǎng)上傳播，不用再依靠別人，或者重新學(xué)習(xí)其他制作工具，擁有更多的可操作性。
本文由 @iood 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。
款優(yōu)秀的移動(dòng)APP產(chǎn)品原型設(shè)計(jì)工具應(yīng)當(dāng)具備：
①.支持移動(dòng)端演示（隨時(shí)隨地演示，廁所&食堂&電梯…以體現(xiàn)我們的敬業(yè)）
②.組件庫（高效復(fù)用，大量模板，好獲得）
③.可以快速生成全局流程（程序猿看不懂拆解的，給丫的看這個(gè)）
④.在線協(xié)作（多個(gè)PM狗一起用）
⑤.手勢操作、轉(zhuǎn)場動(dòng)畫、交互特效…(這些都不需要，留給專業(yè)的交互、視覺，搞那么虛的不如多想想產(chǎn)品流程邏輯做做減法、寫寫xxRD啥的)
這些年，產(chǎn)品狗們折騰過的原型工具：
1. POP（Prototyping on Paper）
算是移動(dòng)App原型設(shè)計(jì)神器 ，很多公司在用：quora、sina、豆瓣、36氪、ifanr…
操 作輕巧簡單：先用手機(jī)拍下草圖原型(存到POP app內(nèi))；然后開始編輯圖片的哪個(gè)區(qū)域（按鈕）鏈接到什么頁面，添加跳轉(zhuǎn)鏈接熱區(qū)，就可以在iPhone上給小伙伴們演示了，并且POP內(nèi)嵌的交互動(dòng)作 如側(cè)滑、展開、消失等，即可滿足一般的動(dòng)態(tài)演示需要。不太明白？
2、Pencil Project
Pencil是一款開源的可以用來制作圖表和GUI原型的工具，可以作為一個(gè)獨(dú)立的app，也可以作為Firefox插件。內(nèi)置模版可以幫你繪制桌面和移動(dòng)界面中用到的各種各樣的用戶界面，包括流程圖、UI和一般的通用圖形。
通過它內(nèi)置的模板，你可以創(chuàng)建可鏈接的文檔，并輸出成為HTML文件、PNG、OpenOffice文檔、Word文檔、PDF。Pencil Project還包含大量移動(dòng)app模版。
3.Axure
大 家都很熟悉了，這里主要說下移動(dòng)端的演示，這樣才充分表達(dá)原型意圖。按F5生成原型的時(shí)候，在“Mobile/Device”選項(xiàng)中可以設(shè)置適配移動(dòng)設(shè)備 的特殊原型（Axure 6.5以下版本），再用移動(dòng)設(shè)備訪問你生成的原型鏈接即可（該頁面創(chuàng)建一個(gè)桌面快捷方式）。
4、Proto.io
Proto.io是一個(gè)專用的手機(jī)原型開發(fā)平臺——可以構(gòu)建和部署全交互式的移動(dòng)程序的原型，并且可以模擬出相似的成品。它可以運(yùn)行在大多數(shù)的瀏覽器中，并提供了3個(gè)重要的接口：dashboard、編輯器以及播放器。
dashboard 可以用來管理項(xiàng)目。編輯器是構(gòu)建原型的環(huán)境，由一組設(shè)計(jì)和開發(fā)原型的工具組成，另外還可以構(gòu)建交互。播放器用來觀看原型，并與原型進(jìn)行交互，并提供了相關(guān) 工具來標(biāo)注和保留反饋信息。你可以直接在真實(shí)的移動(dòng)設(shè)備上對原型進(jìn)行測試。并且可以使用iOS或Android上的瀏覽器以全屏模式運(yùn)行原型。
5、Moqups
是一個(gè)非常好的、免費(fèi)的HTML5應(yīng)用，通過它可以創(chuàng)建可愛樸素的線框圖、實(shí)體模型和UI概念。該程序使用起來非常簡單，并且有內(nèi)置的模板可以直接使用（模板包括單選按鈕、鏈接、圖像占位符、文本框以及滑塊等）。
它還提供了iPhone和iPad模板，以及iOS相關(guān)的按鈕、提示框、picker、菜單、開關(guān)以及鍵盤等。你可以設(shè)置網(wǎng)格的尺寸，并預(yù)覽和分享你的線框圖。Moqups提供了一個(gè)很有用的功能就是對齊網(wǎng)格，可以使對象精準(zhǔn)對齊。
6、UXPin
UXPin是DeSmart團(tuán)隊(duì)開發(fā)的一個(gè)簡易快速的實(shí)體模型和在線可點(diǎn)擊原型創(chuàng)作工具。它基于優(yōu)秀的用戶體驗(yàn)設(shè)計(jì)原則，在構(gòu)建原型中，它提供了一個(gè)完整的工具包（該工具包具有良好的用戶設(shè)計(jì)模式和元素）來從頭構(gòu)建一個(gè)出色的原型。
UXPin 具有響應(yīng)式的斷點(diǎn)功能，創(chuàng)建的響應(yīng)式原型和線框圖可以運(yùn)行在不同的設(shè)備和分辨率上。另外該軟件還提供了版本控制和迭代功能，可以輕松的共享預(yù)覽，直觀的注 解和實(shí)時(shí)的協(xié)同編輯和聊天。該軟件擁有大量具有吸引力的用戶界面元素風(fēng)格（包括web，iOS，Android等），并且具有快速、靈敏的響應(yīng)拖放接口。
7、Omnigraffle
OmniGraffle是由The Omni Group制作的一款帶有大量模版可以用來快速繪制線框圖、圖表、流程圖、組織結(jié)構(gòu)圖以及插圖等類型圖的app，也可以用來組織頭腦中思考的信息，曾獲得2002年的蘋果設(shè)計(jì)獎(jiǎng)。
它采用拖放的所見即所得界面，你可以用鋼筆工具繪制自定義的模版或者圖形，此外還自帶Graffletopia提供的多個(gè)iPhone、iPad以及Android模版。
8、JustinMind
JustinMind是由西班牙JustinMind公司出品的原型制作工具，可以輸出Html頁面。與目前主流的交互設(shè)計(jì)工具axure，Balsamiq Mockups等相比，Justinmind Prototyper更為專屬于設(shè)計(jì)移動(dòng)終端上app應(yīng)用。
JustinMind 可以幫助開發(fā)者設(shè)計(jì)更豐富、更具交互新的移動(dòng)產(chǎn)品線框圖，包含了iPhone、Android 以及iPad常用手勢，滑動(dòng)、縮放、旋轉(zhuǎn)，甚至捕捉設(shè)備方向等，從而創(chuàng)造出更具交互性的原型。另外，它可以導(dǎo)出原型信息到Microsoft Word，生成規(guī)范的文檔。
此外，你還可以自定義小組件，創(chuàng)建自定義組件庫，并進(jìn)行分類，不管對象是iPhone、iPad、黑莓、Android還是其他。
9、FluidUI
Fluid UI是一款用于移動(dòng)開發(fā)的Web原型設(shè)計(jì)工具，可以幫助設(shè)計(jì)師高效地完成產(chǎn)品原型設(shè)計(jì)。Fluid UI 內(nèi)置超過1700款的線框圖和手機(jī)UI控件，并且還會(huì)經(jīng)常進(jìn)行更新。
Fluid UI無設(shè)備限制，無平臺限制（Windows、Mac以及Linux系統(tǒng)），支持Chrome和Safari瀏覽器（Chrome瀏覽器上的app也可離 線使用）。你可以使用Fluid Player來預(yù)覽你的設(shè)計(jì)，收集意見和反饋。還可以以PNG、PDF方式輸出。
Fluid UI使用方法簡單，采取拖拽的操作方式，不需要程序員來寫代碼。另外，F(xiàn)luid UI資源庫非常豐富，有針對iOS、Android以及Windows 8的資源。如果你覺得庫存資源不能滿足你的需求，你也可以自行添加。
10、Protoshare
ProtoShare：在線網(wǎng)站開發(fā)協(xié)同制作工具是一個(gè)十分便捷的在線原型制作工具，側(cè)重于團(tuán)隊(duì)協(xié)作。團(tuán)隊(duì)成員可以通過這個(gè)工具對工作進(jìn)行審查，并及時(shí)提供反饋，對線框圖或內(nèi)容進(jìn)行建議。
作 為一個(gè)強(qiáng)大的線框圖和原型平臺，Protoshare提供了大量移動(dòng)工具集（有來自中心資源庫的大量移動(dòng)模版和大量2D、3D動(dòng)畫過渡）。通過“拖放”界 面，你可以快速創(chuàng)建交互式的線框圖和移動(dòng)原型，然后發(fā)送至iPhone、iPad或者Android設(shè)備進(jìn)行測試，體驗(yàn)app的功能實(shí)現(xiàn)情況。
另外，Protoshare還支持分享和反饋功能，項(xiàng)目成員可以標(biāo)記和跟蹤的反饋信息來做出決定。而大量的資源庫意味著你可以使用模版和獲得的反饋創(chuàng)建移動(dòng)產(chǎn)品線框圖，進(jìn)而演變?yōu)楦弑Ｕ娴脑汀?/p>
11、 Wireframe
Wireframe是一款具有“點(diǎn)擊-拖-放”界面且超簡單的線框圖創(chuàng)作工具。雙擊實(shí)現(xiàn)編輯功能，有限的界面意味著你會(huì)把精力集中于你的想法上。還給每個(gè)線框圖分配了特有的URL，便于標(biāo)記和分享。
Wireframe有瀏覽器窗口和移動(dòng)手機(jī)兩個(gè)模版選項(xiàng)，移動(dòng)版有縱向和橫向兩個(gè)選擇。線框圖的每個(gè)元素都可以編輯和轉(zhuǎn)換。
12、InVision
InVision是一個(gè)便捷的產(chǎn)品原型生成工具，用戶制作一個(gè)在線原型只需要四部：創(chuàng)建一個(gè)工程、上傳視覺設(shè)計(jì)稿、添加鏈接以及生成在線原型。
確 切說，InVision提供的不是準(zhǔn)確的線框圖，而是一個(gè)快速原型的環(huán)境，可以把你的UX/UI草圖快速連接起來。數(shù)字型的線框圖和高保真的設(shè)計(jì)可以幫你 測試app的工作情況，同時(shí)該工具還支持協(xié)作和分享功能，生成的在線原型可以支持任何人在產(chǎn)品原型的任何地方評論，便于準(zhǔn)確的交流。
針對iOS 開發(fā)，InVision還增添了其他功能，比如自定義主屏幕icon和自定義加載頁面。
13、Mokk.me
Mokk.me 是一個(gè)簡單快速的原型工具，通過界面上簡單的拖放操作，不用了解單線編程就能創(chuàng)作一個(gè)可以分享、測試以及多平臺的app。目前，Mokk.me正在測試 中，但它是一個(gè)簡單的基本的工具，任何人可以用它來創(chuàng)建app的布局。你可拖、放或者編輯小工具，可以搭建和連接頁面，還可以選擇過渡動(dòng)畫。它的特點(diǎn)還在 于頁面和按鈕、圖片小工具、文本輸入以及復(fù)選框形式。
另外，你可以借助HTML、CSS以及JavaScript完成app其他一些功能，一旦你創(chuàng)建了原型，你還可以進(jìn)行分享，在iOS 和Android上進(jìn)行測試。
14、iPlotz
iPlotz 是一款可以用來創(chuàng)建可點(diǎn)擊、可導(dǎo)航的原型和線框圖工具，適合網(wǎng)站開發(fā)者和移動(dòng)app開發(fā)者。你可以在一個(gè)可調(diào)整的頁面拖放元件，然后連接起來，增加其他屏 幕或者頁面的熱點(diǎn)鏈接。你可以選擇使用iPhone/iPad模版或者Android模版，任何模版都有獨(dú)一無二的元件設(shè)置。
iPlotz界面明白易懂，支持協(xié)同工作、可分享的編輯權(quán)限、任務(wù)管理以及評價(jià)系統(tǒng)。另外，項(xiàng)目可以以IPML、JPG、PNG、PDF以及HTML形式輸出。
15.Adobe Illustrator 俗稱AI
這是adobe的一款矢量圖設(shè)計(jì)軟件，推薦給設(shè)計(jì)師轉(zhuǎn)型過來的PM（沒興趣的跳過），電商圈不推薦再去費(fèi)力學(xué)習(xí)其他軟件，達(dá)到溝通的目的提高效率是王道。上圖是設(shè)計(jì)出來的原型成品，可以結(jié)合上面提到的POP去演示。
個(gè)人還是喜歡axure，比較是最多人推薦的軟件了！你喜歡哪款呢？推薦給大家用一下！
最后一句，求關(guān)注！
文將從以下三個(gè)方面解說原型特點(diǎn)
1、 了解指針
2、 了解原型
3、 用原型的方法完成承繼
以下為詳細(xì)內(nèi)容：
1、 了解指針
要了解JAVASCRIPT中的原型，先了解指針，在C/C++中，會(huì)提到指針，其實(shí)，指針不應(yīng)該屬于C/C++的專利，上篇文章中，提到的引證類型(也是許多面向目標(biāo)語言中的數(shù)據(jù)類型的叫法)，便是指針。
C/C++中對指針的解說：指針便是地址。地址為何物?
地址：是計(jì)算機(jī)對內(nèi)存每個(gè)存儲(chǔ)單元的管理方法。在計(jì)算機(jī)的內(nèi)存中，存儲(chǔ)著若干數(shù)據(jù)，計(jì)算機(jī)的CPU是如何讀取內(nèi)存中的數(shù)據(jù)的?
計(jì)算機(jī)的每個(gè)存儲(chǔ)單元都有一個(gè)編號，就像到超市存包時(shí)，每個(gè)存包的格子都有一個(gè)編號，這個(gè)編號便是地址，內(nèi)存的地址。超市每個(gè)格子為什么要有編號，目的便是為了方便服務(wù)員進(jìn)行查找(依據(jù)編號進(jìn)行查找)，計(jì)算機(jī)每個(gè)存儲(chǔ)單元為什么會(huì)有一個(gè)編號，目的也是為了CPU查找內(nèi)存。
假如某個(gè)內(nèi)存中直接存儲(chǔ)的是數(shù)據(jù)，則這種數(shù)據(jù)是根本類型的數(shù)據(jù)，假如某個(gè)內(nèi)存中存儲(chǔ)的是其它內(nèi)存的編號(數(shù)據(jù))，那么這種數(shù)據(jù)就叫引證類型的數(shù)據(jù)。
2、 了解原型
a) 原型(特點(diǎn))的概念
JAVASCRIPT中的函數(shù)也是目標(biāo)(假如不明白函數(shù)也是個(gè)目標(biāo)，請百度JAVASCRIPT中函數(shù)是功用完整的類)，每個(gè)函數(shù)都有一個(gè)原型(prototype)特點(diǎn)，這個(gè)特點(diǎn)是指針類型。原型特點(diǎn)是目標(biāo)類型，所以，也可以叫原型目標(biāo)，原型便是模子，模型。函數(shù)何來原型，其實(shí)了解原型(模型)更應(yīng)該用結(jié)構(gòu)函數(shù)來了解會(huì)更好。
結(jié)構(gòu)函數(shù)是用來結(jié)構(gòu)實(shí)例的，每次用new運(yùn)算符調(diào)用結(jié)構(gòu)函數(shù)發(fā)生一個(gè)實(shí)例時(shí)，模型就會(huì)起作用。就像咱們要造一個(gè)塑料制品(如：杯子，電腦顯示器的外殼，打印機(jī)的外殼等)，都有一個(gè)模具，只要是同一個(gè)模具做出來的物體，都非常類似。所以，百度上對模具的解說：模具的俗稱。常用于比喻具有許多類似點(diǎn)的兩個(gè)或多個(gè)人或者事物。
b) 原型形式創(chuàng)立目標(biāo)(把結(jié)構(gòu)函數(shù)和原型形式合在一起)
用同一個(gè)結(jié)構(gòu)函數(shù)結(jié)構(gòu)的實(shí)例，具有許多的一起點(diǎn)(一起的特點(diǎn)或者函數(shù))，這些一起點(diǎn)便是許多書籍描繪的“一切實(shí)例同享的特點(diǎn)和辦法”。這些一起點(diǎn)便是用prototype特點(diǎn)進(jìn)行維護(hù)的。詳細(xì)的做法便是：一切實(shí)例同享的特點(diǎn)和辦法用prototype特點(diǎn)進(jìn)行表明。
如：
function Person(id,name,sex){
//在結(jié)構(gòu)函數(shù)里寫的是每個(gè)實(shí)例特有的特點(diǎn)(特點(diǎn)值不相同)
this.id =id;
this.name = name;
this.sex = sex;
}
//一切人的國籍都是我國，國籍特點(diǎn)就用prototype來表明
Person.prototype.country = “我國”;
//一切人吃的邏輯都相同。所以，吃的函數(shù)也用prototype來表明
Person.Prototype.eat = function(str){
alert(this.name+”在吃”+str+”，天在看……”);
}
var p1 = new Person(“007”, “樂樂”, “女”);
var p2 = new Person(“008”, “寶寶”, “男”);
Console.log(p1.country);//我國
Console.log(p2.country); //我國
p1和p2兩個(gè)實(shí)例的country特點(diǎn)值都是我國，因?yàn)樗鼈儍蓚€(gè)是一個(gè)結(jié)構(gòu)函數(shù)實(shí)例化出來的(一個(gè)模子“刻”出來的)。
如下是示意圖，其中帶箭頭的線表明指向。
圖中可以看出：
1)、在Person結(jié)構(gòu)函數(shù)的prototype特點(diǎn)中有個(gè)constructor特點(diǎn)，指向了結(jié)構(gòu)函數(shù)自身。constructor特點(diǎn)究竟有何用，我們先把它save到大腦中，后邊給我們解說。
2)、兩個(gè)實(shí)例p1和p2指向了Person結(jié)構(gòu)函數(shù)的prototype特點(diǎn)，跟Person結(jié)構(gòu)函數(shù)沒有直接關(guān)系。
3)、兩個(gè)實(shí)例p1和p2都有[[prototype]]特點(diǎn)。實(shí)例靠著 [[prototype]]特點(diǎn)找到它所對應(yīng)結(jié)構(gòu)函數(shù)的原型，也是靠它來找到，原型中的特點(diǎn)的。留意， [[prototype]]特點(diǎn)不能直接在代碼中運(yùn)用。
c) 原型(類型的)特點(diǎn)和實(shí)例(類型的)特點(diǎn)
每個(gè)實(shí)例特有的特點(diǎn)和辦法存放在實(shí)例所在內(nèi)存區(qū)域，也叫實(shí)例特點(diǎn)，如以上例中的id，name，sex特點(diǎn)。一切實(shí)例同享的特點(diǎn)和辦法，都在原型(prototype)對應(yīng)的內(nèi)存區(qū)域，也叫原型的特點(diǎn)，如上例中的country。
i. 原型(類型的)特點(diǎn)變成實(shí)例(類型的)特點(diǎn)
這里有點(diǎn)疑問，隨著時(shí)刻的推移，有的目標(biāo)的原型特點(diǎn)的值會(huì)發(fā)生變化?
如：寶寶年輕時(shí)，覺得俄羅斯的美女多，決定久居俄羅斯了。即p2的country(國籍)的值為俄羅斯。那該如何是好，改仍是不改?改了會(huì)不會(huì)影響其它目標(biāo)的country特點(diǎn)的值。不改，又不能滿意需求。看來，JAVASCRIPT在這方面仍是考慮到了。可以改，并且不會(huì)影響其它目標(biāo)的特點(diǎn)值。
還有，假如呈現(xiàn)了實(shí)例特點(diǎn)和原型特點(diǎn)重名的情況，用實(shí)例來拜訪該特點(diǎn)時(shí)，究竟拜訪的是實(shí)例特點(diǎn)仍是原型特點(diǎn)。這個(gè)JAVASCRIPT中解決了。
如何解決上面的問題的。在JAVASCRIPT中，當(dāng)給原型特點(diǎn)賦值時(shí)，在對應(yīng)實(shí)例中會(huì)增加了一個(gè)同名的實(shí)例特點(diǎn)，然后把值賦給實(shí)例特點(diǎn)，而原型特點(diǎn)的值不受影響。當(dāng)拜訪該特點(diǎn)時(shí)，先在實(shí)例特點(diǎn)中尋覓，假如找不到，再在原型特點(diǎn)中找。
如以下代碼：
P2.country = “俄羅斯”;
執(zhí)行時(shí)，內(nèi)存會(huì)變成如下：
在p2的實(shí)例中增加一個(gè)country實(shí)例特點(diǎn)，內(nèi)容為“俄羅斯”(圖中赤色的框里)。這樣，代碼p1.country依然去找實(shí)例特點(diǎn)的值“我國”。而p2.country先在實(shí)例特點(diǎn)中找country，找到了，就不用去原型特點(diǎn)中去找了。即，當(dāng)實(shí)例拜訪特點(diǎn)時(shí)，會(huì)先在實(shí)例的內(nèi)存中去尋覓，假如找不到就會(huì)到原型的內(nèi)存中去尋覓。
ii. 刪去實(shí)例(類型的)特點(diǎn)
隨著寶寶年齡的增長，對美女沒有了愛好，并且覺得仍是在自己的國家好，又想回來。即p2.country的值為”我國”，這時(shí)候是可以運(yùn)用原型里的特點(diǎn)值，怎么辦?沒事，運(yùn)用delete p2.country就會(huì)把p2的實(shí)例特點(diǎn)country刪去掉。
定心吧，delete是不能刪去掉原型的特點(diǎn)的。
3、 承繼時(shí)原型的了解(原型鏈)
原型鏈?zhǔn)荅CMAScript中實(shí)現(xiàn)承繼的一種方法。假如不明白承繼，請先百度，了解承繼的概念。
原型承繼的根本思想是讓原型特點(diǎn)(目標(biāo))指向另外一個(gè)類型的的實(shí)例。
如：
父目標(biāo)：人
function Person(id,name,age){
this.id = id;
this.name = name;
this.age = age;
}
Person.prototype.eat = function(str){
alert(this.name+"在吃"+str);
}
子目標(biāo)：程序員
function Programmer(languages){
this.languages = languages;
}
//此句話運(yùn)用原型實(shí)現(xiàn)了承繼，子目標(biāo)Programmer的原型特點(diǎn)指向了父目標(biāo)Person的實(shí)例。
Programmer.prototype = new Person(“008”, “寶寶”, “20”);
Programmer.prototype.writeCode=function(){
alert(this.name+"一邊努力地寫著代碼，一邊想著‘多寫代碼，多賺錢’");
}
從圖中可以看出，子目標(biāo)Programmer擁有了父目標(biāo)的特點(diǎn)(id，name，age)和辦法(eat)。自己特有的特點(diǎn)languages和辦法writeCode()。成功完成了承繼。
特別要留意，子目標(biāo)完成了承繼關(guān)系后，再給子目標(biāo)的原型中增加特點(diǎn)和辦法。即，先寫代碼Programmer.prototype = new Person(“008”, “寶寶”, “20”); 再寫代碼：
Programmer.prototype.writeCode=function(){
alert(this.name+"一邊努力地寫著代碼，一邊想著‘多寫代碼，多賺錢’");
}
否則，當(dāng)子目標(biāo)的prototype(原型)特點(diǎn)的指向發(fā)生變化后，原來在prototype(原型)特點(diǎn)中所寫特點(diǎn)和辦法就會(huì)丟掉。
原型鏈承繼：當(dāng)B目標(biāo)的原型特點(diǎn)指向了A目標(biāo)的實(shí)例，而C目標(biāo)的原型特點(diǎn)指向B目標(biāo)的實(shí)例時(shí)，就完成了原型鏈承繼。
注：
1、此篇文章可以結(jié)合JAVASCRIPT中創(chuàng)立目標(biāo)的幾種方法進(jìn)行學(xué)習(xí)。假如再能結(jié)合上篇文章《比照引證類型與根本類型》就會(huì)更好
2、此篇文章只是為了了解prototype特點(diǎn)，所以，許多的留意點(diǎn)并沒有觸及。作者更期望我們學(xué)一點(diǎn)，了解一點(diǎn)，而不是大而全。并且學(xué)習(xí)是循序漸進(jìn)的。先把prototype特點(diǎn)了解了，再去重視留意點(diǎn)。
本文由“指尖代碼”發(fā)布，2019年4月9日
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
