axios-JavaScript前后端交互庫

xios 是一個基于 Promise 的 HTTP 客戶端，用于在瀏覽器和 Node.js 環境中發送 HTTP 請求。它提供了簡潔的 API 和強大的功能，適用于處理異步操作、請求攔截、取消請求和自動轉換 JSON 數據等常見任務。

### 特點

- **Promise 支持**: 使用 Promise API，便于處理異步請求。

- **請求和響應攔截器**: 可以在請求或響應到達前進行修改。

- **自動轉換數據**: 默認情況下會自動將 JSON 數據轉換為 JavaScript 對象。

- **取消請求**: 支持取消請求功能，例如在組件卸載時取消未完成的請求。

- **防止跨站請求偽造（CSRF）**: 提供方便的機制來防止 CSRF 攻擊。

### 基本用法

#### 安裝

如果你在瀏覽器中使用，可以通過 `<script>` 標簽引入：

```html

```

如果你使用 npm 或 yarn，可以通過以下命令安裝：

```bash

npm install axios

# 或者

yarn add axios

```

#### 發送 GET 請求

```javascript

axios.get('https://api.example.com/data')

.then(response=> {

console.log(response.data); // 處理成功響應

})

.catch(error=> {

console.error('Error fetching data:', error); // 處理錯誤響應

});

```

#### 發送 POST 請求

```javascript

axios.post('https://api.example.com/data', {

key1: 'value1',

key2: 'value2'

})

.then(response=> {

console.log('Data posted successfully:', response.data);

})

.catch(error=> {

console.error('Error posting data:', error);

});

```

#### 配置請求

可以通過配置對象自定義請求，例如設置請求頭、超時時間等：

```javascript

axios({

method: 'get',

url: 'https://api.example.com/data',

headers: {'Authorization': 'Bearer token'},

timeout: 5000 // 設置超時時間為 5000 毫秒

})

.then(response=> {

console.log(response.data);

})

.catch(error=> {

console.error(error);

});

```

### 攔截器

攔截器可以在請求或響應被處理之前進行自定義操作：

#### 請求攔截器

```javascript

axios.interceptors.request.use(config=> {

// 在發送請求之前做些什么

console.log('Request sent at:', new Date());

return config;

}, error=> {

// 處理請求錯誤

return Promise.reject(error);

});

```

#### 響應攔截器

```javascript

axios.interceptors.response.use(response=> {

// 對響應數據做些什么

return response;

}, error=> {

// 處理響應錯誤

return Promise.reject(error);

});

```

### 取消請求

通過 `CancelToken` 可以取消請求：

```javascript

const CancelToken=axios.CancelToken;

let cancel;

axios.get('https://api.example.com/data', {

cancelToken: new CancelToken(function executor(c) {

cancel=c;

})

});

// 取消請求

cancel();

```

### 總結

Axios 提供了豐富的功能來簡化 HTTP 請求的處理，無論是在前端還是后端環境中，都是一個強大的工具。它的簡潔性和可擴展性使得它成為開發者處理網絡請求的常用選擇。

我的文章可能還有不足之處，如有不同意見，請留言討論。

TML

基本概念

HTML 是網頁內容的載體。內容就是網頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
CSS 樣式是表現。比如，標題字體、顏色變化，或為標題加入背景圖片、邊框等，所有這些用來改變內容外觀的東西稱之為表現。
JavaScript 是用來實現網頁上的特效效果。如：鼠標滑過彈出下拉菜單，或鼠標滑過表格的背景顏色改變，還有焦點新聞（新聞圖片）的輪換。有動畫的，有交互的一般都是用 JavaScript 來實現的。

2.常用標簽

強調語氣：<em>是斜體，<strong>是加粗
引用：<q>短文本引用，<blockquote>長文本引用
換行 <br />
水平橫線 <hr />
空格  
表格 <table><tbody>
加上后表格內容全部下載完才會顯示
行 <tr>
列 <td>
表格表頭 <th>
標題 <caption>
超鏈 <a>
例子：<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>
新標簽打開：target="_blank"
圖片 <img>，圖像可以是 GIF，PNG，JPEG 格式的圖像文件
例子：<img src="圖片地址" alt="下載失敗時的替換文本" title="提示文本">
表單 <form>
文本域 <textarea>
例子 <textarea rows="行數" cols="列數">文本</textarea>
cols 多行輸入域的列數；rows 多行輸入域的行數。這兩個屬性可用 CSS 樣式的 width 和 height 來代替：col 用 width、row 用 height 來代替
輸入框 <input type="text/password" name="名稱" value="文本" />
當 type=”text” 時，輸入框為文本輸入框
當 type=”password” 時, 輸入框為密碼輸入框
單/復選框 <input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
當 type=”radio” 時，控件為單選框，同一組單選框 name 命名要一致
當 type=”checkbox” 時，控件為復選框
提交按鈕 <input type="submit" value="提交">
重置按鈕 <input type="reset" value="重置">
下拉列表框 ` `
value <option value="提交值">選項</option>
選中 selected="selected"
多選 multiple="multiple"
標簽 <label for="控件id名稱">，標簽的 for 屬性中的值應當與相關控件的 id 屬性 值一定要相同

CSS

基本知識

CSS 樣式由選擇符和聲明組成，而聲明又由屬性和值組成。

選擇符：又稱選擇器，指明網頁中要應用樣式規則的元素。
聲明：在英文大括號{}中的的就是聲明，屬性和值之間用英文冒號{}分隔。當有多條聲明時，中間可以英文分號;分隔。

從CSS 樣式代碼插入的形式來看基本可以分為以下3種：內聯式、嵌入式和外部式三種。優先級遵循就近原則，一般來說，內聯式 > 嵌入式 > 外部式。

內聯式

例子 <p style="color:red;font-size:12px">這里文字是紅色。</p>

嵌入式

外部式

例子：<link href="base.css" rel="stylesheet" type="text/css" />

CSS 選擇器

常見的類選擇器類型有如下幾種：

標簽選擇器，.標簽選擇器名稱{css樣式代碼;}
類選擇器，.類選器名稱{css樣式代碼;}
ID 選擇器，＃類選器名稱{css樣式代碼;}
子選擇器，即大于符號(>),用于選擇指定標簽元素的第一代子元素
包含選擇器，即加入空格 ,用于選擇指定標簽元素下的后輩元素
通用選擇器，匹配html中所有標簽元素，* {css樣式代碼;}類選擇器和ID選擇器都可以應用于任何元素，但 ID 選擇器只能在文檔中使用一次，可以使用類選擇器詞列表方法為一個元素同時設置多個樣式，ID 選擇器是不可以的。

子選擇器和包含選擇器區別：>作用于元素的第一代后代，空格作用于元素的所有后代。

另外還有兩種選擇符：

偽類選擇符，允許給 HTML 不存在的標簽（標簽的某種狀態）設置樣式。常用的有 a:hover{color:red;}
分組選擇符，為 HTML 中多個標簽元素設置同一個樣式時，可以使用分組選擇符,

。例如h1,span{color:red;}

CSS 的繼承、層疊和特殊性

CSS 的某些樣式是具有繼承性的，繼承是一種規則，它允許樣式不僅應用于某個特定 HTML 標簽元素，而且應用于其后代。
特殊性：不同選擇器具有不同權值，標簽的權值為 1，類選擇符的權值為 10，ID選擇符的權值最高為 100。
層疊就是在 HTML 文件中對于同一個元素可以有多個 CSS 樣式存在，當有相同權重的樣式存在時，會根據這些 CSS 樣式的前后順序來決定，處于最后面的 CSS 樣式會被應用。

CSS 格式化排版

文字排版

字體，body{font-family:"Microsoft Yahei";}
字號、顏色，body{font-size:12px;color:#666}
粗體，body{font-weight:bold;}
斜體，body{font-style:italic;}
下劃線，body{font-style:italic;}
刪除線，body{text-decoration:line-through;}

段落排版

縮進，p{text-indent:2em;}
行間距（行高），p{line-height:1.5em;}
中文字間距、字母間距，letter-spacing:50px;和word-spacing:50px;
對齊，div{text-align:center;}

CSS 盒模型

元素分類

在 CSS 中，HTML 中的標簽元素大體被分為三種不同的類型：塊狀元素、內聯元素(又叫行內元素)和內聯塊狀元素。

常用的塊狀元素有：

塊級元素特點：

每個塊級元素都從新的一行開始，并且其后的元素也另起一行。
元素的高度、寬度、行高以及頂和底邊距都可設置。
元素寬度在不設置的情況下，是它本身父容器的 100%（和父元素的寬度一致），除非設定一個寬度。

設置 display:block就是將元素顯示為塊級元素，從而使元素具有塊狀元素特點。

注：img 標簽與 div 層之間會有空隙的解決方法是：使用 display:block 就可以消除間隙。

常用的內聯元素有：

內聯元素特點：

和其他元素都在一行上；
元素的高度、寬度及頂部和底部邊距不可設置；
元素的寬度就是它包含的文字或圖片的寬度，不可改變。

塊狀元素也可以通過代碼 display:inline將元素設置為內聯元素。

常用的內聯塊狀元素有：

inline-block 元素特點：

和其他元素都在一行上；
元素的高度、寬度、行高以及頂和底邊距都可設置。

內聯塊狀元素（inline-block）就是同時具備內聯元素、塊狀元素的特點，代碼 display:inline-block就是將元素設置為內聯塊狀元素。

盒模型

邊框

盒子模型的邊框就是圍繞著內容及補白的線，這條線你可以設置它的粗細、樣式和顏色(邊框三個屬性)。

單獨設置下邊框的例子 div{border-bottom:1px solid red;}

寬度和高度

CSS 內定義的寬（width）和高（height），指的是 填充以里的內容范圍。一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。

W3C 的標準 Box Model:

所以有時會設置 box-sizing: border-box;來避免計算內部元素大小

填充(padding)

元素內容與邊框之間是可以設置距離的，稱之為“填充”。填充也可分為上、右、下、左(順時針)。

例子：

邊界(margin)

元素與其它元素之間的距離可以使用邊界（margin）來設置，順序和填充一樣是上，右，下，左。padding 在邊框里，margin 在邊框外。

CSS 布局模型

CSS 包含 3 種基本的布局模型，用英文概括為：Flow、Layer 和 Float。在網頁中，元素有三種布局模型：

流動模型（Flow）
浮動模型 (Float)
層模型（Layer）

流動模型

流動模型，流動（Flow）是默認的網頁布局模式。

流動布局模型具有2個比較典型的特征：

塊狀元素 都會在所處的包含元素內自上而下按順序垂直延伸分布，因為在默認狀態下，塊狀元素的寬度都為 100%。實際上，塊狀元素都會以行的形式占據位置。
在流動模型下，內聯元素 都會在所處的包含元素內從左到右水平分布顯示。

浮動模型

任何元素在默認情況下是不能浮動的，但可以用 CSS 定義為浮動。例子：#div1{float:left;}

層模型

CSS 定義了一組定位（positioning）屬性來支持層布局模型。

層模型有三種形式：

絕對定位(position: absolute)
相對定位(position: relative)
固定定位(position: fixed)

絕對定位(position: absolute)

如果想為元素設置層模型中的絕對定位，需要設置 position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用 left、right、top、bottom 屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于 body 元素，即相對于瀏覽器窗口。

相對定位(position: relative)

如果想為元素設置層模型中的相對定位，需要設置 position:relative（表示相對定位），它通過 left、right、top、bottom 屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按 static(float) 方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。

簡單來說，就是相對元素原來的位置進行移動，元素本身所占的位置會保留。

固定定位(position: fixed)

設置 position:fixed;。fixed：表示固定定位，與 absolute 定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變瀏覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與 background-attachment:fixed; 屬性功能相同。

Relative 與 Absolute 組合使用,必須遵守下面規范：

參照定位的元素必須是相對定位元素的前輩元素
參照定位的元素必須加入 position:relative;
定位元素加入 position:absolute，便可以使用 top、bottom、left、right 來進行偏移定位了

例子(HTML 和 CSS 代碼分別為)：

顏色和長度

設置顏色的方法也有很多種：

英文命令顏色，p{color:red;}
RGB顏色，p{color:rgb(133,45,200);} 和 p{color:rgb(20%,33%,25%);}
十六進制顏色，這種顏色設置方法是現在比較普遍使用的方法，其原理其實也是 RGB 設置，但是其每一項的值由 0-255 變成了十六進制 00-ff。p{color:#00ffff;}(當你設置的顏色是 16 進制的色彩值時，如果每兩位的值相同，可以縮寫一半，#0ff)RGB 配色表參考 RGB顏色對照表 - 在線工具 - 開源中國或者 RGB 配色表長度單位總結一下，目前比較常用到px（像素）、em、% 百分比，要注意其實這三種單位都是相對單位。
像素
em，就是本元素給定字體的 font-size 值
% 百分比

設置小技巧

水平居中設置

行內元素。如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置 text-align:center來實現的。
定寬塊狀元素(塊狀元素的寬度 width 為固定值)。滿足定寬和塊狀兩個條件的元素是可以通過設置“左右 margin”值為 auto 來實現居中的。
不定寬塊狀元素。

加入 table 標簽(包括 <tbody>、<tr>、<td>)，為這個 table 設置“左右 margin 居中”
設置 display: inline方法：與第一種類似，顯示類型設為行內元素，然后使用 text-align:center來實現居中效果，進行不定寬元素的屬性設置。
給父元素設置 float 和 position:relative; left:50%，子元素設置 position:relative 和left: -50% 來實現水平居中。

垂直居中設置

父元素高度確定的單行文本。通過設置父元素的 height 和 line-height 高度一致來實現的。(height: 該元素的高度；line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的基線間的距離 )。
父元素高度確定的多行文本。使用插入 table (包括 tbody、tr、td)標簽，同時設置 vertical-align：middle。

另外，為元素設置以下兩個屬性之一會隱形改變 display 類型，元素的display顯示類型就會自動變為以display:inline-block（塊狀元素）的方式顯示，當然就可以設置元素的 width 和 height 了，且默認寬度不占滿父元素。

position: absolute

float: left 或 float:right

二天，重新認識javascript

JS學習小結：

學習JavaScript腳本語言，首先我們要知道JavaScript是什么？

Javascript是什么，簡稱Js，Js是一種基于對象(Object)和事件驅動(Event Driven)并具有安全性能的腳本語言，使用它的目的是與HTML超文本標記語言、Java 腳本語言（Java小程序）一起實現在一個Web頁面中鏈接多個對象，與Web客戶交互作用。從而可以開發客戶端的應用程序等。

Js交互圖

當前什么越來越強調溝通，而Js是最接近前后端的語言，越來越多的前后端框架的支持，使他的前途很明朗，作為一種解釋型語言，Js強調實時，在線。

先看下Js的特性：腳本編寫語言，基于對象的語言，簡單性，安全性，動態性和跨平臺特性。

Js的命名規范：有兩種常用的命名規則

匈牙利命名法的原則：變量名=屬性+類型+對象描述。他的關鍵是：以一個或多個小寫字母作為前綴，前綴之后是一個或多個首字母大寫的單詞組合，該單詞指明變量的用途。

駝峰命名法的原則：第一個單詞以小寫字母開始，之后每一個單詞的首字母大寫。例如：myFirstName、myLastName，這樣的變量名看上去就像駝峰一樣此起彼伏，因此得名。駝峰法的關鍵是：除第一個單詞外，其他單詞首字母大小，混合使用大小寫字母來構成變量名和函數名，還可以使用下劃線來形成邏輯斷點，這樣更能增強代碼的可讀性。

JS的注釋規范：

JS中單行注釋用“ // 注釋內容” 標識，多行注釋使用“ /* 注釋內容 */ “標識。注釋的作用是提高代碼的可讀性，不僅自己以后用著方便，也有助于別人閱讀和理解你所編寫的JS代碼，注釋中的內容不會在網頁中顯示。為了方便閱讀，注釋一般放在需要解釋的語句結尾處或者周圍。

在JavaScript中四種基本的數據類型：數值（整數和實數）、字符串型（用“”號或‘’括起來的字符或數值）、布爾型（使True或False表示）和空值。在JavaScript的基本類型中的數據可以是常量，也可以變量。由于JavaScript采用弱類型的形式，因而一個數據的變量或常量不必首先作聲明，而是在使用或賦值時確定其數據的類型的。當然也可以先聲明該數據的類型，它是通過在賦值時自動說明其數據類型的。

Js還有一種拓展類型，那就是：Undefined 數據類型

一個為 undefined 的值就是指在變量被創建后，但未給該變量賦值以前所具有的值。

--------------------------------------------------------------------------------------------------------------------

下面是一下常用語法：

1.對象定義方式

空對象：沒有任何屬性和方法

var obj={};

定義對象的屬性：

obj.xx="123";

定義對象的方法：

obj.function=function(){};

--------------------------------------------------------------------------------------------------------------------

2.函數的定義方式：

JavaScript函數定義

Function 函數名（參數,變元）{

函數體;.

Return 表達式;

}

說明：

當調用函數時,所用變量或字面量均可作為變元傳遞。

函數由關鍵字Function定義。

函數名：定義自己函數的名字。

參數表，是傳遞給函數使用或操作的值，其值可以是常量，變量或其它表達式。

通過指定函數名（實參）來調用一個函數。

必須使用Return將值返回。

函數名對大小寫是敏感的。

函數中的形式參數：

在函數的定義中，我們看到函數名后有參數表，這些參數變量可能是一個或幾個。那么怎樣才能確定參數變量的個數呢？在JavaScript中可通過arguments .Length來檢查參數的個數。

例：

Function function_Name(exp1,exp2,exp3,exp4)

Number=function _Name . arguments .length;

if (Number>1）

document.wrile(exp2);

if (Number>2)

document.write(exp3);

if(Number>3)

document.write(exp4);

...

--------------------------------------------------------------------------------------------------------------------

3 對象的引用傳遞

var person={name:'anker',age:100};

var x=person;

x.age=19;

console.log(x.age);//19

console.log(person.age);//19

說明js中對象的賦值也是采用引用的方式，同時指向同一個對象。

function changebj(obj) {obj.age=10};

changebj(person);

console.log(person.age);

10//打印結果也是10,說明函數傳遞的也是對象的引用。修改的是同一個對象。

person.sex='男';//若該屬性不存在則添加，若存在則覆蓋。

訪問對象的方式：

obj.name

obj["name"]或者obj['name']//必須采用雙引號或者單引號括起來

--------------------------------------------------------------------------------------------------------------------

4.匿名函數

（function(){//代碼 })(); //可立即執行的匿名函數

解釋：，包圍函數（function(){})的第一對括號向腳本返回未命名的函數，隨后一對空括號立即執行返回的未命名函數，括號內為匿名函數的參數。

例子：(function(arg){ alert(arg+100); })(20);

這個例子返回120。

匿名函數，就是沒有引用直接加上()進行執行的函數。

var addFunc=function(a,b){

cosole.log(a+b);

};

--調用方式

addFunc(1,2);

--匿名函數

(function(a,b){console.log(a+b)})(1,2);

上面兩個函數的產生的結果是一樣的.只不過addFunc為函數對象的引用,而匿名函數不存在引用.

--來看個復雜的利用匿名函數的例子

var add=(function(){

var sum=0 ;

return function(){

for(var i=0;l=arguments.length,i<l;i++){

sum+=arguments[i];

}

return sum;

};

})(); --加上括號為匿名函數的寫法,可以理解為直接執行了此函數,函數的執行結果返回

add(1,2,3,4);

add(2);

--等價于

var func1=function(){

var sum=0 ;

return function(){

for(var i=0;l=arguments.length,i<l;i++){

sum+=arguments[i];

}

return sum;

};

var add=func1();

add(1,2,3,4);

add(2);

//現在有一個場景，需要設計一個函數，前面每次調用，不會真正去計算，而是把參數保存下來，等到需要計算的再一起計算

var currying=function(fn){

var args=[] ;

return function(){

if(arguments.length===0){

return fn.apply(this,args);

}else {

Array.prototype.push.apply(args,arguments);

return arguments.callee;

}

};

}

var add=(function(){

var sum=0 ;

return function(){

for(var i=0;l=arguments.length,i<l;i++){

sum+=arguments[i];

}

return sum;

};

})();

var add=currying(add);

add(1);

add(2);

add(3);

add();

---------------------------------------------------------------------------------------------------------------------

5.閉包

可以理解成一個函數內的內部函數，它被創建在一個函數內部，引用這其外部函數的變量值。

var a=function(){

var x=1;

return function(y){

console.log(x+=y);//外部函數的x值就被包裹在引用對象中

}

var b=a();//實際上是返回function(y){...}的引用

b();//執行上面的引用，此時的x值變成了private的屬性

閉包的兩個作用：

1.可以讀取函數體所在外部函數的局部變量

2.就是讓這些變量的值始終保持在內存中

------------------------------------------------------------------------------------------------------------------------

6.constructor

constructor 屬性返回對創建此對象的數組函數的引用。

var test=new Array();

if (test.constructor==Array)//判斷test的構造函數是否是Array

{

document.write("This is an Array");

}

var createPerson=function(name,sex,age){

this.name=name;

this.sex=sex;

this.age=age;

};

//undefined

var p1=new createPerson('z1',19,'男');

//undefined

p1.constructor

//輸出

function (name,sex,age){

this.name=name;

this.sex=sex;

this.age=age;

}

p1.constructor==createPerson

//輸出：true

createPerson.constructor

//Function() { [native code] } //createPerson構造函數為Function,從一個側面說明function也是對象

------------------------------------------------------------------------------------------------------------------------

7.js==與===的區別

一個等號是賦值操作，==先轉換類型再比較，進行值的對比。

而===先判斷類型，如果不是同一類型直接為false，只有類型和值全部都相等，才相等。

------------------------------------------------------------------------------------------------------------------------

8.JS中一切皆對象

JS中基本數據類型，也存在著對象封裝，比如下面數字123的構造函數是Number,test的構造函數是String，包含length的屬性

(123).constructor

//輸出：function Number() { [native code] }

'test'.constructor

//輸出：String() { [native code] }

'test'.length;

//輸出：4

//擴展Number的函數

Number.prototype.toString=function(){

alert('hi,I\'m a number ');

};

(123).toString();

//輸出：hi,I\'m a number

Number.prototype

Number {toString: null, [[PrimitiveValue]]: 0}

------------------------------------------------------------------------------------------------------------------------

9.prototype原型

每個對象都連接到一個原型對象，并且可以從中繼承屬性。所有通過{}或者構造函數創建的對象都連接到Object{}

對象通過(對象名稱.__proto__)可以查看原型

或者通過(對象名稱.constructor.prototype)查看原型

var createPerson=function(name,sex,age){

this.name=name;

this.sex=sex;

this.age=age;

};

var p1=new createPerson('z1',19,'男');

p1.constructor

//輸出：

fucntion(name,sex,age){

this.name=name;

this.sex=sex;

this.age=age;

}

p1.constructor.prototype

//輸出：

Object {}

createPerson.prototype

//輸出：

Object {}

p1.constructor.prototype===createPerson.prototype

true

var p2={sex:'男'};

p2.constructor.prototype

//輸出：Object {}

在javascript中，創建一個新對象時，可以選擇某個對象作為它的原型，比如

var person={name:'z3',age:18,sex:'男'};

Object.create=function(o){

var F=function(){};

F.prototype=o ;

return new F();

};

var anotherPerson=Object.create(person);

anotherPerson.name;//z3

//對原型對象進行更新,發現已創建的對象值也隨著變化

person.name='z4';

"z4"

anotherPerson.name

//輸出："z4"

//但當對象增加相同的屬性后,原型對象的屬性變化，不影響對象的屬性值。因為對象讀取值首先讀取本身對象的值，后讀取原型的值

anotherPerson.name='z5';

person.name='z6';

//輸出："z6"

anotherPerson.name

//輸出："z5"

delete anotherPerson.name

//輸出：true

anotherPerson.name//輸出對象本身的屬性值,原型對象的屬性值不會被刪除,除非通過delete 原型對象.屬性輸出.

//輸出："z6"

delete person.name

//輸出：true

anotherPerson.name

//輸出：undefined

//原型連接什么時候起作用呢？只有在檢索值的時候才被用到

//如果嘗試者去獲取對象的某個屬性值，但該對象沒有此屬性名，那么JAVASCRIPT會嘗試著從原型對象中獲取屬性值。

//如果原型對象也沒有該屬性值則再從它的原型找，直到該過程最后達到終點Object.prototype。Object

//如果想要的屬性完全不存在于原型鏈中，那么結果就是undefined。

person.age=18;

anotherPerson.age//顯示什么？

//原型關系是一種動態的關系。如果添加一個新的屬性到原型中，該屬性會立即對所有基于該原型創建的對象可見。

anotherPerson.__proto__===person;//true

__proto__顯示對象的原型鏈

//可以使用hasOwnProperty方法來判斷對像是否含有某個屬性，如果對象擁有獨有的屬性，則返回true

//這個方法不會去檢查原型鏈

------------------------------------------------------------------------------------------------------------------

10. arguments

arguments 對象是函數內部的本地變量；arguments 已經不再是函數的屬性了。

你可以在函數內部通過使用 arguments 對象來獲取函數的所有參數。這個對象為傳遞給函數的每個參數建立一個條目，

條目的索引號從 0 開始。例如，如果一個函數有三個參數，你可以通過以下方式獲取參數：

arguments[0]

arguments[1]

arguments[2]

參數也可以被重新賦值:

arguments[1]='new value';

arguments 對象并不是一個真正的Array。它類似于數組，但沒有數組所特有的屬性和方法，除了 length。

例如，它沒有 pop 方法。不過可以將其轉換成數組

------------------------------------------------------------------------------------------------------------------------

11.利用JS特性實現AOP

AOP就是面向切面編程，主要作用是把一些核心業務邏輯模塊無關的功能抽離出來，這些跟業務邏輯無關的功能

通常包括日志統計，安全控制，異常處理等。把這些功能抽離出來后，又通過動態織入的方式滲入到業務邏輯模塊中

在JAVA中，可以通過反射和動態代理機制來實現AOP。但對于javascript這種動態語言，AOP的實現更加簡單

在javascript中實現AOP，都是指把一個函數動態織入到另外一個函數中。我們可以通過擴展Function.prototype來做到這一點

Function.prototype.before=function(beforefn){

var that=this ;

return function(){

beforefn.apply(this,arguments);

return that.apply(this,arguments);

};

Function.prototype.after=function(afterfn){

var that=this ;

return function(){

var ret=that.apply(this,arguments);

afterfn.apply(this,arguments);

return ret ;

};

var func=function(){

console.log(2);

};

func=func.before(function(){

console.log(1);

}).after(function(){

console.log(3);

});

func();

var func1=document.getElementById;

undefined

func1('nt-contents');

//報錯信息如下, 是由于document.getElementById函數中的this指向為windows對象,而windows對象不存在這些變量。

VM245:1 Uncaught TypeError: Illegal invocation(…)

//寫那么復雜主要是將this的指向還是定位到document上面

var getElementById1=(function(func){

return function(){

return func.apply(document,arguments);

}

})(document.getElementById);

------------------------------------------------------------------------------------------------------------------------

12.利用JS特性實現一些有趣的Function

var getId=document.getElementById1; //返回這個對象 function(){return func.apply(document,arguments);}

var div=getId('ntp-contents');//返回func.apply(document,arguments)的對象，arguments參數值div1,func執行閉包中的document.getElementById函數

alert(div.id);

//我們上節課講到，怎么在一個內部函數中保持外層的this上下使用了一個變量that來保存外,還可以使用以下方法

Function.prototype.bind=function(context){

var self=this ;

return function(){

alert(self);

alert(context);

return self.apply(context,arguments);

}

};

var obj={name : 'steven'};

var func=(function(){

alert(this.name)

}).bind(obj);

var isType=function(type){

return function(obj){

return Object.prototype.toString.call(obj)==='[object '+type+']';

};

var isString=isType('String');

isString('hello world');

var isArray=isType('Array');

isArray([2,3]);

13.call、apply的使用

語法

function.call(thisObj,param1,param2,param3...);

function.apply(thisObj,[param1,param2,param3...]);

用法是改變function的作用域，將參數的上下文作用域修改成thisObj對象, 也可以說this對象為thisObj.

默認的function的作用域是window，this相當于window.function

在線咨詢

上一篇：JS中將值轉換成字符串的5種方法
下一篇：自薦一個有情懷的跨平臺Redis可視化客戶端工具-R

您的項目需求

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

整合營銷服務商

axios-JavaScript前后端交互庫

TML

CSS

您的項目需求