Heim > Web-Frontend > js-Tutorial > Hauptteil

JavaScript-Grundlagen erklärt

巴扎黑
Freigeben: 2017-07-17 14:35:30
Original
1237 Leute haben es durchsucht

————————————————————————————————————————————

变量

  • 全局变量:在函数体外声明,全局可以使用

  • 局部变量:通过关键字var来声明

变量类型

 1     <script type="text/javascript"> 2     var a; 3     // 十进制 4     a = 1; 5     a = 1.2; 6     a = -23; 7     a = .23e4; 8     a = 3e-2; 9     // 十六进制10     a = 0xABCDE;11     a = 0Xff;12     // 八进制13     a = 0123;14     a = 01234567;15     // 正负无穷大16     a = 1.79e310;17     a = -1.79e310;18     // NaN:不是一个数字19     // p.s.NaN不能和自身比较,NaN!=NaN20     a = 0 / 0;21     // alert(a);22     // alert(isNaN(a));23     var str1 = "hello";24     var str2 = "world";25     var str = str1 + str2;26     // 转义字符,如果定界符用',内部是可以用"的 27     var strCh = 'a\nb\rc\t"d\\';28     // alert(strCh);29     // 赋不存在的值30     var emptyValue;31     // alert(emptyValue);32     // 赋空置33     var nullValue = null;34     alert(nullValue);35     </script>
Nach dem Login kopieren

在内存中的存储与释放(无用存储单元)

  • 收集方式:自动进行收集,可以创建任何需要的无用对象,系统会自动进行清除

  • 收集内容:收集器确定安全回收内存单元的时机,回收那些不再会被使用的值

  • 回收算法:标记和清除无用存储单元的回收算法,通过回收器周期性遍历所有变量并且给变量所引用的值做标记,如果被引用的值是对象或数组,那么会以递归的形式做标记,如果值是数或图,回收器会找到对应的值。如果没有找到对应的值,则通过回收算法来回收。

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

引用JS

 1     <!DOCTYPE html> 2     <html> 3      4     <head> 5         <!-- 调用外部文件 --> 6         <script type="text/javascript" src="./test.js?1.1.11"></script> 7         <!-- 使用代码屏蔽 --> 8         <script type="text/javascript"> 9         <!--10         alert("浏览器支持js,如果不支持则不显示该内容");11         // 向控制台书写内容12         console.log("hello");13         //-->14         </script>15         <!-- 在浏览器不支持js时显示该行字 -->16         <noscript>17             您的浏览器不支持js,建议更换高版本的浏览器以保证您的用户体验18         </noscript>19     </head>20     21     <body>22         <!-- 写在href中的js -->23         <p><a href="javascript:confirm(&#39;您确定么?&#39;)">报名</a></p>24         <!-- 写在onclick中的js -->25         <p onclick="javascript:alert(&#39;onclick&#39;)">点击</p>26     </body>27     28 </html>
Nach dem Login kopieren

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

隐式转换

显式转换

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

参数调用的arguments的方法

 1     <script type="text/javascript"> 2     // arguments数据类型是一个数组,可以得到我们传入的参数 3     function calc(x, y) { 4         alert(arguments[0]); 5         alert(arguments[1]); 6         alert(typeof arguments); 7     } 8     // alert(1, 2); 9 10     // 通过arguments.length获取参数的个数11     // 在这里调用的实参有5个,函数形参有4个,自动忽略一个,但arguments.lenth为512     // 通过arguments实现可变参数13     function test(a, b, c, d) {14         arguments[2] = 100;15         var paramsNum = arguments.length;16         var sum = 0;17         for (var i = arguments.length - 1; i >= 0; i--) {18             sum += arguments[i];19         }20         alert(sum);21     }22     test(1, 2, 3, 4, 5, 6);23     </script>
Nach dem Login kopieren

————————————————————————————————————————————

函数

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

全局函数:见手册

  • 代码样例

 1     <script type="text/javascript"> 2     /*********************************** 3      * encodeURI() 4      * decodeURI() 5      * encodeURIComponent() 6      * decodeURIComponent() 7      ***********************************/ 8     // encodeURIComponent 在转义时会将整个URI中的所有标点符号都转义,包括分隔符/ 9     var str = "http://www.hughdong.com/Hugh Dong,/";10     document.write(encodeURI(str) + "</br>");11     document.write(encodeURIComponent(str) + "</br>");12     // decodeURI 无法完全解开encodeURIComponent的编码,需要对应decodeURIComponent来就解码13     document.write(decodeURI(encodeURIComponent(str)) + "</br>");14     document.write(decodeURIComponent(encodeURIComponent(str)) + "</br>");15     document.write("<hr>")16     /***********************************17      * escape()18      * unescape()19      ***********************************/20     // 对字符进行转义21     str = "(?!=()#%&))";22     document.write(escape(str) + "</br>");23     document.write(unescape(escape(str)) + "</br>");24     document.write("<hr>")25     /***********************************26      * eval()27      ***********************************/28     // 计算某个字符串,并执行其中的JavaScript代码29     eval("document.write('eval() is called')");30     document.write("<hr>")31     /***********************************32      * getClass(javaobj)33      * 未理解,略34      ***********************************/35     document.write("<hr>")36     /***********************************37      * isFinite()38      * isNan()39      ***********************************/40     // isFinite 判断不是无穷大时true41     document.write(isFinite(1.79e390) + "</br>")42     document.write(isFinite(-1.79e390) + "</br>")43     document.write(isFinite(2) + "</br>")44     // isNaN 判断不是数字时true45     document.write(isNaN("hello") + "</br>")46     document.write(isNaN(1.79e390) + "</br>")47     document.write("<hr>")48     /***********************************49      * Number()50      * parseFloat()51      * parseInt()52      * String53      * 数据类型转换,略54      ***********************************/55     document.write("<hr>")56     </script>
Nach dem Login kopieren
  • 实现效果

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

匿名函数:没有函数名的函数

  • 函数表达式可以存储在变量中,变量也可以作为一个函数使用

  • 可以将匿名函数作为参数传递给其他函数,接收方函数就可以通过所传递进来的函数完成某些功能

  • 可以通过匿名函数来执行某些一次性的任务

回调函数:将函数的返回值作为参数调用来实现功能

  • 回调函数调用的函数
    • call()

    • apply()

  • 可以让我们在不做命名的情况下传递参数,这样可以节省全局变量

  • 我们可以讲一个函数调用操作委托给另一个函数,节省代码编写

  • 有助于提升性能

自调函数:不需要调用,自动执行的函数

  • 使用自调函数不会产生任何全局变量

  • 函数无法重复执行,适合执行一些一次性或初始化的任务

内部(私有)函数

  • 确保全局名字空间的纯净性,防止命名出现冲突

  • 只将一些必要的函数暴露给外部,并保留属于自己的函数,使其不被其他应用程序所调用

返回函数的函数

闭包(作用域链)

 

实现代码:

 1     <script type="text/javascript"> 2     var Test = function Calc(a, b) { 3         return a + b; 4     } 5     document.write(Test(1, 2) + "</br>"); 6     var Test1 = Test; 7     document.write(Test1(1, 2) + "</br>"); 8     /******************************* 9      * 匿名函数,没有函数名10      *******************************/11     var Test2 = function(x, y) {12         return x * y;13     }14     var Test3 = Test2;15     document.write(Test2(3, 4) + "</br>");16     document.write(Test3(4, 5) + "</br>");17     /*******************************18      * 回调函数(匿名函数的应用)19      *******************************/20     // Demo121     // 通过Calc2调用T1和T2函数22     function Calc2(x, y) {23         return x() + y();24     }25     function T1() {26         return 5;27     }28     function T2() {29         return 6;30     }31     document.write(Calc2(T1, T2) + "</br>");32     // Demo233     // 调用Func1,在for循环中将abc的值先*2传入CallBack函数AddOne,将返回值存入arr数组并打印34     function Func1(a, b, c, CallBack) {35         var i, arr = [];36         for (i = 0; i < 3; i++) {37             arr[i] = CallBack(arguments[i] * 2);38         }39         return arr;40     }41     function AddOne(num) {42         return num + 1;43     }44     document.write(Func1(3, 4, 5, AddOne) + "</br>");45     // Demo346     // 或者使用匿名函数作为回调函数,同Demo247     function Func2(a, b, c, CallBack) {48         var i, arr = [];49         for (i = 0; i < 3; i++) {50             arr[i] = CallBack(arguments[i] * 2);51         }52         return arr;53     }54     document.write(Func2(5, 6, 7, function(a) { return a + 1 }) + "</br>");55     // Demo456     // 使用系统的call()方法57     function Func4(a, b, c) {58         return a * b * c;59     }60     document.write(Func4.call(this, 2, 2, 2) + "</br>");61     // Demo562     // apply()方法63     function Func5(a, b, c) {64         return a + b + c;65     }66     var params = [4, 5, 9]67     document.write(Func5.apply(this, params) + "</br>");68     /*******************************69      * 自调函数70      *******************************/71     (function(a, b) {72         document.write("函数自调用" + a + b);73     })(3, 5);74     </script>
Nach dem Login kopieren

 

Das obige ist der detaillierte Inhalt vonJavaScript-Grundlagen erklärt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage