<a href="http://www.w3school.com.cn">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);

大家的支持就是我坚持的动力!

如果文章对你有帮助的话就请

点赞 ✍️评论 收藏

一键三连哦！

如果以上内容有任何错误或者不准确的地方，欢迎在下面 留个言指出!

或者你有更好的想法，欢迎一起交流学习❤️