Javascript中，對象是非常重要的一個(gè)概念。對象可以用來封裝數(shù)據(jù)和行為，并且通過對象來模擬現(xiàn)實(shí)世界中的事物。

1、原型和原型鏈

在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對象中繼承這些屬性。

2、構(gòu)造函數(shù)和類

除了使用字面量創(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。

3、繼承

繼承是一種非常重要的概念，它允許我們從一個(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)了繼承。

4、深拷貝和淺拷貝

在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您的閱讀！

人人為我，我為人人，謝謝您的瀏覽，我們一起加油吧。

avaScript編程語言:

1.專門在瀏覽器編譯與執(zhí)行的編程語言

2.幫助瀏覽器解決用戶提出簡單需求

3.基于面向?qū)ο蟛捎萌躅愋驼Z法風(fēng)格實(shí)現(xiàn)

JavaScript學(xué)習(xí)教程

老杜講解的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

基礎(chǔ)語法

一、JavaScript命令書寫方式

1.在HTML文件中<script>內(nèi)部進(jìn)行命令書寫

2. 在js文件中書寫命令格式【推薦】

二、JavaScript中變量

1.變量聲明方式: JavaScript弱類型編程語言，因此禁止使用具體數(shù)據(jù)類型修飾變量

• var 變量名;
• var 變量名1,變量名2；

2.變量賦值方式

• var 變量名=值
• var 變量名;
• 變量名=值；

3.變量名命名規(guī)則

1）變量名只能存在字母，數(shù)字，下劃線, 美元符號($)

2) 變量名不能以數(shù)字為開始

3) 不能使用JavaScript關(guān)鍵字作為變量名 var var=10; error

三、JavaScript中數(shù)據(jù)類型

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ù)類型

四、JavaScript中特殊值

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

五、JavaScript中控制語句和循環(huán)語句

1.與Java控制語句和循環(huán)語句語法完全一致

2.控制語句 if ,switch

3.循環(huán)語句 for while,do..while

六、JavaScript中數(shù)組

1.JavaScript中數(shù)組相當(dāng)于Java中List集合

2.JavaScript中數(shù)組一次可以存放任意類型數(shù)據(jù)

3.JavaScript中數(shù)組控制內(nèi)存?zhèn)€數(shù)可以隨意改變

七、JavaScript中函數(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

JavaScript應(yīng)用篇（面試）

一、JavaScript中dom對象與document對象

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對象

二、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)簽類型")

三、dom對象對標(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.樣式屬性名

四、監(jiān)聽事件

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)站源碼資源！