javascript学习笔记

最新推荐文章于 2024-04-20 05:45:00 发布

CreabineChen

最新推荐文章于 2024-04-20 05:45:00 发布

阅读量919

点赞数 2

本文链接：https://blog.csdn.net/CreabineChen/article/details/49902703

版权

◆javascript的基本介绍

1.js 是用于web开发的脚本语言

脚本语言是什么？

1）脚本语言往往不能独立使用，它和html/jsp/php/asp/asp.net配合使用

2）脚本语言有自己的变量，函数，控制语句（顺序，分支，循环）

3）脚本语言实际上是解释性语言（即在执行的时候直接对源码进行执行）

4）java程序：java--->class--->jvm js--->浏览器（js引擎来解释执行）

2.js 在客户端（浏览器）执行

客户端向服务器发送请求，下载html和js文件，然后在客户端执行操作。

3.因为js是有浏览器来解释执行的，因此这里有个问题，不同类型的浏览器可能对js的支持不一样。

◆js的开发工具选择

1.记事本

2.eclipse（myeclipse）

注意：javascript严格区分大小写，每一句语句最后一定要以 ; 结尾

案例1

需求：打开网页后，显示hello world

<html>
<head>

<script language="javascript">
window.alert("hello!");
</script>
</head>
<body>
</body>
</html>

问题

1.js代码可以放在head里，也可以放在body里

2.js必须用

js代码

</script>

注意：如果没有用script包起来，浏览器会将其视为普通文本。

3.在一个html文件中（jsp/php/asp）可以出现多对<script>片段，浏览器将会按照先后顺序依次执行

案例2：

对前面的程序，改进成一个简单的家法运算程序

<html>
<head></head>
<body>

<script language="javascript">
//js中变量的定义（在js中变量用var表示，不管实际类型）
var num1=456;
var num2=89;
var result=num1+num2;
window.alert("结果是"+result);//alert函数，是

</script>

</body>
</html>

◆js的变量的类型究竟怎样决定：

1.js是弱数据类型语言（即定义变量的时候无需指定类型）

即：在定义变量的时候，统一使用var表示，甚至可以去掉var这个关键字

2.js中的变量的数据类型，是由js引擎来决定的。

var name="creabine"; //name是字符串类型

var kk=2 //kk是数字类型

var yy //yy是undefined

如果name="233" //这时name自动变成数字类型

◆即，js引擎可以根据数据的值来判断数据类型（可以这么说么？）

◆js的命名规范（变量，函数的命名）

1.使用大小写字母，数字，_，$，可以命名

2.不能以数字开头

3.不能使用js的关键字和保留字

4.区分大小写

5.单行注释使用 // 多行注释使用 /**/

◆js的数据类型

1.基本数据类型，分为：

（1）Number 数值

1）.整形常量（十进制、八进制、十六进制）

注意此例：

var a=123;
var b=034;//十进制中不以0开头，而这里的034以0开头，js将认为034为八进制数，此八进制数转换为十进制数（4*8^0+3*8^1+0*8^2=28）的结果为28，故c=a+b=123+28=151。
var c=a+b;
window.alert(c);

2）.实型常量

12.32、19.458、5E3(即5*10^3，这里的e大小写都可以，也可以写作5e7）

var a=12.32;

特殊数值：

1.NaN （not a number）

例：

var a="abc";

window.alert(parseInt(a)); //parseInt(a)这个函数为：解析一个字符串并转为整数。这里的变量a=abc，a并不是数值类型，故无法转为整数，会报错为NaN。也可以用这个技巧去判断一个值是不是数字。

2.infintiy(无穷大)

例：

window.alert(6/0); //6/0就是无穷大

◆有两个函数可以用于判断NaN，infinity，分别是

isNaN() 检查某个值是不是数字

isFinite() 检查某个值是否为有穷大的数

下面只举例isNaN：

window.alert(isNaN("abc")); //判断abc是否不是数字，确实不是数字，返回true

window.alert(isNaN("123")); //判断123是否不是数字，是数字，返回false

（2）String 字符串型

"a book of JavaScript" 、 "a" 、 "dkfjkd"fdf "fd f"

例：

var a="abc";

var b="abcddd";

car c="fdskfjkls\"gfg\"faksjf"; //字符串类型的值，要用“”包起来，而当值中有“”引号时，用反斜杠\ 来转意，这时输出的时候，并不会输出反斜杠\，会输出它旁边的双引号，

window.alert(c);

（3）Boolean 布尔型：即true和false

举例：

var a=true;

var b=false;

js中非0的数，都为true，包括小数;js中字符串也是true。

if(1.1){

window.alert('ok');

}

通过typeof可以看到变量的具体数据类型是什么，举例：

<html>
<head>
<script language="javascript">
var v1="abc";
var v2=890;
window.alert("v1是"+typeof v1);
window.alert("v2是"+typeof v2);

v1=567;//js是动态语言，变量类型是可以动态变化的，这里赋值567，v1又变成了数字类型。
window.alert("v1是"+typeof v1);
</script>
</head>
<body>
</body>
</html>

2.复合类型，分为

（1）数组

（2）对象

3.特殊类型

1.null 空值

var a=null;

2.undefine 未定义

var tt;
window.alert(tt);//弹框说明未定义

◆js数据类型的转换

1.自动转换

var a=123; //a是数值

var a="hello"； /a是字符串

2.强制转换 parseInt() parseFloat()

如：

var a=12345;

a=parseInt(a); //使用系统函数强制转换，转为Int，整数。

var b=90; //b是数值

b=b+""; // b+“”空值，把b转为字符串

◆js的运算符

+ - * / %（取模，即两数相除取余，常用于判断两个数是否能够整除）

例：

var a=80;
var b=30;
var c=a%b;
window.alert(a%b);//取模主要用于整数型，小数会不明确
if (c==0){
window.alert("a能被b整除");
}else{
window.alert("a不能被b整除");
}

◆注意：++运算符 --运算符的意义

举例：举了++，--同理。

var a=57;
var b=++a;//b=++a 等价于 [a=a+1；b=a]; 而 b=a++ 等价于[b=a;a=a+1;] 简单来说，就是++在前，就是a先自加再赋值；++在后，就a先赋值，a再自加。两种处理得到的a的值是不同的
window.alert(b);
window.alert(a);

◆ +=左加 -+左减 /=左除 %=左取模

例子：

var a=56; var b=90;
a-=34;//a=a-34; a=22
b%=a;//b=b%a; 此时b=90,a=22,取模结果为2
window.alert(b);
window.alert(a);

介绍 window.prompt() 和 document.writeln() 两个函数

var val=window.prompt('请输入值');//该函数为弹出一个框输入值
var val2=window.prompt('请再输入一个值');

document.writeln('你的输入是'+(val+val2));//这里是字符串拼接
document.writeln('你的输入是'+(parseFloat(val)+parseFloat(val2)));//这里把字符串转为数值，然后进行加法运算。

◆关系运算符

== 等于 >大于 < 小于 >=大于等于 <= 小雨等于 != 不等于

案例：

◆逻辑运算符

1.与 &&

重要的案例：

var a=90;
var b=9;
if(a>b && a++>90){//这里a>b为true，故继续执行a++>90,等价于[a>90; a++],而a>90为false，所以输出no；a++之后a=91，所以输出a=91.
window.alert('ok');
}else{
window.alert('no');
}
window.alert('a='+a);

案例说明：

if（逻辑表达式1 && 逻辑表达式2）{

}

如果逻辑表达式1为true，则会继续执行逻辑表达式2

如果逻辑表达式1为false，则不会执行逻辑表达式2（因为与需要1、2同时为true才为true，1为false，没必要判断2了）

2.或 ||

if（逻辑表达式1||逻辑表达式2）{

}

如果，逻辑表达式1为true，则不再执行逻辑表达式2（因为只要1为true，就为true了，没必要判断2）

如果，逻辑表达式1为false，才会执行逻辑表达式2

案例1：

var a=90;
var b=9;
if(a>b || a++>90){//修改a b之间的大于小于号，可以测试a++的执行与否
window.alert('ok');
}else{
window.alert('no');
}
window.alert('a='+a);

这里有一个非常重要的知识点：

//在js中||究竟返回什么值
//结论：|| 将返回第一个不为false的值（对象亦可），或者返回最后一个值（若全部都是false的话）

//返回的结果，不一定是布尔值，也可能是对象

案例：
var a=4;//js中，非0的数字即为true,按上述结论，即返回4
var b=90;
window.alert(a||b);
var d=0;
window.alert(d||b);//此时d为false，b为true, b是第一个不为false的值，所以返回90
var f=null;
window.alert(d||f);//此时d,f都为false，返回最后一个值，即f的值，0

var obj=new Object();//这里说明，||所返回的值，不一定是布尔型，还可能为对象
var g=d||f||obj;
window.alert(g+"类型"+typeof g);

3.非 !

if(! 逻辑表达式){

}

如果逻辑表达式为true，【！逻辑表达式】为false，

如果逻辑表达式为false，【！逻辑表达式】为true。

特别说明：在逻辑运算中，0、“”、false、null、undefined、NaN均表示false；其他都认为是true。

例如：

var a=0;//这里的0换成 “”、false，null，undefined，NaN,均一样。

if(a){//这里a=0，表示false，即不执行window.alert('ok') 语句；若改为if(!a),则为true，执行window.alert('ok')语句。

window.alert('ok')

}

◆js也有位运算和移位运算，其规范和java一致,这里没太搞懂，虽然不是重点，实际开发用的少。

案例：

var a=4>>2;
window.alert(a);//结果是1
var b=-4>>2;
window.alert(b);//结果是-1

◆javascript的控制语句

1.顺序控制

对编程而言，不控制其流程就是顺序执行

2.分支控制

1）单分支

基本语法：

if(条件表达式){

//执行语句；

}

2）双分支

基本语法

if(条件表达式){

执行语句1；

}else{执行语句2；

}

案例：

编写一个程序，可以输入人的年龄，如果年龄大于18岁，则输出“你年龄大于18，能上这个网站了=w=”，否则输出“你还未满18岁不能看这种奇怪的东西”

代码：

var age=window.prompt("请输入你的年龄");
if(age>=18){
window.alert("你成年了，能上这个网站了=w=");
}else{window.alert("你还未满18岁不能看这种奇怪的东西");
}

3）多分支

基本语法：

if(条件表达式1){

//执行

}else if{

//执行

}else if...{//可以有多个else if

}

else{//最后可以没有这个单独的else

}

举例：

如果是男，就去男厕所，如果女，就上女厕所，否则不上厕所。

代码：

var sex=window.prompt("请输入性别");
if(sex=="男"){
window.alert("上男厕所");
}else if(sex=="女"){
window.alert("上女厕所");
}else{
window.alert("不上厕所");

}

注意：代码会按照顺序依次进行判断，一旦找到一个满足条件的执行完了之后，就结束整个多分支，后边的都不会再去判断。

◆switch 如果选择是具体的值，用switch；如果是个范围，用if..else

基本语法：

switch(表达式){

case 常量1；

//执行语句

break;

case 常量2；

//执行语句

break;

...

default;

//执行语句

}

案例：

//switch 语句，它的值可以是js允许的任何值
var a=890;

switch(a){
case 890://注意这里是冒号：
window.alert("890");
break;//break 作用是跳出整个switch。如果这里没有break，会不再判断，继续向下执行，直到遇到break。也就是说，如果去掉这里的break，接下来不会管case 90，会直接执行window.alert("90");然后遇到break，再跳出循环
case 90://注意这里是冒号：
window.alert("90");
break;
default://注意这里是冒号：
window.alert("没有匹配的值");
break;
}
window.alert("end");

针对该案例，我们得出以下结论：

1.js的switch语句的数据类型可以是js支持的任何类型，数值，字符串，null，undefined,甚至变量都可以，但数组和对象除外。

2.case后面的值得数据类型可以是任意的，数组和对象除外。

3.break的作用是跳出整个switch

4.如果没有匹配值，则执行default。

如：

var flag=1;//因为1不和任何case匹配，所以执行default，执行之后没有遇到break，所以继续向下执行。
switch(flag){
default:
window.alert("默认");
case "a":
window.alert("今天星期一");
case "b":
window.alert("今天星期二");
case "1.1":
window.alert("1.1");
//如果这里有break，就肯定只显示1.1。这里没有break，但是也没有回去执行，以为这个已经在最后边了，不会再折回去执行。
}

◆for循环

基本语法：

for(循环初值；循环条件；步长){

语句；//循环体

}

案例：

for(var i=0;i<10;i++){
document.writeln("你好</br>");
}

for循环的流程图：

结束---------------| （接上图）

◆while循环判断是否为真，为真就执行，为假就跳出来。

基本语法：

while(条件表达式){

//执行语句；

}

案例：输出hello10次

var i=0;
while(i<10){
document.writeln("hello</br>");
i++;
}

◆ do......while

基本语法：

do{

//执行

}while（条件表达式）{

}

案例：

var i=0;
do{
document.writeln("hello</br>");
i++
}while(i<10);

注意：while是先判断再执行，do...while是先执行一次再判断是否循环

练习题：

//请编写一个程序，可以接收一个整数n，（1）计算1+2+...+n的值，（2）计算1！+2！+...+n！的值

//第一题
var n=window.prompt("请输入一个整数n");
n=parseInt(n);//要强制转换，不然默认n是字符串
var result=0;
for(var i=1;i<=n;i++){
result=i+result;
}
document.writeln("结果是"+result);
//第二题
var result2=0;
var temp=1;
for(var i=1;i<=n;i++){//阶乘和的算法想了半天
for( var j=1;j<=i;j++){
temp=temp*j;
}
result2=result2+temp;
temp=1;
}
document.writeln("结果是"+result2);

在IE8中，我们可以通过工具来对js代码进行调试，尤其是页面比较复杂的情况下很有用。

首先要在IE浏览器--Internet选项---高级---取消“禁止脚本调试”

F11：一句一句执行，若遇到函数，则跳入函数中一句依据执行。

F10：按过程执行，若遇到函数，则把整个函数当一个语句执行，不调入函数

shift+F11：从一个函数中跳出

右边监视窗口可以看到变量的值的变化。

右下断点可以看设置的断点情况。

练习：

请编写一个程序，可以接收一个整数N层数，打印出1.金字塔的一半；2.完整的金字塔图形；3.完整的菱形；4.空心菱形。

代码：

//打印金字塔小练习
var n=window.prompt('请输入一个整层数n');
n=parseInt(n);
//1.金字塔的一半
for(var i=1;i<=n;i++){
for(var j=1;j<=i;j++){
document.writeln("*");
}
document.writeln("<br/>");
}
//2.完整的金字塔
for(var i=1;i<=n;i++){
for(var j=1;j<=n-i;j++){
document.writeln("&nbsp");
}
for(var j=1;j<=2*i-1;j++){
document.writeln("*");
}
/*for(var j=1;j<=n-i;j++){
document.writeln("&nbsp");
}这里是*号后边的空格，可以不打，显示上是一样的*/
document.writeln("<br/>");

}
//3.空心金字塔
for(var i=1;i<=n;i++){//这里分行
for(var k=1;k<=n-i;k++){
document.writeln("&nbsp");
}//这个for循环输出每行最开始的空格
for(var j=1;j<=2*i-1;j++){//这里输入每行除了一开始的空格之外的东西
if(i==n){//当i=n，即最后一行的时候，全部输出*
document.writeln("*");
}else if (j==1||j==(2*i-1)){//这里用或当j=1,即输出每行的第一个*号，然后结束，不运行或后边的东西；当j不为1时，即每行输出第一个*号后，开始判断最后一个*号的位置，即j=2*i-1时输出最后一个*号
document.writeln("*");
}else{
document.writeln("&nbsp");//其他时候都输出空格
}
}
document.writeln("<br/>");//每结束一行，换行一次
}
//4.画菱形
for(var i=1;i<=n;i++){//菱形的上半部分的三角形，包括菱形最宽的一行
for(var j=1;j<=n-i;j++){
document.writeln("&nbsp");
}
for(var j=1;j<=2*i-1;j++){
document.writeln("*");
}
document.writeln("<br/>");
}
for(var i=n-1;i>0;i--){//这里是下边的部分，因为最宽的第n行已经在上边输出过了，所以下边从n-1开始。这里的i相当于下半个三角形从下往上数的第i行。i由上至下的值从n-1到1。
for(var j=1;j<=n-i;j++){
document.writeln("&nbsp");
}//这里正常输入每行前边的空格
for(var j=1;j<=2*i-1;j++){
document.writeln("*");
}//这里通过i计算出每行的*号数量并输出
document.writeln("<br/>");
}
//5.空心菱形【还没搞定，代码显示的不对。】
for(var i=1;i<=n;i++){//这里分行
for(var k=1;k<=n-i;k++){
document.writeln("&nbsp");
}//这个for循环输出每行最开始的空格
for(var j=1;j<=2*i-1;j++){//这里输入每行除了一开始的空格之外的东西
if (j==1||j==(2*i-1)){//这里用或当j=1,即输出每行的第一个*号，然后结束，不运行或后边的东西；当j不为1时，即每行输出第一个*号后，开始判断最后一个*号的位置，即j=2*i-1时输出最后一个*号
document.writeln("*");
}else{
document.writeln("&nbsp");//其他时候都输出空格
}
}
document.writeln("<br/>");//每结束一行，换行一次
}
for(var i=n-1;i>0;i--){//这里是下边的部分，因为最宽的第n行已经在上边输出过了，所以下边从n-1开始。这里的i相当于下半个三角形从下往上数的第i行。i由上至下的值从n-1到1。
for(var j=1;j<=n-i;j++){
document.writeln("&nbsp");
}//这里正常输入每行前边的空格
for(j=1;j<=2*i-1;j++){
document.writeln("*");
if(i==1){
document.writeln("*");
}else if (j==1&&j==(2*i-1)){//这里用或当j=1,即输出每行的第一个*号，然后结束，不运行或后边的东西；当j不为1时，即每行输出第一个*号后，开始判断最后一个*号的位置，即j=2*i-1时输出最后一个*号
document.writeln("*");
}else{
document.writeln("&nbsp");//其他时候都输出空格
}
}
document.writeln("<br/>");
}

◆JS函数

1.为什么需要函数：将相同的功能封装在函数里，不同的页面之间可以随意调用，减少代码冗余，更精简

2.函数的基本概念

为完成某一功能的代码（语句、指令）的集合

3.基本语法：

function 函数名（参数列表）{

//代码

return 值//有的函数有返回式，有的没有，没有就不写。

}

说明：

1.参数列表：表示函数的输入

2.函数主体：表示为了实现某一功能代码块

3.函数可以有返回值，也可以没有

入门案例：

注意：如果其他的html文件也想使用这个函数要怎么办呢

把上面的函数单独提出，写到js，然后再需要的地方引入

代码：

myfunction.js:

//自定义函数.
//输入两个数，在输入一个运算符（+、-、*、/），得到结果
function ji_suan(num1,num2,operator){//特别强调，参数名前不要带 var
var res=0;
if(operator=="+"){
res=num1+num2;
}else if(operator=="-"){
res=num1-num2;
}else if(operator=="*"){
res=num1*num2;
}else{
res=num1/num2;
}
return res;//返回
}

在需要的文件中引入：

◆函数调用的方式

1.普通调用

函数名（实际参数...）；

2.通过指向函数的变量去调用

var myvar=函数名；

myvar(实际参数);

3.关于接受函数返回值的问题：

var myvar=test("abc");//这里把test（"abd"）赋值给了myvar,所以会直接弹窗一个abc
//如果test函数没有返回值，但是你又接受了，则返回的就是undefined；

//如果有返回值，则返回值是什么，就是什么。在test代码中加入return 90;则会弹窗出90
window.alert(myvar);

◆js函数的调用过程，内存分析

案例：

//abc是一个函数，它接收一个数值，如果接受的数字大于3，那么-1再赋值给自己
function abc(num1){
if(num1>3){
abc(--num1);//递归
}
document.writeln(num1);
}

若这样调用：

abc(5);

则返回的结果为：3 3 4

分析图：

个人理解：在这个函数运行的时候，其实运行了很多次，直到num1=3的时候（即最右边的方框），函数运行到最后一次，if失效，此时输出了3，之后回到左边的框，也就是上一层函数，if结束之后，还有一个doc..未运行，此时的num1是num1=4自减之后的结果，即为3，再输出一个3；然后再回到左边num1=5的框，运行该框的doc...此时该层的num1是num1=5自减之后的结果，即为4。至此，函数全部运行结束，故输出为3 3 4.

注意：

1.函数的参数个数可以任意指定。

2.参数可以是多个，每个参数的类型可以是任意的。

3.js函数天然支持参数个数可变。

如：

//编写一个函数，可以接受任意多个数，并计算他们的和
function abc2(){

//在js中有一个 arguments,可以访问所有传入的值
//window.alert(arguments.length);这样可以访问个数
//那么我们可以用for循环来遍历所有的参数
for(var i=0;i<arguments.length;i++){
window.alert(arguments[i]);
}
}

可以这样调用：

window.alert("abc2(45,90,900);");
abc2(45,90,900);

window.alert("abc2(4,\"hello world\")");
abc2(4,"hello world");

window.alert("abc2();");
abc2();

4.js支持动态创建函数。

练习：（视频第26讲结尾处）

1.金字塔封装

2.页面输入九九乘法表

◆数组

1.为什么需要数组

看一个需求：

王大爷养乌龟的问题：王大爷有6只乌龟，体重高分别是3kg、5kg、1kg、3.4kg、2kg、50kg。请问六只乌龟的总体重是多少？平均体重是多少？

2.解决方法：

使用数组，这种数据类型（引用类型/复杂类型/复合类型），数组的基本概念：用于存放一组数据。

特别强调：js中的数组，可以存放各种类型的数据（数值，字符串...）

王大爷养乌龟（快速入门）：

//数组的遍历
for(var i=0;i<weights.length;i++){
document.writeln(weights[i]);
all_weight+=weights[i];
}
avg_weight=all_weight/weights.length;
document.writeln("总体重是"+all_weight);
document.writeln("平均体重是"+avg_weight.toFixed(2));//toFixed()函数可以控制一个数字的小数位数
window.alert(avg_weight.constructor);//若想知道某个变量的数据类型，可以使用这个来看数据类型。

3.数组的细节：

1）基本用法：

var 数组名=[元素1，元素2，...]

元素的值可以是任意类型： var a=[1,2.5,sfd,true]

数组在内存中的存在形式：

2）js中的数组是引用传递

举例说明：

var myarr=[456,90,900];
function abc2(arr){
arr[0]=35;
}
abc2(myarr);

for(var i=0;i<myarr.length;i++){
document.writeln(myarr[i]);
}//输出结果为多少？答案是35 90 900

原理图：

3）数组的引用

基本用法：

数组名称[下标] 下标从0开始

比如：

var a=[23,dsad,4.6];

我们访问a[2]，则会输出4.6；因为下标从0开始。

如果我们访问a[3](没有第四个元素),则会输出undefined（实际上并没有弹窗）

结论：不能访问不存在的元素

4）js的数组可以动态增长，即已经定义好的数组，可以随时增加元素个数。

var a=[2,3];
alert("数组的大小是"+a.length);
a[2]=56;//动态的增长,数组变成了a=[2,3,56]
alert(a[2]);
alert("数组的大小是"+a.length);

5)字符串分割生成一个字符串数组，split()函数

比如：

var str="hello world creabine 陈磊";
var arr=str.split("",2);//split（“以什么分割字符串”，显示前几个【若不写则全部显示】）
for(var i=0;i<arr.length;i++){
document.write(arr[i]+" ");
}

6）遍历数组还有这个方法，不过很少用，了解即可，不用深究

var arr=[45,90,0];
//arr["gg"]=9000;//js的数组下标不仅可以用数字，还能用字符串，但是一般不用这个，了解即可
for(var key in arr){
window.alert(key+"="+arr[key]);
}
//这里的key是数组的下标，从0开始

//练习，运动会上，五个小孩比赛轮滑，他们划100米，分别用时10s,12s,5.7s,9s,14s,编写一个程序，计算它们的平均时间。在基础上，实现自主输入用时，并且显示平均值为2位小数。

//var time=[10,12,5.7,9,14];
//自主输入数字数组的方法
var a=window.prompt("请分别输入他们的时间，以,号间隔");
var time=a.split(",");//将输入的字符串转化为字符串数组
for(i=0;i<time.length;i++){
time[i]=parseFloat(time[i]);
}//遍历数组的所有元素并将他们的数据类型转为浮点型
var sum=0;
var avg=0;
for(var i=0;i<time.length;i++){
sum+=time[i];//遍历数组求和
}
avg=sum/time.length;//求平均
window.alert("平均时间为"+avg.toFixed(2));//显示2位小数

◆多维数组：二维数组

多维数组我们只介绍二维数组：一个数组的元素还可以是数组，这就构成了二维数组。二维数组中的元素数组之间的长度，可以不相同。

举例：

//二维数组
/*
var arr=[["creabine",123,4.5],["a","b","c"],[89,0]];//二维数组的元素数组长度可以不同
//二维数组的遍历方法
for(var i=0;i<arr.length;i++){//遍历每个元素
//输出每个元素arr[i][数组]的元素）
for(var j=0;j<arr[i].length;j++){
document.writeln(arr[i][j]+" ");//arr[i][j]是arr[i]这个数组的j号元素
}
document.writeln("<br/>");//输出了一个元素之后，换行
}
//若要直接访问"c"，那应该怎么写
window.alert(arr[1][2]);
*/

//请输入如下图形
/*
0 0 0 0 0 0
0 0 1 0 0 0
0 2 0 3 0 0
0 0 0 0 0 0
*/

代码：
/*
var arr=[[0,0,0,0,0,0],[0,0,1,0,0,0],[0,2,0,3,0,0],[0,0,0,0,0,0]];
for(i=0;i<arr.length;i++){
for(j=0;j<arr[i].length;j++){
document.writeln(arr[i][j]+" ");
}
document.writeln("<br/>");
}
*/

◆矩阵转置

//矩阵转置，即行列互换

var arr=[[2,4,6,8],[8,9,0,-1],[9,6,2,1]];
//定义一个新的数组
var arr2=[];
//初始化,定下来有多少行（旧数组的列就是新数组的行）
for(var i=0;i<arr[0].length;i++){//循环旧数组的列，有4列
arr2[i]=[];//给新数组arr2创造元素数组，也就是新矩阵的行，循环旧数组的列，得到新数组的行，4行。这里开辟的arr2数组的储存空间，所以下边的arr2[j][i]=arr[i][j];才能够实现访问并储存。这里的初始化很重要，要先初始化一个空间给新的数组，不然下边的转置无法实现。
}
//可以动态的添加数据
//遍历旧的数组
for(var i=0;i<arr.length;i++){
for (var j=0;j<arr[i].length;j++){
arr2[j][i]=arr[i][j];//转置是行列互换，直接换i,j即可
}
}
//成功，遍历arr2数组就是一个转置数组
for(var i=0;i<arr2.length;i++){
for (var j=0;j<arr2[i].length;j++){
document.writeln(arr2[i][j]+" ");
}
document.writeln("<br/>");
}

◆js基本语法：排序，用的很少

冒泡排序：

原理图：

原理：从最下边的一个数开始，依次跟头上的数字比较大小，大的就呆在上边，再跟上边一个比较，再换位置。如图第一列，最下边的35跟88比较，88大，维持原位；然后88跟16比较，88大，换到16上边；依次比较，直到88跟90比较，90大，90在上边；然后90再分别与56,79比较，都比他们大，所以90最大，排到第一了。得到第一趟跑完的结果。然后再从最下边开始，跑第二趟，直到排序完成。

案例：

//冒泡排序
var arr=[5,0,-56,900,12,9000,-123];
//大的排序次数(arr.length-1), 第一次排序，找出第一大的放在第一位；第二次排序，找出第二大的放在第二位；以此类推，只要arr.length-1次就够了，倒数第二大的已经在倒数第二位了，最小的不用动了。
for(var i=0;i<arr.length-1;i++){//这里的i可以看作已经跑了i趟，一开始i=0，表示还没跑，跑完一趟之后i=1，表示已经跑了1趟了。
//小的排序
for(var j=0;j<arr.length-1-i;j++){//共有arr.length个数，拿其中一个数，来跟其他数比较，就要比较arr.length-1次。如果已经跑了i趟，那么前i个数已经固定位置了，不需要再比较了，所以只需要比较arr.length-1-i次就可以了。
if(arr[j]>arr[j+1]){//两两比较，若左边的比右边的大，交换
//交换
var temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}
}//排序结束
for(var i=0;i<arr.length;i++){
document.writeln(arr[i]+" ");//输出所有元素
}

冒泡排序的优化案例：

//冒泡排序
var arr=[1,4,6,8,9,90,800];

var flag=false;
//大的排序次数(arr.length-1), 第一次排序，找出第一大的放在第一位；第二次排序，找出第二大的放在第二位；以此类推，只要arr.length-1次就够了，倒数第二大的已经在倒数第二位了，最小的不用动了。
for(var i=0;i<arr.length-1;i++){//这里的i可以看作已经跑了i趟，一开始i=0，表示还没跑，跑完一趟之后i=1，表示已经跑了1趟了。
document.writeln("大循环....<br/>");//看看跑了多少趟大循环，在有优化的时候，只要跑一趟，若没有优化，则要跑arr.length-1，也就是6趟。
//小的排序
for(var j=0;j<arr.length-1-i;j++){//共有arr.length个数，拿其中一个数，来跟其他数比较，就要比较arr.length-1次。如果已经跑了i趟，那么前i个数已经固定位置了，不需要再比较了，所以只需要比较arr.length-1-i次就可以了。
if(arr[j]>arr[j+1]){//两两比较，若左边的比右边的大，交换
//交换
var temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
flag=true;//flag本来被赋值为false，如果发生了交换，那么falg变为true，也就是，用这个flag的值来判断是否有发生交换。
}
}
//排序优化
if(flag){
flat=false;//这里是，如果falg的值为true，也就是发生了交换，那么把falg的值重置为false。
}else{//如果falg的值是false，说明这一趟，没有发生交换，就说明，已经排序成功了，之后的趟不需要再跑了，直接break跳出循环即可。
break;
}
}//排序结束
for(var i=0;i<arr.length;i++){
document.writeln(arr[i]+" ");//输出所有元素
}

◆js查找：

1.顺序查找：取出来一个一个的比对

2.二分查找：

注意：二分查找有一个前提：该数组必须是有序的。若不是有序数组，则不能使用二分查找。

//二分查找思路：找到数组的中间数(midVal)，和你要查找的数(findVal)进行比较，如果midVal>findVal，则说明findVal在数组的左边，就把该数组二分了（就只在左边查找了。）
var arr=[1,4,6,8,9,90,800];
function binarySearch(arr,findVal,leftIndex,rightIndex){
//该函数的变量分别是：数组，要查找的值，数组最左边的脚标，数组最右边的脚标

//防止无穷递归没懂，为啥？？？
if(leftIndex>rightIndex){
//提示找不到
document.writeln("找不到");
return;
}
//找到中间这个值
var midIndex=Math.floor((leftIndex+rightIndex)/2);//找到中间的那个脚标。
//leftIndex+rightIndex)/2的值有可能是小数，所以这里使用Math.floor()函数，进行向下取整。
var midVal=arr[midIndex];//由中间的脚标得到中间的值

//与中间值进行比较
if(midVal>findVal){//若中间值大于要找的值，说明要找的值在数组中间值的左边，所以在左边找
//在左边找
binarySearch(arr,findVal,leftIndex,midIndex-1);//这里再次调用函数，讲左边的部分再二分，此时最右的脚标变为了midIndex-1，因为midVal>findVal，所以midVal不等于findVal，他不用参与下一次二分，直接从midIndex-1这个脚标的值开始
}else if(midVal<findVal){//原理同上
//在右边找
binarySearch(arr,findVal,midIndex+1,rightIndex);//原理同上
}else{//也就是midVal=findVal的时候，说明找到了
document.writeln("找到下标为"+midIndex);//打印出找到的值得下标
return;
}
}

//测试:
binarySearch(arr,8,0,arr.length-1);

js面向（基于）对象编程

澄清概念：

1.js中，基于对象等同于面向对象

2.js中，按照标准的说法，是没有类（class）的，没有class这个关键字。但是它去了一个新的名字，叫原型对象，因此类等同于原型对象。

◆为什么需要对象？

问题提出：

/*
张老太养了两只猫：一只叫小白，3岁，白色。另一只叫小花，10岁，花色。编写程序，当输入猫的名字，就显示猫的名字，年龄，颜色。若用户输入的小猫名字错误，则显示张老太没有这只猫。
*/
//传统放大可以设置多个变量，一个一个赋值，比较麻烦。

//新的解决方法，把猫的属性集中起来，创建一种新的数据类型（原型对象/类）
//用面向对象的方法来解决上面的问题

//这里就是一个Cat类。
function Cat(){
}
//不同的用法，Cat()可以作为函数，也可以作为类。
Cat();//函数
var cat1= new Cat();//类，此时cat1就是一个对象（实例）
cat1.name="小白";
cat1.age=3;
cat1.color="白色";
//从上面的代码我们可以看出：1.js中的对象属性可以动态的添加。2.属性没有限制
window.alert(cat1.name+cat1.age+cat1.color);

◆类（原型对象）与对象的区别和联系：

1.类是抽象的，概念，代表一类事物

2.对象是具体的，代表一个实体

3.对象是以类（原型对象）为模板创建出来的。

◆创建对象的方式有五种：

1.工厂方法--使用new Object创建对象并添加相关属性；

2.使用构造函数来定义类（原型对象）

3.使用prototype

4.构造函数及原型混合方式

5.动态原型方式

目前我们先讲使用构造函数来定义类（原型对象），然后再创建对象实例。

基本语法：

function 类名(或原型对象名) (){

}

创建对象

var 对象名=new 类名();

现在对对象我们特别说明：

1.js中一切都是对象：

function Person(){}
var a=new Person();
window.alert(a.constructor);//a.constructor，打印出对象实例的构造函数
window.alert(typeof a);//typeof a,打印出a的类型

//其实 a b c 都是类
var b=123;
window.alert(b.constructor);
window.alert(typeof b);
var c="123";
window.alert(c.constructor);
window.alert(typeof c);

◆如何判断一个对象实例是不是某个类型

//思考，如何判断一个对象实例是不是Person类型？

//这里的程序接上边的
//方法一：
if(a instanceof Person){//a instanceof Person 可以判断a是不是Person类型，如果是就返回true，就打印出来了。
window.alert("a是person");
}
//方法二：
if (a.constructor==Person){//a.constructor，打印出对象实例的构造函数判断是否是Person
window.alert("a是person 2");
}

补充说明：函数中带不带 var 的区别

//思考：下边两个例子，返回值为什么有区别
var abc=89;//定义一个全局变量
function test(){
//在下边的函数里，若不带var，则表示使用外边的全局变量abc，输出900
//若带上var，则表示在test()函数里边定义了新的局部变量abc，输出89
var abc=900;
}
test();
window.alert(abc);

◆访问对象的属性的方法有两种：

1.普通方式

对象名.属性名

2.动态访问，这里的属性名是字符串，可以拼接，达到动态访问的目的

对象名["属性名"]

例如：

function Person(){};
var p1=new Person();
p1.name="creabine";

window.alert(p1.name);
window.alert(p1["name"]);

var val="na"+"me";//拼接
window.alert(p1[val]);//拼接之后也能访问

对象引用问题说明：（图）

js还提供一种方式，主动释放对象内存

delete 对象名.属性名;//这样就会立即释放对象的这个属性空间

案例：

function Person(){};
var a=new Person();
a.age=10;
a.name="小明";
var b=a;
b.name="小白";
window.alert(b.age+"名字"+b.name+"名字"+a.name);
//这里输出 10名字小白名字小白因为：a和b都只是Persoon（）的地址而已，两个变量都是它的地址，访问的都是同一个它，所以b.name="小白";修改之后，用a和b访问，得到的都是小白。

delete a.age;//删除a对象的age属性
window.alert(a.age+"名字a"+a.name);//删除之后age变成undefined

b=null;//将b置空
window.alert(a.age+"名字a"+a.name);//a还能继续访问
window.alert(b.age+"名字b"+b.name);//b就不行了，不显示任何东西

◆this

问题的提出：

function Person(){
}
var p1=new Person();
p1.name="顺平";
p1.age=60;
window.alert(p1.name+""+p1.age);
var p2=new Person();
window.alert(p2.name);//这里会输出什么（undefined）

//这里我们可以看到window.alert(p2.name);输出的是undefined

实际编程中，可能有这样的需求，当我们创建一个对象之后，就希望该对象自动拥有某些属性，比如上边创造了Person对象后，就希望该对象自动拥有name和age属性，这又怎么办？

使用this来解决：

案例：

//this的使用
function Person(){
this.name="abc";
this.age=90;//这里用this，相当于把name这个属性变成了全局变量，如果直接var name的话，就是这个函数里边的局部变量，这样下边的访问就访问不到，会undefined。
}//这样以后建立的实例都自动拥有name和age属性并且自动赋值。
var p1=new Person();
var p2=new Person();//这里的p1,p2是两个不同的实例，存在不同的地址，修改其中一个的属性不影响另一个，所以有下边的
window.alert(p1.name+""+p2.name);
p2.name="陈磊";
window.alert(p1.name+""+p2.name);

原理图：

可能有人会这样想问题：

function Person(){

var name="abc";//私有的，只能在内部使用

var age=900; //私有的，只能在内部使用

this.show=function(){ //如果你一定要访问私有属性，则需要定义一个公开方法（特权方法）

window.alert("name="+name+"age"+age);

}

var p1=new Person();

window.alert(p1.name+""+p1.age);//错误的，无法访问，因为那两个是局部变量，会显示undefined

p1.show();//定义公开方法后，这样就可以访问了。

注意：谁调用函数，函数里的this就是谁。

案例1：

/*
function Person(){
this.name="abc1";
this.age=900;
}
function show1(){
window.alert("hello"+this.name);
}
var p1=new Person();
p1.abc=show1;
show1();//这里并不是p1调用函数，没指定是谁调用跟，就默认window，所以这里函数里边的this是window的this，所以只会输出hello，后边的this.name没东西，什么都不输出
*/

//2
function Person(){
this.name="abc1";
this.age=900;
}
var name="北京";
function show1(){
window.alert("hello"+this.name);
}
var p1=new Person();
p1.abc=show1;
show1();//这里同样也是直接调用函数，没指定是谁调用跟，就默认window，所以this是window的this，但是这次有定义name，故而输出hello北京

案例2：

function Person(){
this.abc=function(){
window.alert(this.v);
}
}
var p=new Person();//p指到Person的地址，
p.v="hello";//给他加了个属性v
p.abc();//p调用了这个函数，P就是this，this.v就是p.v，就是hello

注意事项：this不能放在类的外部使用，否则调用者就变成了window

◆对象-----成员函数（方法）

比如：我们希望对象不但有属性，还希望他有行为（行为在程序中要靠函数来实现）

1.添加speak函数，输出我是一个好人

2.添加jisuan函数，可以计算从1+...+1000的结果

3.修改jisuan函数，该方法可以接收一个数n，计算从1+...+n的结果

4.添加add成员函数，可以计算两个数的和

代码：做了一部分

◆除了上边的方法给一个对象添加函数还有另外两种种方式：

方法二：

function 类名（）{

this.属性；

}

var 对象名=new 类名（）；

function 函数名（）{

//执行

}

对象名.属性=函数名；//这样就相当于把函数赋给了这个对象名.属性，此时这个属性名就表示一个函数了

//调用时

对象名.属性名（）；

具体案例：

function Person(){
this.name="abc";
this.age=900;
}
function show1(){
window.alert("hello"+this.name);
}
//创建一个p1对象
var p1=new Person();
//把show1函数给p1.abc这个属性，这个属性就代表了这个函数了
p1.abc=show1;//这里的show1不带括号，就是把函数本身交给这个属性，如果这里写show1（），那就是把函数返回的值给abc
p1.abc();//调用这个函数

方法三：

对象名.属性名=function 函数名（参数列表）{

//代码；

}

调用

对象名.属性名（实际参数）

具体案例：

function Person(){
this.name="ccc";
this.age=900;
}
var p1=new Person();
p1.abc=function show1(){//直接给对象的abc属性添加函数
window.alert("hello"+this.name);
}
p1.abc();

第四种：

前面的几种方法，有一个问题：那就是每个对象会独占函数代码，这样如果对象过多，则会影响效率，js设计者提供了另一个方法：原型（prototype）法，这样多个对象可以共享一个函数代码，节省空间，提高效率

代码解释：

function Person(name,age){
//下边就是使用传入的实际参数，去初始化属性
this.name=name;
this.age=age;
//输出自己的名字,这里this.show就是一个公开的函数，函数名是show
this.show=function(){//使用这种方法的话，每创建一个Person的对象实例p1,p2,p3.....，他们各自都会有这样一个函数，这些函数相互独立存在，在某些情况下，这样会浪费空间。

}

原理图

如果不需要他们相互独立，为了节省空间，可以这样：

function Dog(){

}

var dog1=new Dog();

//在这里，使用prototype[类] 去绑定一个shout。虽然定义的dog1在这句话之前，但定以后dog1也可以访问类里边的shout

Dog.prototype.shout=function(){

window.alert("小狗");

}

dog1.shout();

var dog2=new Dog();

dog2.shout();//此时，这个shout属性被放在了Dog() 这个类里边，由Dog创建的实例dog1,dog2并不会自己加上这个shout属性,但是都可以通过相应的dog1.shout和dog2.shout来访问类里边的shout属性，dog1.dog2共用同一个shout。

原理图：

◆补讲 == 号的作用

1.当 == 的两边都是字符串的时候，则比较内容是否相等

2.若 == 两边是数字，则比较数字的大小是否相等

3.若 == 两边是对象，或是对象函数，则比较地址知否相等。若地址相等，则说明用同一个空间。

Object类

Object类是所有js类的基类，提供了一种创建自动一对象的简单方式，不需要程序员再定义构造函数

例如：

/*
//创建Person实例
function Person(){
}
var p1=new Person();
p1.name="sp";
*/

//初步体验Object类:通过Object直接创建对象，方便很多
var p1=new Object();
p1.name="sp";
window.alert(p1.constructor);

小例子：

//我们可以给类添加方法
var i=new Number(10);//这句话其实就等价于 var i=10;
Number.prototype.add=function(a){//这里是给Number这个类增加了一个方法add，add是个函数,输入一个值a，会反悔this+a
return this+a;
}
window.alert(i.add(10).add(30));//这里调用add的是i，所以this是i的this，所以返回10+a,即10+10，再+30，所以输出50

◆加深对于类和对象的认识

如何给类添加方法（如何给某类型的所有对象添加方法）：

//请思考给js的Array对象扩展一个find(Val)方法，当一个Array对象调用该方法的时候，如果能找到val则返回其下标，否则返回-1(正常下标不可能是-1).(数据手册里边已经有了各种该方法，但是如果我们需要，可以自定义一个。)

代码：
//体验一下Array
var arr1=new Array(3);
arr1[0]="a";
arr1[1]="b";
arr1[2]="c";
//遍历该数组
for(i=0;i<arr1.length;i++){
document.write(arr1[i]+" ");
}
document.write("<br/>");
//使用Array提供的方法，颠倒数据
arr1.reverse();
for(i=0;i<arr1.length;i++){
document.write(arr1[i]+" ");
}
//现在我们一起看看如何给所有Array对象添加一个方法find(Val)
Array.prototype.find=function(val){
//遍历数组this
for(var i=0;i<this.length;i++){
if(val==this[i]){
return i;
}
}
return "找不到"//这里我还是没用上边要求的-1,返回了找不到。
}
document.write("下标="+arr1.find("a"));

◆闭包

这个知识点我们讲封装的时候再说。

◆成员函数的细节：（这里有几个小练习没有做，第33讲43:33前后）

1.成员函数的参数可以是多个

function 函数名（参数1,2,3.....）{

}

2.函数可以没有返回值，但是最多只能有一个返回值。

3.js中，函数里边的变量可以是动态的，所以不通过变量的个数来区分函数，只看函数名，当定义同名的函数的时候，后定义的会覆盖先定义的，故只认最后定义的那个。

例如：

function test(a){
window.alert(a);
}
function test(a,b){
window.alert(a+""+b);
}
//js的函数里边的变量可以是动态的，所以不通过变量的个数来区分函数，只看函数名，当定义同名的函数的时候，后定义的会覆盖先定义的，所以不论定义了多少次这里的test只认最后一个，
//test(23);//故而，这里会输出 23undefined。
window.test(3,"hello");//这里的test(23);没写是谁调用，所以默认就是window调用，所以test(23);和window.test(23);是等价的

◆面向对象变成的综合案例：代码很多，好好看看

采用面向对象的思想设计超级马里奥游戏人物（示意图）

游戏的分析：

1.如何通过按钮来控制图片马里奥的位置

2.设计相关的对象（马里奥x,y）

基本代码写好了，在mario文件里边

未完成的要求：1.mario遇到边界给一个提示，功能未完成，应该不难

2.再放一个公主的图片，让mario去抓公主，抓到公主则弹窗哈哈抓到了

1）我一开始自己做了判定是否在同一点

2）改为判定碰撞

3.还能在基础上再加个要求，让mario可以通过键盘的上下左右键来控制。

问题：怎么直接获取css的内容？

答：

//这里仅作测试：如何调用div的各种属性
function test(){
//window.alert("test");
var div2=document.getElementById("div2");
//取出width
window.alert(div2.style.width);//如果div通过style来写各种属性，那么就可以这样调用。但是，如果用css就不行（据说某些浏览器可以）
}

div2代码：

◆构造函数

基本用法：

function 类名（参数列表）{

属性=参数值；

.........

}

举例：

function Person(name,age){
this.name=name;//给了初始化的值，name和age
this.age=age;
}
//创建Person对象的时候，就会直接给名字和年龄
var p1=new Person("abc",80);
window.alert(p1.name+p1.age);
var p2=new Person("ccc",9);
window.alert(p2.name+p2.age);

特别说明：在初始化一个对象实例的时候，也可以给他初始化一个函数，让他的一个属性是个函数

案例：

var p2=new Person("hehe",5);//p2实例也可以选择的不传入函数，直接不写，或者写null均可

◆创建对象的又一种形式：

如果一个对象比较简单，我们可以直接创建对象，不要类了,同时还可以给它指定普通属性和函数属性：

案例：

//比较简单的对象可以直接创建对象实例而不要类
var dog={name:"Tom",age:8};
window.alert(dog.constructor);//可以看到他是有构造函数的
window.alert(dog.name+dog.age);//也可以正常调用

扩展：这样也可以加函数

案例：

//甚至也可以给函数,例如
var cat={
name:"Sam",
age:4,
fun1:function(){window.alert("i m cat")},
fun2:function(){window.alert("i m 3")}
};
window.alert(cat.name+cat.age);
cat.fun1();
cat.fun2();

有时，我们会看到这样一种调用方法：

函数名.call（对象实例）；//这样调用，就是叫来这个对象实例，来调用该函数，该函数的this就是这个对象实例

案例：

//
var dog={name:"hello"};
function test(){
window.alert(this.name);
}

test();
window.test();
test.call(dog);//表示叫来dog对象，来调用这个test函数，这样test的this就是dog了，this.name就是dog.name了
//dog.test();//但是这里用dog.test();什么都没有，为什么？？？

//因为，dog.test();是在调用dog的私有函数，写在dog的定义里才行，而这里的test是全局函数，无法这样调用。详见文件object.html的第110行，this的使用案例。

◆js面向对象编程的三大特性

1.封装

js提供有以下几种控制方法和属性的访问权限：

1）公开级别：对外公开

2）私有级别：类本身可以访问，不对外公开

案例：

//封装属性和方法
function Person(name,agei,sal){
this.name=name;//公开的属性
var age=agei;//私有属性
var salary=sal;//私有属性
//在类中如何定义公开方法（特权方法），私有方法（内部方法）
//若我们希望操作上边的私有属性，则可以通过公开方法实现
this.show=function(){//公开方法
window.alert(age+" "+salary);
}
//私有方法,类本身可以访问对象的属性，但无法在外边使用，被封装了
function show2(){
window.alert(age+" "+salary);
}
}

var p1=new Person("sp",20,50000);
window.alert(p1.name+" "+p1.age);//这里访问公开的name就可以，访问私有的age就会失败。
p1.show();//通过公开方法来访问私有属性
p2.show2();//无法在类的外部使用私有方法。被封装了

强调：我们前面学习过，通过prototype给所有的对象添加方法，但是这种方式，不能访问类的私有属性和方法。

举例：

function Person(){
this.name="abc";
var age=90;
//公开方法
this.abc=function(){
window.alert("abc()");
}
//私有方法
function abc2(){
window.alert("abc2()");
}
}

//使用prototype
Person.prototype.fun1=function(){
window.alert(this.name);//name是公开属性，能够显示
//window.alert(age);//age是私有属性，无法显示
this.abc();//这里的函数abc();是公开的，可以调用
//abc2();//这里无法调用abc2();因为他是私有方法
}

var p1=new Person();
p1.fun1();

2.继承

1）为什么需要继承？

问题：

/*
//继承例子
function MdiStu(name,age){
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+" "+this.age);
}
//计算学费
this.payFee=function(money){
window.alert("应缴"+money*0.8);
}
}
function Pupil(name,age){
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+" "+this.age);
}
//计算学费
this.payFee=function(money){
window.alert("应缴"+money*0.5);
}
}
*/

上面的代码存在冗余的问题。

可以用继承（js是通过对象冒充来实现继承效果的）来解决这个问题：

//怎么解决上边代码冗余问题？用继承
//抽象出一个学生类（即把上边的中学生，小学生的共性取出）
function Stu(name,age){
this.name=name;
this.age=age;
this.show=function(){
window.alert(this.name+""+this.age);
}
}

function MidStu(name,age){
window.alert(Stu);//这里的Stu是个函数
this.stu=Stu;//这里相当于把Stu函数给了这个stu属性，所以这个属性拥有了这个函数所设定的那些name，age等属性。
this.stu(name,age);//stu属性经过上边那句，已经成了一个函数，相当于调用了这个函数，函数运行，就有了值；若不运行，函数里边的name，age也是空的，就没用了。这里的this,show并不会执行，因为没叫他执行。

/*
//MidStu可以覆盖Stu父类的show,这里覆盖了，所以最下边的midStu.show();会显示MidStu show();，若注销这里，不覆盖改，则会使用父类的函数，下边就会输出"顺平",20
this.show=function(){
window.alert("MidStu show();");
}
*/
}

function Pupil(name,age){
this.stu=Stu;
this.stu(name,age);//js中实际上是通过对象冒充，来实现继承的，这句话不能少，就是通过它实现了继承
}

var midStu=new MidStu("顺平",20);
midStu.show();

特别说明：js通过对象冒充的方式可以实现多重继承的效果。即可以继承好几个函数。

◆js的重载和重写： js不支持重载，但又天然支持重载

说js不支持重载（即不可以通过参数的个数来决定调用哪个一同名函数），是因为js函数的变量个数是可变的，区分js函数只看函数名而不看变量个数，所以无法拥有重名的函数，若重名只认最后一个；但是又因为js支持参数个数可变，参数类型可变，所以可以随时修改，所以说又是天然支持重载的。

如：

function abc(){

fi(argument.length==?){

}else if(argument.length==?){

}else{}

}

重写：子类可以重新写函数，来覆盖父类的某个方法。见上边的例子。

◆多态 js是动态语言，在执行过程中会动态的变化，所以可以说是天然支持多态

案例：

function Person(){

this.test1=function(){

window.alert("Person test1");

}

function Cat(){

this.test1=function(){

window.alert("Cat test1");

}

var v=new Person();

v.test1();

v=new Cat();//js是动态语言，值会随着赋值的变化而变化，你给v什么，他就是什么

v.test1();

多态经典案例：主人给动物喂食

代码：

◆补充讲解闭包：

解释：

1.闭包和gc（垃圾回收)是相关联的

2.闭包实际上是涉及一个对象的属性合适被gc处理回收的问题

3.怎样才能对对象的属性形成闭包：当一个类里边有个变量，被外部引用的时候，这个变量的储存空间就不会被马上回收，而是留着，以防外部再度引用

案例：

//闭包 closure
function A(){
var i=0;
function b(){
window.alert(i++);
}
return b;
}
//闭包<---->gc
//A();//这里如果直接这样调用A函数，此时内存会分配给i一个空间，当你执行完函数之后，因为没有其他变量指向i，所以gc会回收i的空间
var c=A();//但是如果这样调用，把调用A函数之后的结果赋值给c，运行结束之后，因为还有c指向函数，所以gc认为以后还可能会用到，就不去收回i的空间，i的值就还在
c();//输出0，但是执行之后i变成了1
window.alert("aa");
//..之后可能还有其他执行语句
//..
c();//不论执行了什么，这里还能输出1，说明执行过后的i依然存在，值是1
c();//输出2，i依然存在，没被回收，被闭包了。

CreabineChen

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javascript学习笔记

◆javascript的基本介绍1.js 是用于web开发的脚本语言脚本语言是什么？ 1）脚本语言往往不能独立使用，它和html/jsp/php/asp/asp.net配合使用 2）脚本语言有自己的变量，函数，控制语句（顺序，分支，循环） 3）脚本语言实际上是解释性语言（即在执行的时候直接对源码进行执行） 4）ja
复制链接

扫一扫