摘要:容易理解創建一個構造函數并使用該函數和操作符初始化對象。被繼承的對象被稱作原型,并且繼承的屬性可能通過構造函數的對象找到。
This is my first blood!
第一次在segmentfault上寫(chao)文章。
內容提要:認(wu)真(liao)的整理一下javascript對象的知識,人家還是菜鳥,必須要搞懂啊。
PS:
1.真的菜,所以看到文章的同學,推薦采用隨緣閱讀法,請自行忽略里面充斥大量的,哦不,巨量的錯誤、bug。
2.如果您愿意指出我的錯誤,那最好不過了,寡人謝謝!(參見文章中的‘求大腿’的字樣)
3.不過,如果你指望以此契機,期待一場與程序媛之間的轟轟烈烈的深刻的交互,那您還是繞道而行吧。哥真的是漢子,不是童瑤。
4.說是筆記,大部分的代碼都是copy的,不爽的同學,直接看參考資料吧。
1.MDN:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects
2.文檔:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object
在 JavaScript 中,幾乎所有的東西都是對象。所有的原生類型除了 null 與 undefined 之外都被當作對象。它們可以被賦予屬性(某些類型的被賦予的屬性不能被持久化),并且它們都有對象的全部特征。
三 創建對象兩種創建方式:
1.對象初始化器(Object Initializer)創建對象。(容易理解)
2.創建一個構造函數并使用該函數和 new 操作符初始化對象。(容易裝逼)
模版:
var obj = { property_1: value_1, // property_# may be an identifier... 2: value_2, // or a number... // ..., "property n": value_n }; // or a string
實例:
var lolhero = new Object(); lolhero.basicSkill = "Q、W、E"; lolhero.bigSkill = "R only"; lolhero.commotSkill = "D&F"; //兩種訪問方式 console.log(lolhero["basicSkill"]);//采用類似關聯數組的方式訪問 console.log(lolhero.basicSkill);//直接訪問容易裝逼的創建方式
使用構造函數,需要兩步!!!
通過創建一個構造函數來定義對象的類型。首字母大寫是非常普遍而且很恰當的慣用法。
通過 new 創建對象實例。
寫的太好直接copy過來了
function Car(make, model, year) { this.make = make; this.model = model; this.year = year; } var Car = new Car("Eagle", "Talon TSi", 1993); var kenscar = new Car("Nissan", "300ZX", 1992); var vpgscar = new Car("Mazda", "Miata", 1990);
一個對象的屬性值可以是另一個對象。例如,假設你按如下方式定義了 person 對象:
function Person(name, age, sex) { this.name = name; this.age = age; this.sex = sex; }
然后按如下方式創建了兩個 person 實例:
var rand = new Person("Rand McKinnon", 33, "M"); var ken = new Person("Ken Jones", 39, "M");
那么,你可以重寫 car 的定義以包含一個擁有它的 owner 屬性,如:
function Car(make, model, year, owner) { this.make = make; this.model = model; this.year = year; this.owner = owner; }
你可以按如下方式創建新對象:
var car1 = new Car("Eagle", "Talon TSi", 1993, rand); var car2 = new Car("Nissan", "300ZX", 1992, ken);
注意在創建新對象時,上面的語句將 rand 和 ken 作為 owner 的參數值,而不是傳入字符串字面量或整數值。接下來你如果想找出 car2 的擁有者的姓名,你可以訪問如下屬性:
car2.owner.name
注意你總是可以為之前定義的對象增加新的屬性。例如,語句
car1.color = "black";
為 car1 增加了 color 屬性,并將其值設為 "black." 然而,這并不影響其他的對象。想要為某個類型的所有對象增加新屬性,你必須將屬性加入到 car 對象類型的定義中。
PS:發現沒,雖然第二種創建對象的方式看起來不那么自然.
但是卻好用,容易移植,容易重新定義,容易復用。所以,還是裝逼好啊!
感覺挺麻煩的,反正已經有了其他創建方式,暫且不管他了。
(這玩意兒一般用的多嗎?多用來處理什么功能?求大腿)
四 屬性 如果對象的屬性名千奇百怪怎么辦?這樣也是允許的(太難為js了吧),有誰這么{{BANNED}}的用各種類型的屬性名,算了,{{BANNED}}總是有的。
var myObj = new Object(), str = "myString", rand = Math.random(), obj = new Object(); myObj.type = "Dot syntax"; myObj["date created"] = "String with space"; myObj[str] = "String value"; myObj[rand] = "Random Number"; myObj[obj] = "Object"; myObj[""] = "Even an empty string"; console.log(myObj);當然了,屬性值,也可以是個變量
var propertyName = "make"; myCar[propertyName] = "Ford"; propertyName = "model"; myCar[propertyName] = "Mustang";對象的屬性太多,用for(var i in obj){}來遍歷它
hasOwnProperty: 如果 object 具有指定名稱的屬性,那么JavaScript中hasOwnProperty函數方法返回 true;反之則返回 false。此方法無法檢查該對象的原型鏈中是否具有該屬性;該屬性必須是對象本身的一個成員。
function showProps(obj,objName) { var result = ""; for(var i in obj){ if( obj.hasOwnProperty(i) ) { result += objName+"."+i+" = "+obj[i]+" "; } } return result; } console.log(showProps(myObj,"myobj"));
從 ECMAScript 5 開始,有三種原生的方法用于列出或枚舉對象的屬性:
for...in 循環
該方法依次訪問一個對象及其原型鏈中所有可枚舉的屬性。
Object.keys(o)
該方法返回一個對象 o 自身包含(不包括原型中)的所有屬性的名稱的數組。
Object.getOwnPropertyNames(o)
該方法返回一個數組,它包含了對象 o 所有擁有的屬性(無論是否可枚舉)的名稱。
在 ECMAScript 5 中,沒有原生的方法枚舉一個對象的所有屬性。然而,可以通過以下函數完成:
function listAllProperties(o){ var objectToInspect; var result = []; for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)){ result = result.concat(Object.getOwnPropertyNames(objectToInspect)); } return result; }
上面的這個方法,可以訪問所有的可枚舉和不可枚舉的屬性。
PS:對象里面的屬性有可枚舉和不可枚舉兩種。(不甚理解什么是不可枚舉,求大腿!)
五 繼承所有的 JavaScript 對象繼承于至少一個對象。被繼承的對象被稱作原型,并且繼承的屬性可能通過構造函數的 prototype 對象找到。
六 為對象類型定義屬性你可以通過 prototype 屬性為之前定義的對象類型增加屬性。這為該類型的所有對象,而不是僅僅一個對象增加了一個屬性。下面的代碼為所有類型為 car 的對象增加了 color 屬性,然后為對象 car1 的 color 屬性賦值:
Car.prototype.color = null; car1.color = "black";七 如果我想給對象添加方法怎么辦?
兩種方式:
objectName.methodname = function_name;
var myObj = { myMethod: function(params) { // ...do something } };
前面創建對象的完整寫法:
function Car(make, model, year, owner) { //注意displayCar函數里面this和外面的this指向的是同一個car對象! function displayCar() { console.log("this2",this); var result = "A Beautiful " + this.year + " " + this.make + " " + this.model; return result; } this.make = make; this.model = model; this.year = year; this.owner = owner; console.log("this1",this); this.displayCar = displayCar; } var car = new Car("福特汽車","奔馳",1234,"maomaoliang"); console.log(car.displayCar());
或者
function Car(make, model, year, owner) { this.make = make; this.model = model; this.year = year; this.owner = owner; this.displayCar = function(){ //... }; }八 刪除屬性
用 delete 操作符刪除一個不是繼承而來的屬性。下面的例子說明如何刪除一個屬性:
//Creates a new object, myobj, with two properties, a and b. var myobj = new Object; myobj.a = 5; myobj.b = 12; //Removes the a property, leaving myobj with only the b property. delete myobj.a;九 比較對象
在 JavaScript 中 objects 是一個引用類型。將兩個引用相同的對象想比較會返回 true; 將兩個方法和屬性相同的對象相比較,會返回 false;
// fruit object reference variable var fruit = {name: "apple"}; // fruitbear object reference variable var fruitbear = {name: "apple"}; fruit == fruitbear // return false fruit === fruitbear // return false
// fruit object reference variable var fruit = {name: "apple"}; // fruitbear object reference variable var fruitbear = fruit; // assign fruit object reference to fruitbear object reference variable // here fruit and fruitbear pointing to same object called fruit fruit == fruitbear // return true // here fruit and fruitbear pointing to same object called fruit fruit === fruitbear // return true
意思就是,用的時候要比較引用,而不是比較全部咯?求大腿
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/78594.html
摘要:實踐專家用戶的花式使用實踐專家用戶的花式使用實例演示實例演示我們用一個簡單的例子,看看在前端電子表格單元格計算中,如何使用異步函數。這一次用戶使用異步函數從服務器獲取當前服務名,并在顯示出來。背景60年代時,操作系統中獨立運行的單元通常是進程。但隨著計算機技術的發展,人們發現在進程運行過程中,創建、撤銷與切換都要花費較大的時空開銷。到了80年代為了解決這一問題,出現了更小的獨立運行基本單位—...
摘要:你應該知道的種設計模式前端掘金每位開發者都努力寫出可維護的易讀的可復用的代碼。繼承關系本前端書籍整理,高清前端掘金發現了一個下載前端書籍的地方,分享給大家。 你應該知道的 4 種 JavaScript 設計模式 - 前端 - 掘金每位開發者都努力寫出可維護的、易讀的、可復用的代碼。隨著應用變得越來越大,代碼的結構也越來越重要。設計模式驗證了解決這個挑戰的重點——在特定環境中,對同類事物...
摘要:因為同一時間,只能處理一個異步,這又牽扯到單線程問題了。然后控制臺默默打印了個目前前端,異步主要為前后端交互以及定時器,僅僅說前端,如果說的話,還有文件讀取等其他的方面會異步。 此篇文章完全按照我個人理解去寫。 1.何為JS 先說說js干啥的。不負責點說,js就是操作瀏覽器的。 有人可能說nodeJS,nodeJS嚴格意義上只能說是用的ES,因為他沒有dom ,也沒有bom。 簡單點說...
摘要:序列文章從項目中由淺入深的學習微信小程序和快應用從項目中由淺入深的學習前言為什么會有大家有沒想過這個問題原因是是弱類型編程語言也就是申明變量類型可以任意變換。是的超集,也相當于預處理器本文通過一個項目來讓你快速上手。 showImg(https://segmentfault.com/img/bVbruJw?w=1024&h=768); 序列文章 從項目中由淺入深的學習vue,微信小程序...
摘要:序列文章從項目中由淺入深的學習微信小程序和快應用從項目中由淺入深的學習從項目中由淺入深的學習前言的出現前端已經可以用一把梭從前端寫到后臺。 showImg(https://segmentfault.com/img/bVbrRI5?w=1920&h=1080); 序列文章 從項目中由淺入深的學習vue,微信小程序和快應用 (1)從項目中由淺入深的學習react (2)從項目中由淺入深的學...
閱讀 4160·2021-11-22 13:52
閱讀 2075·2021-09-22 15:12
閱讀 1121·2019-08-30 15:53
閱讀 3455·2019-08-29 17:12
閱讀 2190·2019-08-29 16:23
閱讀 1647·2019-08-26 13:56
閱讀 1772·2019-08-26 13:44
閱讀 1880·2019-08-26 11:56