web前端入门:javascrip基础知识 灰太狼 2022-05-30 05:54 202阅读 0赞 ## Javascript面向对象 ## Javascript是一门面向对象的语言, 虽然很多书上都有讲解,但还是有很多初级开发者不了解. ### 创建对象 ### ps: 以前写过一篇详细的创建对象的文章(原型方法, 工厂方法等)但是找不到了, 回头如果还能找到我再添加进来.下面仅仅简单介绍. 在C\#里我们使用new关键字创建对象, 在javascript中也可以使用new关键字: var objectA = new Object(); 但是实际上"new"可以省略: var objectA = Object(); 但是我建议为了保持语法一直, 总是带着new关键字声明一个对象. ### 创建属性并赋值 ### 在javascript中属性不需要声明, 在赋值时即自动创建: objectA.name = "my name"; ### 访问属性 ### 一般我们使用"."来分层次的访问对象的属性: alert(objectA.name); ### 嵌套属性 ### 对象的属性同样可以是任何javascript对象: var objectB = objectA; objectB.other = objectA; //此时下面三个值相当, 并且改变其中任何一个值其余两个值都改变 objectA.name; objectB.name; objectB.other.name; ### 使用索引 ### 如果objectA上有一个属性名称为"school.college", 那么我们没法通过"."访问,因为"objectA.school.college"语句是指寻找objectA的school属性对象的college属性. 这种情况我们需要通过索引设置和访问属性: objectA["school.college"] = "BITI"; alert(objectA["school.college"]); 下面几个语句是等效的: objectA["school.college"] = "BITI"; var key = "school.college" alert(objectA["school.college"]); alert(objectA["school" + "." + "college"]); alert(objectA[key]); ### JSON 格式语法 ### JSON是指Javascript Object Notation, 即Javascript对象表示法. 我们可以用下面的语句声明一个对象,同时创建属性: //JSON var objectA = { name: "myName", age: 19, school: { college: "大学", "high school": "高中" }, like:["睡觉","C#","还是睡觉"] } JSON的语法格式是使用"\{"和"\}"表示一个对象, 使用"属性名称:值"的格式来创建属性, 多个属性用","隔开. 上例中school属性又是一个对象. like属性是一个数组. 使用JSON格式的字符串创建完对象后, 就可以用"."或者索引的形式访问属性: objectA.school["high school"]; objectA.like[1]; ### 静态方法与实例方法 ### 静态方法是指不需要声明类的实例就可以使用的方法. 实例方法是指必须要先使用"new"关键字声明一个类的实例, 然后才可以通过此实例访问的方法. function staticClass() { }; //声明一个类 staticClass.staticMethod = function() { alert("static method") }; //创建一个静态方法 staticClass.prototype.instanceMethod = function() { "instance method" }; //创建一个实例方法 上面首先声明了一个类staticClass, 接着为其添加了一个静态方法staticMethod 和一个动态方法instanceMethod. 区别就在于添加动态方法要使用prototype原型属性. 对于静态方法可以直接调用: staticClass.staticMethod(); 但是动态方法不能直接调用: staticClass.instanceMethod(); //语句错误, 无法运行. 需要首先实例化后才能调用: var instance = new staticClass();//首先实例化 instance.instanceMethod(); //在实例上可以调用实例方法 ## 全局对象是window属性 ## 通常我们在<script>标签中声明一个全局变量, 这个变量可以供当前页面的任何方法使用: <script type="text/javascript"> var objectA = new Object(); </script> 然而我们还应该知道, 实际上全局变量objectA是创建在window对象上, 可以通过window对象访问到: window.objectA ## 五.函数究竟是什么 ## 我们都知道如何创建一个全局函数以及如何调用: function myMethod() { alert("Hello!"); } myMethod(); 其实同全局对象一样, 使用function关键字创建的方法(也可以创建类)的名称, 实际上是为window对象创建了myMethod属性, 并且值是一个匿名方法, 上面的语句等同于: window.myMethod = function() { alert("Hello!"); } 无论使用哪种方式声明, 实际保存时都是使用函数名创建window对象的属性. 并且值只有函数体没有函数名称. 所以,下面三种声明方式是等效的: function myMethod() { alert("Hello!"); } window.myMethod = function() { alert("Hello!"); } myMethod = function() { alert("Hello!"); } ## "this"究竟是什么 ## 在C\#中,this变量通常指类的当前实例. 在javascript则不同, javascript中的"this"是函数上下文,不是由声明决定,而是由如何调用决定.因为全局函数其实就是window的属性, 所以在顶层调用全局函数时的this是指window对象. 下面的例子可以很好的说明这一切: var o1 = { name: "o1 name" }; window.name = "window name"; function showName() { alert(this.name); } o1.show = showName; window.show = showName; showName(); o1.show(); window.show(); 结果: [![70][]][70 1] [![70 2][]][70 2 1] ![70 3][] 结果证明在顶层调用函数和使用window对象调用函数时, this都指向window对象. 而在对象中调用函数时this指向当前对象. ## javascript中的闭包 ## 闭包的概念比较难以理解, 先看闭包的定义: 闭包是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。 简单表达: 闭包就是function实例以及执行function实例时来自环境的变量. 先看下面的例子: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <div id="divResult"></div> <script type="text/javascript"> function start() { var count = 0; window.setInterval(function() { document.getElementById("divResult").innerHTML += count + "<br/>"; count++; }, 3000); }; start(); </script> </body> </html> count是start函数体内的变量, 通常我们理解count的作用于是在start()函数内, 在调用start()函数结束后应该也会消失.但是此示例的结果是count变量会一直存在,并且每次被加1: [![image][]][image 1] 因为count变量是setInterval中创建的匿名函数(就是包含count++的函数)的闭包的一部分! 再通俗的讲, 闭包首先就是函数本身, 比如上面这个匿名函数本身, 同时加上在这个函数运行时需要用到的count变量. javascript中的闭包是隐式的创建的, 而不像其他支持闭包的语言那样需要显式创建. 我们在C\#语言中很少碰到是因为C\#中无法在方法中再次声明方法. 而在一个方法中调用另一个方法通常使用参数传递数据。 到知海匠库系统学习web前端,快速入行就业!http://www.zhihaijiangku.com [70]: /images/20220530/fc128c48b0044b2495b8fd2d8665a0ab.png [70 1]: http://images.cnblogs.com/cnblogs_com/zhangziqiu/WindowsLiveWriter/jQueryjavascript_12A96/image_2.png [70 2]: /images/20220530/94988856d39f48e7aa291fddeef8eed5.png [70 2 1]: http://images.cnblogs.com/cnblogs_com/zhangziqiu/WindowsLiveWriter/jQueryjavascript_12A96/image_8.png [70 3]: /images/20220530/7581581dac5c46c5991c5a95c38c2715.png [image]: /images/20220530/e297912c28104632a39bea1610948111.png [image 1]: http://images.cnblogs.com/cnblogs_com/zhangziqiu/WindowsLiveWriter/jQueryjavascript_12A96/image_10.png
还没有评论,来说两句吧...