JavaScript 建立和淺析自定義物件
在Js中,除了Array、Date、Number等內建物件外,開發者可以通過Js程式碼建立自己的物件。
目錄
1. 物件特性:描述物件的特性
2. 建立物件方式:物件直接量、new 建構函式、Object.create() 等三種方式
3. 序列化物件:序列化和反序列化物件
4. 面向物件程式設計:描述自定義物件的面向物件模擬;包含例項成員、靜態成員等等
5. 繼承:描述物件的繼承特性。
1. 物件特性
① 結構類似'字典' :物件的屬性類似鍵/值對;屬性的名稱為字串,屬性的值為任意型別。
② 原型繼承:Js的物件可繼承原型的屬性。
③ 動態結構:可動態新增、刪除物件的屬性。
④ 引用型別:js中的物件為引用型別。a為一個物件,b=a,修改b也會造成a的修改。
2. 建立物件方式
Js中建立自定義物件,主要通過三種方式:物件直接量、new 建構函式以及Object.create()方法。每一種建立方式繼承的原型物件都不同:
① 物件直接量:原型為Object.prototype。
② new 建構函式:原型為建構函式的prototype屬性。
③ Object.create():原型為傳入的第一個引數,若第一個引數為null,以Object.prototype為原型。
2.1 物件直接量
說明:直接通過 屬性名/值來建立。
語法:var o = { name:'tom', age:22 };
原型:Object.prototype
適用場景:應用在某一特定的作用域裡。
示例:
var o = { name: 'tom' } console.log(o.constructor.prototype); // => Object() :物件直接量的原型為Object console.log(o.constructor.prototype === Object.prototype); // true
2.2 new 建構函式
說明:建構函式也是種函式,但為了區分平常所用的函式,建構函式的函式名採用大駱駝峰寫法(首字母大寫)。
語法:var o = new ClassName();
原型:建構函式的prototype屬性。
示例:
// 1.建立建構函式 function People(name) { this.name; } var p = new People('Tom'); console.log(p.constructor.prototype); // => People{} :原型為建構函式的prototype console.log(p.constructor.prototype === People.prototype); // => true // 2.自定義物件的多層繼承 :constructor返回最先呼叫的建構函式 function Student(age) { this.age = age; } Student.prototype = new People(); // 設定Student的原型為People物件 var s = new Student(22); // 物件初始化時,先呼叫People(),再呼叫Student() console.log(s.constructor); // => function People :物件s返回的建構函式為People console.log(s.constructor.prototype); // => People{} :原型物件為People console.log(s.constructor.prototype === People.prototype); // => true
2.3 Object.create(prototype, propertyDescriptor) :ECMAScript 5規範
說明:建立並返回一個指定原型和指定屬性的物件。
語法:Object.create(prototype, propertyDescriptor)
引數:
①prototype {prototype} :建立物件的原型,可以為null。若為null,物件的原型為undefined。
②propertyDescriptor {propertyDescriptor} 可選:屬性描述符。
原型:默然原型型為①參;若①參為null,物件的原型為undefined。
示例:
// 1.建立一個原型為null的物件 var o = Object.create(null, { name: { value: 'tom' } }); console.log(o.constructor); // => undefined // 2.建立一個原型為Array的物件 var array = Object.create(Array.prototype, {}); console.log(array.constructor); // => function Array 建構函式 console.log(array.constructor.prototype); // => [] :原型物件為陣列 // 3.建立一個原型為自定義類的物件 function People() { } var p = Object.create(People.prototype, {}); console.log(p.constructor); // => function People 建構函式 console.log(p.constructor.prototype); // => People{} :原型物件People
3. 序列化
Js中通過呼叫JSON方法,可以將物件序列化成字串,也可以將字串反序列化成物件。
3.1 JSON.stringify(object) :序列化物件;把物件轉換成一個字串。
引數:
①object {Object} :任意物件
返回值:
{string} 返回一個轉換後的字串。
示例:
var o = { x: 1, y: 2 } JSON.stringify(o); // => {"x":1,"y":2}:返回一個字串
3.2 JSON.parse(jsonStr) :將一個Json字串轉換為物件。
引數:
① jsonStr {JsonString} :一個Json字串;字串中的屬性名稱要用引號框起來
返回值:
{Object} 返回一個轉換後的物件
示例:
var str = '{ "x":1,"y":2 }'; // 字串的屬性名要用引號框起來 var o = JSON.parse(str); console.log(o.x); // => 1:輸出物件屬性x的值
4. 面向物件程式設計
模擬高階語言的中的物件;描述高階物件中的例項成員、靜態成員、繼承等特性。
4.1 this關鍵字
說明:在建立物件的建構函式、方法成員中,this指向為例項物件本身。
示例:
var o = { x: 1, y: 2, sayHello: function () { console.log(this.x); // => 1:讀取例項物件屬性x的值 console.log(x); // => 報錯:讀取的是變數x } }; o.sayHello();
4.2 例項成員
語法:例項物件.屬性名稱 或者 例項物件[屬性名稱]
有以下幾種新增方式:
① 在建立物件的方式中(建構函式、物件直接量等),對this進行新增成員操作。
② 對類名的原型物件新增成員。
③ 對例項物件新增成員(隻影響新增的例項,其他例項不會有此成員)。
示例:
// 1.在建立物件方式中,對this進行操作 function People(name) { this.name = name; } var p = new People('tom'); console.log(p.name); // => tom :讀取例項屬性name的值 // 2.在類的原型物件中進行擴充套件操作 People.prototype.sayHello = function () { alert('Hello:' + this.name); } p.sayHello(); // => 彈出 Hello:tom
4.3 靜態成員
說明:通過類名直接呼叫
語法:類名.屬性名稱
新增方式:直接在類名上新增成員。
示例:
function People(name) { this.name = name; } // 給類新增一個靜態成員hasName:判斷People例項是否含有name屬性 People.hasName = function (p) { if (p.name && p.name.length > 0) { return true; } return false; } var p = new People('tom'); People.hasName(p); // => true
5. 繼承
js通過對原型的操作,可以模擬高階語言物件中的繼承特性。
5.1 單層繼承
說明:對類的原型物件(className.prototype)新增成員後,此類的所有例項物件都會增加此成員。
示例:
function People(name) { this.name = name; } var p1 = new People('張三'); var p2 = new People('李四'); // p1.sayName(); // 報錯,例項沒有此成員 // 對原型物件新增成員, 類的所有例項都會新增此成員 People.prototype.sayName = function () { alert(this.name); } p1.sayName(); // 彈出name屬性的值 p2.sayName(); // 彈出name屬性的值
5.2 多層繼承
說明:
若類的原型物件(className.prototype)指向為某個物件後,此類將會繼承物件的所有例項成員,但不會繼承物件的靜態成員。
示例:
function People(name) { this.name = name; this.sayName = function () { alert(this.name); } } function Student(age) { this.age = age; } Student.prototype = new People(); // 設定Student的原型物件為Prople例項物件 var st = new Student(22); st.name = '張三'; st.sayName(); // => alert('張三') :sayName成員繼承自People類
相關推薦
JavaScript 建立和淺析自定義物件
在Js中,除了Array、Date、Number等內建物件外,開發者可以通過Js程式碼建立自己的物件。 目錄 1. 物件特性:描述物件的特性 2. 建立物件方式:物件直接量、new 建構函式、Object.create() 等三種方式 3. 序列化物件:序列化和反序列化物件 4. 面向物件程式設
javascript 建立並匯入自定義庫
//先建立一個js格式寫入 //建立物件 function $(){ return new Base(); } function Base(){ this.ele=[];//儲存節點物件 } //新增方法 Base.prototype.getID=fu
VS2010 建立和使用自定義資料來源報表詳細過程
VS2010 建立和使用自定義資料來源報表詳細過程 首先看一下最終效果(顯示資料進行了加密,所以成了亂碼) 圖1.窗體的效果 圖2.點選預覽時的效果 1.建立顯示報表的窗體 新建窗體命名為ReportForm並修改窗體名為學生成績 在窗體上只需要拖放一個ReportVi
TFRecords的建立和讀取——自定義圖片資料的製作
TFRecords檔案的建立和讀取 首先是檔案結構,這是我的檔案結構,大家可以自定義檔案位置,但是結構應該如下:首先是主資料夾tensorflow_application/jpg,該資料夾下有兩個次資料夾001和002,001資料夾的下面是一類圖片;002資料
JavaScript實現建立自定義物件的常用方式總結
物件字面量方式 物件字面量方式是建立自定義物件的首選模式,簡單方便。 var per = { name:'zhangsan', age:25, job:'html', sayName:function(){ alert(this.name); } } *
建立javaScript自定義物件,並給屬性賦值
一、直接建立物件例項 方法一: var obj=new Object(); obj.name="bill"; obj.id="123"; 方法二: var obj={name:"bill",id:"
自定義物件重寫hashCode和equals
自定義物件重寫hashCode和equals /* * HashSet集合的自身特點: * 底層資料結構,雜湊表 * 儲存,取出都比較快 * 執行緒不安全,執行速度快 */
Map集合的遍歷方式以及TreeMap集合儲存自定義物件實現比較的Comparable和Comparator兩種方式
Map集合的特點 1、Map集合中儲存的都是鍵值對,鍵和值是一一對應的 2、一個對映不能包含重複的值 3、每個鍵最多隻能對映到一個值上 Map介面和Collection介面的不同 Map是雙列集合的根介面,Collection是單列集合的根介面 1、Map是雙列的(是雙列集合的根介
如何設計和使用自定義的許可權物件 自定義許可權檢查函式
分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!  
自定義物件和json互轉
有一次寫side project時,用json.dumps()方法對UserInfo物件進行序列化,卻報錯了。Object type of UserInfo is not JSON serializable.經過一番探索發現,json.dum
Java 知識點整理-10.Java集合框架 去除ArrayList中重複字串、自定義物件 棧和佇列 泛型 JDK5新特性 asList() toArray(T[] a) ArrayList迴圈巢狀
詳細標題:去除ArrayList中重複字串、自定義物件元素方式 棧和佇列 泛型 JDK5新特性(增強for迴圈 三種迭代(普通for、迭代器、增強for)中的元素能否刪除 靜態匯入 可變引數)Arrays工具類的asList() Collection中toArray(T[] a) 集合巢狀之Arra
js中的內建物件,宿主物件和自定義物件
JS中,可以將物件分為“內建物件”、“宿主物件”和“自定義物件”三種。 1,內建物件 js中的內建物件包括Array、Boolean、Date、Function、Global、Math、Number、Object、RegExp、String以及各種錯誤類物件,包括Erro
java:集合框架(ArrayList儲存字串和自定義物件並遍歷泛型版)
A:案例演示 * ArrayList儲存字串並遍歷泛型版 import java.util.ArrayList; import java.util.Iterator; import com.
List集合儲存字串和自定義物件並遍歷(for迴圈和迭代)
package list; import java.util.ArrayList; import java.util.Iterator; import java.util.List; /** * :List集合儲存字串並遍歷?(迭代器和普通for)
Java_基礎—ArrayList儲存字串和自定義物件並遍歷泛型版
package com.soar.generic; import java.util.ArrayList; import java.util.Iterator; import com.soar.be
JavaScript中的自定義物件
首先需要明確的一點:JavaScript中沒有類的概念,只要有函式就可以建立物件 1.使用無參函式建立物件 function Person(){} var p = new Person(); // 建立一個Person物件 p.id = 12; p.na
jni 自定義物件為引數和返回值
android JNI 提供了很強大的支援,不僅可以採用基本型別做為引數和返回值,同時也支援自定義物件做為引數和返回值,以下舉例說明。 一、定義作為輸入和返回的自定義類 (僅提供兩個簡單型別和一個列印函式) package com.example.jniexample; import andr
SpringMvc的自動裝箱和GET請求引數可以為自定義物件的思考
在我的概念裡邊,GET請求需要加上註解@RequestParam,然後它的引數型別只能是 基本資料型別 或者 基本資料型別的包裝類,比如:@RequestParam String name(預設是必傳的),也可以不加@RequestParam 註解,其實就相當於@RequestParam(required
Golang 奇葩的時間包之Json與struct物件之間互相轉換,JsonDate和JsonTime自定義型別如何實現json編碼和解碼(二)
本篇在專案中實用性極強,推薦珍藏 package main import ( "encoding/json" "fmt" "time" ) type JsonDate time.Time type JsonTime time.Time func (
Excel--使用VBA Code 動態建立、修改和刪除自定義窗體程式碼摘抄
Sub CreateUserform()'PURPOSE: Create & Modify a Userform with VBA Code'AUTHOR: John Walkenbach (www.SpreadsheetPage.com)'SOURCE: www.