1.JS对象
JavaScript对象是拥有属性和方法的数据。在JavaScript中,几乎所有的事物都是对象。(这和Java一样啊,万物皆对象!!!)
可以使用字符来定义和创建 JavaScript 对象,定义 JavaScript 对象可以跨越多行,空格跟换行不是必须的。
可以说 "JavaScript 对象是变量的容器"。但是,我们通常认为"JavaScript 对象是键值对的容器"。
键值对通常写法为name : value (键与值以冒号分割)。键值对在 JavaScript 对象通常称为 对象属性。
这里的键值对的写法类似于:C语言中的哈希表、Java中的哈希映射、Python中的字典。
1.1 访问对象属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>JS简单学习</title> </head> <body> <p>创建 JavaScript 对象</p> <p id="demo"></p> <script> var person={ hisName: "zhangsan", hisSex: "男", hisAge: 25, hisHobby: "sleep" }; document.getElementById("demo").innerHTML= "姓名:" + person.hisName + ",性别:" + person.hisSex + ",年龄:" + person.hisAge + ",爱好:" + person.hisHobby + "。"; //也可以写为 person["hisName"],后面的属性类似 </script> </body> </html>
对象的方法定义了一个函数,并作为对象的属性存储。对象方法通过添加 () 调用 (作为一个函数)。
调用方法时,如果是对象.方法(),此时正常返回方法执行的结果;如果是对象.方法,此时返回方法的定义。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p>创建和使用对象方法。</p> <p>对象方法作为一个函数定义存储在对象属性中。</p> <p id="demo1"></p> <p id="demo2"></p> <script> var person={ hisName: "zhangsan", hisSex: "男", hisAge: 25, hisHobby: "sleep", fullInformation: function() { return this.hisName + "," + this.hisSex; } }; document.getElementById("demo1").innerHTML="不加括号输出函数表达式:" + person.fullInformation; document.getElementById("demo2").innerHTML="加括号输出函数执行结果:" + person.fullInformation(); </script> </body> </html>
函数就是包裹在花括号中的代码块,前面使用了关键词 function。
当调用该函数时,会执行函数内的代码。可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。
在调用函数时,可以向其传递值,这些值被称为参数,这些参数可以在函数中使用,也可以发送任意多的参数,由逗号 (,) 分隔。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p>点击下面这个按钮,来调用带参数的函数。</p> <button type="button" onclick="myFunction('我爱编程','Hello World!!!')">按钮</button> <script> function myFunction(first,second) { alert("主信息:" + first + ",附加信息:" + second); } </script> </body> </html>
2.2 带有返回值的函数
有时,我们会希望函数将值返回调用它的地方。通过使用 return 语句就可以实现。
在使用 return 语句时,函数会停止执行,并返回指定的值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p>本例调用的函数会执行一个计算,然后返回结果:</p> <p id="demo"></p> <script> function myFunction(a,b) { return a*b; } document.getElementById("demo").innerHTML=myFunction(5,6); </script> </body> </html>
当仅仅希望退出函数时,也可使用 return 语句。返回值是可选的。
如果 a 大于 b,则下面的代码将退出函数,并不会计算 a 和 b 的总和。
function myFunction(a,b) { if (a>b) { return; } x=a+b; }
3.JS作用域
作用域是可访问变量的集合。
在 JavaScript 中, 对象和函数同样也是变量,作用域为可访问变量,对象,函数的集合,函数作用域:作用域在函数内修改。
3.1 JS局部变量
在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。
可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。局部变量会在函数运行以后被删除。因为局部变量只作用于函数内,所以不同的函数可以使用相同名称的变量。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p>局部变量在声明的函数外不可以访问。</p> <p id="demo"></p> <script> function myFunction() { var color="red"; } document.getElementById("demo").innerHTML="局部变量color的类型是:" + typeof color; </script> </body> </html>
3.2 JS全局变量
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。全局变量会在页面关闭后被删除。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p>全局变量在任何脚本和函数内均可访问。</p> <p id="demo"></p> <script> var color="red"; function myFunction() { document.getElementById("demo").innerHTML= "函数体内部可以访问到全局变量color:" + color; } myFunction(); </script> </body> </html>
如果您把值赋给尚未声明的变量,该变量将被自动作为 window 的一个属性。
如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p>如果你的变量没有声明,它将自动成为全局变量:</p> <p id="demo"></p> <script> function myFunction() { color="red"; } myFunction(); document.getElementById("demo").innerHTML="可以访问到全局变量color:" + color; </script> </body> </html>
在 HTML 中, 全局变量是 window 对象: 所有数据变量都属于 window 对象。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p>在HTML中, 所有全局变量都会成为window变量。</p> <p id="demo"></p> <script> function myFunction() { color="red"; } myFunction(); document.getElementById("demo").innerHTML="可以访问到全局变量color:" + window.color; </script> </body> </html>