js之prototype用法(給物件新增通用屬性/方法)
函式:原型
每一個建構函式都有一個屬性叫做原型(prototype,下面都不再翻譯,使用其原文)。這個屬性非常有用:為一個特定類宣告通用的變數或者函式。
prototype的定義
你不需要顯式地宣告一個prototype屬性,因為在每一個建構函式中都有它的存在。你可以看看下面的例子:
Example PT1
CODE:
function Test()
{
}
alert(Test.prototype); // 輸出 "Object"
給prototype新增屬性
就如你在上面所看到的,prototype是一個物件,因此,你能夠給它新增屬性。你新增給prototype的屬性將會成為使用這個建構函式建立的物件的通用屬性。
例如,我下面有一個數據型別Fish,我想讓所有的魚都有這些屬性:livesIn="water"和price=20;為了實現這個,我可以給建構函式Fish的prototype新增那些屬性。
Example PT2
CODE:
function Fish(name, color)
{
this.name=name;
this.color=color;
}
Fish.prototype.livesIn="water";
Fish.prototype.price=20;
接下來讓我們作幾條魚:
CODE:
var fish1=new Fish("mackarel", "gray");
var fish2=new Fish("goldfish", "orange");
var fish3=new Fish("salmon", "white");
再來看看魚都有哪些屬性:
CODE:
for (int i=1; i<=3; i++)
{
var fish=eval_r("fish"+i); // 我只是取得指向這條魚的指標
alert(fish.name+","+fish.color+","+fish.livesIn+","+fish.price);
}
輸出應該是:
CODE:
"mackarel, gray, water, 20"
"goldfish, orange, water, 20"
"salmon, white water, 20"
你看到所有的魚都有屬性livesIn和price,我們甚至都沒有為每一條不同的魚特別宣告這些屬性。這時因為當一個物件被建立時,這個建構函式 將會把它的屬性prototype賦給新物件的內部屬性__proto__。這個__proto__被這個物件用來查詢它的屬性。
你也可以通過prototype來給所有物件新增共用的函式。這有一個好處:你不需要每次在構造一個物件的時候建立並初始化這個函式。為了解釋這一點,讓我們重新來看Example DT9並使用prototype來重寫它:
用prototype給物件新增函式
Example PT3
CODE:
function Employee(name, salary)
{
this.name=name;
this.salary=salary;
}
Employee.prototype.getSalary=function getSalaryFunction()
{
return this.salary;
}
Employee.prototype.addSalary=function addSalaryFunction(addition)
{
this.salary=this.salary+addition;
}
我們可以象通常那樣建立物件:
CODE:
var boss1=new Employee("Joan", 200000);
var boss2=new Employee("Kim", 100000);
var boss3=new Employee("Sam", 150000);
並驗證它:
CODE:
alert(boss1.getSalary()); // 輸出 200000
alert(boss2.getSalary()); // 輸出 100000
alert(boss3.getSalary()); // 輸出 150000
這裡有一個圖示來說明prototype是如何工作的。這個物件的每一個例項(boss1, boss2, boss3)都有一個內部屬性叫做__proto__,這個屬性指向了它的構造器(Employee)的屬性prototype。當你執行 getSalary或者addSalary的時候,這個物件會在它的__proto__找到並執行這個程式碼。注意這點:這裡並沒有程式碼的複製(和 Example DT8的圖表作一下對比)。
相關推薦
js之prototype用法(給物件新增通用屬性/方法)
函式:原型 每一個建構函式都有一個屬性叫做原型(prototype,下面都不再翻譯,使用其原文)。這個屬性非常有用:為一個特定類宣告通用的變數或者函式。 prototype的定義 你不需要顯式地宣告一個prototype屬性,因為在每一個建構函式中都有它的存在。你可
js陣列操作大全(pop,push,unshift,splice,shift方法)
他們改變的都是原有的那個陣列的長度和內容,如果在外面定一個新元素接收他的變化,那麼這個元素只能是獲取到他處理之後的長度。 pop 最後刪除 var a = [1,2,3,4,5]; var b = a.pop(); //a:[1,2,3,4] b:5
JS迴圈中給物件新增事件addEventListener的用法
在做百度遷徙圖的時候遇到: 迴圈中使用addEventListener方法,給各個marker物件增加點選事件, 順便記錄下百度地圖的東西,整段程式碼都貼過來吧。。。。 // 百度地圖API功能 var map = new BMap.Map("allm
android影象處理系列之五--給圖片新增邊框(中)
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
android影象處理系列之六--給圖片新增邊框(下)-圖片疊加
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
android影象處理系列之四--給圖片新增邊框(上)
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
js 給json物件新增屬性,再給新新增的屬性新增值
json = {id:'123',name:'張三'} 新增一個 status 屬性: json.newParam ='status'; 賦值 json.status = "0";
給物件新增屬性----Prototype原型物件
給物件新增屬性 1 Object 物件:Object是所有物件的基礎,任何其他物件都是從Object擴充套件而來,或者說是繼承。這一切都是由“原型”來完成。 2 原型物件:原型是物件的一個屬性,也就是prototype內部的屬性,每個物件都有這個內部屬性,它本身也是一
為JS的Date物件擴充套件幾個好用的prototype函式(加上若干個月、等)
幾個經常被用到的函式,又沒用被Date物件定義的,自己定義一下,方便使用: 獲取Date物件的ISO格式的日期部分(去掉時分秒)加減若干天加上若干個月(需要處理進位等若干複雜情況)返回下個月的第一天
js 給json物件新增屬性,再給新新增的屬性新增值
json = {id:'123',name:'張三'} 新增一個 status 屬性: json.newParam ='status'; 賦值 json.status = "0"; 此時資料為:json={id:'123',name:'張三'
vue.js之常操作(實例)
tex styles title oct lar per click 一個 lis 聽說大家都開始用react、vue這些MVVM框架了,為了不落後,還是學學吧!(之前只對angular了解一點,時間一長,也忘得差不多了,所以學習vue相當於從小白開始) 從vue.js官網
JS基礎之傳參(值傳遞、對象傳遞)
rate ati 無效 over 並不是 undefined 字符 https cal 一、概念 我們需了解什麽是按值傳遞(call by value),什麽是按引用傳遞(call by reference)。在計算機科學裏,這個部分叫求值策略(Evaluation
從零開始的全棧工程師——js篇2.12(面向物件)
面向物件 Js一開始就是寫網頁特效,面向過程的,作者發現這樣寫不好,程式碼重複利用率太高,計算機記憶體消耗太大,網頁效能很差。 所以作者就收到java和c的影響,往面向物件靠齊。Js天生有一個Object,但他沒有面向物件的特徵(封裝,繼承,多型)。 最後研究出了建構函式。 建構函式最終目的是生成物件
Java面向物件之多型(向上轉型與向下轉型)
多型,大概每個人都知道。但是,又有幾個人真的理解什麼是多型、多型有哪些細節呢?如果你看到這篇文章的名字,腦海中對多型沒有一個清晰的概念,不妨點進來看看,也許會有收穫。 什麼是多型 簡單的理解多型 多型,簡而言之就是同一個行為具有多個不同表現形式或形態的能力。比如說,有一杯水,我不知道
js的input檢測(給愛的人發個郵件吧)
通過一系列的練習掌握如何分解問題、解決問題,在這個過程中如何設計自己的程式碼結構,如何優化及重構。 課程描述 通過一個小練習綜合運用 HTML、CSS、JavaScript,我們要實現一個郵箱輸入的提示功能。最終示意圖: 部分程式碼參考: <div class="wrap
ES6 Generator函式之基本用法(2)
Generator函式之基本用法(2) 上一篇文章中總結了Generator函式基本概念: yield表示式,與Iterator介面、for…of迴圈的關係,next方法,throw方法,return方法等內容。 這篇文章接著上一篇文章繼續總結Generator函式的基本用法 (1)
ES6 Generator函式之基本用法(1)
Generator函式之基本用法 (1)基本概念 Generator函式是ES6 提供的一種非同步程式設計解決方案,語法與傳統函式完全不同。 Generator函式與普通函式在寫法上的不同 1.function命令與函式名之間有一個星號(*)。 2.函式體內部使用yield語
呼叫物件的方法,給物件新增屬性,獲取物件的屬性
class Cat: # 屬性 # 方法 def eat(self): print(“貓在吃魚…”) def drink(self): print("貓在喝可樂...") #建立了一個物件 tom = Cat() tom.eat() # 呼叫物件的eat方法 tom.dri
JS之Callback function(回撥函式)
1.概念: 從概念上講,回撥函式與普通函式的本質在於:呼叫者的不同。普通函式由程式設計師程式碼呼叫,而回調函式由作業系統在適當的時間呼叫。 回撥函式主要用於處各種事件和處理。由於WINDOWS系統中存在大量程式設計師事先不可知的事件,例如滑鼠的單擊,程式設計師事先無法得知終
Node.js之伺服器配置(一)
服務有修改就要重新啟動node 伺服器錯誤的時候,返回的都是500 200說明返回的是正確的情況 1.拉包操作 npm install express 成功之後會出現一個包 2.把index頁面給客戶端寫回去 var express = requir