js面试的一些总结

深藏阁楼爱情的钟 2022-05-19 10:41 206阅读 0赞

一：[localstorage || globalStorage || userData][localstorage _ globalStorage _ userData]

**globalStorage **  
这个也是html5中提出来，在[浏览器][Link 1]关闭以后，使用globalStorage[存储][Link 2]的信息仍能够保留下来，并且存储容量比IE的userdata大得多，一个域下面是5120k。和sessionStorage一样，域中任何一个页面存储的信息都能被所有的页面共享。   
作用域   
globalStorage\[''\] 所有下面的页面都可以使用这块空间   
globalStorage\[''\] 所有下面的页面都可以使用这块空间   
globalStorage\['com'\]：所有com[域名][Link 3]都可以 共享的使用这一块空间   
globalStorage\[''\] ：所有页面都可以使用的空间   
现在Firefox只支持当前域下的globalStorage存储， 如果使用公用域会导致一个这样一个类似的错误“Security error” code: “1000”。   
过期时间   
按照HTML5的描述，globalStorage只在安全问题或者当用户要求时才会过期，浏览器应该避免删除那些正在被脚本访问的[数据][Link 4]，并且userdata应该是用户可写的。   
因此我们的脚本要能够控制过期时间，可以在globalStorage的某个区域存储过期时间，在load的时候判断是否过期，可以在一定程度上解决过期时间的问题。   
[存储][Link 2]时，同时存储过期时间   
以上是我从网上查询到的资料，为了兼容非IE浏览器“userdata”，我改进了之前我自己写的一个  
“userdata”（见 UserData使用总结） ，现在是兼容IE和支持globalStorage的[浏览器][Link 1]了。

复制代码 代码如下:

二：[jsonp跨域请求][jsonp]

Asynchronous JavaScript and XML (**Ajax** ) 是驱动新一代 Web 站点（流行术语为 Web 2.0 站点）的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 `XMLHttpRequest` 函数获取数据，它是一种 API，允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力，它可将来自多个地方的内容集成为单一 Web 应用程序。

不过，由于受到浏览器的限制，该方法不允许跨域通信。如果尝试从不同的域请求数据，会出现安全错误。如果能控制数 据驻留的远程服务器并且每个请求都前往同一域，就可以避免这些安全错误。但是，如果仅停留在自己的服务器上，Web 应用程序还有什么用处呢？如果需要从多个第三方服务器收集数据时，又该怎么办？

**理解同源策略限制**

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说，受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容，以防止它们之间的操作。这个浏览器策略很旧，从 Netscape Navigator 2.0 版本开始就存在。

克服该限制的一个相对简单的方法是让 Web 页面向它源自的 Web 服务器请求数据，并且让 Web 服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获得了普遍使用，但它是不可伸缩的。另一种方式是使用框架要素在当前 Web 页面中创建新区域，并且使用 `GET` 请求获取任何第三方资源。不过，获取资源后，框架中的内容会受到同源策略的限制。

克服该限制更理想方法是在 Web 页面中插入动态脚本元素，该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的，因为同源策略不阻止动态脚本插入，并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档，就不会成功。幸运的是，通过添加 JavaScript Object Notation (JSON) 可以改进该技术。

**1、什么是JSONP？**

要了解JSONP，不得不提一下JSON，那么什么是[JSON][] ？

> JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

**2、JSONP有什么用？**

由于同源策略的限制，XmlHttpRequest只允许请求当前源（域名、协议、端口）的资源，为了实现跨域请求，可以通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

**3、如何使用JSONP？**

下边这一DEMO实际上是JSONP的简单表现形式，在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数。

HTML代码 （任一 ）：

Html代码  ![收藏代码][icon_star.png]

1.  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
2.  <script type="text/javascript">  
3.      function jsonpCallback(result) \{  
4.          //alert(result);  
5.          for(var i in result) \{  
6.              alert(i+":"+result\[i\]);//循环输出a:1,b:2,etc.  
7.          \}  
8.      \}  
9.      var JSONP=document.createElement("script");  
10.     JSONP.type="text/javascript";  
11.     JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";  
12.     document.getElementsByTagName("head")\[0\].appendChild(JSONP);  
13. </script>

或者

Html代码  ![收藏代码][icon_star.png]

1.  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
2.  <script type="text/javascript">  
3.      function jsonpCallback(result) \{  
4.          alert(result.a);  
5.          alert(result.b);  
6.          alert(result.c);  
7.          for(var i in result) \{  
8.              alert(i+":"+result\[i\]);//循环输出a:1,b:2,etc.  
9.          \}  
10.     \}  
11. </script>  
12. <script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>

**JavaScript的链接，必须在function的下面。**

服务端PHP代码 （services.php）：

Php代码  ![收藏代码][icon_star.png]

1.  <?php  
2.    
3.  //服务端返回JSON数据  
4.  $arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);  
5.  $result=json\_encode($arr);  
6.  //echo $\_GET\['callback'\].'("Hello,World!")';  
7.  //echo $\_GET\['callback'\]."($result)";  
8.  //动态执行回调函数  
9.  $callback=$\_GET\['callback'\];  
10. echo $callback."($result)";

如果将上述JS客户端代码用jQuery的方法来实现，也非常简单。

**$.getJSON  
$.ajax  
$.get**

客户端JS代码在jQuery中的实现方式1：

Js代码  ![收藏代码][icon_star.png]

1.  <script type="text/javascript" src="jquery.js"></script>  
2.  <script type="text/javascript">  
3.      $.getJSON("http://crossdomain.com/services.php?callback=?",  
4.      function(result) \{  
5.          for(var i in result) \{  
6.              alert(i+":"+result\[i\]);//循环输出a:1,b:2,etc.  
7.          \}  
8.      \});  
9.  </script>

客户端JS代码在jQuery中的实现方式2：

Js代码  ![收藏代码][icon_star.png]

1.  <script type="text/javascript" src="jquery.js"></script>  
2.  <script type="text/javascript">  
3.      $.ajax(\{  
4.          url:"http://crossdomain.com/services.php",  
5.          dataType:'jsonp',  
6.          data:'',  
7.          jsonp:'callback',  
8.          success:function(result) \{  
9.              for(var i in result) \{  
10.                 alert(i+":"+result\[i\]);//循环输出a:1,b:2,etc.  
11.             \}  
12.         \},  
13.         timeout:3000  
14.     \});  
15. </script>

客户端JS代码在jQuery中的实现方式3：

Js代码  ![收藏代码][icon_star.png]

1.  <script type="text/javascript" src="jquery.js"></script>  
2.  <script type="text/javascript">  
3.      $.get('http://crossdomain.com/services.php?callback=?', \{name: encodeURIComponent('tester')\}, function (json) \{ for(var i in json) alert(i+":"+json\[i\]); \}, 'jsonp');  
4.  </script>

其中 jsonCallback 是客户端注册的，获取 跨域服务器 上的json数据 后，回调的函数。  
http://crossdomain.com/services.php?callback=jsonpCallback  
这个 url 是跨域服务 器取 json 数据的接口，参数为回调函数的名字，返回的格式为

Js代码  ![收藏代码][icon_star.png]

1.  jsonpCallback(\{msg:'this is json data'\})

**Jsonp原理：**   
首先在客户端注册一个callback, 然后把callback的名字传给服务器。  
  
此时，服务器先生成 json 数据。  
然后以 javascript 语法的方式，生成一个function , function 名字就是传递上来的参数 jsonp.  
  
最后将 json 数据直接以入参的方式，放置到 function 中，这样就生成了一段 js 语法的文档，返回给客户端。  
  
客户端浏览器，解析script标签，并执行返回的 javascript 文档，此时数据作为参数，传入到了客户端预先定义好的 callback 函数里.（动态执行回调函数）

**使用JSON的优点在于：**

*  比XML轻了很多，没有那么多冗余的东西。
 *  JSON也是具有很好的可读性的，但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示，浏览器对于JSON的格式化的显示就需要借助一些插件了。
 *  在JavaScript中处理JSON很简单。
 *  其他语言例如PHP对于JSON的支持也不错。

**JSON也有一些劣势：**

*  JSON在服务端语言的支持不像XML那么广泛，不过JSON.org上提供很多语言的库。
 *  如果你使用eval()来解析的话，会容易出现安全问题。

尽管如此，JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。

**主要提示：**

JSONP 是构建 mashup 的强大技术，但不幸的是，它并不是所有跨域通信需求的万灵药。它有一些缺陷，在提交开发资源之前必须认真考虑它们。

第一，也是最重要的一点，没有关于 JSONP 调用的错误处理。如果动态脚本插入有效，就执行调用；如果无效，就静默失败。失败是没有任何提示的。例如，不能从服务器捕捉到 404 错误，也不能取消或重新开始请求。不过，等待一段时间还没有响应的话，就不用理它了。（未来的 jQuery 版本可能有终止 JSONP 请求的特性）。

JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应，而函数调用是由浏览器执行的，这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务，了解它能造成的威胁非常重要。

三：[删除左右两边的空格trim][trim]

js中却没有trim()/ltrim()和rtrim()内置方法，所以需要自己写

**写成类的方法格式如下：（str.trim();）**

四：[js变量声明与赋值以及函数声明][js]

if (!("a" in window)) \{

var a = 1; \}

alert(a);

结果：undefined

分析：　首先，所有的全局变量都是window的属性，语句 var a = 1;等价于window.a = 1；

第二，所有的变量声明都在范围作用域的顶部，如：

alert("a" in window);

var a;

相当于：

var a;

alert("a" in window);

这是因为JavaScript引擎首先会扫墓所有的变量声明，然后将这些变量声明移动到顶部。

第三，你需要理解该题目的意思是，变量声明被提前了，但变量赋值没有，因为这行代码包括了变量声明和变量赋值。

当变量声明和赋值在一起用的时候，JavaScript引擎会自动将它分为两部以便将变量声明提前，不将赋值的步骤提前是因为他有可能影响代码执行出不可预期的结果。

所以上面的代码就相当于：

var a;

if (!("a" in window)) \{ 为false

a = 1; \}

alert(a); 所以为undefined

例子2：

var num = 100;  
　　　　function fn()\{  
　　　　　　var num = num + 1;  //var num=window.num+1;正确，此时才外外面的全局变量num  
　　　　　　return num;  
　　　　\}  
falert(n());答案是NaN

因为在函数体内部首先把var num提前，这样在赋值的时候去的num + 1中的值是undefined，这样进行运算后答案就是NaN,

记住我们找对象的时候是层级往上面找的，找不到才找外面的。

例子3：

因为首先把var fn提前，然后函数体那样子定义也是一种函数的声明(需要提前)，并且同名函数后面覆盖前面的，所以就是var ,fn,fn,然后就renturn了，没有走之后的fn=3,所以答案就是2

代码等价于：

var b = (function()\{

var fn;  
　　　　　　function fn()\{  
　　　　　　　　　　return 2;  
　　　　　　\}  
　　　　return fn();　　　　  
　　　　fn = 3  
　　　　\})();

所以输出2

五：[使用递归，计算斐波那契数列][Link 6]

`使用递归，计算斐波那契数列`

function fib(num) {
      if (num > 2) {
        return fib(num - 2) + fib(num - 1);
      } else {
        return 1;
      }
    }
    
    fib(6)

运行过程

1. return fib(4)+fib(5)

2.return fib(2)+fib(3)+fib(3)+fib(4)

3.return 1+fib(1)+fib(2)+fib(1)+fib(2)+fib(2)+fib(3)

4.return 1+1+1+1+1+1+fib(1)+fib(2)

5.return 1+1+1+1+1+1+1+1=8

所以结果为8

函数表达式定义函数时,若带上函数名，则函数名只在函数内部有效，

作用：递归调用本身

var sum = function** x**(num)\{

if(num>2)\{

return **x**(num-2)+**x**(num-1);

\}else\{

return 1;

sum(6)

x(5)　　　　//x is not defined

六：[JS函数与call()apply()详解][JS_call_apply]

JavaScript中的每个函数都是一个对象。

因为函数都是对象，它们有自己的属性和方法。我们可以把它们看作数据（data）。

函数和方法的区别？  
　　函数立足于它们自己（例如：alert()），  
　　而方法是函数内部一个对象的属性（dictionary）,我们通过对象来调用方法。  
　　每个JavaScript函数都会有很多附属的（attached）方法，包括toString()、call()以及apply()。

定义了一个全局函数f()。f()通过this关键字访问变量x，

var x = 10;
    function f(){
     alert(this.x);
    }
    f();
    function p(){
    var x=100;
    alert(x);
    }
    p();

注意：我们不能通过一个对象的实例来调用这个函数。

this指向的是什么对象呢？this会指向这个全局对象。我们的变量x就是在这个全局对象中定义的。

上面的代码能够正常运行，运行结果会显示一个对话框，对话框中显示10。 第二个函数 输出100，函数内部属性

**js里call函数改变对象指针，指向另一个对象调用**

var x = 10;
    var o = { x : 15};
    function f(){
     alert(this.x);
    }
    f();
    f.call(o);

首先调用f()将会显示10的对话框，因为this这个时候指向的是全局对象。

然后我们调用f函数的call()方法，传入的参数是o，运行结果显示的是o中x属性的值15。

call()方法会用它的第一个参数作为f函数的this指针。也就是说，我们会告诉运行时，f函数中的this指向的是哪个对象。

call传入参数

//通过call或apply方法，将原本属于Animal对象的showName()方法交给当前对象cat来使用了。   
        //输入结果为"Cat"

</script>

call函数实现对象继承

c2对象可以具有了 Class对象的所有方法

apply()函数

对于apply和call两者在作用上是相同的，但两者在参数上有区别的。

对于第一个参数意义都一样，但对第二个参数：   
apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。   
　　如 func.call(func1,var1,var2,var3)

对应的apply写法为：func.apply(func1,\[var1,var2,var3\])

七：[window.clearInterval与window.setInterval的用法 定时器的设置][window.clearInterval_window.setInterval_]

window.setInterval()

功能：按照指定的周期（以毫秒计）来调用函数或计算表达式。

语法：setInterval(code,millisec)

code：在指定时间到时要执行的JavaScript代码串或函数。

millisec：设定的定时时间，用毫秒数表示。

返回值：定时器的ID值，可用于clearInterval()方法停止指定的定时器。

注：setInterval()方法会不停地调用函数，直到用clearInterval()终止定时或窗口被关闭。

window.clearInterval()

功能：取消由setInterval()方法设置的定时器。

语法：clearInterval(id\_of\_setinterval)

解释：id\_of\_setinterval：由setInterval()返回的ID值。该值标识了一个setInterval定时器。

也就是：window.setInterval()返回的就是window.clearInterval的参数

例如：![221101384021592.jpg][]

<div class="cg_content">
        <div class="success">
            <img src="images/success.png">
            <span>恭喜您 注册成功！</span>
        </div>
        <p>页面将在 <b>5</b> 秒内自动跳转到<a href="javascript:void(0)" οnclick="tiger();"> 微信首页</a></p>
    </div>
    <div class="zc_footer"></div>
    <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
    
    
    <script type="text/javascript">
        $(document).ready(function(){
            var i = 5;  设置为5秒
            var f = function(){
                i--;
                $(".cg_content p b").text(i);
                if(i == 0){
                    clearInterval(screen_time); 当等于0时，计时结束，进行跳转
                    window.location='http://www.baidu.com';
                }
                alert(screen_time);
            }
            var screen_time = setInterval(f,1000); 计时执行，一秒执行一次函数
    
        });
    
    
    </script>
    <script type="text/javascript">
        function tiger(){
            window.location='http://www.sina.com';
        }
    
    </script>

八：[JS indexOf() lastIndexOf()与substring()截取字符串的区别][JS indexOf_ lastIndexOf_substring]

**1. String.IndexOf 方法 (value\[,startIndex\])**

value：要查找的 Unicode 字符。 必选项  
startIndex：搜索起始位置。 　　可选项 不写从开头查找

该方法返回一个整数值，

指出 String 对象内子字符串的开始位置(如果没有设置第二个索引参数，从下标0开始计算)。如果没有找到子字符串，则返回 -1。

**2.String.LastIndexOf(char,int)**

char :要查找的字符串

int:在指定范围内查找

该方法返回一个整数值，

指出 String 对象内子字符串最后一次出现的索引位置(从下标0开始计算)。如果没有找到子字符串，则返回 -1。

如果设置第二个参数，则表示在指定范围内最后一次出现的索引位置

例如：

string="hello nihao a!"

string.LastIndexOf('nihao'); 返回 6

string.LastIndexOf('nihao',5); 返回 -1

string.LastIndexOf('nihao'，8); 返回 6

在指定的范围内查找字符，这个范围是上面的输入的参数，理解为，从索引0开始到指定的数值位置范围内查找最后一个匹配的的字符串的位置。

实例：location.href.lastIndexOf("?") == -1 在当期url中查找？最后一次出现的位置�在在

3.String.substring(indexstar\[,indexend\])

可以只写一个参数：表示从索引值开始(起始位置为0)截取后面的字符串

写两个参数：表示截取指定索引开始到指定索引结束之间(不包括结束索引)的字符串

string="Liming is a good boy"

string.substring(3);   返回：ing is a good boy

string.substring(3,6); 返回：ing  即下标3开始到下标5结束的字符串

**综合实例：截取当前url中最后文件名包括后缀**

url = location.href.lastIndexOf("?") == -1 ? location.href.substring((location.href.lastIndexOf("/")) + 1) :

location.href.substring((location.href.lastIndexOf("/")) + 1, location.href.lastIndexOf("?"));

如果不传参：找到最后一个反斜杠，截取后面的字符串

如果传参：截取最后一个反斜杠到？的字符串

九：[window.location.href问题，点击，跳转到首页][window.location.href]

onClick="window.location.href='./';"　　点击，跳转到首页。

location.href=url Js中实现跳转

window.location.href跳转新窗口

window.location.href="[http://cwhois.cnnic.cn/validatecode/validate.jsp?value=][http_cwhois.cnnic.cn_validatecode_validate.jsp_value]"+strName+"&entity=domain&service=/whois&inputfield=value";

这段JS代码打开的是本页面

window.open("http://cwhois.cnnic.cn/validatecode/validate.jsp?value="+strName+"&entity=domain&service=/whois&inputfield=value);
    �在在新创阔在新
    在新窗口中打开

window.location方法获取URL  
　　统一资源定位符 (Uniform Resource Locator, URL)  
完整的URL由这几个部分构成：  
　　scheme://host:port/path?query\#fragment  
scheme:通信协议  
常用的http,ftp,maito等  
host:主机  
　　服务器(计算机)域名系统 (DNS) 主机名或 IP 地址。  
port:端口号  
　　整数，可选，省略时使用方案的默认端口，如http的默认端口为80。  
path:路径  
　　由零或多个"/"符号隔开的字符串，一般用来表示主机上的一个目录或文件地址。  
query:查询  
　　可选，用于给动态网页（如使用CGI、ISAPI、PHP/JSP/ASP/asp.net等技术制作的网页）传递参数，可有多个参数，用"&"符号隔开   
　　，每个参数的名和值用"="符号隔开。  
fragment:信息片断  
　　字符串，用于指定网络资源中的片断。例如一个网页中有多个名词解释，可使用fragment直接定位到某一名词解释。(也称为锚点.)  
示例：  
http://www.home.com:8080/windows/location/page.html?ver=1.0&id=timlq\#love  
1, window.location.href  
整个URl字符串(在浏览器中就是完整的地址栏)  
　　返回值：http://www.home.com:8080/windows/location/page.html?ver=1.0&id=timlq\#love  
2,window.location.protocol　　URL 的协议部分  
　　返回值：http:

3,window.location.host　　　　URL 的主机部分，  
　　返回值：www.home.com  
4,window.location.port　　　　URL 的端口部分。如果采用默认的80端口(update:即使添加了:80)，那么返回值并不是默认的80而是空字符。  
　　本例返回值:8080  
5,window.location.pathname　　URL 的路径部分(就是文件地址)  
　　返回值：/windows/location/page.html  
6,window.location.search　　查询(参数)部分。除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值  
　　返回值：?ver=1.0&id=timlq  
7,window.location.hash　　　　锚点  
返回值：\#love  
方法：  
1.window.location.reload()  
刷新当前页面。

十：[表单数据校检方法 onsubmit()的使用？][onsubmit]

在项目中为一个表单（from）编写onsubmit()脚本的时候，经常需要验证表单中数据的合法性

所以常会写道：<form action="/admin/addUser.do" method="post" οnsubmit="validateForm();">，试图在validateForm()中return false来阻止表单的提交。实际上的效果是即使return false 表单 还是会提交。

后来发现 οnsubmit="return validateForm()"就没有问题了 　　　　在表单中加上οnsubmit="return false;"可以阻止表单提交

οnsubmit=" **checkForm(this)**;" 和 οnsubmit="**return** **checkForm(this)**;"的区别？

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> </td> 
   <td> <p><code>下面是简单的一小段代码：</code></p> <p><code>&nbsp;</code>&nbsp;</p> <p><code>java代码:</code></p> <p><code>&nbsp;</code>&nbsp;</p> <p><code>&lt;form action=</code><code>"index.jsp"</code>&nbsp;<code>method=</code><code>"post"</code>&nbsp;<code>onsubmit=</code><code>"submitTest();"</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;INPUT value=</code><code>"www"</code><code>&gt;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>&lt;input type=</code><code>"submit"</code>&nbsp;<code>value=</code><code>"submit"</code><code>&gt;</code></p> <p><code>&lt;/form&gt;</code></p> <p><code>&lt;SCRIPT LANGUAGE=</code><code>"JavaScript"</code><code>&gt;</code></p> <p><code>&lt;!--</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code>&nbsp;<code>submitTest() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>// 一些逻辑判断</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>false;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>//--&gt;</code></p> <p><code>&lt;/SCRIPT&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

此种写法，点击submit按钮该表单照样会提交，为何？

原来onsubmit属性就像是<form>这个html对象的一个方法名，其值（一字符串）就是其方法体，默认返回true；和Java一样，在该方法体中你可以写任意多个语句，包括内置函数和自定义函数，如

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> </td> 
   <td> <p><code>java代码:</code></p> <p><code>&nbsp;</code>&nbsp;</p> <p>&nbsp;</p> <p><code>onsubmit="</code></p> <p>&nbsp;</p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>'haha'</code><code>);&nbsp;</code><code>// 内置函数</code></p> <p>&nbsp;</p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>submitTest();&nbsp;&nbsp;</code><code>// 自定义函数</code></p> <p>&nbsp;</p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(this.tagName);&nbsp;</code><code>// 用到了this关键词</code></p> <p>&nbsp;</p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>......(任意多条语句)&nbsp;&nbsp;</code></p> <p>&nbsp;</p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>false;</code></p> <p>&nbsp;</p> <p><code>"</code></p> </td> 
  </tr> 
 </tbody> 
</table>

就相当于

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> </td> 
   <td> <p><code>Form.prototype.onsubmit =&nbsp;</code><code>function</code><code>() { </code></p> <p>&nbsp;</p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>'haha'</code><code>);&nbsp;</code><code>// 内置函数</code></p> <p>&nbsp;</p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>submitTest();&nbsp;&nbsp;</code><code>// 自定义函数</code></p> <p>&nbsp;</p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(this.tagName);&nbsp;</code><code>// 用到了this关键词</code></p> <p>&nbsp;</p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>......(任意多条语句)&nbsp;&nbsp;</code></p> <p>&nbsp;</p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>false;</code></p> <p>&nbsp;</p> <p><code>};</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这样的话你就覆写了(override)其默认方法（默认返回true）大家注意到方法体中可以用this这个关键词，这里即代表了<form>的对象实例。

经过这样的分析后，以上情况就不难理解了：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>&lt;form action=</code><code>"index.jsp"</code>&nbsp;<code>method=</code><code>"post"</code>&nbsp;<code>onsubmit=</code><code>"submitTest();"</code><code>&gt;　　这样写，override方法的效果为：</code></p> </td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> 
   <td> <p><code>Form.prototype.onsubmit =&nbsp;</code><code>function</code><code>() { </code></p> <p>&nbsp;</p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>submitTest();</code></p> <p>&nbsp;</p> <p><code>};</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在这里submitTest()虽然返回false，但我们只执行了此函数，没有对其结果进行任何处理。而

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> </td> 
   <td> <p><code>&lt;form action=</code><code>"index.jsp"</code>&nbsp;<code>method=</code><code>"post"</code>&nbsp;<code>onsubmit=</code><code>"return submitTest();"</code><code>&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

override方法的效果为：

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> </td> 
   <td> <p><code>Form.prototype.onsubmit =&nbsp;</code><code>function</code><code>() { </code></p> <p>&nbsp;</p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>submitTest();</code></p> <p>&nbsp;</p> <p><code>};</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这样，我们利用到了它的返回值，达到了预期效果。

其实form中有一个方法是对form表单中的数据进行校验.但是需要点击submit按钮才能触发这个校验

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p> <p>19</p> <p>20</p> <p>21</p> </td> 
   <td> <p><code>&lt;html&gt;&nbsp;</code></p> <p><code>&lt;head&gt;&nbsp;</code></p> <p><code>&lt;script&gt;&nbsp;</code></p> <p><code>function</code>&nbsp;<code>checkForm(form) {&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(form[</code><code>'nameId'</code><code>].value ==&nbsp;</code><code>""</code><code>) {&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp;</p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"姓名不能为空!"</code><code>);&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>false;&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>true;&nbsp;&nbsp;</code></p> <p><code>}&nbsp;&nbsp;&nbsp;</code></p> <p><code>&lt;/script&gt;&nbsp;</code></p> <p><code>&lt;/head&gt;&nbsp;</code></p> <p><code>&lt;body&gt;&nbsp;</code></p> <p><code>&nbsp;&nbsp;</code>&nbsp;</p> <p><code>&lt;form id=</code><code>"formId"</code>&nbsp;<code>action=</code><code>"www.baidu.com"</code>&nbsp;<code>onsubmit=</code><code>"return checkForm(this)"</code><code>&gt;&nbsp;</code></p> <p><code>请输入姓名:&lt;input type=</code><code>"text"</code>&nbsp;<code>id=</code><code>"nameId"</code><code>/&gt;&nbsp;</code></p> <p><code>&lt;input type=</code><code>"submit"</code>&nbsp;<code>value=</code><code>"提交"</code><code>/&gt;&nbsp;</code></p> <p><code>&lt;/form&gt;&nbsp;&nbsp;&nbsp;</code></p> <p><code>&lt;/body&gt;&nbsp;&nbsp;&nbsp;</code></p> <p><code>&lt;/html&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

2.在js中调用onsubmit方法

<table> 
 <tbody> 
  <tr> 
   <td> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <p>6</p> <p>7</p> <p>8</p> <p>9</p> <p>10</p> <p>11</p> <p>12</p> <p>13</p> <p>14</p> <p>15</p> <p>16</p> <p>17</p> <p>18</p> <p>19</p> <p>20</p> </td> 
   <td> <p><code>function</code>&nbsp;<code>checkForm(form){&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(form[</code><code>'o.NSfk'</code><code>].value==</code><code>""</code><code>) {&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"实付款为空!"</code><code>);&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>false;&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(form[</code><code>'o.DFksj'</code><code>].value==</code><code>""</code><code>) {&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>alert(</code><code>"收款日期为空!"</code><code>);&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>false;&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code>&nbsp;<code>true;&nbsp;</code></p> <p><code>&nbsp;&nbsp;</code>&nbsp;</p> <p><code>}&nbsp;</code></p> <p><code>function</code>&nbsp;<code>tijiao() {&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var</code>&nbsp;<code>form = document.getElementById(</code><code>"productFormId"</code><code>);&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(form.onsubmit()==false) {&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code><code>;&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}&nbsp;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>form.submit();&nbsp;</code></p> <p><code>&nbsp;&nbsp;</code>&nbsp;</p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

注意：**onsubmit事件在提交数据成功后触发，即在出发action之后触发**

在javascript中定义一个函数：
    function f(){
        return false;
    
    }
    
    <form action="text.html" οnsubmit="f()">
        <input type="text" ............/>
    
        <input type="submit" value="点击提交"...../>
    
    </form>
    
    f()返回的是false为啥点击提交的时候还能跳到text.html？
    解答：

onsubmit事件在提交数据成功后触发，你如果要阻止提交的话可以这样：
    <input type="submit" value="点击提交" οnclick="return f()" />
    这样在提交前就阻止了点击事件

十一：

# [JS中break continue和return的用法？][JS_break continue_return] #

在 break,continue和return 三个关键字中， break,continue是一起的，return 是函数返回语句，但是返回的同时也将函数停止

break和continue：

退出循环或者switch语句，在其他地方使用会导致错误

break：

举例：

for(var i=1;i<=10;i++)

if(i==6)

break;

document.write(i);

\} //输出结果：12345

当i=6的时候，直接退出for这个循环。这个循环将不再被执行！

continue：

和break语句相似。所不同的是，它不是退出一个循环，而是开始循环的一次新迭代。continue语句只能用在while语句、do/while语句、for语句、或者for/in语句的循环体内，在其它地方使用都会引起错误！

举例：

for(var i=1;i<=10;i++)

if(i==6) continue;

document.write(i);

\} //输出结果：1234578910

当i=6的时候，直接跳出本次for循环。下次继续执行。

return语句：

return语句就是用于指定函数返回的值。

return语句应用范围只能出现在函数体内，出现在代码中的其他任何地方都会造成语法错误！

首先在js中，我们常用return false来阻止提交表单或者继续执行下面的代码，通俗的来说就是阻止执行默认的行为

总之：return false 只在当前函数有效，不会影响其他外部函数的执行。

一、返回控制与函数结果，

语法为：return 表达式; 语句结束函数执行，返回调用函数，而且把表达式的值作为函数的结果

二、返回控制，

无函数结果，语法为：return;  退出函数

在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.

例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性指定的页.   Return False 就相当于终止符，Return True 就相当于执行符。

在js中return false的作用一般是用来取消默认动作的。比如你单击一个链接除了触发你的  onclick时间（如果你指定的话）以外还要触发一个默认事件就是执行页面的跳转。所以如果 你想取消对象的默认动作就可以return false。

例如：

单击超链接后会跳转到新浪而不会跳转到百度，如果没有renturn false 则会跳转到百度

十二：

# [参数传递--函数声明与变量声明优先级？][--] #

javascript是一门解释性语言，自然没有编译过程，但在脚本执行之前会有语法检查和执行环境的构建，我们把这一过程姑且称为预处理吧。

一、函数声明，javaScript解析器把函数提升

fn();  //output  2

**var** fn= **function**()\{

console.log(1);

**function** fn()\{

console.log(2);

fn();  //output  1

首先，后面的fn()函数声明提前，所以第一个fn() 为2

其次，后面定义的fn()覆盖前面声明的函数，所以后面执行的函数为字面两定义的函数，结果为1

函数定义、函数声明、arguments三者优先级？

**function**   fn(t)\{

t();                                         @1 var t

**function** t()\{                        @2.var t=function()\{console.log(1)\}

console.log(2);                  @3.var t=function()\{consol.log(2)\};

\}                                                        @4.t();

**var** t = **function**()\{

console.log(3);

console.log(t);

fn(**function**()\{console.log(1)\});  //output  2

//output    function()\{console.log(3);\}

@1.变量声明var t提升到最顶端

@2.arguments中变量首先会覆盖var方式声明的变量(变量声明提升)

@3.函数声明覆盖相同名字的变量

**优先级：函数形参>函数声明>变量声明**(**当变量声明遇到已经有同名的时候，不会影响已经存在的属性**)

**函数形参---->**由名称和对应值组成的一个变量对象被创建，如果没有传递对应参数的话，那么由名称和undefined值组成的一种变量对象的属性也被创建

**函数声明---->**由名称和对应值(函数对象)组成的一个变量对象的属性被创建，如果变量对象已经存在相同的名称属性，则完全替换这个属性

**变量声明---->**由名称和对应值(undefined)组成一个变量对象的属性被创建，如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的对象

function aa(a,b,c)\{  @1.a=1  b=2  c=3  @2.a=function a()\{\}  @3.var a; var aa变量声明提升

function a()\{\}

console.log(a);

console.log(aa);

console.log(arguments);

var a='ee';

var aa='444';

arguments=6;

console.log(a);

console.log(aa);

console.log(arguments);

aa(1,2,3);

输出结果：

function a()\{\}

undefined

\[function, 2, 3\]

444

[localstorage _ globalStorage _ userData]: https://www.cnblogs.com/jiechn/p/4080503.html
[Link 1]: http://cpro.baidu.com/cpro/ui/uijs.php?rs=1&u=http%3A%2F%2Fwww.educity.cn%2Fjava%2F670773.html&p=baidu&c=news&n=10&t=tpclicked3_hc&q=67051059_cpr&k=%E4%AF%C0%C0%C6%F7&k0=%B4%E6%B4%A2&kdi0=8&k1=domain&kdi1=8&k2=%BF%CD%BB%A7%B6%CB&kdi2=8&k3=%E4%AF%C0%C0%C6%F7&kdi3=8&k4=%D3%F2%C3%FB&kdi4=8&k5=%CA%FD%BE%DD&kdi5=8&sid=ca9caba6df044ff9&ch=0&tu=u1740074&jk=91d88c82948645fd&cf=29&fv=15&stid=9&urlid=0&luki=4&seller_id=1&di=128
[Link 2]: http://cpro.baidu.com/cpro/ui/uijs.php?rs=1&u=http%3A%2F%2Fwww.educity.cn%2Fjava%2F670773.html&p=baidu&c=news&n=10&t=tpclicked3_hc&q=67051059_cpr&k=%B4%E6%B4%A2&k0=%B4%E6%B4%A2&kdi0=8&k1=domain&kdi1=8&k2=%BF%CD%BB%A7%B6%CB&kdi2=8&k3=%E4%AF%C0%C0%C6%F7&kdi3=8&k4=%D3%F2%C3%FB&kdi4=8&k5=%CA%FD%BE%DD&kdi5=8&sid=ca9caba6df044ff9&ch=0&tu=u1740074&jk=91d88c82948645fd&cf=29&fv=15&stid=9&urlid=0&luki=1&seller_id=1&di=128
[Link 3]: http://cpro.baidu.com/cpro/ui/uijs.php?rs=1&u=http%3A%2F%2Fwww.educity.cn%2Fjava%2F670773.html&p=baidu&c=news&n=10&t=tpclicked3_hc&q=67051059_cpr&k=%D3%F2%C3%FB&k0=%B4%E6%B4%A2&kdi0=8&k1=domain&kdi1=8&k2=%BF%CD%BB%A7%B6%CB&kdi2=8&k3=%E4%AF%C0%C0%C6%F7&kdi3=8&k4=%D3%F2%C3%FB&kdi4=8&k5=%CA%FD%BE%DD&kdi5=8&sid=ca9caba6df044ff9&ch=0&tu=u1740074&jk=91d88c82948645fd&cf=29&fv=15&stid=9&urlid=0&luki=5&seller_id=1&di=128
[Link 4]: http://cpro.baidu.com/cpro/ui/uijs.php?rs=1&u=http%3A%2F%2Fwww.educity.cn%2Fjava%2F670773.html&p=baidu&c=news&n=10&t=tpclicked3_hc&q=67051059_cpr&k=%CA%FD%BE%DD&k0=%B4%E6%B4%A2&kdi0=8&k1=domain&kdi1=8&k2=%BF%CD%BB%A7%B6%CB&kdi2=8&k3=%E4%AF%C0%C0%C6%F7&kdi3=8&k4=%D3%F2%C3%FB&kdi4=8&k5=%CA%FD%BE%DD&kdi5=8&sid=ca9caba6df044ff9&ch=0&tu=u1740074&jk=91d88c82948645fd&cf=29&fv=15&stid=9&urlid=0&luki=6&seller_id=1&di=128
[Link 5]: http://cpro.baidu.com/cpro/ui/uijs.php?rs=1&u=http%3A%2F%2Fwww.educity.cn%2Fjava%2F670773.html&p=baidu&c=news&n=10&t=tpclicked3_hc&q=67051059_cpr&k=%BF%CD%BB%A7%B6%CB&k0=%B4%E6%B4%A2&kdi0=8&k1=domain&kdi1=8&k2=%BF%CD%BB%A7%B6%CB&kdi2=8&k3=%E4%AF%C0%C0%C6%F7&kdi3=8&k4=%D3%F2%C3%FB&kdi4=8&k5=%CA%FD%BE%DD&kdi5=8&sid=ca9caba6df044ff9&ch=0&tu=u1740074&jk=91d88c82948645fd&cf=29&fv=15&stid=9&urlid=0&luki=3&seller_id=1&di=128
[domain]: http://cpro.baidu.com/cpro/ui/uijs.php?rs=1&u=http%3A%2F%2Fwww.educity.cn%2Fjava%2F670773.html&p=baidu&c=news&n=10&t=tpclicked3_hc&q=67051059_cpr&k=domain&k0=%B4%E6%B4%A2&kdi0=8&k1=domain&kdi1=8&k2=%BF%CD%BB%A7%B6%CB&kdi2=8&k3=%E4%AF%C0%C0%C6%F7&kdi3=8&k4=%D3%F2%C3%FB&kdi4=8&k5=%CA%FD%BE%DD&kdi5=8&sid=ca9caba6df044ff9&ch=0&tu=u1740074&jk=91d88c82948645fd&cf=29&fv=15&stid=9&urlid=0&luki=2&seller_id=1&di=128
[jsonp]: https://www.cnblogs.com/jiechn/p/4200605.html
[JSON]: http://www.json.org/
[icon_star.png]: /images/20220519/f9df46bca7664fa9a623fdfd6eb0197e.png
[trim]: https://www.cnblogs.com/jiechn/p/4202758.html
[js]: https://www.cnblogs.com/jiechn/p/4140095.html
[Link 6]: https://www.cnblogs.com/jiechn/p/4139584.html
[JS_call_apply]: https://www.cnblogs.com/jiechn/p/4075872.html
[window.clearInterval_window.setInterval_]: https://www.cnblogs.com/jiechn/p/4042567.html
[221101384021592.jpg]: /images/20220519/4d96621f3ae24a2abe38e3827474068b.png
[JS indexOf_ lastIndexOf_substring]: https://www.cnblogs.com/jiechn/p/3957091.html
[window.location.href]: https://www.cnblogs.com/jiechn/p/3957107.html
[http_cwhois.cnnic.cn_validatecode_validate.jsp_value]: http://cwhois.cnnic.cn/validatecode/validate.jsp?value=
[onsubmit]: https://www.cnblogs.com/jiechn/p/3979301.html
[JS_break continue_return]: https://www.cnblogs.com/jiechn/p/3989849.html
[--]: https://www.cnblogs.com/jiechn/p/4140470.html