这篇博客主要介绍了JavaScript的基础语法，包括JavaScript的定义、特点、编写位置、注释、数据类型、运算符、流程控制、循环语句、对象和作用域等核心概念。适合初学者入门学习。
JS基础语法的学习 基础同时也是重中之重 除了数组和正则 作为两个大块在其他文章呈现
-
-
目录
-
摘要：JS基础语法的学习 基础同时也是重中之重 除了数组和正则 作为两个大块在其他文章呈现
前言
JS基础语法学习 和其他技术栈的区别不大 简单的做一下笔记。
看起来全是代码 可能稍微可读性有点差。 因为是以前整的代码和注释作为笔记。注释不方便直接从代码中剥离出来 干脆一起放上去了。 放回本地IDE中会比较好看。
后面在总结其他前端方面的知识点时也会采用这种方式，直到开始学C语言时 会同步更新博客。
一、JavaScript是什么？
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式
二、JS特点
JavaScript学习的三个内容：1、ECMAscript js标准
2、DOM 如何通过 JS操作网页 2、BOM 如何通过js操作浏览器。
JS的特点：1、是解释性语言，不用编译，可以直接运行。 2、语法结构类似于C Java
3、是动态语言 4、基于原型的面向对象。
三、JS的编写位置：
<html>
<head>
<meta charset="utf-8">
<title>js编写</title>
<!-- 可以在下面的里面写入 -->
<!-- <script type="text/javascript"> -->
<!-- </script -->
<!-- 也可以用下面的script里的src引入外部js文件
好处是 可以在不同的页面里使用同一块js代码 便于移植。也可以利用浏览器的缓存机制。
注意！：一旦在一个script标签里引入一个外部文件，就不能在里面引入任何代码了
如果需要再编写内部代码则需要另起一个script标签。-->
<script type="text/javascript" src="test.js">
</script>
<script type="text/javascript">
alert("我是内部js引入标签内容！")
</script>
</head>
<body>
<!-- 我们可以将js代码编写在标签的onclick属性中,但是这样结构与行为耦合
不方便使用，不方便维护和管理。最好还是在script标签里写-->
<button onclick="alert('点我干嘛')">点我一下</button>
<!-- 也可以将js写在超链接的href的属性中，点击超链接时执行代码 -->
<a href="javascript:alert('让你点你就点！！');">点我一下试试</a>
</body>
</html>
四、JS注释：
<html>
<head>
<meta charset="utf-8">
<title>基本语法</title>
<script type="text/javascript">
/*
js注释 多行注释
注释可以在源代码中查看，不会显示在网页
*/
// 单行注释 只对后面注释 需要养成良好的注释习惯
// 也可以利用注释来简单调试代码
/*注意1、js中严格区分大小写 不同于html
2、 每一条js中语句必须以分号;结尾（不写也会被浏览器添加但会降低性能且浏览器的分号可能会加错。）
3、js中也会忽略多个空格和换行，故可以用空格换行来美化代码。
*/
</script>
</head>
<body>
</body>
</html>五、字面量变量标识符：
<html>
<head>
<meta charset="utf-8">
<title>字面量变量标识符</title>
<script type="text/javascript">
/*字面量：都是一些不可变的值，如 1 2 3 4 可以直接使用但一般不
变量：可以任意改变量，变量可以用来保存自变量 也便于使用 */
alert(123456987);
var a;//声明一个变量a
a=123321;
var b = 789987
console.log(a);
console.log(b);
// 在js中可以自主命名的都属于标识符——变量名、函数名、属性名
// 1、标识符中可以有 字母 数字 下划线 ＄
// 2、标识符不能由数字开头
// 3、标识符不能是es中的关键字或保留字 比如 var var = 123;错误
// 标识符一般都是驼峰命名法 （首字母小写，其他单词开头大写其余小写）
// 比如 helloWorld useTheKey. ---js底层保存标识符时实际上使用的是utf-8 所以其实中文汉字也可以用来当关键字
</script>
</head>
<body>
</body>
</html>
六、（一）JS基本数据类型的认识。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
// 数据类型→字面量→sring(字符串)→number（数值）
// Boolean（布尔） null（空） undefined（未定义） object（对象）
// 前五种基本数据类型 object是引用数据类型
var str = "hello!";
// 上面这里单引号双引号都可以拿来包字符串
console.log(str);
var str2 = "我说：\"今天天气真不错！\"";
alert(str2);
// \表示转义字符 \"表示" \'表示' \\表示\ \t表示制表符 \n表示换行
/*在js中所有的数值都是number数据类型 包括整数和浮点数
*/
var a = 123;
var b = 45.6;
// 可以 使用 typeof 变量 输出数据类型
var c = "123";
console.log(a);
console.log(c);
console.log(typeof a);
console.log(Number.MAX_VALUE);
// 如果数值超过这个max 1.7976931348623157e+308 则会输出infinity无穷大_这也是个可以直接使用的number值
console.log(typeof Infinity);
console.log(typeof c);
x= "abv" * "sjs";
console.log(x);//这里会给出一个NaN no a number 检查这个typeof NaN也会返回一个number。
x = Number.MIN_VALUE;
console.log(x);//输出一个大于0的最小值 5e-324
var c = 0.1 + 0.2;
console.log(c);//在js中整数的计算基本可以保持精确
// 但是使用js进行浮点数计算时（由于底部二进制计算的关系）可能得到一个不精确的结果
// 所以尽量不要在js内部进行高精度浮点数计算，尽量放在服务器中计算。
// 布尔值 Boolean true 逻辑真 false 逻辑假
// null 就一个自己 null 空值 表示一个空的对象 注意！typeof null 返回一个object
// undefined只有它自己一个值 当声明一个对象却不赋值时 ，默认为undefined状态。typeof也是返回undefined。
</script>
</head>
<body>
</body>
</html>六、（二）强制数据类型转换
<html>
<head>
<meta charset="utf-8">
<title>强制类型转换</title>
<!-- 指将一个数据类型强制转换成其他数据类型
主要指 string number Boolean 的转换。
-->
<script type="text/javascript">
/* ----------------------------------------------------------------------------------------------
将其他数据类型转换为String
方法一：调用被转换数据类型的toString（）方法
方法二：调用string函数 并将转换的数据作为参数传递给函数
对于number 和 Boolean而言 string 底层就是调用的toString方法
而对于null 和undefined而言,不是调用tostring方法 而是直接将null 转换为 "null" undefined 同理.
*/
// 下面是方法一
var a = true ;
var b = a.toString();//调用a 的 tostring 方法 不改变原变量 需要一个变量接收返回值
console.log(typeof a);
console.log(typeof b);
// 注意null 和 undefined 没有此方法 调用会报错。
// 下面是方法二
var c = 123 ;
c = String(c);
console.log(c);
k = null ;
console.log(typeof k);
k = String (k);
console.log(typeof k);
//------------------------------------------------------------------------------------------------
/*下面将其他数据类型转换为number类型
方法一:调用number函数 同string
在转换时:如果是纯数字字符串,则直接转换为数字值
如果是含非数字内容,则转化内NaN.
如果字符串是一个空串或者是一个全是空格的字符 则为0;
布尔常量 true 转为 1 false 转为0; null转为0; undefined 为 NaN;
方法二:(专门用来对付字符串)
parseInt() 将字符串中的有效整数内容取出来转换为number (然而只能从左往右取整数 到第一个非数字就停止!)
parseFloat() 类似 但是取出有效的小数部分
如果对非string量使用 则会先将其转换为string 再进行转换
*/
var a = "123";
console.log(typeof a);
console.log(a);
b = Number(a);
console.log(typeof b);
var f = "123px";
f = parseInt(f);
console.log(f);
var g = "222b123px";
g = parseInt(g);
console.log(g);
var g = "222.123b123px";
g = parseFloat(g);
console.log(g);
//----------------------------------------------------------------
//其他进制的数字
/* 0x16则表示 16进制的16 即为22. a = 0x16
八进制数字 以0开头 070 表示 56 . b = 070
二进制数字以0b开头 但不是所有浏览器都支持. 所以070 0b10这种八进制 二进制会在不同的浏览器识别成不同的进制数
所以输出时候可以直接转换为十进制输出 a= parseInt(a,10) 直接转换为目标进制数.
*/
//-------------------------------------------------------------------------------
//将其他值转换为Boolean 使用Boolean函数即可
var p = 123 ;
p = Boolean (p);
console.log(p);
var o = NaN ;
o = Boolean (NaN);
console.log(o);
t = "false";
t = Boolean(t);
console.log(t);
//对于数字 除了0和NaN 为false 其他的都为true
//对于字符串 除了空串(不是空格) 其他的都为true
//对于null 和 undefined 都为false
//对于object 对象 转换为 true
</script>
</head>
<body>
</body>
</html>七、JS常用运算符。
<html>
<head>
<meta charset="utf-8">
<title>运算符操作符</title>
<script type="text/javascript">
/*运算符也叫操作符 对一个值或者多个值进行运算并获取结果
比如typeof 运算符就可获取值的类型并以字符串的形式返回.
算数运算符 + - * / %
在运算符旁使用非数字进行运算时,底层先将其转为number形式数字再运算
NaN与任何值进行任何计算都会输出NaN.
若对两个字符串加法操作,则会简单拼接字符串_重要
任何值和字符串加法都会将其转换为字符串再拼接
*/
//下面是加法案例
var a = 100;
var result = a + 1 ;
result = 123 + "23";
console.log(result);
rerere = true + "hello";
console.log(rerere);
// 可以利用空串与其他相加来转换字符串
var k = 123;
k = k + "";//其实这里暗地里调用了string转换函数.
console.log(typeof k);
result = 1 + 2 + "3";
console.log("result = "+result);
//下面是其他案例(算减法乘法除法时,均把不是number的值转换为number后参与运算)
result = 100;
result = result - "1";
console.log(result);
//也可利用此特性进行number的强制转换 (这里不同于加法进行string的强制转换).
var kk = "122";
kk = kk - 0 ;
console.log(typeof kk);
//%是 a%b a/b后取余 读作取模;
//上述这些 都是二元运算符
//一元运算符 只需要一个操作数 +正号 -负号(其会对非number值进行转换为number值再取反)
//故可以直接对某个数值类型直接取正号 转换为number值 等价于number函数
var z = 123 ;
z = -z;
console.log("z= "+z);
var sum = 1 + "2" + 3 ;//输出123
console.log(sum);
var sum2 = 1 + +"2" + 3;//输出6 可以通过这两个式子体会到加号对于字符串的转换 正号对于number的转换作用.
console.log(sum2);
// *下面介绍 自增和自减---------------------------------------------------
//通过自增(减) ++ --可以使原变量+1(-1)并赋值给原变量
//a++ ++a 两种自增(减)方式 两种方式都会立刻将原变量值+1
//但是!!!!a++的值是自增前的值(a) 而++a为自增以后的值(a+1)
var i = 1 ;
i++;
console.log("i= ",i);
console.log("i++ =",i++);
console.log("++i = ",++i);
//与 && 或|| 非 ! 或找true 与找 false 若左边已经找到目标则右边不再执行
//例如下式左边是找到了 右边就不再执行(将与或替换即可看到区别)
false && alert("1010101");
//对于非布尔值的与或运算 先将非布尔值转换为布尔值 再进行运算 并且返回原值
//相与:第一个true返回第二个值 第一个是false 立即返回这个false 代表的值
//相或:第一个false 返回第二个值 第一个是true 立即返回这个true 代表的值
var boo = 0 && "hello";
console.log(boo);
var boo2 = 0 || "hahaha";
console.log(boo2)
// 作比较时 若两个字符串作比较 则比较的是字符串的Unicode编码(一位一位进行比较)
//所以在比较两个字符串型的数字时 一定要将两个或其中任意一个加上+号进行强制关系转为number 才会进行数值比较!!!
// 在js语言中: \uxxxx 四位编码表示Unicode对应的码元→这里的码元都是十六进制
// 在网页中,用 &#xxxx; 这里是将上面的十六进制码转换为十进制在这里输出才算正确
//--------------------相等运算符 == --------------------------------------------------------------------------------
console.log(1 == 1);//若比较两端的类型不同时,会将其转换为相同的类型(具体啥类型不确定)
//特别地,undefined衍生自 null 二者比较为true NaN不与任何值相等,包括它本身.
//故 需要isNaN函数来判断一个变量是否为NAN, 返回值为true 则为NaN.
// ===全等 没有任何类型转换 当且仅当类型和数值全等才返回true 只要类型不同 立刻false
// !== 不全等 只要类型不同 立刻返回true 当且仅当全等时,返回false.
</script>
</head>
<body>
</body>
</html>八、流程控制语句if
<html>
<head>
<meta charset="utf-8">
<title>if语句的使用</title>
<script type="text/javascript">
/* 流程控制语句：1、条件判断语句 2、条件分支语句 3、循环语句
1、使用条件判断语句可以在执行某个语句之前进行判断 成立才会执行，不成立则不执行。
语法一： if(条件表达式)
语句； 若true则执行if后的语句 若为false则不执行if后的语句。 (if控制一条紧随语句或代码块)
语法二： if(条件)
语句1
else
语句2；
语法三： if()
yuju
else if () */
var a = 11 ;
if (a > 10 && a < 25)
{
alert("捏妈的");
console.log("nimabi");
}//语法一
var age = prompt("请输入小明的年纪");//注意这里prompt的返回值一定是字符串
//如果需要返回一个number返回值 需要 = +prompt("sss")
if (age >= 60)
alert("你已经退休了");
else if(age <= 11)
alert("你还没长大！");
else if(age <= 30)
alert("你正值壮年");
else
alert("你该休息啦");
</script>
</head>
<body>
</body>
</html>九、条件表达式与条件分支Switch
<html>
<head>
<meta charset="utf-8">
<title>条件运算符（三元运算符）</title>
<script type="text/javascript">
//语法： 条件表达式？语句1：语句2； -条件表达式为true 执行语句1并返回结果 为false 执行语句2 返回结果。
//如果条件表达式的求值结果是一个非布尔值 则会转换成布尔值之后再执行。
var a = 30,b=20;
a > b ?alert("语句1"):alert("语句2");
var max = a > b ? a : b ;
console.log("max = " + max);
/* 探谈运算符的优先级；---------------------------------------------------------------
先介绍 , 使用 ,可以分割多个语句 一般可以在声明多个变量时使用。
运算符优先级：与大于或 不知道的优先级用括号。
*/
var k = 1, i = 3 , o = 2 ;
alert(i);
/*关于代码块：用{}中的语句是一个代码块 同时执行或者不执行。 代码块之间不用;隔开
JS中的代码块只有分组作用 没有其他任何用途。代码块内部的内容在外部完全可见 */
</script>
</head>
<body>
</body>
</html><html>
<head>
<meta charset="utf-8">
<title>switch语句</title>
<script type="text/javascript">
/*switch(条件表达式){
case xxx : xxxxxxx; break;
case xxx : xxxxxxx; break;
}
*/
var age = +prompt("请输入年龄");
switch(age){//这里必须是全等d
case 1 : console.log("一"); break;
case 2 : console.log("二"); break;
case 3 : console.log("三"); break;
case 4 : console.log("四"); break;
case 5 : console.log("五"); break;
case 6 : console.log("六"); break;
case 7 : console.log("七"); break;
case 8 : console.log("八"); break;
case 9 : console.log("九"); break;
//必须特别注意的是 在JS里不同的是 整数浮点数都是 number变量 里面的/会自动变成浮点数 不像C里面取整数型 故/后取整需要parseInt()
default: console.log("非法！"); break;
}
</script>
</head>
<body>
</body>
</html>十、while循环语句
<script type="text/javascript">
var a = 1 ;
// while (a < 1)
// {
// document.write(a , "<br />");
// a++;
// }
// do
// {
// document.write(a , "<br />");
// a++;
// }while (a < 1)
// var a = 1000,i=0;
// while (a<5000)
// {
// a = a * 1.05;
// i++;
// }
// document.write("需要的年数为"+i+"年");
//for循环------------------------------------------------------与while同理
//for (var i=0;i<10;i++) {alert (i)}
//执行流程：先初始化表达式 再判断 若为真则执行语句 然后更新表达式 i++ 然后再判断 若为假则跳出循环。
//for循环中初始化只执行一次。 for 循环中的三个部分都可以省略，也可以写在外部。
// for(;;){//这是一个死循环 慎用！
// alert("hello!");
}
</script>例题之打印奇数和：
<script type="text/javascript">
var a=1 , sum = 0;
while (a<100)
{
sum = sum + a ;
a = a + 2 ;
}
document.write("总和为",sum);
document.write("<br/>a为",a);
</script>例题之质数验证：
<script type="text/javascript">
var a = prompt("请输入一个大于1的整数");
var i = 1;
if(a>1){
while (i<a)
{
if(a%i==0 && i!=1 && i!= a)
{
document.write(a+"是一个合数");
break;
}
else
i=i+1;
}
if(i==a)
document.write(a+"是一个质数");
}
else
document.write("不合法，请重新输入！");
</script>十一、for嵌套与continue、break:
<script type="text/javascript">
console.time("clock1");
//打印一个图案
// var i = 1 , j = 1;
// for(;i<6;i++){
// j=1;
// for(;j<i+1;j++){
// document.write("*");
// }
// document.write("</br>");
var i = 1 , j = 1;
while(j <= 10){
i=1;
while( i<= j){
k=i*j;
document.write(i+"*"+j+"="+k+" ");
i++;
}
j++;
document.write("<br>");
//break语句可以拿来退出switch 与循环语句 不能用于if！但是可以在for循环里 用 if break 跳出循环
//break语句会立即终止离他最近的那个循环语句。
//可以为循环语句label一下 来标识当前语句 比如 outer:for(;;)然后break outer 会结束指定的循环。
//执行到continue直接跳过循环接下来的东西 直接进入下一次循环。__与break一样 只对最近的生效。可以用标签来指定循环。
console.timeEnd("clock1");
}
</script>循环例题之水仙花数：
（水仙花数指的是一个三位数abc 满足各位数的立方和加起来等于这个三位数本身 ）
<script type="text/javascript">
var i = 100 ,a=0,b=0,c=0;
while (i<1000)
{
a = parseInt(i/100);
b = parseInt((i-100*a)/10);
c = i-100*a-10*b;
if (a*a*a+b*b*b+c*c*c == i){
document.write("</br>水仙花数有"+i);
}
i=i+1;
}
</script>十二、JS中的引用数据类型之对象Object
<title>对象</title>
<script type="text/javascript">
/*从js中的数据类型说起： string 字符串 number 数值
Boolean 布尔值 null空 undefined 未定义 这是五种基本数据类型 以后的值只要不是这五种 则一定是对象
object 对象 基本数据类型都是单一的值 值和值之间没有任何联系 hello 123 true
假如在JS中表示一个人的信息（name gender age）;
var name = "孙悟空"； var gender = "男"; var age = "18";
这些基本类型的数据是互相独立的 不能组成一个整体 共同组成一个信息
对象属于一种复合数据类型，可以在对象中保存多个不同的数据类型的属性；
对象的分类：1、内建对象-由ES标准中定义的对象，在任何的ES的实现中都可使用。：比如 math string number boolean function
2、宿主对象-由js的运行环境提供的对象，目前来讲主要由浏览器提供的对象。-比如bom dom两组对象 。 比如 console document
3、自定义对象-由开发人员自己创建的对象。
*/
//创建对象 使用new关键调用的函数是构造函数 专门用来创建对象的
var obj = new Object();
// console.log(obj);
// console.log(typeof obj);
//对象里保存的值称为对象的属性 添加对象的属性： 对象.属性名 = 属性值
obj.name = "孙悟空";
obj.gender = "男";
obj.age = 18 ;
console.log(obj);
//读取对象中的属性
console.log(obj.name);
console.log(obj.hello);//读取对象中没有的属性 不会报错 而是出现undefined
//删除对象的属性
// delete obj.name;
// console.log(obj.name);//上面删去了name 这里也变成undefined了
// 对象的属性名不强制要求遵守标识符规范 各种都可以使用 比如关键字 var 等 但是尽量按照标识符规范更好
//如果要用特别恶心的属性名 比如纯数字 要改变使用方式 对象["属性名"] = 属性值；
obj["123"] = 789 ;
console.log(obj["123"]);//中括号中操作属性更加灵活 可以直接传递一个变量 变量值对应读取那个属性
obj["身材"] = "很不错" ;
var n = "123";
var k = "身材";
console.log(obj[k]);
console.log(obj["身材"]);
//属性值 可以是任意的数据类型 也可以是一个对象
var obj2 = new Object();
obj2.name = "猪八戒" ;
obj.name = obj2;
console.log(obj.name);
console.log(obj.name.name);
//in 运算符 通过该运算符检查一个对象中是否含有指定的属性 有 返回true 无 false
console.log("name" in obj2);
console.log("gender" in obj2);
</script>十三、基本数据类型和引用数据类型
注意下面这里我说基本数据类型五种 引用一种 这是不对的 这是便于初学者理解的版本
后面的JS进阶知识笔记会对这里做修正：
<script type="text/javascript">
//基本数据类型 五种 引用数据类型 一种
var obj = new Object();
obj.name = "孙悟空";
obj.age = 20;
var obj2 = obj ;
console.log(obj2.name);
console.log(obj2.age);
obj.name = "猪八戒";
console.log(obj2.name);
console.log(obj2.age);
//可以从控制台看到
//对于obj2赋值完成后再改变obj里的东西 obj2里的属性也跟着改变 这一点是和基本数据类型不同的。
//js中的变量都是保存到栈内存中的，基本数据类型中的数值都是直接保存在栈内存中的。值与值之间独立保存 互不影响
//对象 是保存到堆内存中的，（在堆内存中开辟空间的同时，在栈内存中保存变量和保存地址。
//所以在令 obj2=obj1时 二者的地址相同，指向同一个开辟的堆内存，所以在对obj1 修改堆内存中的变量值时，obj2随之改变
var obj3 = new Object ();
var obj4 = new Object();
obj3.name = "沙和尚";
obj4.name = "沙和尚";
console.log( obj3 == obj4 );//输出false 比较的不是内容（尽管内容完全相同） 比较的是栈内存中保存的地址！
var obj6 = new Object ();
var obj5 = new Object();
obj5.name = "唐僧";
obj6 = obj5 ;
console.log(obj5 == obj6 );//这里是直接让两者地址相同 指向同一块堆内存 所以二者判定完全相同 输出true；
</script>对象字面量创建对象的方式
<title>对象字面量</title>
<script type="text/javascript">
//创建一个对象不仅可以用 var obj = new object();
//使用对象字面量来创建对象
var obj = {};//更加简单 和上面其实一样
console.log(typeof obj);
obj.name = "孙悟空";
//甚至可以像下面这么写 更加简单 整合
var obj2 = {name:"猪八戒",age:18,talent:"吃喝拉撒睡",gender:"男"};
//属性名和属性值之间使用：连接 是一组一组的名值对结构
console.log(obj2);
</script>创建对象的另一种方法——工厂方法：
<title></title>
<script type="text/javascript">
// var obj = {
// name :"mqy",
// age : 22 ,
// sayname : function(){
// alert(this.name);
// }
// };
// var obj2 = {
// name :"pzk",
// age : 21 ,
// sayname : function(){
// alert(this.name);
// }
// };
// var obj3 = {
// name :"wxy",
// age : 20 ,
// sayname : function(){
// alert(this.name);
// }
// };
//上面的创建方法太臃肿 可以将上面的对象申明整合在一起偷懒
//可以使用下面的工厂方法以大批量创建对象。
// function creatperson(name , age , gender){
// var obj = new Object();
// //创建新的对象并将其返回
// obj.name = name;
// obj.age = age;
// obj.gender = gender;
// obj.sayname = function(){
// alert(this.name);
// };
// return obj ;
// }
// var obj2 = creatperson("wxy",21,"男");
// var obj3 = creatperson("hc",20,"男");
// var obj4 = creatperson("pzk",11,"男");
// var obj5 = creatperson("yyy",23,"女");
// obj2.sayname();
// obj4.sayname();
// obj5.sayname();
//创建一个狗的对象
function createDog(name,age){
var obj = new Object();
obj.name = name ;
obj.age = age ;
obj.sayHello = function(){
alert("wangwang~~~~~~");
};
return obj ;
}
var dog1 = createDog("旺财",3);
dog1.sayHello();//使用工厂法创建的对象 使用的构造函数都是object
//所以创建的对象都是object类型 无法区分不同的 所以上述的工厂方法创建对象并不常用！
</script>十四、函数的认识
<title>函数</title>
<script type="text/javascript">
// /* 函数也是一个对象 事实上在网页中能看到的东西除了基本数据类型 其他的都是对象
// 函数中可以封装一些功能，在需要时可以调用 执行这些功能 简化代码
// */
// //创建一个函数对象 将要封装的代码以字符串的形式传递给构造函数
// //var fun1 = new Function("console.log('我是第一行代码');");//函数封装的代码不会立刻执行 而是在调用的时候执行 在实际开发中完全不用这种方式
// //下面使用函数声明 第二种方式 最常用
// function fun1 (){
// console.log("我是fun1内封装的代码");
// alert("hahahaha");
// document.write("wuwuwuwuwu~~~~~");
// }
// console.log(typeof fun1);
// // {
// // console.log("我是第一行代码");
// // console.log("我是第二行代码");
// // console.log("我是第三行代码");
// // }
// fun1();
// var fun2 = function(){
// console.log("xixixixixixixi");
// };
// fun2();
//下面介绍函数的参数 形参与实参
//定义一个用来求两数和的函数 在函数的括号里定义形参,相当于在函数内部声明了两个变量 但是并不赋值
function sum(a,b){
console.log(a+b);
}
sum(1,2);//调用函数时并不会检查实参的类型 故需要考虑接受到非法参数情况，考虑到友好度 需要检查参数类型
sum(3,"hello");//调用函数时也不会检查实参的数量
sum(1,5,7);//多于的实参用不上 只用的上对应的形参；如果实参的数量少于形参，则没有对应到实参的形参将被设定为undefined。
</script>函数返回值的理解：
<title>函数返回值</title>
<script type="text/javascript">
//使用return命令来接收返回值 并且将返回值作为函数执行结果的返回值，定义一个变量将其接收
function sum1 (a,b,c){
// alert(a + b+ c);
var d = a + b + c;
return d ;//return后的语句都不会执行
alert("这句话是不会弹出的 是死代码");
}
//如果return后不接任何返回值 或者不加return 则函数返回值为undefined。
var result = sum1(4,7,8);
console.log("result= " + result );
//下面创建一个函数，可以在控制台中输出一个人的信息。 name age gender address
function infor (o){
console.log("我是"+o.name+"，今年我"+o.age+"岁了。我是一个"+o.gender+"人，家住在"+o.address);
}
// infor("毛庆逸",21,"男","深圳");//形参实参多了之后需要按顺序对应上 容易出问题 可以更好的解决这个问题如下、
//实参可以是任意是数据类型当然可以是一个对象， 当参数过多时 将参数封装到一个对象中 并通过对象传递
var obj = {
name :"毛庆逸",
age:21,
gender:"男",
address:"宁国"
};
infor(obj);
//函数也是一个对象，也可以将函数作为实参传递。
</script>函数返回值的类型-- 以及什么是方法？
<title></title>
<script type="text/javascript">
//创建一个函数，用来计算三个数的和
function sum (a,b,c){
var d = a + b + c;
return d ;
}
var x = +prompt("请输入第一个数字");
var y = +prompt("请输入第二个数字");
var z = +prompt("请输入第三个数字");
var s = sum(x,y,z);
document.write("和为"+s);
//break_跳出当前循环 continue 直接结束此次循环 return 立刻跳出函数 并给出返回值
//返回值可以是任意的数据类型 也可以是对象、函数等
//定义完一个匿名函数之后将整体用括号包括起来 然后在末尾加上（） 是一个立即执行函数 只会立即执行一次
(function(){
alert("牛比");
})();
</script>方法--函数的使用
<script type="text/javascript">
var obj = Object();
obj.name = "毛庆逸";
obj.age = "22";
//对象的属性值可以是任何的数据类型 可以是对象函数等.
obj.sayname = function(){
console.log(obj.name);
};
console.log(obj.sayname);
obj.sayname();//当函数成为一个对象的属性保存下来是，
//称为这个函数是这个对象的方法，调用这个函数称为调用这个对象的xx方法
var obj2 = {
name : "mqy",
age : 22 ,
gender : "man",
address:"shenzhen"
};
//枚举对象中的属性 使用 for in语句
for(var n in obj2){//对象中有几个属性 循环体就会执行几次 每次执行时会将对象的一个名字赋值给变量
console.log("属性名："+n);
console.log("属性值："+obj2[n]);
}
</script>十五、什么是作用域？
<title>作用域</title>
<script type="text/javascript">
/*作用域——指一个变量的作用范围；js中有两种作用域：全局作用域、函数作用域
1、全局作用域-直接编写在script标签中的js代码 都在全局作用域中
在页面打开时创建 页面关闭时销毁。 在全局作用域中有一个全局对象window（代表浏览器窗口）可以直接使用。
-在全局作用域中，创建的变量都会作为window对象的属性保存
2、函数作用域-调用一次函数就会创建一个新的函数作用域 函数执行完毕后 函数作用域销毁。
在函数作用域中可以访问到全局变量 在全局作用域中无法访问到函数作用域里的变量。
函数作用域找变量现在自己的作用域找 然后逐渐往上一级作用域寻找 直到去全局作用域中 若依然找不到 则报错。
//若要在函数作用域中 直接访问同名全局变量 在可以使用 window.变量名 的方法。
//在函数作用域中也会有变量提前的效果 var 申明的变量会在函数中的最前面申明变量不赋值。
*/
var a = 10 , b = 20;//使用var 声明的变量 会在所有的代码执行之前声明 无论他在代码的哪个位置 都是等价的
//但是会在代码所在的那一行给申明的变量赋值 、、如果不用var申明变量 则不会提前声明。
console.log(window.a);
console.log(window.b);
console.log(typeof window);
//使用函数声明创建的函数 function（）{}它会在所有的代码执行之前就将函数创建，所以写在代码的任何位置都等价
//通过var fun = function (){} 函数表达式创建的函数 不会被声明提前，只会在声明那一行代码后调用生效。
//如果在函数声明变量时没有 var 则会默认变成window. 该函数变量会变成全局变量。
</script>十六、JS中的this指向：
将在JS进阶中详细探讨this指向问题 以及 箭头函数中特殊的this使用-
<title>this</title>
<script type="text/javascript">
//解析器在调用函数时 每次都会向函数内部传递进一个隐含的参数,这个参数就是this 这是浏览器传进来的
//this指向的是一个对象 这个对象是函数执行的上下文对象
//根据函数调用方式的不同 this指向不同的对象。
function fun (){
// console.log("a="+a+",b="+b);
console.log(this);
}
fun();//以这种函数的形式调用this 时 this 永远指向window对象
var obj = {
name : "mqy",
sayname : fun
};
console.log(obj.sayname == fun);//可知道 sayname 和fun完全等价
obj.sayname();//和调用fun完全等价 但是可以看到输出的this //以这种方法的形式调用的时候 this就指向该方法所属的对象。
//输出的this从window变为了object
</script> 十七、初识原型链之原型与构造函数
此处为初步认识 将在JS进阶中详细探讨原型链的有关重要知识：
<title>构造函数</title>
<script type="text/javascript">
/*来创建一个构造函数 用来创建person对象
构造函数与不同函数的区别是 习惯上 名称首字母大写
而且调用方式不同 普通函数直接调用 var per = person ()
构造函数 需要使用关键字 new
*/
// function Person (name, age){
// this.name = name;
// this.age = age ;
// this.sayName = function(){
// alert("大家好啊，我是："+this.name);
// };//这是person每执行一次创建一个新的方法sayname每一个都不同
// //如果执行一万次则创建了一万个重复的方法 占用内存完全没必要 可以进行修改
// //将sayname方法提出到全局作用域
// }
// var per = new Person("mqy",18);
// var per2 = new Person("pzk",17);
// var per3 = new Person("rlk",20);
// //上述使用同一个构造函数创建的对象 我们称为一类创建对象 也将构造函数称为一类
// //我们将通过一个构造函数创建的对象，称为是该类的实例。
// console.log(per2);
// per2.sayName();
// per3.sayName();
// console.log(per.sayName == per2.sayName);//此时返回一个false 因为这是完全不同的方法
// //使用instanceof 可以检查一个对象是否是一个类的实例
// console.log(per instanceof Person);//是 则返回true
// //需要强调的是，所有所有的对象全是object的后代 任何对象和object做instanceof 检查时 均返回true。
// //构造函数的执行流程1、立刻在堆内存中创建一个新的对象
// //2、将新建的对象设置为函数中的this，在构造函数中可以用this引用新建的对象。
// //3、逐行执行函数中的代码
// //4、将新建的对象作为返回值返回。
// //this 当以函数形式调用 this是window
// //当以方法的形式调用 谁调用的方法this就指向那个对象
// //当以构造函数的形式调用 this 就是指向新创建的那个对象。
//对方法的创建作出以下修改
function Person (name, age){
this.name = name;
this.age = age ;
this.sayName = fun;
}
function fun (){
alert("大家好啊，我是："+this.name);
};//问题：将函数定义在全局作用域中 污染了全局作用域的命名空间。而且定义在全局作用域中很不安全！
var per = new Person("mqy",18);
var per2 = new Person("pzk",17);
var per3 = new Person("rlk",20);
console.log(per2);
per2.sayName();
per3.sayName();
console.log(per.sayName == per2.sayName);//此时他们指向的都是fun函数 输出的是true 方法的调用变为同一个 大大的提升了性能。
</script><title>原型</title>
<script type="text/javascript">
/*我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype(原型)
这个属性对应着一个对象 即为原型对象。
如果函数作为普通函数调用 prototype 没有任何作用
若函数作为构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性
指向该函数的原型对象，我们可以通过—__proto__来访问该对象。
原型对象就相当于一个公共区域 同一个类的实例都可以访问到这个原型对象
可以将对象中共有的内容 设置到原型对象中。
*/
function MyClass(){
}
MyClass.prototype.age = 19;//向这个类中的原型对象添加age属性
//向原型中加一个方法
MyClass.prototype.sayhello = function (){
alert("hello!");
};
var mc = new MyClass();
var mc2 = new MyClass();
console.log(mc.age);//当访问一个对象的属性或方法时，现在对象自身寻找，有则使用。无则去原型对象中寻找，找到则用 仍然找不到则报undefined
mc.sayhello();
//故以后在创建构造函数时，可以将对象共同的属性和方法统一添加到原型对象中，这样不用重复添加 也不会影响到全局作用域，还可以节省内存，提高运行速度。
//可以使用对象的hasOwnProperty()来检查对象自身中是否含该属性 而不是去原型对象中搜。
console.log(mc.hasOwnProperty("name"));
//false则没有该属性
console.log(mc.hasOwnProperty("hasOwnProperty"));//检查mc里是否有这个检查的方法
console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));//检查mc的原型里是否有这个检查的方法（依然为false
//原型对象也是对象 它也有原型 原型对象中搜不到的方法去原型的原型里找
console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));
//此处输出true 故这个hasownproperty 就在原型的原型对象中。
//直到找到object的原型为止，object的原型没有原型 如果在object里找不到 则返回undefined。
</script>十八、垃圾回收机制：
<title>垃圾回收</title>
<script type="text/javascript">
/*垃圾回收（GC）：-就像人生活的时间长了会产生垃圾一样，
程序运行过程中也会产生垃圾，垃圾积攒过多会导致程序运行速度下降
需要一个垃圾回收的机制，来处理程序运行过程中产生的垃圾
*/
var obj = new Object ();
obj = null ;//把地址从栈内存与堆内存之间的联系去掉
//此时obj原来指向的堆内存变为垃圾 无法引用的对象 但是占用着空间，降低性能。
//所以这种垃圾必须清理掉。
//-在js中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，不需要我们操作。
//所以我们需要做的是不再使用的对象设置为null。
</script>总结
JS基础语法的学习 没什么好说的 过一遍即可 。
虽然是基础的使用 但也是重中之重 不可犯原则性错误。
数组和其他一些函数数组知识将在下一篇文章中更系统的呈现。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
