Javascript中,對象是非常重要的一個(gè)概念。對象可以用來封裝數(shù)據(jù)和行為,并且通過對象來模擬現(xiàn)實(shí)世界中的事物。
在Javascript中,每個(gè)對象都有一個(gè)原型對象。原型對象是一個(gè)對象,它定義了該對象的屬性和方法。如果在對象本身找不到某個(gè)屬性或方法,Javascript會(huì)自動(dòng)查找該對象的原型對象,直到找到該屬性或方法為止。
var person = {
name: "張三",
age: 18,
getAge: function() {
return this.age;
}
};
var student = Object.create(person);
student.grade = "A";
在上述例子中,我們創(chuàng)建了一個(gè)person對象,它有name、age和getAge三個(gè)屬性。然后我們通過Object.create()方法創(chuàng)建了一個(gè)新對象student,并將person對象作為其原型對象。student對象中并沒有name、age和getAge屬性,但它可以通過原型鏈從person對象中繼承這些屬性。
除了使用字面量創(chuàng)建對象,我們還可以使用構(gòu)造函數(shù)來創(chuàng)建具有相同屬性和方法的多個(gè)對象。構(gòu)造函數(shù)的本質(zhì)是一個(gè)普通函數(shù),我們可以通過new操作符來調(diào)用它并創(chuàng)建出一個(gè)新的對象。構(gòu)造函數(shù)通常以大寫字母開頭,以便于和普通函數(shù)區(qū)分。
function Person(name, age) {
this.name = name;
this.age = age;
this.getAge = function() {
return this.age;
}
}
var personZhangSan = new Person("張三", 18);
var personLiSi = new Person("李四", 19);
在上述例子中,我們定義了一個(gè)Person構(gòu)造函數(shù),它有name、age和getAge三個(gè)屬性。然后我們通過new操作符創(chuàng)建了兩個(gè)新的對象personZhangSan和personLiSi。
在ES6中,Javascript引入了類的概念。類是一組相似對象的集合,它可以定義屬性和方法,以及繼承其他類的屬性和方法。類是一種更易于理解和維護(hù)的方式來創(chuàng)建對象。
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
getAge() {
return this.age;
}
}
let personZhangSan = new Person("張三", 18);
let personLiSi = new Person("李四", 19);
在上述例子中,我們定義了一個(gè)Person類,它有name、age和getAge三個(gè)屬性。然后我們通過new操作符創(chuàng)建了兩個(gè)新的對象personZhangSan和personLiSi。
四葉草
繼承是一種非常重要的概念,它允許我們從一個(gè)類或?qū)ο笾欣^承屬性和方法,并在其基礎(chǔ)上添加或修改特定行為。
在Javascript中,我們可以使用原型和原型鏈來實(shí)現(xiàn)繼承。例如,在前面的例子中,我們已經(jīng)使用了原型鏈來實(shí)現(xiàn)繼承。
function Student(name, age, grade) {
Person.call(this, name, age);
this.grade = grade;
}
Student.prototype = new Person();
Student.prototype.constructor = Student;
var studentZhangSan = new Student("張三", 18, "A");
在上述例子中,我們定義了一個(gè)Student構(gòu)造函數(shù),并通過Person.call()方法將Person的屬性和方法添加到Student對象中。然后我們將Person對象設(shè)置為Student對象的原型,從而實(shí)現(xiàn)了繼承。
在ES6中,我們可以使用extends關(guān)鍵字和super函數(shù)來實(shí)現(xiàn)繼承。
class Student extends Person {
constructor(name, age, grade) {
super(name, age);
this.grade = grade;
}
}
let s = new Student("張三", 18, "A");
在上述例子中,我們定義了一個(gè)Student類,并使用extends關(guān)鍵字將其繼承自Person類。在類的構(gòu)造函數(shù)中,我們使用super函數(shù)調(diào)用父類的構(gòu)造函數(shù)來添加父類的屬性和方法。然后我們添加了grade屬性,從而實(shí)現(xiàn)了繼承。
四葉草
在Javascript中,拷貝對象是一個(gè)非常常見的操作。拷貝一個(gè)對象意味著創(chuàng)建一個(gè)新的對象,該對象與原始對象具有相同的屬性和方法。但是,在拷貝對象時(shí)需要注意一個(gè)重要的問題:深拷貝和淺拷貝。
淺拷貝僅僅復(fù)制對象的引用,而不是對象本身。這意味著如果我們更改拷貝對象或原始對象的屬性,那么兩者都將受到影響。深拷貝則會(huì)創(chuàng)建一個(gè)全新的對象,該對象與原始對象完全獨(dú)立,修改拷貝對象或原始對象的屬性不會(huì)相互影響。
var person = {
name: "張三",
age: 18,
hobbies: ["music", "reading"]
};
// 淺拷貝
var shallowCopy = Object.assign({}, person);
// 深拷貝
var deepCopy = JSON.parse(JSON.stringify(person));
在上述例子中,我們定義了一個(gè)person對象,它有name、age和hobbies三個(gè)屬性。然后我們使用Object.assign()方法創(chuàng)建了一個(gè)淺拷貝對象,并使用JSON.parse()和JSON.stringify()方法創(chuàng)建了一個(gè)深拷貝對象。如果我們將hobbies數(shù)組中的元素從"music"改為"painting",那么只有深拷貝對象的hobbies數(shù)組會(huì)被修改,淺拷貝對象和原始對象的hobbies數(shù)組都不受影響。
在本文中,我們介紹了Javascript中對象的高級應(yīng)用,包括原型和原型鏈、構(gòu)造函數(shù)和類、繼承以及深拷貝和淺拷貝。這些概念是Javascript面向?qū)ο缶幊痰幕A(chǔ),掌握它們將使你能夠更好地理解和使用Javascript中的對象。
希望本文能夠?qū)δ兴鶐椭兄x您的閱讀!
人人為我,我為人人,謝謝您的瀏覽,我們一起加油吧。
1.專門在瀏覽器編譯與執(zhí)行的編程語言
2.幫助瀏覽器解決用戶提出簡單需求
3.基于面向?qū)ο蟛捎萌躅愋驼Z法風(fēng)格實(shí)現(xiàn)
老杜講解的JavaScript教程,內(nèi)容涵蓋了JavaScript核心語法、JavaScript內(nèi)置支持類、JavaScript調(diào)試、JavaScript DOM編程、JavaScript BOM編程、大量前端小案例、JavaScript事件處理、JavaScript對象、繼承、JSON等知識點(diǎn)。
接下來說的JavaScript學(xué)習(xí)內(nèi)容均與下邊的javaweb學(xué)習(xí)教程相結(jié)合
http://www.bjpowernode.com/?chaijavaweb
1.在HTML文件中<script>內(nèi)部進(jìn)行命令書寫
2. 在js文件中書寫命令格式【推薦】
1.變量聲明方式: JavaScript弱類型編程語言,因此禁止使用具體數(shù)據(jù)類型修飾變量
2.變量賦值方式
3.變量名命名規(guī)則
1)變量名只能存在字母,數(shù)字,下劃線, 美元符號($)
2) 變量名不能以數(shù)字為開始
3) 不能使用JavaScript關(guān)鍵字作為變量名 var var=10; error
1.分類:
1)基本數(shù)據(jù)類型
2) 高級引用數(shù)據(jù)類型
2. 基本數(shù)據(jù)類型
1) number類型:數(shù)字類型,整數(shù),單精度,雙精度都是number類型
2) string類型: 字符串類型,字符串既可以包裹在一對雙引號中也可以包裹在一對單引號 "abc" 'abc'
3) boolean類型: 布爾類型 值true/false
3.高級引用數(shù)據(jù)類型
1) function類型:函數(shù)類型.相當(dāng)于Java中Method類型。一個(gè)function類型對象用于管理一個(gè)函數(shù)
2) object類型: 在JavaScript中所有通過構(gòu)造函數(shù)生成的對象都是object
4. 變量與數(shù)據(jù)類型之間關(guān)系:
JavaScript中根據(jù)變量賦值內(nèi)容判斷變量的數(shù)據(jù)類型
1. undefined:javascript中變量沒有賦值時(shí),其默認(rèn)值都是undefined。
此時(shí)變量數(shù)據(jù)類型也是undefined
2.NaN: 表示非法數(shù)字。此時(shí)變量數(shù)據(jù)類型是number
3.Infinity:表示一個(gè)無窮大數(shù)字.此時(shí)變量數(shù)據(jù)類型是number
4.null:表示當(dāng)前對象指向一個(gè)空內(nèi)存,但是空內(nèi)存不能存儲數(shù)據(jù)
此時(shí)對象數(shù)據(jù)類型是object
1.與Java控制語句和循環(huán)語句語法完全一致
2.控制語句 if ,switch
3.循環(huán)語句 for while,do..while
1.JavaScript中數(shù)組相當(dāng)于Java中List集合
2.JavaScript中數(shù)組一次可以存放任意類型數(shù)據(jù)
3.JavaScript中數(shù)組控制內(nèi)存?zhèn)€數(shù)可以隨意改變
1.函數(shù)聲明格式
function 函數(shù)名(形參名,形參名){
命令行;
命令行;
eturn 返回值
}
1) 函數(shù)聲明時(shí),必須使用function修飾進(jìn)行修飾
2) 函數(shù)聲明時(shí),禁止指定返回?cái)?shù)據(jù)類型
3)函數(shù)聲明時(shí), 形參只能指定名稱,但是不能指定數(shù)據(jù)類型,也不能使用var進(jìn)行修飾
4)函數(shù)聲明時(shí),可以通過return指定返回?cái)?shù)據(jù)。
2.函數(shù)調(diào)用:
對象.函數(shù)(實(shí)參)
***window對象中屬性和函數(shù)在調(diào)用時(shí),可以不寫window
1.dom對象
1) dom對象:document Object model;文檔模型對象
2) 一個(gè)dom對象用于管理一個(gè)HTML標(biāo)簽
3)瀏覽器每加載一個(gè)HTML標(biāo)簽時(shí),自動(dòng)為這個(gè)HTML標(biāo)簽生成一個(gè)DOM對象
2.document
1)document對象 文檔對象
2) 瀏覽器根據(jù)html標(biāo)簽聲明順序在內(nèi)存中以樹形結(jié)構(gòu)方式存儲DOM對象.
3) document對象由瀏覽器生成 。一個(gè)瀏覽器只有一個(gè)document對象
4)document對象負(fù)責(zé)根據(jù)定位條件定位dom對象
1.根據(jù)標(biāo)簽Id屬性定位關(guān)聯(lián)的DOM對象
var domObj = document.getElementById("id屬性")
2.根據(jù)標(biāo)簽name屬性定位關(guān)聯(lián)的DOM對象
var domArray = document.getElementsByName("name屬性")
3.根據(jù)標(biāo)簽類型定位關(guān)聯(lián)的DOM對象
var domArray = document.getElementsByTagName("標(biāo)簽類型")
1.dom對象作用:用于對管理的標(biāo)簽中屬性進(jìn)行賦值與取值操作
2.dom對象管理標(biāo)簽中value屬性:
var num = dom.value; //讀取
dom.value = num; //賦值
3.dom對象管理標(biāo)簽狀態(tài)屬性
checked是boolean checked=true 表示被選中,checked=false 表示未被選中
4.dom對象管理雙目標(biāo)簽提示信息
dom.innerText=值;
var num = dom.innerText;
5.dom對象管理標(biāo)簽的樣式屬性
dom.style.樣式屬性名=值
var num = dom.style.樣式屬性名
1. 介紹:
1)HTML標(biāo)簽中一組屬性
2)監(jiān)聽用戶在何時(shí)以何種方式來操作當(dāng)前標(biāo)簽。當(dāng)監(jiān)聽行為發(fā)生時(shí)。
監(jiān)聽事件通知瀏覽器調(diào)用javascript函數(shù)進(jìn)行處理
2.分類:
1)監(jiān)聽用戶使用鼠標(biāo)操作標(biāo)簽---鼠標(biāo)監(jiān)聽事件
2) 監(jiān)聽用戶使用鍵盤操作標(biāo)簽---鍵盤監(jiān)聽事件
3.鍵盤監(jiān)聽事件
1)onkeydown: 監(jiān)聽用戶在何時(shí)在當(dāng)前標(biāo)簽上按下鍵盤
2)onkeyup:監(jiān)聽用戶在何時(shí)在當(dāng)前標(biāo)簽上彈起鍵盤
3)onkeypress:監(jiān)聽用戶在何時(shí)在當(dāng)前標(biāo)簽按下一次鍵盤
4.鍵盤監(jiān)聽事件
1)onclick:監(jiān)聽用戶何時(shí)使用鼠標(biāo)單擊當(dāng)前的HTML標(biāo)簽
2) onblur:監(jiān)聽用戶何時(shí)使用鼠標(biāo)讓當(dāng)前標(biāo)簽丟失光標(biāo)
3)onfocus:監(jiān)聽用戶何時(shí)使用鼠標(biāo)讓當(dāng)前標(biāo)簽獲得光標(biāo)
4) onmouseover:監(jiān)聽用戶何時(shí)使用鼠標(biāo)懸停在標(biāo)簽上方
5) onmouseout:監(jiān)聽用戶何時(shí)使用鼠標(biāo)從標(biāo)簽上方移開
6)onchange:監(jiān)聽用戶何時(shí)使用鼠標(biāo)改變下拉列表中選中項(xiàng)
avaScript 中的對象用于以“鍵:值”對的格式存儲數(shù)據(jù)集合。 包含在一個(gè)對象中,我們可以有任意數(shù)量的變量和/或函數(shù),這些變量和/或函數(shù)被稱為對象屬性和方法。
創(chuàng)建對象
讓我們舉個(gè)例子! 要將變量 car 初始化為對象,我們使用花括號 {}:
var car = {};
我們現(xiàn)在有一個(gè)空對象,可以通過開發(fā)者工具控制臺訪問,只需輸入我們的變量名:
car// {} [object]
一個(gè)空對象并不是那么有用,所以讓我們用一些數(shù)據(jù)來更新它:
var car = {
name: 'Tesla',
model: 'Model 3',
weight: 1700,
extras: ['heated seats', 'wood decor', 'tinted glass'],
details: function() {
alert('This ' + this.name + ' is a ' + this.model + ' it weighs ' + this.weight + 'kg and includes the following extras: ' + this.extras[0] + ', ' + this.extras[1] + ' and ' + this.extras[2] + '.');
},
display: function() {
alert('This car is a ' + this.name + '.');
}
};
讓我們在我們的開發(fā)者工具控制臺中訪問這些數(shù)據(jù):
car.name // Tesla
car.model // Model 3
car.weight // 1700
car.extras[1] // wood decor
car.details() // This Tesla is a Model 3 it weighs 1700kg and includes the following extras: heated seats, wood decor and tinted glass.
car.display() // This car is a Tesla.
如您所見,每個(gè)名稱/值對必須用逗號分隔,并且每種情況下的名稱和值用冒號分隔。 語法將始終遵循以下模式:
var objectName = {
member1Name: member1Value,
member2Name: member2Value,
member3Name: member3Value
};
對象成員的值幾乎可以是任何東西 - 在我們的汽車對象中,我們有兩個(gè)字符串、一個(gè)數(shù)字、一個(gè)數(shù)組和兩個(gè)函數(shù)。 前四項(xiàng)是數(shù)據(jù)項(xiàng),稱為對象的屬性。 最后兩項(xiàng)是允許對象使用該數(shù)據(jù)做某事的函數(shù),被稱為對象的方法。
這種對象被稱為對象字面量 - 我們在創(chuàng)建對象時(shí)就已經(jīng)寫出了對象的內(nèi)容。 這與從類實(shí)例化的對象進(jìn)行比較,我們稍后會(huì)看一下。
點(diǎn)符號
上面,您已經(jīng)看到使用點(diǎn)符號訪問對象的屬性和方法。 對象名稱 car 充當(dāng)命名空間——需要先輸入它才能訪問對象中的任何內(nèi)容。 然后你寫一個(gè)點(diǎn),后面跟著你想訪問的項(xiàng)目——這可以是一個(gè)簡單屬性的名稱,一個(gè)數(shù)組屬性的項(xiàng)目,或者對對象方法之一的調(diào)用,例如:
car.name
car.extras[1]
car.details()
刪除屬性
我們可以使用 delete 運(yùn)算符來刪除屬性,如下所示:
car.model
// Tesla 3delete car.modelcar.model
// undefined
方括號
例如,如果我們的對象中有一個(gè)多字屬性,例如:
var user = {
name: "Richard",
age: 32,
"likes steaks": true // a multiword property name must be quoted
};
我們無法使用點(diǎn)符號訪問多字屬性:
user.likes potatoes // syntax error!
這是因?yàn)辄c(diǎn)要求鍵是有效的變量標(biāo)識符。 那是沒有空間和其他限制。
另一種方法是使用方括號,它適用于任何字符串:
let user = {};// set
user["likes steaks"] = true;// get
alert(user["likes steaks"]); // true// delete
delete user["likes steaks"];
更新對象成員
我們可以通過簡單地用新值聲明您想要設(shè)置的屬性來更新對象中的值,如下所示:
user.age // 32
user.age = 33 // 33
user.age // 33
您還可以創(chuàng)建對象的全新成員。 例如:
user.surname = 'Smithessson';
// user
{name: "Richard", age: 33, likes steaks: true, surname: "Rembert"}
什么是“this”?
您可能已經(jīng)注意到在我們前面的示例中使用了“this”這個(gè)詞。 請參閱以下內(nèi)容:
display: function() {
alert('This car is a ' + this.name + '.');
}
this 關(guān)鍵字指代正在編寫代碼的當(dāng)前對象 - 所以在這種情況下 this 等價(jià)于 car。
為什么不直接寫汽車呢? 編寫結(jié)構(gòu)良好的面向?qū)ο蟠a是最佳實(shí)踐,這樣做非常有用。 它將確保在成員的上下文發(fā)生變化時(shí)使用正確的值(例如,兩個(gè)不同的汽車對象實(shí)例可能具有不同的名稱,但在顯示自己的信息時(shí)希望使用自己的名稱)。
例如:
var car1 = {
name: 'Tesla',
display: function() {
alert('This car is a ' + this.name + '.');
}
}
var car2 = {
name: 'Toyota',
display: function() {
alert('This car is a ' + this.name + '.');
}
}
在這種情況下,car1.display() 將輸出“This car is a Tesla”。并且 car2.display() 將輸出“This car is a Toyota.”,盡管這兩種情況下方法的代碼完全相同。
由于 this 等于代碼所在的對象 - 當(dāng)您動(dòng)態(tài)生成對象(例如使用構(gòu)造函數(shù))時(shí),this 變得非常有用,這超出了本文的范圍!
概括
就是這樣!您現(xiàn)在應(yīng)該對如何在 JavaScript 中使用對象有了一個(gè)很好的了解 - 包括創(chuàng)建自己的簡單對象以及訪問和操作對象屬性。您還將開始看到對象作為存儲相關(guān)數(shù)據(jù)和功能的結(jié)構(gòu)是如何非常有用的。
例如,如果您試圖將汽車對象中的所有屬性和方法作為單獨(dú)的變量和函數(shù)來跟蹤,那將是非常低效的,并且我們會(huì)冒與其他具有相同名稱的變量和函數(shù)發(fā)生沖突的風(fēng)險(xiǎn).對象讓我們將信息安全地鎖定在它們自己的包中。
關(guān)注七爪網(wǎng),獲取更多APP/小程序/網(wǎng)站源碼資源!
*請認(rèn)真填寫需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。