向對象

面向對象更貼近我們的實際生活, 可以使用面向對象描述現實世界事物. 但是事物分為具體的事物和抽象的事物

手機 抽象的(泛指的)

具體的(特指的)

面向對象的思維特點:

1.抽?。ǔ橄螅ο蠊灿玫膶傩院托袨榻M織(封裝)成一個類(模板)

2.對類進行實例化, 獲取類的對象

面向對象編程我們考慮的是有哪些對象，按照面向對象的思維特點,不斷的創建對象,使用對象,指揮對象做事情.

對象

現實生活中：萬物皆對象，對象是一個具體的事物，看得見摸得著的實物。例如，一本書、一輛汽車、一個人可以是“對象”，一個數據庫、一張網頁、一個與遠程服務器的連接也可以是“對象”。

在 JavaScript 中，對象是一組無序的相關屬性和方法的集合，所有的事物都是對象，例如字符串、數值、數組、函數等。

對象是由屬性和方法組成的：

屬性：事物的特征，在對象中用屬性來表示（常用名詞）

方法：事物的行為，在對象中用方法來表示（常用動詞）

類 class

在 ES6 中新增加了類的概念，可以使用 class 關鍵字聲明一個類，之后以這個類來實例化對象。

類抽象了對象的公共部分，它泛指某一大類（class）

對象特指某一個，通過類實例化一個具體的對象

面向對象的思維特點:

1.抽?。ǔ橄螅ο蠊灿玫膶傩院托袨榻M織(封裝)成一個類(模板)

2.對類進行實例化, 獲取類的對象

();

注意： 類必須使用 new 實例化對象

類 constructor 構造函數

constructor() 方法是類的構造函數(默認方法)，用于傳遞參數,返回實例對象，通過 new 命令生成對象實例時，自動調用該方法。如果沒有顯示定義, 類內部會自動給我們創建一個constructor()

1-CSS 中的屬性選擇器是什么？舉個例子。

屬性選擇器允許您根據屬性值選擇元素。屬性選擇器有多種類型，包括完全匹配、部分匹配、值存在和值結尾。以下是完全匹配選擇器的示例：

input[type="text"] {  border: 1px solid red;}

12-如何根據父元素的類應用CSS樣式？

CSS 沒有直接的父選擇器，但您可以使用各種技術來實現此效果，例如組合器或 :has 選擇器（尚未得到廣泛支持）。

13- 什么是 CSS 變量（自定義屬性）以及如何使用它們？

CSS 變量，也稱為自定義屬性，允許您定義可在整個樣式表中使用的可重用值。它們以 -- 為前綴，并且可以使用 var() 函數為其賦值。這是一個例子：

:root {  --primary-color: #007bff;}
.element {  color: var(--primary-color);}

14-如何創建和應用 CSS 動畫？

CSS 動畫可讓您創建流暢且具有視覺吸引力的效果。它們可以使用 @keyframes 規則定義并使用動畫屬性應用。這是一個例子：

@keyframes slide-in {  0% {    transform: translateX(-100%);  }  100% {    transform: translateX(0);  }}
.element {  animation: slide-in 1s forwards;}

15- CSS 中的“box-sizing”屬性是什么？它如何影響布局計算？

box-sizing 屬性確定如何計算元素的總寬度和高度。默認設置為content-box，僅包含指定寬度和高度內的內容。

當設置為 border-box 時，寬度和高度值包括內容、填充和邊框。這是一個例子：

.box {  box-sizing: border-box;  width: 200px;  padding: 10px;  border: 1px solid black;}

ECMAScript中屬性分兩種類型：數據屬性和訪問屬性

1.數據屬性

數據屬性有四個描述其行為的特性個：[[Configurable]]、[[Enumerable]]、[[Writable]]、[[Value]]。

• [[Congigurable]]表示能否通過delete刪除屬性從而重新定義屬性，能否修改屬性的特性，能否將數據屬性改為訪問屬性，默認值為true
• [[Enumerable]]表示屬性是否可枚舉，即使用for in 返回屬性，默認值為true
• [[Writable]]表示是否能修改屬性值，默認值為true
• [[Value]]表示包含屬性的數據值，讀取屬性時，從這個位置讀取屬性，寫入新的屬性時將新的屬性保存在這個位置，默認值是undefined

let obj={
             name:"JSindexHTML"
};

在上面的代碼中，我們定義了一個對象obj，屬性名為name，屬性值為JSindexHTML。在這個對象的數據屬性 [[Value]] 值就被設置為 JSindexHTML。對屬性 name 的任何修改都會相應的改變這個對象的數據屬性 [[Value]] 的值。

如果要修改數據屬性的特性，我們可以使用 Object.defineProperty() 方法。這個方法接收三個參數：屬性所在的對象，屬性名(屬性名需要加引號)，描述符對象。其中描述符對象的屬性必須是：configurable、enumerable、writable 和 value且為小寫。

Object.defineProperty(obj,"name",{
                                                       writable:false,
                                                           value:"JSindexHTML"
                                                       })
obj.name="Jack";
console.log(obj.name);//JSindexHTML

在上面的代碼中，我們將對象的數據屬性 [[Writable]]修改為 false,即禁止修改對象的屬性值。此時name 屬性是只讀的，修改name值，嚴格模式下會拋出錯誤，非嚴格模式忽略。所以當我們將對象obj的name屬性值修改為Jack時，console.log(obj.name) 的結果是 JSindexHTML。

如果我們把[[Writable]]修改為 true:

Object.defineProperty(obj,"name",{
                                                     writable:true,
                                                          value:"JSindexHTML"
                                                       })
obj.name="Jack";
console.log(obj.name);//Jack

當我們將 writable更改為true后，更改 obj 的 name 屬性值：obj.name="Jack"，console.log(obj.name)的結果為修改后的 name 的屬性值 Jack。

上面的規則也適用于配置屬性：

Object.defineProperty(obj,"name",{
                                                     configurable:false,
                                                          value:"JSindexHTML"
                                                       })

console.log(obj.name);//Jack

在上面的代碼中，我們對象的數據屬性 configurable 設置為false，所以不使用 delete 刪除我們的對象屬性。所以console.log(obj.name)的結果為 JSindexHTML。

在調用 Object.defineProperty()方法時，如果不指定，configurable、enumerable 和 writable 特性的默認值都是 false。

2.訪問屬性

訪問屬性不包含數據值而是包含一對兒 get和 set函數，但這兩個函數不是必須的。在讀取訪問屬性時會調用getter函數，這個函數負責返回有效值；在寫入訪問屬性時，會調用setter函數并傳入新值，這個函數決定如何處理數據。訪問屬性有以下四個特性：

訪問屬性不能直接定義，必須使用Object.definedProperty()方法定義。

let book={
              _year:2019,
              edition:1
               }
Object.defineProperty(book,"year",{
                                      get:function(){
                                        return this._year
},
  set:function(newValue){
                   if(newValue>2019){
                     this._year=newValue;
                     this.edition+=newValue-2019;
                   }
            }
}
  )
  book.year=2020;
console.log(book.edition);//2

在上面的代碼中，我們定義了 book 對象，并給這個對象添加了兩個屬性 _year 和 edition。_year前面的下劃線是一種常用幾號，用于表示只能通過對象方法訪問的屬性。訪問器屬性year包含了兩個屬性setter 和 getter 函數，getter函數獲取_year 的值，而setter函數通過計算確定正確的版本。因此當我們把year屬性修改為2020的時候，_year就會變成2019，而 edition 變為 2。這是使用訪問器屬性常見的方式，即設置一個屬性的值也會導致其他屬性值發生變化。

為了兼容舊版本的瀏覽器，我們可以使用兩個非標準方法創建訪問屬性器：__defineGetter__ 和 __defineSetter__。注意，這兩個方法的前后的下劃線是分別是由兩條組成。

let book={
              _year:2019,
              edition:1
               }
book.defineGettet=function(){
return this._year;
}
book.defineSetter=function(newValue){
 if(newValue>2019){
                     this._year=newValue;
                     this.edition+=newValue-2019;
                   }
}
 book.year=2020;
console.log(book.edition);//2

在不支持Object.defineProperty()方法的瀏覽器中不能修改[[Confirguable]] 和 [[Enumerable]].