<a >This is a link</a>

name='Bill "HelloWorld" Gates'

、 HTTP協議請求報文以及響應報文

2、 JAVA Socket編程 Socket以及ServerSocket

3、 WEB服務器概念 Tomcat服務器目錄結構和基本配置server.xml文件

4、 什么是Servlet? 怎樣實現一個自定義Servlet?

5、 Servlet基本配置

6、 ServletAPI 包括HttpServlet、HttpServletRequest、HttpServletResponse、ServletConfig、ServletContext

7、 service方法以及doGet和doPost方法

8、 servlet生命周期

9、 怎樣獲取網頁提交的參數?

10、 會話HttpSession和Cookie

11、 調用一個已定義好的Servlet有哪些方式

12、 表單提交數據到Servlet 中文亂碼處理

13、 客戶端頁面向服務端servlet傳遞參數有哪些方式

14、 JSP的運行原理以及基本語法

15、 JSP隱式對象

16、 JavaScript基本語法

17、 JavaScript中的對象

18、 JavaScript與AJAX

19、 基于對象的Javascript以及繼承的實現

客戶端/服務器的優勢在于：

服務器和客戶端分攤任務，分別負責部分處理工作；

服務器可以同時為多臺客戶端服務；

多個客戶端可以同時訪問服務器上的相同數據。

IP

網絡ID：網絡ID標識了計算機或網絡設備所在的網段；

主機ID：主機ID標識了特定的主機或網絡設備

特殊IP地址:

0.0.0.0和127.0.0.1就是兩個此類地址，第一個稱為缺省路由，后一個是環回地址；

127.0.0.1被保留用于用戶主機的本地IP話務，它被分配給一個特殊接口，即起到閉合電路作用的環回接口

端口

端口使用一個16位的數字來表示，它的范圍是0~65535，1024以下的端口號保留給預定義的服務，如：http使用80端口；

java.net包

java.net包可以實現Java的網絡功能，

InetAddress：

InetAddress getByName(String host) 在給定主機名的情況下確定主機的 IP 地址

注：host可以是主機名 IP地址 或者域名

InetAddress getLocalHost() 返回本地主機的InetAddress對象

InetAddress[] getAllByName(String host) 在給定主機名的情況下，根據系統上配置的名稱服務返回其 IP 地址所組成的數組可能一個主機名對應多個服務器（負載均衡）

JAVA Socket編程

socket用于描述IP地址和端口，應用程序通過套接字向網絡發出請求或者應答網絡請求；

套接字會因為網絡的連接中斷而失效，所以對它的操作都有可能拋出IOException

Socket以及ServerSocket

客戶端流程：向服務端請求，獲取輸入輸出流，進行收發數據，關閉io流，關閉套接字

服務器流程：創建套接字，獲得客戶端請求，獲得輸入輸出流，收發信息，關閉io流，關閉套接字

包裝以提高效率（用BufferedReader包裝輸入流，用PrintWriter包裝輸出流）

BufferedReader in = new BufferedReader(new InputStreamReader(socket.getInputStream()));

PrintWriter(OutputStream out, boolean autoFlush) 利用現有的OutputStream構造格式打印流，由參數autoFlush指定是否帶自動刷新緩存的功能

進程與線程的區別

進程是指系統中正在運行中的應用程序，它擁有自己獨立的內存空間；

線程是指進程中一個執行流程，一個進程中允許同時啟動多個線程，他們分別執行不同的任務；

線程與進程的主要區別在于：每個進程都需要操作系統為其分配獨立的內存地址空間，而同一進程中的所有線程在同一塊地址空間中，這些線程可以共享數據，因此線程間的通信比較簡單，消耗的系統開銷也相對較小。

在Java中實現線程有兩種方式，分別是：

擴展java.lang.Thread類

實現java.lang.Runnable接口

線程start()調用run()方法，重寫的是run()

線程生命周期

線程狀態：

新建狀態（New）：使用new關鍵字創建線程對象，僅僅被分配了內存；

就緒狀態（Ready）：線程對象被創建后，等待它的start方法被調用，以獲得CPU的使用權；

運行狀態（Running）：執行run方法，此時的線程的對象正占用CPU；

睡眠狀態（Sleeping）：調用sleep方法，線程被暫停，睡眠時間結束后，線程回到就緒狀態，睡眠狀態的線程不占用CPU；

死亡狀態（Dead）：run方法執行完畢后，線程進入死亡狀態；

阻塞狀態（Blocked）：線程由于某些事件（如等待鍵盤輸入）放棄CPU，暫停運行，直到線程重新進入就緒狀態，才有機會轉到運行狀態；

Yield()和join()的不同

HTTP協議

HTTP （HyperText Transfer Protocol）協議即超文本傳輸協議，是基于網絡應用層的協議，它建立在TCP/IP協議的基礎上；

該協議使用可靠的TCP連接，默認端口是80；

HTTP協議基于客戶端/服務器模式，客戶端主動發出HTTP請求，服務器接收HTTP請求，返回HTTP響應結果。

HTTP協議是指超文本傳輸協議，專門用于在Internet上傳輸信息的協議，目前的版本是1.1；

HTTP是應用層的協議，它基于請求/響應模式；

HTTP協議默認使用80端口進行通訊；

HTTP協議是無狀態的的協議。

請求報文實例：

請求報文是指客戶端瀏覽器向網絡服務器請求頁面時，發送到服務器端的字符串，必須符合HTTP協議的格式要求，它可能包含如下組成部分：

GET /index.html HTTP/1.1

Accept: image/gif, image/x-xbitmap, image/jpeg, …, */*

Accept-Language: zh-cn

UA-CPU: x86

Accept-Encoding: gzip, deflate

User-Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1)

Host: www.163.com:80

Connection: Keep-Alive

<空行>

請求報文中的大部分項目是可選的，只有GET和Host部分是必需的；

GET部分的格式是：

GET<空格>/[請求的URL]<空格>HTTP/協議版本號

如：GET /index.html HTTP/1.1

Host部分的格式是：

Host:<空格>服務器域名或IP地址:端口號

如：Host: www.newer.com.cn:80

換言之，請求報文中只要包含以上兩部分，就可以向網絡站點服務器請求到頁面。

//拼湊請求報文

String strHttp = "GET / HTTP/1.1\r\n";

strHttp += "Host: " + hostName + ":" + WEB_PORT + "\r\n";

響應報文實例：

響應報文是指網絡服務器收到來自客戶端的請求后，發回到客戶端的字符串，它用來告訴客服端：服務器已經接受請求，隨后跟隨的是被請求的網頁內容；

響應報文可能包含如下組成部分：

HTTP/1.1 200 OK

Date: Sat, 11 Aug 2007 11:58:37 GMT

Server: Apache/1.3.37(Unix)

Accept-Ranges: bytes

Content-Length: 11503

Content-Type: text/html

<空行>

響應報文中也有兩部分是必需的：

HTTP/協議版本號<空格>狀態碼<空格>OK

狀態碼是一個3位整數，用來表示不同的狀態，200表示響應成功，

如：HTTP/1.1 200 OK

狀態碼的具體描述請參閱本課件最后的附表。

Content-Type:<空格>text/html;<空格>charset=字符集編碼

用來描述服務器發回響應的文件類型以及字符集編碼，text/html說明是文本文件或超文本文件，

如：Content-Type: text/html; charset=GB2312

模擬：

out.println("Http/1.1 200 OK");

out.println("Content-Type:text/html; charset=GB2312");

狀態碼：

Web應用的優勢

相對于傳統的C/S結構（Client客戶端/Server服務器）的應用程序而言，B/S結構的Web應用程序具備以下優勢：

集中部署，無需安裝客戶端程序；

集中管理，業務邏輯在服務端進行維護；

數據共享，所有客戶端訪問同一服務器的數據；

覆蓋面廣，只要有Internet覆蓋的區域都可通過瀏覽器享受服務；

更強的平臺無關性，不必關心客戶端的軟硬件平臺，只要遵循HTTP協議，都可獲得支持。

WEB服務器概念

Web服務器可以解析(handles)HTTP協議。當Web服務器接收到一個HTTP請求(request)，會返回一個HTTP響應(response)，例如送回一個HTML頁面。為了處理一個請求(request)，Web服務器可以響應(response)一個靜態頁面或圖片，進行頁面跳轉(redirect)，或者把動態響應(dynamic response)的產生委托(delegate)給一些其它的程序例如CGI腳本，JSP(JavaServer Pages)腳本，servlets，ASP(Active Server Pages)腳本，服務器端(server-side)JavaScript，或者一些其它的服務器端(server-side)技術。無論它們(譯者注：腳本)的目的如何，這些服務器端(server-side)的程序通常產生一個HTML的響應(response)來讓瀏覽器可以瀏覽。

Tomcat服務器目錄結構和基本配置server.xml文件

博客http://blog.csdn.net/mycomein/article/details/45798161

tomcat環境變量的設置：

首先添加TOMCAT_HOME的環境變量，值為d:\Program Files\tomcat7。

添加CATALINA_HOME環境變量，值為%TOMCAT_HOME%，

添加CATALINA_BASE環境變量，值為%TOMCAT_HOME%。

Tomcat是以面向對象的方式運作的；在執行期間，它會基于配置文件的設定動態地組建其對象結構。

Server.xml文件中的每個主要元素都會創建軟件“對象”、排序及進程管道中設置的這些元素嵌套方，讓您能執行過濾、分組等工作。

什么是Servlet? 怎樣實現一個自定義Servlet?

Servlet是用Java語言編寫的程序，它運行在Web服務器上，用以處理來自客戶端的請求；

它一般會把處理的結果以為HTML的形式返回，在客戶端形成動態網頁

Servlet的優點

Servlet運行在Web服務器中，可以擴展服務器的功能；

Servlet可以和其他資源交互，從而生成返回給客戶端響應的內容，即動態網頁；

使用Java編寫，所以能夠跨平臺；

Java的所有優點都可以在Servlet中體現；

Servlet很安全，因為訪問Servlet的唯一途徑是通過服務器；

只要符合Servlet規范的Servlet容器都可以運行Servlet。

自定義servlet

一個類繼承HttpServlet，重寫doGet()和doPost()方法，如果需要看到創建和銷毀的過程，可以重寫init()和destroy()方法。

Servlet基本配置

在web.xml中加入servlet的配置：

<servlet>

<servlet-name>LoginServlet</servlet-name>

<servlet-class>com.tkclm.servlet.LoginServlet</servlet-class>

</servlet

<servlet-mapping>

<servlet-name>LoginServlet</servlet-name>

<url-pattern>/login</url-pattern>

</servlet-mapping>將action與class對應起來

ServletAPI 包括HttpServlet、HttpServletRequest、HttpServletResponse、ServletConfig、ServletContext

HttpServletRequest

HttpServletResponse

Javaweb容器的四種作用域

幾乎所有web應用容器都提供了四種類似Map的結構：application session request page，Jsp或者Servlet通過向著這四個對象放入數據，從而實現Jsp和Servlet之間數據的共享。

application:整個應用 對應servlet中ServletContext

session：會話　　　　對應servlet中HttpSession

request：一次請求　　對應servlet中的HttpServletRequest

page：當前頁面

ServletConfig：此接口定義Servlet配置對象，以便于容器將信息傳遞給Servlet。

ServletContext：此接口定義了一組方法，用于Servlet與容器進行通信。

service方法以及doGet和doPost方法、

public void service(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException

service方法是接口中的方法，servlet容器把所有請求發送到該方法，該方法默認行為是轉發http請求到doXXX方法中，如果你重載了該方法，默認操作被覆蓋，不再進行轉發操作！此方法用來調度客戶端的請求，API文檔中明確規定，請勿重寫該方法。

servlet生命周期

怎樣獲取網頁提交的參數?

①String str=request.getParameter("參數名稱")方法可以獲得參數值。

對于復選框類的數據，可以通過
②String[] str=request.getParameterValues("參數名稱")方法獲得。

會話HttpSession和Cookie

Cookie通過在客戶端記錄信息確定用戶身份，Session通過在服務器端記錄信息確定用戶身份。Cookie由服務器產生，給客戶端頒發的通行證，每一個Cookie只能保存一個變量，

若需要修改（包括刪除）需要服務器重新頒發Cookie。

會話對象（它主要解決了HTTP協議是無狀態的問題。）

所謂的會話是指：在一段時間內，某客戶端與服務器之間的一連串的請求與響應；

會話對象可以使用戶訪問一個站點的多個頁面時共享信息；

javax.servlet.http.HttpSession接口用來提供會話對象，如果我們在程序中需要操作會話，就可以使用它；

可以通過HttpServletRequest的getSession方法獲得（或創建）HttpSession對象。

調用一個已定義好的Servlet有哪些方式

發送請求（包括表單（） a標簽 js的）重定向（重定向跟轉發）

重定向：response.sendRedirect("success.jsp");
r轉發：equest.getRequestDispatcher("success.jsp").forward(request,response);
1.轉發在服務器端完成的；重定向是在客戶端完成的
2.轉發的速度快；重定向速度慢
3.轉發的是同一次請求；重定向是兩次不同請求
★4.轉發不會執行轉發后的代碼；重定向會執行重定向之后的代碼
★5.轉發地址欄沒有變化；重定向地址欄有變化
6.轉發必須是在同一臺服務器下完成；重定向可以在不同的服務器下完成

表單提交數據到Servlet 中文亂碼處理

可以通過字符集轉碼來解決此問題：

對于get

new String(request.getParameter("name").getBytes("ISO-8859-1"), "UTF-8");

對于post

request.setCharacterEncoding("UTF-8");

客戶端頁面向服務端servlet傳遞參數有哪些方式

表單

a標簽

Ajax即js

<jsp:param>

<%setAttributr();%>

JSP的運行原理以及基本語法

Jsp執行過程：

JSP 頁面內容

JSP元素包括JSP腳本元素（包括注釋，聲明，表達式，scriptlet），指令元素（page，include，taglib），動作元素。

Jsp聲明：

需求：某系統計算的金額中有兩種形式，一種是帶有兩位小數的，另一種是整數，現在要求你在JSP頁面將不帶小數的金額轉換為帶兩位小數的金額。

<%

String trans(String money){

Int index = money.indexOf(“.”);

If(index == -1){

Money = money +”.00”;

}

Retrun money;

}

%>

<%=trans(money)%>

Jsp注釋<%-- comment--%>>不會顯示在網頁上，html<!-- comment-->注釋會顯示在網頁中

Jsp指令包括 page，include，taglib

例：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%@ include file="../jsp/Header.jsp"%>

格式：<%@ 指令名稱 屬性1="屬性值1" 屬性2="屬性值2" … 屬性n="屬性值n"%>

l page 指令用于設置JSP 頁面的屬性，這個屬性將被用于和容器通信

<%@ page %>指令作用于整個JSP頁面，同樣包括靜態的包含文件。

無論你把<% @ page %>指令放在JSP的文件的哪個地方，它的作用范圍都是整個JSP頁面。

[ language=“java” ]

主要指定JSP容器要用什么語言來編譯JSP的元素

[ import=“{package.class | package.*}, ...” ]

JSP程序可以使用哪些包

[pageEncoding = “UTF-8”]

Jsp程序用什么編碼格式編碼

l include指令

用來在JSP文件被編譯時導入一個指定的文件，語法形式

<%@ include file = ”relativeURLspec” %>

include 指令告訴編譯器在編譯當前的JSP程序時,將由relativeURLspec所指定的外部文件代碼插入到include編譯指令所在的位置,并把它作為當前JSP程序的一部分編譯.如果被嵌入文件在包含它們的主JSP程序被裝載到內存之后被修改,那么主JSP程序連同被嵌入的文件將在下一次請求產生時被重新編譯.

這個包含的過程是靜態的,而包含的文件可以是HTML文件、JSP頁面、文本文件或是一段java程序

l Taglib指令

taglib 指令允許用戶創建自定義標簽 jstl

總結：

JSP 腳本由三個元素組成，即 JSP 表達式、JSP Scriptlet 和 JSP 指令

JSP 表達式包括在 <%= %>內； Scriptlet 包含在<% %>內；聲明包含在<%! %>內

JSP 指令共有三種類型，即 page、include 和 taglib。JSP 指令包括在 <%@ 和 %>內

page 指令用于設置 JSP 頁面的屬性；include 指令用于在 JSP 頁面嵌入其他文件

JSP隱式對象

l request表示客戶端對網頁的請求

l response實現 javax.servlet.http.HttpServletResponse 接口使用 HTTP 協議將響應發送給客戶端

l out表示輸出流

l Session

l Application 表示 JSP 頁面所屬的應用程序

l pageContext使用戶可以訪問頁面作用域中定義的所有隱式對象它的作用范圍是在同一頁面

l Page使用 page 對象可以訪問 Servlet 類的所有變量和方法

l config實現javax.servlet.ServletConfig接口，表示Servlet 的配置，其常用方法有：

getInitParameter() 獲取初始化的參數

getServletContext() 獲取環境

getServletName() 獲取Servlet名字

l exception對象用于處理 JSP 頁面中的錯誤

JavaScript基本語法

Js特點：腳本語言，基于對象，事件驅動，平臺無關

將JavaScript嵌入網頁（三種方式）：

1.使用 <script>…</script> 標簽將語句嵌入文檔

2.將 外部JavaScript 源文件鏈接到 html 文檔中

<script src= "test.js"></script>

可使多個網頁共享一個腳本文件內的代碼

一般在其中定義一系列在多個網頁中都可能要用到的函數

3.作為網頁元素的事件處理程序,當事件觸發時自動運行

<marquee onmouseover=“this.stop()”>

JavaScript基本語法部分：

語句：一條由計算機完成的、幫助你達到某種目的的指令，JavaScript中的每一行都可認為是一條語句

變量：一個代表某個值的名字就是變量

表達式：A-1+B 就是表達式

函數：具有一定功能的程序段

數據類型：

變量

JS是弱類型的語言,即聲明變量時不需指定數據類型,為它賦值時其類型才確定,而且再次為其賦值可改變它的數據類型.

變量的命名: 只能包含數字，字母，下劃線（"_"）,但不能以數字開頭,不能是保留字(關鍵字)

JS區分大小寫

用var聲明變量

函數的聲明與調用

方式一、

function 函數名([參數[,參數...]]){
<語句組>
[return <表達式>;]
}

方式二、

函數名 = function ([參數[,參數...]]) {

…

}

方式三、(較不常用)

Function類

函數名 = new Function ([“參數名”[,“參數名”...]]，“函數體”)

arguments對象

1:arguments是收到的實參副本
　　在詞法分析中, 首先按形參形成AO的屬性,值為undefined
　　當實參傳來時, 再修改AO的相應屬性.
　　2:并把所有收到實參收集起來,放到一個arguments對象里
　　t(a,b,c){},
　　調用時: t(1,2,3,4,5) 5個參數
　　此時 , AO屬性只有a,bc,3個屬性, arguments里有1,2,3,4,5, 所有的值

　　對于超出形參個數之外的實參, 可以通過arguments來獲得
　　3:arguments 的索引 從 0, 1,2,....遞增,與實參逐個對應
　　4:arguments.length 屬性代表實參的個數
　　5:arguments一定不是數組, 是長的比較像數組的一個對象,雖然也有length屬性
　　6:arguments每個函數都會有,因此,arguemnts只會在內部找自身的arguments,
　　無法引用到外層的arguments
　　<script type="text/javascript">
　　// 求圓形面積,矩形面積, 三角形面積
　　function area () {
　　if(arguments.length == 1) {
　　alert(3.14 * arguments[0] * arguments[0]);
　　} else if(arguments.length == 2) {
　　alert(arguments[0] * arguments[1]);
　　} else if(arguments.length == 3) {
　　alert(arguments[0] + arguments[1] + arguments[2]);
　　} else {
　　return null;
　　}
　　}
　　area(10,20,30);
　　
　　</script>

內部函數

function a( d){
var i=0;

Function c(){

//....

}
function b(){

c();
alert(++i);
}
return b;
}
var c = a();
c();

閉包：允許使用內部函數－－即函數定義和函數表達式位于另一個函數的函數體內。而且，這些內部函數可以訪問它們所在的外部函數中聲明的所有局部變量、參數和聲明的其他內部函數。

類型轉換

強制類型轉換,ECMAScript中可用的3種強制類型轉換:
Boolean(value);
Number(value);
String(value);

NaN --- 不是一個數字類型

NaN 值非常特殊，因為它“不是數字”，所以任何數跟它都不相等，甚至 NaN 本身也不等于 NaN 。

isNaN(testValue) 計算一個參數，檢查它是否為數值。

var iNum = 10;

var snum = iNum.toString(8); 12 進制

var iNum1= parseInt("12.6"); 12

var iNum2= parseInt("hello"); NaN

var iNum3= parseInt("123world");123

var fNum4= parseFloat("25.12.6");25.12

var b1 = Boolean("");false

var b2 = Boolean(undefined);false

var b3 = Boolean(0);false

var iNum = Number("25.12.6");NaN

var bl = isNaN(Number("13f"))true

JavaScript中的對象

本地對象

Object Function Array String Boolean Number Date RegExp Error EvalError RangeError TypeError ReferenceError SyntaxError URIError

內置對象

Global Math

宿主對象（自定義對象）

對象是用關鍵字new后跟要實例化的類的名字創建，例如：

var oObj = new Object();

如果構造 函數無參數，括號可省略

var oObj = new Object;

Object 對象：

可以對object對象增加函數屬性

判斷對象是否有某個屬性：

alert(oPerson.hasOwnProperty(“age”));

字符串對象 String

屬性：length

數組對象 Array

創建數組對象

myArr=new Array(); myArr [10]= “array”; //MyArray數組的長度為10

myArr=new Array(3); //可存放三個元素

myArr=new Array(“a”,”c”,”d”);//存放了三個元素的數組

myArr=[“a”,”b”,”c”]; //存放了三個元素的數組

下標從0開始編號

數學對象 Math

max(,,,,)方法:返回各個參數中最大的數

min(,,,)方法:返回各個參數中最小的數

abs()方法:返回絕對值

sin()方法:返回參數的正弦值,參數為弧度

sqrt()方法:求輸入參數的平方根

round():四舍五入為整數

random():返回0-1的隨機小數

返回 n 到 m之間的隨機整數：

var iNum = Math.floor(Math.random() * (m-n+1) ＋n)；

floor():取整,返回比參數小的最大整數

ceil():返回大于或等于參數的最近整數

Grobal對象：對象從不直接使用，并且不能用 new 運算符創建。它在 Scripting 引擎被初始化時創建，并立即使其方法和屬性可用。

日期時間對象Date

日期對象的創建:

mydate=new Date()
創建代表當前日期時間的日期對象

mydate=new Date(“October 1,2005,12:00:00”)
創建代表2005年國慶午時的日期對象

Mydate=new Date(2005, 9, 1)

創建代表2005年10月1日的日期對象

日期對象以系統內存中以數值表示,以1970年1月1日0時0分0秒0毫秒為起始點,每過一毫秒增加一.

get方法組à從日期對象中分解出它所處的年月日,星期幾,時分秒,毫秒值

getYear()à返回年份數

getMonth()à返回月份數:0-11,應加上1.

getDate()à返回當前Date對象的日期數:1-31

getDay()à返回星期幾:0-6, 0代表星期日

getHours()à返回小時數:0-23

getMinutes()à返回分鐘數:0-59

getSeconds()à返回秒數:0-59

getTime()à返回毫秒數:自起始時刻開始

set方法組à設置(改變)日期對象的某一部分

setYear()à設置年份數

setMonth()à設置月份數:參數0-11

setDate()à設置日期數:參數1-31

setHours()à設置小時數:參數0-23

setMinutes()à設置分鐘數:參數0-59

setSeconds()à設置秒數:參數0-59

JavaScript與AJAX

1.1XMLHttpRequst對象的概述

　　在使用XMLHttpRequest對象發送請求和處理響應之前，必須先調用JavaScript創建一個XMLHttpRequest對象。由于XMLHttpRequest不是一個W3C標準，所以可以采用很多JavaScript方法來創建XMLHttpRequest的實例，IE把XMLHttpRequest實現為一個ActiveX對象，其他瀏覽器則把它實現為一個本地的JavaScript對象，由于存在這些差別，JavaScript必須包含有關的邏輯，從而使用ActiveX技術與使用本地的JavaScript對象技術創建XMLHttpRequst的一個實例。

　　很多人可能還記得從前的那段日子，那時不同瀏覽器上的JavaScript與DOM簡直千差萬別，聽了這段話后有人可能不寒而栗。幸運的是，在這里為了明確該如何創建XMLHttpRequst對象的實例，并不需要那么詳細的編寫代碼來區別瀏覽器的類型。你要做的只是檢查瀏覽器是否提供對ActiveX對象的支持。如果瀏覽器支持ActiveX對象，就可以使用ActiveX對象來創建XMLHttpRequest對象。否則，就要使用本地的JavaScript對象技術來創建。下面的代碼展示了編寫跨瀏覽器的JavaScript代碼來創建XMLHttpRequst是多么的簡單。

　　創建XMLHttpRequest的一個實例：

var xmlHttp; function createXMLHttpRequst(){ if(window.ActiveXObject){
　　　　　　xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 　　　　}
　　　　else if(window.XMLHttpRequst){
　　　　　　xmlHttp = new XMLHttpRequest();
　　　　} }

　　可以看到，創建一個XMLHttpRequest相當容易。首先，要創建一個全局作用域變量xmlHttp來保存這個對象的引用。createXMLHttpRequst方法完成創建XMLHttpRequst對象的具體工作。這個方法中只有簡單的分支邏輯（選擇邏輯）來確定如何創建對象。對window.ActiveXObject的調用會返回一個對象，也可能返回一個null，if語句會把調用返回的結果看作是true或false(如果返回對象則為true，返回null則為false)，以此指示瀏覽器是否支持ActiveX控件，相應地得知瀏覽器是不是IE，如果確實是，則通過實例化一個ActiveX的一個新實例來創建XMLHttpRequst對象，并傳入一個串指令指示要創建何種類型的ActiveX對象

。在這個例子中為構造函數提供的字符串是Microsoft。XMLHTTP,這說明你想創建一個XMLHttpRequst的一個實例。

　　如果window.ActiveXObjec調用失敗（返回null）,JavaScript就會轉到else語句的分支確定瀏覽器是否把XMLHttpRequst實現為一個本地的JavaScript對象。如果存在window.XMLHttpRequest，就會創建XMLHttpRequst的一個實例。

　　由于ajax具有動態類型特性，而且XMLHttpRequst在不同瀏覽器上的實現是兼容的，所以可以用同樣的方式訪問XMLHttpRequst實例的屬性和方法，而不論這個實例創建的方法是什么。這就大大地簡化了開發過程，而且在JavaScript中也不必編寫特定于瀏覽器的邏輯。

1.2方法和屬性

　　abort()　　停止當前請求；

　　getAllResponseHeaders()　　把HTTP請求的所有響應首部作為鍵值對返回；

　　getResponseHeader("header")　　返回指定首部的串值；

　　open("method","url")　　建立對服務器的調用。method參數可以使GET POST 或PUT。url可以使相對url或絕對url，這個方法還包括三個可選的參數；

　　send(content)　　向服務器發送請求；

　　setRequstHeader("header","value")　　把指定首部設置為所提供的值。在設置任何首部之前必須先調用open();

　　下面來更詳細地討論這些方法。

　　void open(string method, string url, boolean asynch ,string usename ,string password); 這個方法會建立對服務器的調用。這是初始化一個請求的純腳本方法。它有兩個必要的參數三個可選的參數。要提供調用的特定方法（get/post/put）,還要提供所調用資源的url。另外還可以傳遞一個Boolean值，這是這個調用是異步的還是同步的。默認值為true,表示本質上是異步的，如果這個參數為false，處理就會等待，知道服務器返回響應為止。由于異步調用是ajax主要優勢之一，所以倘若這個參數設為false，從某種程度上講與使用XMLHttpRequst對象的初衷不太相符。不過在某些情況下見這個參數設為fals也是有用的，比如持久存儲頁面之前可以先驗證用戶的輸入。最后兩個參數不說自明，允許你指定一個特定的用戶名和密碼。

　　void send(content) 這個方法具體向服務器發送請求。如果請求聲明為異步的，這個方法就會立即返回，否則它會等到直到接收到響應為止。可選參數可以是DOM對象的實例、輸入流，或串。傳入這個方法的內容會作為一個請求體的一部分發送。

　　void setRequstHeader(string header,string value);這個方法為為HTTP請求中一個給定的首部設置值，它有兩個參數，第一個串表示要設置的首部，第二個串表示要在首部中放置的值。注意，這個方法必須在調用opend()之后才能調用。

　　在所有的這些方法中，最有可能用到的就是opend()和send()。XMLHttpRequest對象還有很多屬性，在設計Ajax交互時這些屬性非常有用。

　　void abort() 顧名思義，這個方法就是要停止請求。

　　string getAllResponseHeaders() 這個方法的核心功能對開發人員應該很熟悉，它返回一個串，其中包含HTTP請求的所有響應首部，首部包括Content-Length/Data和URI

　　string getReponseHeader(string header) 這個方法與getAllResponseHeaders()是對應的，不過它有一個參數表示您希望的指定收不到的值，并把這個值作為串返回。除了這些標準方法，處理XMLHttpRequst可以大量使用這些屬性。

　　onreadystatechange 每個狀態改變時都會觸發這個事件處理器，通常會調用一個javacript函數；

　　readyState 請求狀態。有5個可取的值：0：=未初始化，1=正在加載，2=已加載，3=交互中，4=完成；

　　responseText服務器的響應，表示為一個串；

　　responseXML服務器的響應，表示為XML,這個對象可解釋為DOM對象；

　　status服務器HTTP狀態碼（200對應Ok 404對應 not found ,等）

　　statusText HTTP狀態碼的相應文本（ok或not found等）

1.3AJAX交互設計

　　1.一個客戶端事件觸發一個Ajax事件。從簡單的onchange事件到某個特定的用戶動作，很多這樣的事都可以觸發Ajax事件。

<input type="text" d="email" name="email" onblur="validateEmail()"/>

　　2.創建XMLHttpRequst對象的一個實例。使用open()方法建立調用，并調用url及所希望的HTTP方法（通常是post/get）。請求實際上是通過一個send()方法調用觸發，代碼如下：

var xmlHttp; function validateEmail(){ 　　var email = document.getElementById("email");
　　var url = "validate?email="+escape(email.value);
　　if(window.ActiveObject){
　　　　xmlHttp = new ActiveObject("Microsoft.XMLHTTP");
　　}
　　else if(window.XMLHttpRequst){
　　　　xmlHttp = new XMLHttpRequst();
　　}
　　xmlHttp.open("get",url);
　　xmlHttp.onreadystatechange = callback;
　　xmlHttp.send(null);
}

　　3.向服務器做出請求。可能調用servlet、CGI腳本，或者任何服務器端技術。

　　4.服務器可以做你想做的事情，包括訪問時數據庫，甚至訪問另一個系統。

　　5.請求返回到瀏覽器。content-type設置為text/xml ,XMLHttpRequst的對象只能處理text/html類型的結果。在另外一些更復雜的示例中

　　6.在這個demo中，XMLHttpRequst對象配置為處理返回結果時要調用callback()函數，這個函數會檢查XMLHttpRequst對象的readyState屬性，然后查看服務器返回的狀態碼。如果一切正常，callback()函數就會在客戶端做一些有意思的工作。一下就是一個典型的回調方法：

function callback(){ 　　if(xmlHttp.readyState == 4){
　　　　if(xmlHttp.status == 200){
　　　　　　//do something interesting here
　　　　}
　　} }

　　可以看到，正常的請求/響應模式有所不同，但對于web開發人員來說，并不是完全陌生的。顯然，在創建和建立XMLHttpRequst對象時還可以做些事情，另外當“回調”函數完成狀態檢查之后也可以有所作為。一般的，你會把這些標準調用包裝在一個庫中，一便在整個應用中使用，或者可以使用web上提供的庫

基于對象的Javascript以及繼承的實現

關鍵字this

指向調用該方法的“當前”對象

this使用的幾種場合：

用在對象的方法中

構造函數

事件處理函數

原型－prototype

objectName.prototype

objectName 是對象的名稱。

objectName.prototype本身也是對象

用 prototype 屬性提供對象的類的一組基本功能。 對象的新實例“繼承”賦予該對象原型的操作。

prototype 對象是個模板，要實例化的對象都以這個為基礎。

prototype 對象的任何屬性和方法都被傳遞給那個類的所有實例

利用prototype修改本地對象

個本地對象也有prototype屬性

通過prototype屬性創建新方法

通過prototype屬性重定義已有方法

var books = new Array("java","C","VB"); Array.prototype.hasItem = function(oItem){ for(i=0; i<books.length; i++){ if(oItem == books[i]){ return true; } } return false;}

var books = new Array("java","C","VB");

Array.prototype.pop = function(){

return "pop object";

}

var o = books.pop(); //原本為VB -à 重載后 pop object

自定義對象的4種方式

1．通過工廠方式創建

此工廠創建的對象各屬性都一樣

function createPerson(){

var oPerson = new Object()；

oPerson.name = "張三";

oPerson.age = 22;

oPerson.showAge = function(){

alert(this.age);

}

return oPerson;

}

var oPerson1 = createPerson();

var oPerson2 = createPerson();

此工廠根據傳參的不同 創建不同的屬性

function createPerson(sName, iAge){

var oPerson = new Object()；

oPerson.name = sName;

oPerson.age = iAge;

oPerson.showAge = function(){ //或者函數外定義

alert(this.age);

}

return oPerson;

}

var oPerson1 = createPerson("張三"，22);

var oPerson2 = createPerson("李四", 20);

oPerson1.showAge();

oPerson2.showAge();

2．通過構造函數方式創建

function Person(sName, iAge){

this.name = sName;

this.age = iAge;

this.showAge = function(){ //或者函數外定義

alert(this.age);

}

}

var oPerson1 = new Person("張三"，22);

var oPerson2 = new Person("李四", 20);

oPerson1.showAge();

oPerson2.showAge();

3．通過原型方式創建

function Person(){

}

Person.prototype.name = "張三";

Person.prototype.age = 22;

Person.prototype.showAge = function(){

alert(this.age);

}

var oPerson1 = new Person();

var oPerson2 = new Person();

function Person(){

}

Person.prototype.name = "張三";

Person.prototype.age = 22;

Person.prototype.books = new Array("java","C");

Person.prototype.showAge = function(){

alert(this.age);

}

var oPerson1 = new Person();

var oPerson2 = new Person();

oPerson1.books.push("VB");

alert(oPerson1.books); // java,C,VB

alert(oPerson2.books); // java,C,VB

4．混合的構造函數/原型方式創建

function Car(sColor, iDoors, iMpg) {

this.color = sColor;

this.doors = iDoors;

this.mpg = iMpg;

this.drivers = new Array("Mike", "Sue");

}

Car.prototype.showColor = function () {

alert(this.color);

};

var oCar1 = new Car("red", 4, 23);

var oCar2 = new Car("blue", 3, 25);

oCar1.drivers.push("Matt");

alert(oCar1.drivers); //outputs "Mike,Sue,Matt"

alert(oCar2.drivers); //outputs "Mike,Sue"

原型(prototype)鏈

prototype類似于模板，要實例化的對象都以這個模板為基礎， prototype對象的任何屬性和方法都被傳遞給類的所有實例。

所有 JavaScript 內部類的 prototype 屬性都是只讀的，所以：不能更改內部對象的 prototype ，只能為內部對象的原型添加或重載屬性和方法

自定義對象可以更改其prototype ，即：

子類類名.prototype = 父類對象實例;

1、創建基類

function Polygon(iSides){ //多邊形

this.iSides = iSides;

}

Polygon.prototype.getArea = function(){

return 0;

}

2、創建子類

function Triangle(iBase,iHeight){ //三角形對象

this.iBase = iBase;

this.iHeight = iHeight;

}

Triangle.prototype = new Polygon(3);

Triangle.prototype.getArea = function(){

return 0.5 * this.iBase * this.iHeight;

}

function Rectangle(iLength,iWidth){ //矩形對象

this.iLength = iLength;

this.iWidth = iWidth;

}

Rectangle.prototype = new Polygon(4);

Rectangle.prototype.getArea = function(){

return this.iLength * this.iWidth;

}

3、測試

var triangle = new Triangle(10,4);

var rectangle = new Rectangle(8,4);

alert(triangle.iSides);

alert(rectangle.iSides);

alert(triangle.getArea());

alert(rectangle.getArea());

作者：極客小俊
把邏輯思維轉變為代碼的技術博主

摘要 我覺得你大概率還是沒搞明白toString和valueOf這兩個方法到底有什么用! 很多人都沒有說清楚! 我看不見得吧!

前言

很多人見過toString和valueOf這兩個方法，但就是不清楚這兩個方法用來干嘛的,如何運行的,今天就給大家詳細介紹一下，但是在說之前，我們必須要對數據類型轉換、面向對象、原型和原型鏈等知識點先需要回顧復習一下, 這樣有助于更好的理解這兩個方法!

數據類型轉換

首先稍稍有點JS基礎的朋友肯定是知道，在JS中數據類型轉換是分為強制轉換和 隱式轉換 兩種方式!

強制類型轉換 也稱為顯性類型轉換,意思就是你能看到的一種數據類型轉換的情況

隱式類型轉換 也稱為自動類型轉換,意思就是你可能無法感知的情況下數據類型就被轉換了

強制數據類型轉換

先來看看什么是強制類型轉換

我們需要將值顯式地轉換為我們期望的數據類型!

這里我可以調用數據類型當中的toString()方法來完成對其他數據類型轉換為String類型的操作

也就說對要被轉換的數據類型調用toString()方法即可!

舉個栗子

//定義一個數值類型的變量
var num=100;
//轉換前
console.log('轉換[前]為:'+typeof num+'類型');
//開始轉換
num=num.toString();
//轉換后
console.log('轉換[后]為:'+typeof num+'類型');

如圖

這個案例很簡單，快速的把一個數值類型強制轉換為字符串類型 這沒什么說的!

隱式數據類型轉換

隱式數據類型轉換又稱為: 自動類型轉換就是不需要人為強制進行數據的轉換，而是JS會自動的將某種類型轉換為需要的類型，所以該轉換操作用戶是感覺不到的，因此又稱為 隱式類型轉換

但其實內部還是和強制類型轉換一樣，也是通過隱性的調用String()、Number()、Boolean()等函數來進行轉換 ,不同的則是這種操作是由JS自己自動完成的!

所以從轉換規則上說 隱式數據類型轉換和 強制數據類型轉換是一樣的!

舉個梨子

很多人不知道,其實alert方法會自動將任何要進行彈出打印的數據,都轉換為字符串以進行顯示, 很多人并不知道這一特點!

怎么你還不信？那么我們來測試測試看看!

舉個栗子

你用alert打印數值、布爾值、還是字符串可能看不怎么出來，我們來打印一個函數試試看就知道了!

function test(){
    return 1+1;
}

alert(test);

你看看打印結果是什么就明白了!

這里居然把函數體打印出來了，并且是以字符串的形式, 并且就測試以下代碼看看,效果是不是一樣的

function test(){
    return 1+1;
}

console.log(test.toString());  //強制轉換為字符串
console.log(String(test));     //強制轉換為字符串
console.log(test+"");          //快捷隱式轉換為字符串

如圖

看到了吧，這很好的證明了隱式類型轉換，其實和強制類型轉換的規則上其實是差不多的!

并且JS在算術運算表達式中，也會自動將運算數據進行number類型轉換

舉個簡單的栗子:

alert("6"/ "2"); 輸出結果為3

這里就是左右兩邊的String類型的數據被自動轉換成number類型,然后再進行算術運算得出結果!

JS面向對象

關于面向對象這一塊我以前也有說過，這里也簡單提一嘴，

對于JS面向對象而言,你可以把任何一樣東西都看成對象,然后找出對象的屬性和方法,通過這種對象方式的模塊化來管理整個對象當中的數據,這就是面向對象編程 這個道理如果你學過C++、Java、PHP等語言其實大致上都是觸類旁通的!

所以面向對象也是一種模塊化編程的一種方式,而在我們給別人使用這個對象的時候，只需要讓別人實例化這個對象，然后就可以訪問對象中的屬性和對象中的方法了

我們在平常的項目開發中使用最頻繁的也是自定義的對象!

例如

var obj={
    _getUser:function (){
        console.log('獲取用戶信息邏輯');
    },
    _ViewOrder:function () {
        console.log('查看訂單');
    }
}
console.log(obj);

初探toString與valueOf方法

上面說了那么多，又跟toString與valueOf這兩個方法有什么關系呢？

我們來看個梨子:

var obj={"user":"張三"};

console.log(String(obj));
console.log(obj+"");

以上會返回一個為[object Object]的結果!

如圖

尤其剛剛接觸js的朋友這時候一定會想，咦.............這是個什么玩意東西呢?? 嘿嘿嘿

toString()方法

首先上面的代碼中，我進行了把一個對象強制和隱式轉換為字符串的行為，對吧!

可是呢,從JS設計的角度是不允許這樣給對象進行處理的!

在此類運算的情況下，對象會被自動轉換為原始值，然后對這些原始值進行運算，并得到運算結果（也是一個原始值）

于是呢對象到字符串的轉換，當我們對期望一個字符串的對象執行操作時,這時候就非常關鍵啦，嘿嘿

js將嘗試尋找toString和valueOf 方法,你也先別管這兩個方法從哪里來的，我們先來看一下它的運行原理!

分析

0. 當一個對象被轉換到字符串時候，首先隱式調用了toString()方法,如果嘗試能夠返回出基本數據類型也就是(字符串、數值、布爾值)等等，則可以調用String()函數繼續轉換該值,最終返回出字符串
1. 如果toString()方法 返回出來的不是基本數據類型, 也就是說如果它返回出來的依然是一個對象,那么則再繼續調用valueOf()方法 如果返回出來的是基本數據類型的值，然后則可以繼續用String()函數轉換該值

怎么樣，是不是聽著有些神叨叨、鬼道道、神批嘮叨的感覺還沒明白？ 沒關系 我們看下面的案例來理解!

其實呀很簡單，你先記住, 對于字符串轉換,會默認調用toString方法

并且默認情況下toString 方法會返回一個字符串[object Object]

剛剛上面我們不是看到了對象轉字符串會返回出一個[object Object]的東西嘛,其實我們自己也能去定義它

例如

var obj={
    "user":"張三",
    "toString":function () {
        console.log('1.執行了toString()方法');
        return '[object Object]';
    }
}


console.log(String(obj));  //強制把對象轉換為字符串
console.log(""+obj);       //隱式把對象轉換為字符串

如圖

這就很明顯確定了一件重要的事情，我們在給對象做字符串轉換的時候，會默認調用這個toString方法

只是說這里我們重寫了它一下， 并且如果嘗試能夠返回出基本數據類型也就是(字符串、數值、布爾值)等等，則可以繼續調用String()函數繼續轉換該值,最終返回出我們想要的結果對吧!

那么看下面的代碼: 我就給它返回一個其他的基本數據類型看看，

var obj={
    "user":"張三",
    "toString":function () {
        console.log('1.執行了toString()方法');
        return 100;  //從toString()方法中返回一個基本數據類型出去!
    }
}
console.log(String(obj));
console.log(""+obj);

如圖

這里對象被進行轉換了兩次，一次顯示，一次隱式，但不管是顯示還是隱式的轉換，其實都一樣

所以說，作為toString()方法就是在進行對象被進行字符串轉換的時候，被自動調用，然后返回一個基本數據類型出來! 并且toString()方法必須要返回基本數據類型,才能夠被String()函數繼續進行字符串的轉換, 至于要返回什么基本數據出來，這里由我們自己決定!

valueOf()方法

valueOf其實默認情況下返回的就是對象自身

那么問題來了,如果說toString()方法 返回出來的不是基本數據類型, 也就是說如果它返回出來的是一個對象, 會怎么樣呢?

現在我告訴你，則會繼續調用valueOf()方法 如果返回基本數據類型的值,

按照我們上面代碼的意思，則又可以繼續用String()函數轉換該值!

所以此時此刻，你可以把這個valueOf()方法加上去看看了!

代碼如下

var obj={
    "user":"張三",
    "toString":function () {
        console.log('1.執行了toString()方法');
        return {};
    },

    "valueOf":function (){
        console.log('2.執行了valueOf()方法');
        return '執行結束';
    }
}

console.log(String(obj));

代碼分析

此時,我為了讓valueOf方法執行，在toString方法中故意返回一個對象, 那么valueOf方法自然會自動執行,最后返回出一個基本數據類型(標量類型)出來!

并且在這里我們也很好的知道了toString和valueOf兩個方法執行的先后順序!

總之你先記住: 對于字符串轉換，優先調用 toString方法、然后再調用valueOf方法

如圖

toString與valueOf方法的順序問題

對于字符串轉換，順序很簡單，也就是先執行toString再執行valueOf 這個上面已經說過了!

但是如果只是對于數學運算,那么則優先調用 valueOf 方法, 除非這個方法它不存在的情況下, 或者說是valueOf方法返回的也是一個對象類型,則調用toString方法

例如

var obj={
    "user":"張三",
    "toString":function () {
       console.log('1.執行了toString()方法');
        return {};
    },

    "valueOf":function (){
        console.log('2.執行了valueOf()方法');
        return " OK啦";
    }
}

console.log(String(obj));
console.log("------------------------------------------");
console.log(100+obj);

結果如圖

在對象進行算術運算的，時候valueOf方法會先執行,如果返回的是一個對象，那么再執行toString方法,讓它去返回一個可正常被運算的基本數據類型!

var obj={
    "user":"張三",
    "toString":function () {
       console.log('1.執行了toString()方法');
        return 500;
    },

    "valueOf":function (){
        console.log('2.執行了valueOf()方法');
        return {};
    }
}
console.log(100+obj);

結果如圖

注意:如果toString方法和vlaueOf方法都返回對象類型，那么就可能會報錯了

也就是說，如果都不能返回一個基本數據類型的值,

那么瀏覽器可能會拋出一個錯誤信息Uncaught TypeError: Cannot convert object to primitive value 意思是: 未捕獲的TypeError:無法將對象轉換為字符串值

所以說很多新手朋友剛剛遇到的就是這個對象轉字符串時候出現的這些問題，不知道如何解決!

小結

對象轉字符串中的:toString()與valueOf() 這兩個方法 調用的順序是先調用toString，不滿足需求才會調用valueOf(),這里的需求是指toString方法必須返回基本的數據類型，也就是字符、數值、布爾值、undefined、null這些數據類型，也只有返回出這些數據類型之后String()函數才能正常執行字符串的轉換

如果返回一個對象，就會判定使用valueOf()方法來繼續處理，而valueOf()方法返回的值也必須是那些基本數據類型，如果還是返回出一個對象數據類型，則最終會判定無法進行轉換!

總之: toString()方法已經返回了一個基本數據類型,就不會再調用valueOf()方法了,除非當toString()方法返回一個對象的時候，才會再次調用valueOf()方法 或者是對象進行了算術運算、對象轉數值之類的操作，才會優先調用valueOf方法!

這里還說一點，這不光是對象轉字符串，會啟動這兩個方法對象轉數值，也會 大家可以自己去試試看執行順序

以上我覺得就是對toString與valueOf方法最基本的認知, 下面我來詳細說一下，這兩個方法存在于什么地方!

toString與valueOf來自于哪里?

有些人肯定會問，這兩個方法來自于哪里呢？別著急，我們先來復習復習什么是原型對象

原型對象prototype

還記得我以前講過的原型對象嗎? 不記得也沒關系，我們來看回憶回憶!

當我們創建一個構造函數 或者 是一個普通函數的時候, 瀏覽器中的JS解析器都會向函數中添加一個屬性名為prototype, 它就指向構造函數的原型對象

例如

function 函數名() {
   //this.prototype={}  相當于這樣子
}

你也可以理解為在 JS中構造函數或者普通函數都有一個特殊的隱藏屬性 prototype,

這個prototype屬性對應著一個對象, 而這個對象就是我們所謂的原型對象,并且這個原型對象是對應于相應的構造函數所創建的!

如圖

從上圖中可以看出，每一個構造函數/普通函數其實都對應著自己的一個原型對象

并且可以使用構造函數.prototype來進行訪問, 現在想起來了吧!

原型鏈中的toString與valueOf

接下來我們再來說說原型鏈,因為這里就是尋找toString與valueOf方法的關鍵了!

原型鏈還記得吧! 以前我也說過，如果有不明白的，一定要翻看前面的文章哦! 嘿嘿嘿...

圖片官網地址: http://www.mollypages.org/tutorials/js.mp

如圖

這么大一張圖，估計肯定吧你看得腦殼疼、精神萎靡不振、感覺身體被掏空的樣子了吧,嘿嘿嘿!

關于原型鏈之前的文章中我說的很清楚，還沒有明白的朋友趕緊去看看!

這里我主要說一下toString和valueOf這兩個方法存在于哪里!

注意到圖中的Object.prototype了嗎？這兩個方法就存在于Object的原型對象當中

你不信？讓我們使用Chrome瀏覽器調試工具來看看吧, 你完全可以使用以下代碼進行查看!

console.log(Object.prototype);

如圖

所以toString()與valueOf() 這兩個方法 默認情況下存在于Object()原型對象當中!

那么現在我們回過頭 又來看看最開始我們在做數據類型轉換時，強制轉換調用toString()方法

代碼

function test(a,b){
    console.log("Hello world");
    return true;
}

console.log(test.toString());

這里結合原型鏈就很好的說明了一點，Function對象從Object原型對象當中繼承來的toString方法，所以可以這樣子調用，繞了一圈,現在明白了吧!

結果

那么結果就是你所到的, 一個函數對象的 toString 方法會返回一個表示函數源代碼的字符串, 其中包括 function關鍵字，形參列表，大括號，以及函數體中的內容,都是以字符串直接返回

并且普通實例對象也因為原型鏈的關系，繼承了這兩個方法,所以也可以進行調用!

toString與valueOf方法的使用總結

說這么多，這兩個方法到底有什么用呢？

其實這兩個方法，我個人理解就是用來限制你在javascript中操作對象或者函數的規則

舉個栗子

當你把兩個對象相加 obj1 + obj2，或者相減 obj1 - obj2，或者使用打印彈框 alert(obj) 打印時會發生什么？

這種操作到底合理嗎？ 其實從JavaScript語言設計的角度上來說, 這樣是不允許運算符對函數或者對象進行這樣的處理方式, 與其他的語言不同，JavaScript本身是無法實現讓對象進行加法或其他運算的!

因為你覺得在JS中這樣有意義嗎？

例如

var user = {"username": "John"};

function test(){

}

alert(user+test);
console.log(user+test);

效果如下

所以說在此類運算的情況下，對象會被自動轉換為基本數據類型，然后對這些基本數據類型進行運算，并得到運算結果,必須是一個基本數據類型, 所以說toString與valueOf方法就是用來干這事情的!

畢竟這是一個js內部重要的限制因為如果遇見類似于對象的運算結果不能是另一個對象,在JS中是無法實現這種操作的!

因此從技術上無法實現此類運算，所以在實際項目中不存在讓js對象進行一些數學運算, 如果真發現有,通常是寫錯了!

從本質上講toString與valueOf方法就是在以下幾種這種場景才使用:

0. 當我們把對象進行數學運算的時候，幫我們返回出應該能讓JS計算的基本數據類型
1. 當我們把對象轉換成字符串的時候，幫我們返回出應該能讓JS計算的基本數據類型

之前我說提到的隱式數據類型轉換本質就是調用了valueOf或者toString方法, 又因為原型鏈的緣故那么在JS中,幾乎每一種類型的對象都有一個toString和valueOf這兩個方法!

我們可以通過重寫來測試則兩個方法,在構造函數的原型中重寫也可以，在實例對象中直接重寫也是可以的!

如果真的遇見兩個js對象要進行算術運算,那么代碼如下:

var user1 = {
    "username": "張三",
    "age":30,
    toString:function (){
        //alert(1);  測試執行順序
        return this.age;
    },
    valueOf:function (){
        //alert(2);  測試執行順序
        return user1;
    }
}
function Person(){
    this.username="李四";
    this.age=30;
}
Person.prototype.toString=function (){
    return this.age;
}
Person.prototype.valueOf=function (){
    return Person;
}
var user2= new Person();


console.log("結果為:"+(""+user1));
console.log("結果為:"+(1+user1));
console.log("結果為:"+(user1+user2));

效果

為什么結果是這樣呢？我們一個一個的來解釋一下:

console.log("結果為:"+(""+user1));

分析

首先我們確定這是一個讓對象做數學運算的表達式對吧, 是一個空字符串加上一個user1實例對象 那么此時此刻,根據我們之前說的toString和valueOf執行順序，就會自動的先執行valueOf方法，但是它又返回的是對象,那就繼續執行toString方法 最后toString方法返回出來的是一個基本數據類型，也就所謂的原始值 這樣就可以進行外面的運算了, 相當于返回出的表達式就為"" + 30 最后得到的結果就是一個字符串30

console.log("結果為:"+(1+user1));

這里最后返回的結果為31 大致流程就跟上面的差不多，只是最后返回出來的結果30還加上了1而已, 最后結果就為數值類型31

console.log("結果為:"+(user1+user2));

這里我們大致可以判斷出來是兩個對象在執行加法運算，那么必然就會自動執行 兩個對象中的valueOf方法，而這里我讓valueOf返回的是一個對象，就會分別讓讓toString方法自動執行,所以返回出來的都是基本數據類型的年齡屬性值,最后相加而已，結果為數值60 大致流程就是這樣!

小結

所以如果真要讓對象進行這種運算，那么首先要執行的流程就是如下:

0. 對象被轉換為原始值，也就是基本數據類型
1. 然后再進行進一步計算，把返回的基本數據類型被進一步進行數據類型轉換之后，執行正常的計算!

還有就是要注意一下valueOf和toString的執行順序

這里因為數算術運算需要得到一個原始值，那么嘗試調用valueOf()再調用toString()無論哪個存在,如果沒有重寫，則會調用Object中默認的valueOf或toString方法!

那么如果你真的明白了，那你猜猜下面這樣做會輸出什么？這就留給大家了, 很簡單!

代碼如下

let test= ()=>{}

test.valueOf = () => {
    return 100
}

test.toString = () => {
    return '不準你繼續這樣干下去!'
}

console.log(+test);
console.log(test*2);
console.log(test==100);
console.log(test=="100");
console.log(test==="100");

最后

看完之后你應該對valueOf和toString有一個基本的認識了吧!

我們在ES6中valueOf和toString也可以使用Symbol.toPrimitive來代替，以后會詳細給大家介紹!

給大家一點簡單的練習題 考考你們!!

說出以下代碼輸出什么結果:

面試題1

var obj = {
    i: 1,
    valueOf: function () {
        return this.i+100;
    },
    toString: function () {
        return this.i;
    }
}

var Person = {
    i: +obj,
    valueOf: function () {
        return this.i+200;
    },
    toString: function () {
        return this.i;
    }
}


alert(Person);

面試題2

let a = {};
let b = {};
a.toString = function() {
    return 1;
};
b.valueOf = function() {
    return "1";
};
let sum = a + b;
console.log(sum);

大家的支持就是我堅持的動力!

如果文章對你有幫助的話就請

點贊 ??評論 收藏

一鍵三連哦！

如果以上內容有任何錯誤或者不準確的地方，歡迎在下面 留個言指出!

或者你有更好的想法，歡迎一起交流學習??