建站
咨詢
售后
建站咨詢
新聞中心
JavaScript是一門動(dòng)態(tài)語言, 你可以在任何時(shí)候向?qū)ο笊咸砑訉傩?如下
創(chuàng)新互聯(lián)專注于企業(yè)成都全網(wǎng)營銷、網(wǎng)站重做改版、遂寧網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、商城網(wǎng)站開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為遂寧等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。
- function Student() {
- this.name = 'LeBron James';
- this.gender = 'Male';
- }
- var studObj1 = new Student();
- studObj1.age = 15;
- alert(studObj1.age); // 15
- var studObj2 = new Student();
- alert(studObj2.age); // undefined
正如上面的實(shí)例, age 屬性附加在 studObj1 實(shí)例上. 然而 studObj2 實(shí)例沒有這個(gè)屬性, 因?yàn)?age 屬性只在 studObj1 實(shí)例上定義了.
那么, 如果想在后期添加一個(gè)屬性且能被所有的實(shí)例所共享, 該怎么辦? 答案這就今天主角 Prototype.
Prototype 是一個(gè)對(duì)象, 默認(rèn)情況下與JavaScript中的任何一個(gè)函數(shù)或?qū)ο笥嘘P(guān), 只是唯一區(qū)別在于函數(shù)的prototype 屬性是可訪問和可修改的，而對(duì)象的prototype屬性是不可見的.
默認(rèn)情況下任何一個(gè)函數(shù)包含 Prototype 對(duì)象, 如下圖:
prototype 對(duì)象是一種特殊類型的可枚舉對(duì)象, 可以將需要附加屬添加到其上，這些屬性將在其構(gòu)造函數(shù)的所有實(shí)例之間共享。
我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個(gè)月整理了一份最適合2019年學(xué)習(xí)的web前端學(xué)習(xí)干貨，各種框架都有整理，送給每一位前端小伙伴。
因此, 把上面的示例中使用函數(shù)的 prototype 來添加屬性,以便于所有對(duì)象中都可以訪問到, 如下:
- function Student() {
- this.name = 'LeBron James';
- this.gender = 'M';
- }
- Student.prototype.age = 15;
- var studObj1 = new Student();
- alert(studObj1.age); // 15
- var studObj2 = new Student();
- alert(studObj2.age); // 15
使用 字面量 或 通過 new關(guān)鍵字和構(gòu)造函數(shù) 的方式創(chuàng)建的每一個(gè)對(duì)象都包含 __proto__ 屬性, 該屬性指向創(chuàng)建此對(duì)象的函數(shù)的 原型對(duì)象.
你可以在谷歌和火狐開發(fā)者調(diào)試工具中查看該屬性(__proto__) , 根據(jù)下面的示例:
- function Student() {
- this.name = 'LeBron James';
- this.gender = 'M';
- }
- var studObj = new Student();
- console.log(Student.prototype); // object
- console.log(studObj.prototype); // undefined
- console.log(studObj.__proto__); // object
- console.log(typeof Student.prototype); // object
- console.log(typeof studObj.__proto__); // object
- console.log(Student.prototype === studObj.__proto__ ); // true
正如上面例子看到, 函數(shù)通過 [[函數(shù)名稱]].prototype 方式訪問到原型對(duì)象. 但是, 對(duì)象(實(shí)例)并沒有暴露出 prototype 屬性，而是使用 __proto__ 來訪問它.
Object 對(duì)象的原型
前面提及到, 原型對(duì)象在對(duì)象中是不可見. 使用 Object.getPrototypeOf(obj) 方法來訪問實(shí)例的原型對(duì)象. (這也是推薦方式, __proto__ 并不是標(biāo)準(zhǔn)屬性, 在IE11以下其它瀏覽器中沒有實(shí)現(xiàn)).
- function Student() {
- this.name = 'LeBron James';
- this.gender = 'M';
- }
- var studObj = new Student();
- Student.prototype.sayHi= function(){
- alert("Hi");
- };
- var studObj1 = new Student();
- var proto = Object.getPrototypeOf(studObj1);
- // returns Student's prototype object
- alert(proto.constructor);
- // returns Student function
Object 原型對(duì)象包含如下 屬性 和 方法
屬性描述constructor返回創(chuàng)建該實(shí)例的構(gòu)造函數(shù)__proto__指向創(chuàng)建該實(shí)例的構(gòu)造函數(shù)的原型對(duì)象.方法描述hasOwnProperty()返回一個(gè)布爾值，指示對(duì)象是否包含指定的屬性作為該對(duì)象的直接屬性，而不是通過原型鏈繼承。isPrototypeOf()返回一個(gè)布爾值，指示指定的對(duì)象是否位于調(diào)用此方法的對(duì)象的原型鏈中。propertyIsEnumerable()返回一個(gè)布爾值，該布爾值指示指定的屬性是否可枚舉。toLocaleString()返回本地格式的字符串.toString()返回對(duì)象字符串形式.valueOf()返回指定對(duì)象的原始值.
Chrome 和 Firfox 將對(duì)象的原型表示為 __proto__, 而內(nèi)部引用為 [[Prototype]]. IE不支持,只有IE11包含它.
修改原型
如上所述, 每個(gè)對(duì)象都能鏈接到函數(shù)的原型對(duì)象. 如果您更改了函數(shù)的原型, 則只有新對(duì)象將鏈接到更改后的原型. 所有其他現(xiàn)有對(duì)象仍然鏈接到舊的函數(shù)原型. 下面實(shí)例來演示這個(gè)場(chǎng)景:
- function Student() {
- this.name = 'LeBron James';
- this.gender = 'M';
- }
- Student.prototype.age = 15;
- var studObj1 = new Student();
- alert('studObj1.age = ' + studObj1.age); // 15
- var studObj2 = new Student();
- alert('studObj2.age = ' + studObj2.age); // 15
- Student.prototype = { age : 20 };
- var studObj3 = new Student();
- alert('studObj3.age = ' + studObj3.age); // 20
- alert('studObj1.age = ' + studObj1.age); // 15
- alert('studObj2.age = ' + studObj2.age); // 15
使用原型
原型對(duì)象被JavaScript引擎用來做兩件事:
查找對(duì)象的屬性和方法在JavaScript中實(shí)現(xiàn)繼承
- function Student() {
- this.name = 'LeBron James';
- this.gender = 'M';
- }
- Student.prototype.sayHi = function(){
- alert("Hi");
- };
- var studObj = new Student();
- studObj.toString();
在上面的示例, toString() 方法在 Student 中沒有定義, 那么它是如何以及從哪里找到 toString() 的呢?
在這里，原型出現(xiàn)了. 首先, JavaScript 引擎檢查 studObj 是否存在 toString 方法?. 如果沒有找到,那么它使用 studObj 的 __proto__ 鏈接指向 Student函數(shù) 的 原型對(duì)象. 如果它仍然無法找到它那么它會(huì)在往上層并檢查 Object 函數(shù)的原型對(duì)象,因?yàn)樗袑?duì)象都是從 JavaScript 中的 Object 派生的,并查找 toString() 方法. 因此, 它在Object函數(shù)的原型對(duì)象中找到 toString()方法，因此我們可以調(diào)用 studObj.toString().
查找方式,如下圖所示
上述就是原型基本知識(shí)點(diǎn)以及應(yīng)用.
文章名稱：這篇文章，讓你了解JavaScript中的原型(基礎(chǔ)篇-圖文)
文章地址：http://m.5511xx.com/article/dhoospp.html
