Javascript-對象

Javascript中，對象是非常重要的一個概念。對象可以用來封裝數據和行為，并且通過對象來模擬現實世界中的事物。

1、原型和原型鏈

在Javascript中，每個對象都有一個原型對象。原型對象是一個對象，它定義了該對象的屬性和方法。如果在對象本身找不到某個屬性或方法，Javascript會自動查找該對象的原型對象，直到找到該屬性或方法為止。

var person = {
  name: "張三",
  age: 18,
  getAge: function() {
    return this.age;
  }
};
var student = Object.create(person);
student.grade = "A";

在上述例子中，我們創建了一個person對象，它有name、age和getAge三個屬性。然后我們通過Object.create()方法創建了一個新對象student，并將person對象作為其原型對象。student對象中并沒有name、age和getAge屬性，但它可以通過原型鏈從person對象中繼承這些屬性。

2、構造函數和類

除了使用字面量創建對象，我們還可以使用構造函數來創建具有相同屬性和方法的多個對象。構造函數的本質是一個普通函數，我們可以通過new操作符來調用它并創建出一個新的對象。構造函數通常以大寫字母開頭，以便于和普通函數區分。

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);

在上述例子中，我們定義了一個Person構造函數，它有name、age和getAge三個屬性。然后我們通過new操作符創建了兩個新的對象personZhangSan和personLiSi。

在ES6中，Javascript引入了類的概念。類是一組相似對象的集合，它可以定義屬性和方法，以及繼承其他類的屬性和方法。類是一種更易于理解和維護的方式來創建對象。

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);

在上述例子中，我們定義了一個Person類，它有name、age和getAge三個屬性。然后我們通過new操作符創建了兩個新的對象personZhangSan和personLiSi。

四葉草

3、繼承

繼承是一種非常重要的概念，它允許我們從一個類或對象中繼承屬性和方法，并在其基礎上添加或修改特定行為。

在Javascript中，我們可以使用原型和原型鏈來實現繼承。例如，在前面的例子中，我們已經使用了原型鏈來實現繼承。

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");

在上述例子中，我們定義了一個Student構造函數，并通過Person.call()方法將Person的屬性和方法添加到Student對象中。然后我們將Person對象設置為Student對象的原型，從而實現了繼承。

在ES6中，我們可以使用extends關鍵字和super函數來實現繼承。

class Student extends Person {
  constructor(name, age, grade) {
    super(name, age);
    this.grade = grade;
  }
}
let s = new Student("張三", 18, "A");

在上述例子中，我們定義了一個Student類，并使用extends關鍵字將其繼承自Person類。在類的構造函數中，我們使用super函數調用父類的構造函數來添加父類的屬性和方法。然后我們添加了grade屬性，從而實現了繼承。

四葉草

4、深拷貝和淺拷貝

在Javascript中，拷貝對象是一個非常常見的操作。拷貝一個對象意味著創建一個新的對象，該對象與原始對象具有相同的屬性和方法。但是，在拷貝對象時需要注意一個重要的問題：深拷貝和淺拷貝。

淺拷貝僅僅復制對象的引用，而不是對象本身。這意味著如果我們更改拷貝對象或原始對象的屬性，那么兩者都將受到影響。深拷貝則會創建一個全新的對象，該對象與原始對象完全獨立，修改拷貝對象或原始對象的屬性不會相互影響。

var person = {
  name: "張三",
  age: 18,
  hobbies: ["music", "reading"]
};
// 淺拷貝
var shallowCopy = Object.assign({}, person);
// 深拷貝
var deepCopy = JSON.parse(JSON.stringify(person));

在上述例子中，我們定義了一個person對象，它有name、age和hobbies三個屬性。然后我們使用Object.assign()方法創建了一個淺拷貝對象，并使用JSON.parse()和JSON.stringify()方法創建了一個深拷貝對象。如果我們將hobbies數組中的元素從"music"改為"painting"，那么只有深拷貝對象的hobbies數組會被修改，淺拷貝對象和原始對象的hobbies數組都不受影響。

在本文中，我們介紹了Javascript中對象的高級應用，包括原型和原型鏈、構造函數和類、繼承以及深拷貝和淺拷貝。這些概念是Javascript面向對象編程的基礎，掌握它們將使你能夠更好地理解和使用Javascript中的對象。

希望本文能夠對您有所幫助，感謝您的閱讀！

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

avaScript編程語言:

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

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

3.基于面向對象采用弱類型語法風格實現

JavaScript學習教程

老杜講解的JavaScript教程，內容涵蓋了JavaScript核心語法、JavaScript內置支持類、JavaScript調試、JavaScript DOM編程、JavaScript BOM編程、大量前端小案例、JavaScript事件處理、JavaScript對象、繼承、JSON等知識點。

接下來說的JavaScript學習內容均與下邊的javaweb學習教程相結合

http://www.bjpowernode.com/?chaijavaweb

基礎語法

一、JavaScript命令書寫方式

1.在HTML文件中<script>內部進行命令書寫

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

二、JavaScript中變量

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

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

2.變量賦值方式

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

3.變量名命名規則

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

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

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

三、JavaScript中數據類型

1.分類：

1）基本數據類型

2) 高級引用數據類型

2. 基本數據類型

1) number類型：數字類型，整數，單精度，雙精度都是number類型

2) string類型：字符串類型，字符串既可以包裹在一對雙引號中也可以包裹在一對單引號 "abc" 'abc'

3) boolean類型：布爾類型值true/false

3.高級引用數據類型

1) function類型：函數類型.相當于Java中Method類型。一個function類型對象用于管理一個函數

2) object類型：在JavaScript中所有通過構造函數生成的對象都是object

4. 變量與數據類型之間關系：

JavaScript中根據變量賦值內容判斷變量的數據類型

四、JavaScript中特殊值

1. undefined:javascript中變量沒有賦值時，其默認值都是undefined。

此時變量數據類型也是undefined

2.NaN：表示非法數字。此時變量數據類型是number

3.Infinity:表示一個無窮大數字.此時變量數據類型是number

4.null：表示當前對象指向一個空內存，但是空內存不能存儲數據

此時對象數據類型是object

五、JavaScript中控制語句和循環語句

1.與Java控制語句和循環語句語法完全一致

2.控制語句 if ,switch

3.循環語句 for while,do..while

六、JavaScript中數組

1.JavaScript中數組相當于Java中List集合

2.JavaScript中數組一次可以存放任意類型數據

3.JavaScript中數組控制內存個數可以隨意改變

七、JavaScript中函數

1.函數聲明格式

function 函數名(形參名，形參名){

命令行；

命令行；

eturn 返回值

}

1) 函數聲明時，必須使用function修飾進行修飾

2) 函數聲明時，禁止指定返回數據類型

3)函數聲明時，形參只能指定名稱，但是不能指定數據類型，也不能使用var進行修飾

4）函數聲明時，可以通過return指定返回數據。

2.函數調用：

對象.函數(實參)

***window對象中屬性和函數在調用時，可以不寫window

JavaScript應用篇（面試）

一、JavaScript中dom對象與document對象

1.dom對象

1) dom對象：document Object model;文檔模型對象

2) 一個dom對象用于管理一個HTML標簽

3)瀏覽器每加載一個HTML標簽時，自動為這個HTML標簽生成一個DOM對象

2.document

1)document對象文檔對象

2) 瀏覽器根據html標簽聲明順序在內存中以樹形結構方式存儲DOM對象.

3) document對象由瀏覽器生成。一個瀏覽器只有一個document對象

4）document對象負責根據定位條件定位dom對象

二、dom對象定位方式：

1.根據標簽Id屬性定位關聯的DOM對象

var domObj = document.getElementById("id屬性")

2.根據標簽name屬性定位關聯的DOM對象

var domArray = document.getElementsByName("name屬性")

3.根據標簽類型定位關聯的DOM對象

var domArray = document.getElementsByTagName("標簽類型")

三、dom對象對標簽管理：

1.dom對象作用：用于對管理的標簽中屬性進行賦值與取值操作

2.dom對象管理標簽中value屬性：

var num = dom.value; //讀取
dom.value = num; //賦值

3.dom對象管理標簽狀態屬性

checked是boolean checked=true 表示被選中，checked=false 表示未被選中

4.dom對象管理雙目標簽提示信息

dom.innerText=值；
var num = dom.innerText;

5.dom對象管理標簽的樣式屬性

dom.style.樣式屬性名=值
var num = dom.style.樣式屬性名

四、監聽事件

1. 介紹：

1）HTML標簽中一組屬性

2）監聽用戶在何時以何種方式來操作當前標簽。當監聽行為發生時。

監聽事件通知瀏覽器調用javascript函數進行處理

2.分類：

1）監聽用戶使用鼠標操作標簽---鼠標監聽事件

2) 監聽用戶使用鍵盤操作標簽---鍵盤監聽事件

3.鍵盤監聽事件

1）onkeydown: 監聽用戶在何時在當前標簽上按下鍵盤

2）onkeyup:監聽用戶在何時在當前標簽上彈起鍵盤

3）onkeypress：監聽用戶在何時在當前標簽按下一次鍵盤

4.鍵盤監聽事件

1）onclick:監聽用戶何時使用鼠標單擊當前的HTML標簽

2) onblur：監聽用戶何時使用鼠標讓當前標簽丟失光標

3）onfocus:監聽用戶何時使用鼠標讓當前標簽獲得光標

4) onmouseover:監聽用戶何時使用鼠標懸停在標簽上方

5) onmouseout：監聽用戶何時使用鼠標從標簽上方移開

6）onchange:監聽用戶何時使用鼠標改變下拉列表中選中項

avaScript 中的對象用于以“鍵：值”對的格式存儲數據集合。包含在一個對象中，我們可以有任意數量的變量和/或函數，這些變量和/或函數被稱為對象屬性和方法。

創建對象

讓我們舉個例子！要將變量 car 初始化為對象，我們使用花括號 {}：

var car = {};

我們現在有一個空對象，可以通過開發者工具控制臺訪問，只需輸入我們的變量名：

car// {} [object]

一個空對象并不是那么有用，所以讓我們用一些數據來更新它：

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 + '.');
  }
};

讓我們在我們的開發者工具控制臺中訪問這些數據：

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.

如您所見，每個名稱/值對必須用逗號分隔，并且每種情況下的名稱和值用冒號分隔。語法將始終遵循以下模式：

var objectName = {
  member1Name: member1Value,
  member2Name: member2Value,
  member3Name: member3Value
};

對象成員的值幾乎可以是任何東西 - 在我們的汽車對象中，我們有兩個字符串、一個數字、一個數組和兩個函數。前四項是數據項，稱為對象的屬性。最后兩項是允許對象使用該數據做某事的函數，被稱為對象的方法。

這種對象被稱為對象字面量 - 我們在創建對象時就已經寫出了對象的內容。這與從類實例化的對象進行比較，我們稍后會看一下。

點符號

上面，您已經看到使用點符號訪問對象的屬性和方法。對象名稱 car 充當命名空間——需要先輸入它才能訪問對象中的任何內容。然后你寫一個點，后面跟著你想訪問的項目——這可以是一個簡單屬性的名稱，一個數組屬性的項目，或者對對象方法之一的調用，例如：

car.name
car.extras[1]
car.details()

刪除屬性

我們可以使用 delete 運算符來刪除屬性，如下所示：

car.model
// Tesla 3delete car.modelcar.model
// undefined

方括號

例如，如果我們的對象中有一個多字屬性，例如：

var user = {
  name: "Richard",
  age: 32,
  "likes steaks": true  // a multiword property name must be quoted
};

我們無法使用點符號訪問多字屬性：

user.likes potatoes     // syntax error!

這是因為點要求鍵是有效的變量標識符。那是沒有空間和其他限制。

另一種方法是使用方括號，它適用于任何字符串：

let user = {};// set
user["likes steaks"] = true;// get
alert(user["likes steaks"]); // true// delete
delete user["likes steaks"];

更新對象成員

我們可以通過簡單地用新值聲明您想要設置的屬性來更新對象中的值，如下所示：

user.age          // 32
user.age = 33     // 33
user.age          // 33

您還可以創建對象的全新成員。例如：

user.surname = 'Smithessson';
// user
{name: "Richard", age: 33, likes steaks: true, surname: "Rembert"}

什么是“this”？

您可能已經注意到在我們前面的示例中使用了“this”這個詞。請參閱以下內容：

display: function() {
  alert('This car is a ' + this.name + '.');
}

this 關鍵字指代正在編寫代碼的當前對象 - 所以在這種情況下 this 等價于 car。

為什么不直接寫汽車呢？編寫結構良好的面向對象代碼是最佳實踐，這樣做非常有用。它將確保在成員的上下文發生變化時使用正確的值（例如，兩個不同的汽車對象實例可能具有不同的名稱，但在顯示自己的信息時希望使用自己的名稱）。

例如：

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 等于代碼所在的對象 - 當您動態生成對象（例如使用構造函數）時，this 變得非常有用，這超出了本文的范圍！

概括

就是這樣！您現在應該對如何在 JavaScript 中使用對象有了一個很好的了解 - 包括創建自己的簡單對象以及訪問和操作對象屬性。您還將開始看到對象作為存儲相關數據和功能的結構是如何非常有用的。

例如，如果您試圖將汽車對象中的所有屬性和方法作為單獨的變量和函數來跟蹤，那將是非常低效的，并且我們會冒與其他具有相同名稱的變量和函數發生沖突的風險.對象讓我們將信息安全地鎖定在它們自己的包中。

關注七爪網，獲取更多APP/小程序/網站源碼資源！

在線咨詢

上一篇：「教程」在線網絡視頻播放加速那些事兒
下一篇：什么是HTM或HTML文件？如何打開HTM和HTML文件？

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商