前端基础之JavaScript
思维导图
JavaScript
1、JavaScript概念：
JavaScript一种弱类型（两种不同的数据类型操作，存在隐式数据类型转换）、基于对象的语言（大部分对象已经被创建好了，不用创建类；），相对随便的客户端脚本语言 。
它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，它的主要目的是验证发往服务端之前的数据、增加Web互动、加强用户体验；
与CSS一样嵌套在HTML代码标签里面，在html代码执行时，随之执行， 为HTML代码增加动态效果。
2、JavaScript组成：
一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
核心（ECMAScript）:ECMAScript是欧洲计算机制造商协会为JavaScript设定的语法标准并且规定JavaScript不依赖依赖任何浏览器！
-
简单地说，ECMAScript 描述了以下内容：
- 语法
- 类型
- 语句
- 关键字
- 保留字
- 运算符
- 对象 (封装 继承 多态) 基于对象的语言.使用对象.
- 文档对象模型（DOM） Document object model (整合js，css，html)：HTML DOM 定义了JavaScript访问和操作 HTML 文档的API标准
- 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）:
BOM（Browser Object Model）即浏览器对象模型。BOM提供了独立于内容 而与浏览器窗口进行交互的对象；由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window；BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C，BOM最初是Netscape浏览器标准的一部分。
3、JavaScript和HTML、CSS的关系
HTML 定义了网页的内容(裸体的人)
CSS 描述了网页的布局（给裸体的人穿上衣服）
JavaScript 定义网页的行为、执行流程，JavaScript全部被浏览器解释执行；（给穿上衣服的人动作）
ECMAScript基础篇
1、JavaScript的引入方式
1.1 直接编写
在html代码的head标签中定义
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>张根</title> <script> alert(\'hello 张根\') var a=3 console.log(a) </script> </head> <body> <div>aa</div> </body> </html>
View Code
1.2、导入文件（注意JavaScript要和HTML在同一个目录）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>张根</title> <!--<script>--> <!--alert(\'hello yuan\')--> <!--</script>--> <script src="zhanggen.js"></script> </head> <body> <div>aa</div> </body> </html>
View Code
注意：通过script标签 src引入外部js文件之后，script标签里面的js代码，将无法执行；
2.JavaScript的变量：
语法规范：
2.1、每行结束可以不加分号. 没有分号会以换行符作为每行的结束。
2.2、 多行注释（ /* */ ）单行注释（//）
2.3、JavaScricpt使用{}来封装代码块，Python通过缩进 4个空格 来封装代码块；
2.4、JavaScricpt流程控制语句，使用()，来封装表达式，Python通过 空格;
变量：
变量是在程序运行过程中，用来保存临时数据的容器，当程序运行结束，变量也随之在内存中消失。可以把程序中的变量想象成生活中的碗、盘子。
1、声明变量时不用声明变量类型. 全都使用var关键字;
2、 一行可以声明多个变量.并且可以是不同类型。
3、 (了解) 声明变量时 可以不用var. 如果不用var 那么它是全局变量。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>张根</title> <script> a=1; var name=\'张根\' /*var 变量名=值，不加var定义的变量是全局变量 */ alert(a); alert(name) a=1,b=2,c=3 /*var 变量名=值，不加var定义的变量是全局变量 /*一行可以声明多个变量.并且可以是不同类型. */ alert(c) </script> </head> <body> <div>aa</div> </body> </html>
View Code
3、JavaScript数据类型
JavaScript数据类型大体分为2类
1、基本数据类型存在栈；
2、引用的数据类型放在堆里面，赋值时值为引用；
数字类型(Number)：分为整数、浮点数
简介 最基本的数据类型 不区分整型数值和浮点型数值 所有数字都采用64位浮点格式存储，相当于Java和C语言中的double格式 能表示的最大值是±1.7976931348623157 x 10308 能表示的最小值是±5 x 10 -324
NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据。
NaN 和任何值做比较都是false, 除非 值！=NaN。
整数：
在JavaScript中10进制的整数由数字的序列组成
精确表达的范围是
-9007199254740992 (-253) 到 9007199254740992 (253)
超出范围的整数，精确度将受影响
浮点数：
使用小数点记录数据
例如：3.4，5.6
使用指数记录数据
例如：4.3e23 = 4.3 x 1023
16进制和8进制数的表达
16进制数据前面加上0x，八进制前面加0
16进制数是由0-9,A-F等16个字符组成
8进制数由0-7等8个数字组成
16进制和8进制与2进制的换算
View Code
字符串(String)
简介
是由Unicode字符、数字、标点符号组成的序列
字符串常量首尾由单引号或双引号括起
JavaScript中没有字符类型
常用特殊字符在字符串中的表达
字符串中部分特殊字符必须加上右划线\
常用的转义字符 \n:换行 \\':单引号 \":双引号 \\:右划线
View Code
布尔型(Boolean)
简介
Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0
布尔值也可以看作on/off、yes/no、1/0对应true/false
Boolean值主要用于JavaScript的控制语句，例如
if (x==1){
y=y+1;
}else {
y=y-1;
}
Null 和 Undefined
Undefined:当声明的变量，但没有赋值时，例如：var a ;该变量a的默认值是 undefined。
Null:当变量确实被赋值，但是值不属于JavaScript任何数据类型时；
1 Undefined 类型 2 Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。 3 当函数无明确返回值时，返回的也是值 "undefined"; 4 Null 类型 5 另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。 6 尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。 7 var person=new Person() 8 var person=null
View Code
引用数据类型—对象(列表、字典)
1.创建object
<body> <script type="text/javascript"> /*var person = \'zhanggen\'; var person1 = \'张\\'根\'*/ //var arry1=[0,1,2,3,4]; //console.log(typeof arry1) //方式1 var zhanggen=new Object(); zhanggen.age=18; zhanggen.sex=\'man\'; alert(zhanggen.age); //方式2 var obj2={\'name\':\'张根\',\'sex\':"man",\'age\':19}; alert(obj2.name); //for循环迭代对象 for(var i in zhanggen){ //i 就是属性名称 alert(zhanggen[i]) //注意js 在for循环时，不支持obj.i(属性名称)； } </script>
查看对象（字典）有多少个属性（键）
var ninth_ward_dict_length=Object.getOwnPropertyNames(ninth_ward_dict).length;
数据类型转换
JavaScript属于松散类型的程序语言
变量在声明的时候并不需要指定数据类型
变量只有在赋值的时候才会确定数据类型
表达式中包含不同类型数据则在计算过程中会强制进行类别转换
数字 + 字符串：数字转换为字符串
数字 + 布尔值：true转换为1，false转换为0
字符串 + 布尔值：布尔值转换为字符串true或false
View Code
强制类型转换函数
函数parseInt： 强制转换成整数 例如parseInt("6.12")=6 ; parseInt(“12a")=12 ; parseInt(“a12")=NaN ;parseInt(“1a2")=1 函数parseFloat： 强制转换成浮点数 parseFloat("6.12")=6.12 函数eval： 将字符串强制转换为表达式并返回结果 eval("1+1")=2 ; eval("1<2")=true
View Code
类型查询函数(typeof)
函数typeof ：查询数值当前类型
(string / number / boolean / object )
例如typeof("test"+3) "string"
例如typeof(null) "object "
例如typeof(true+1) "number"
例如typeof(true-false) "number"
View Code
对象和基本数据类型的区别
a.引用数据类型（列表、字典、函数）对比时对比的是引用，而基本数据类型（字符型、数字、布尔）对比的是值；
//基本类型 变量 var a=100; var b=100 ; //alert(a==b); //alert(a==b) 结果：True 注意：基本类型的比较是值的比较： //object数据类型 var obj={\'name\':\'zhanggen\'}; var obj1={\'name\':\'zhanggen\'}; alert(obj==obj1) //结果：False注意：引用类型的比较是引用的比较
b.引用数据类型（列表、字典、函数）可变，而基本数据类型（字符型、数字、布尔）不可变；
c.基本类型的变量是存放在栈区的（栈区指内存里的栈内存）引用的数据类型放在堆里面
4、运算符
算数运算符
加(＋)、 减(－)、 乘(*) 、除(/) 、余数(% ) 加、减、乘、除、余数和数学中的运算方法一样 例如：9/2=4.5，4*5=20，9%2=1
-除了可以表示减号还可以表示负号 例如：x=-y
+除了可以表示加法运算还可以用于字符串的连接 例如：”abc”+”def”=”abcdef”
递增(＋＋) 、递减(－－)
i++先引用再赋值
++i先赋值再引用
var i=1;
console.log(i++);1
（先引用 还没有赋值计算所以i++还是1）
console.log(++i);2
（先赋值计算 再引用 i++是2 ）
console.log(i--);1
console.log(--i);0
逻辑运算符
等于 ( == ) 、不等于( != ) 、 大于( > ) 、 小于( < )
大于等于(>=) 、小于等于(<=)、完全等于（===）
与 (&&) 、或(||) 、非(!)
&& 1 = 1 1 || 1 = 1
&& 0 = 0 1 || 0 = 1
&& 0 = 0 0 || 0 = 0
!0=1
!1=0
完全等于===，由于Java script是若类型语言，在做比较时会隐式转换数据类型（除了完全等于===）
逻辑 AND 运算符(&&) and两个值 必须两个人都同意才是true（两个人决定结果）
逻辑 AND 运算的运算数可以是任何类型的，不止是 Boolean 值。
如果某个运算数不是原始的 Boolean 型值，逻辑 AND 运算并不一定返回 Boolean 值：
- 如果某个运算数是 null，返回 null。
- 如果某个运算数是 NaN，返回 NaN。
- 如果某个运算数是 undefined，返回undefined。
逻辑 OR 运算符(||)：or两个值 其中一个是true就是真(一个人决定结果)
与逻辑 AND 运算符相似，如果某个运算数不是 Boolean 值，逻辑 OR 运算并不一定返回 Boolean 值
比较运算符：
两个字符串做比较：比较字符串开头字母在ASSIC码表里对应的数字。
var bResult = "Blue" < "alpha";
alert(bResult); //输出 true
在上面的例子中，字符串 "Blue" 小于 "alpha"，因为字母 B 的字符代码是 66，字母 a 的字符代码是 97。 var bResult = "25" < "3";
alert(bResult); //输出 "true"
var bResult = "25" < 3;
alert(bResult); //输出 "false"
if ((x==6) || (x==0))
{
console.log("今天是周末")
}
else {console.log("今天是工作日")}
if 控制语句：
var x= (new Date()).getDay();
//获取今天的星期值，0为星期天
var y;
if ( (x==6) || (x==0) ) {
y="周末";
}else{
y="工作日";
}
alert(y);
//等价于
y="工作日";
if ( (x==6) || (x==0) ) {
y="周末";
}
if语句嵌套格式
if (表达式1) {
语句1;
}else if (表达式2){
语句2;
}else if (表达式3){
语句3;
} else{
语句4;
}
js三元表达式
var isNotChrome = window.navigator.userAgent.indexOf("Chrome") === -1; <!--判断是否为谷歌浏览器的3元表达式 --> if (isNotChrome) {alert(\'请使用 chrome 打开网页！内部系统师姐懒得支持多浏览器\');}
switch 选择控制语句
等同于Python的多分支判断； if… elif… elif…..elif…..else,但switch比else if结构更加简洁清晰，使程序可读性更强,效率更高。
注意swith(不支持返回true和false的表达式)只是根据你在swith(里面获取的值)
switch(typeof(ninth_ward_dict[customer_id])) { case \'string\':tr=\'<tr {0}={1}>\'.format(customer_id,\'all\');break; case \'object\':tr=\'<tr {0}={1}>\'.format(customer_id,\'part_tr\');td=\'<td {0}={1}>\'.format(customer_id,\'part_td\'); break; }
switch基本格式
switch (值) {
case 值1:语句1;break;
case 值2:语句2;break;
case 值3:语句3;break;
default:语句4;
}
switch(x){
case 1:y="星期一"; break;
case 2:y="星期二"; break;
case 3:y="星期三"; break;
case 4:y="星期四"; break;
case 5:y="星期五"; break;
case 6:y="星期六"; break;
case 7:y="星期日"; break;
default: y="未定义";
}
for 循环控制语句
for循环基本格式
for (初始化;条件;增量){
语句1;
...
}
功能说明
实现条件循环，当条件成立时，执行语句1，否则跳出循环体
for (var i=1;i<=7;i++){
document.write("<H"+i+">hello</H "+i+"> ");
document.write("<br>");
}
----------------------------------------------
var arr=[1,"hello",true]//var dic={"1":"111"}
for (var i in arr){
console.log(i)
console.log(arr[i])
}
while 循环控制语句
var i=1; while (i<=7) { document.write("<H"+i+">hello</H "+i+"> "); document.write("<br>"); i++; } //循环输出H1到H7的字体大小
7、异常处理
try {
//这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行
}
catch (e) {
// 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。
//e是一个局部变量，用来指向Error对象或者其他抛出的对象
}
finally {
//无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。
}
JavaScript的对象
在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象，在JavaScript程序大多数功能都是基于对象实现的。
JavaScript对象分类：
1、ECMAScript （标准内置对象）
2、BOM对象（浏览器对象）
3、DOM对象（HTML文档对象）
ECMAScript 内置对象
Array ,String , Date, Math, Boolean, Number Function, Global, Error, RegExp , Object
② 字串对象名称 = new String (字符串)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>张根</title> <script> var s1=\'zhang\' //通过语法形式创建的字符串对象属性 string类 var 变量=" 值" console.log(s1,typeof s1) var s2= new String("gen") console.log(s2,typeof s2) // 通过String对象创建的字符串对象，属于object类型； </script> </head> <body> </body> </html>
let first_name="Martin"let last_name="Zhang"`${first_name} ${last_name}`
"Martin Zhang"
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>张根</title> 6 <script> 7 var array1=[1,2,3,4] //创建方式1 8 var array2=new Array(1,2,3) //创建方式2 9 var array3=new Array(7) //创建方式3 new Array(数组的长度) 10 array3[0]=1 11 array3[1]=2 12 console.log(array1,array2,array3) 13 </script> 14 </head> 15 <body> 16 17 </body> 18 </html>
View Code
2、数组对象的属性和方法
join方法： 把数组拼接成字符串
1 x.concat(value,...) －－－－ 2 var a = [1,2,3]; 3 var b=a.concat(4,5) ; 4 alert(a.toString()); //返回结果为1,2,3 5 alert(b.toString()); //返回结果为1,2,3,4,5
View Code
concat方法：把两个数组合并为1个
1 x.concat(value,...) －－－－ 2 var a = [1,2,3]; 3 var b=a.concat(4,5) ; 4 alert(a.toString()); //返回结果为1,2,3 5 alert(b.toString()); //返回结果为1,2,3,4,5
View Code
数组排序-reverse sort：
切记：不管是Python还是JavaScript的reverse/sort方法的返回值都是None，并会直接改变原来的序列；
l=[10,2,3,4,5]
l.sort() #直接改变l列表的排序
print(l) #返回结果[2, 3, 4, 5, 10]
------------------------------------
l=[10,2,3,4,5]
l.reverse()
print(l)
数组的reverse方法 翻转就是单纯的反转，不会排序后再反转，
数组的 sort方法 排序规则 是按首个字符的ASSCI码，对应数组排序；
//x.reverse() //x.sort() var arr1=[32, 12, 111, 444]; //var arr1=["a","d","f","c"]; arr1.reverse(); //颠倒数组元素 alert(arr1.toString()); //结果为444,111,12,32 arr1.sort(); //排序数组元素 alert(arr1.toString()); //结果为111,12,32,444 //------------------------------ arr=[1,5,2,100]; //arr.sort(); //alert(arr); //如果就想按着数字比较呢? function intSort(a,b){ if (a>b){ return 1;//-1 } else if(a<b){ return -1;//1 } else { return 0 } } arr.sort(intSort); alert(arr); function IntSort(a,b){ return a-b; }
View Code
数组切片操作 ：
删除：slice(开始的索引值, 结束的索引值）
插入：slice(开始的索引值, 0,插入值,….）
//x.slice(start, end)
//
//使用注解
//
//x代表数组对象
//start表示开始位置索引
//end是结束位置下一数组元素索引编号
//第一个数组元素索引为0
//start、end可为负数，-1代表最后一个数组元素
//end省略则相当于从start位置截取以后所有数组元素
var arr1=[\'a\',\'b\',\'c\',\'d\',\'e\',\'f\',\'g\',\'h\'];
var arr2=arr1.slice(2,4);
var arr3=arr1.slice(4);
var arr4=arr1.slice(2,-1);
alert(arr2.toString());
//结果为"c,d"
alert(arr3.toString());
//结果为"e,f,g,h"
alert(arr4.toString());
//结果为"c,d,e,f,g"
View Code
删除子数组：
//x. splice(start, deleteCount, value, ...)
//使用注解
//x代表数组对象
//splice的主要用途是对数组指定位置进行删除和插入
//start表示开始位置索引
//deleteCount删除数组元素的个数
//value表示在删除位置插入的数组元素
//value参数可以省略
var a = [1,2,3,4,5,6,7,8];
a.splice(1,2);
alert(a.toString());//a变为 [1,4,5,6,7,8]
a.splice(1,1);
alert(a.toString());//a变为[1,5,6,7,8]
a.splice(1,0,2,3);
alert(a.toString());//a变为[1,2,3,5,6,7,8]
View Code
数组的push和pop： 栈操作： 顺序后进先出，插入到最后位置；
//push pop这两个方法模拟的是一个栈操作
//x.push(value, ...) 压栈
//x.pop() 弹栈
//使用注解
//
//x代表数组对象
//value可以为字符串、数字、数组等任何值
//push是将value值添加到数组x的结尾
//pop是将数组x的最后一个元素删除
var arr1=[1,2,3];
arr1.push(4,5);
alert(arr1);
//结果为"1,2,3,4,5"
arr1.push([6,7]);
alert(arr1)
//结果为"1,2,3,4,5,6,7"
arr1.pop();
alert(arr1);
//结果为"1,2,3,4,5"
View Code
数组的unshift 和shift：
栈操作：顺序后进先出 ，插入到开始位置；
var arr1=[] 09:46:29.334 undefined 09:46:42.087 arr1.push("alex") 09:46:42.089 1 09:47:02.431 arr1.push("wusir") 09:47:02.434 2 09:47:05.711 arr1 09:47:05.716 (2) ["alex", "wusir"] 09:47:22.596 arr1.unshift("小马") 09:47:22.601 3 09:47:29.840 arr1 09:47:29.842 (3) ["小马", "alex", "wusir"] 09:47:49.843 arr1.shift() 09:47:49.847 "小马" 09:47:53.526 arr1 09:47:53.530 (2) ["alex", "wusir"]
//x.unshift(value,...)
//x.shift()
//使用注解
//x代表数组对象
//value可以为字符串、数字、数组等任何值
//unshift是将value值插入到数组x的开始
//shift是将数组x的第一个元素删除
var arr1=[1,2,3];
arr1.unshift(4,5);
alert(arr1); //结果为"4,5,1,2,3"
arr1. unshift([6,7]);
alert(arr1); //结果为"6,7,4,5,1,2,3"
arr1.shift();
alert(arr1); //结果为"4,5,1,2,3"
View Code
总结js的数组特性：
js中数组的特性
java中数组的特性, 规定是什么类型的数组,就只能装什么类型.只有一种类型.
js中的数组特性1: js中的数组可以装任意类型,没有任何限制.
js中的数组特性2: js中的数组,长度是随着下标变化的.用到多长就有多长。
js中的数组特性3：可以超出数组的长度， 取索引值；
创建Date对象
//方法1：不指定参数
var nowd1=new Date();
alert(nowd1.toLocaleString( ));
//方法2：参数为日期字符串
var nowd2=new Date("2004/3/20 11:12");
alert(nowd2.toLocaleString( ));
var nowd3=new Date("04/03/20 11:12");
alert(nowd3.toLocaleString( ));
//方法3：参数为毫秒数
var nowd3=new Date(5000);
alert(nowd3.toLocaleString( ));
alert(nowd3.toUTCString());
//方法4：参数为年月日小时分钟秒毫秒
var nowd4=new Date(2004,2,20,11,12,0,300);
alert(nowd4.toLocaleString( ));//毫秒并不直接显示
Date对象的方法—获取日期和时间
获取日期和时间
getDate() 获取日
getDay () 获取星期
getMonth () 获取月（0-11）
getFullYear () 获取完整年份
getYear () 获取年
getHours () 获取小时
getMinutes () 获取分钟
getSeconds () 获取秒
getMilliseconds () 获取毫秒
getTime () 返回累计毫秒数(从1970/1/1午夜)
时间戳转格式化时间字符串
// 格式化时间戳 export function formatDate(datetime) { // 获取年月日时分秒值 slice(-2)过滤掉大于10日期前面的0 const year = datetime.getFullYear() const month = (\'0\' + (datetime.getMonth() + 1)).slice(-2) const date = (\'0\' + datetime.getDate()).slice(-2) const hour = (\'0\' + datetime.getHours()).slice(-2) const minute = (\'0\' + datetime.getMinutes()).slice(-2) const second = (\'0\' + datetime.getSeconds()).slice(-2) return year + \'-\' + month + \'-\' + date + \' \' + hour + \':\' + minute + \':\' + second }
Date对象的方法—设置日期和时间
1 //设置日期和时间 2 //setDate(day_of_month) 设置日 3 //setMonth (month) 设置月 4 //setFullYear (year) 设置年 5 //setHours (hour) 设置小时 6 //setMinutes (minute) 设置分钟 7 //setSeconds (second) 设置秒 8 //setMillliseconds (ms) 设置毫秒(0-999) 9 //setTime (allms) 设置累计毫秒(从1970/1/1午夜) 10 11 var x=new Date(); 12 x.setFullYear (1997); //设置年1997 13 x.setMonth(7); //设置月7 14 x.setDate(1); //设置日1 15 x.setHours(5); //设置小时5 16 x.setMinutes(12); //设置分钟12 17 x.setSeconds(54); //设置秒54 18 x.setMilliseconds(230); //设置毫秒230 19 document.write(x.toLocaleString( )+"<br>"); 20 //返回1997年8月1日5点12分54秒 21 22 x.setTime(870409430000); //设置累计毫秒数 23 document.write(x.toLocaleString( )+"<br>"); 24 //返回1997年8月1日12点23分50秒
View Code
Date对象的方法—日期和时间的转换
日期和时间的转换:
getTimezoneOffset():8个时区×15度×4分/度=480;
返回本地时间与GMT的时间差，以分钟为单位
toUTCString()
返回国际标准时间字符串
toLocalString()
返回本地格式时间字符串
Date.parse(x)
返回累计毫秒数(从1970/1/1午夜到本地时间)
Date.UTC(x)
返回累计毫秒数(从1970/1/1午夜到国际时间)
View Code
4、Math对象
//该对象中的属性方法 和数学有关.
abs(x) 返回数的绝对值。
exp(x) 返回 e 的指数。
floor(x)对数进行下舍入。
log(x) 返回数的自然对数（底为e）。
max(x,y) 返回 x 和 y 中的最高值。
min(x,y) 返回 x 和 y 中的最低值。
pow(x,y) 返回 x 的 y 次幂。
random() 返回 0 ~ 1 之间的随机数。
round(x) 把数四舍五入为最接近的整数。
sin(x) 返回数的正弦。
sqrt(x) 返回数的平方根。
tan(x) 返回角的正切。
//方法练习:
//alert(Math.random()); // 获得随机数 0~1 不包括1.
//alert(Math.round(1.5)); // 四舍五入
//练习：获取1-100的随机整数，包括1和100
//var num=Math.random();
//num=num*10;
//num=Math.round(num);
//alert(num)
//============max min=========================
/* alert(Math.max(1,2));// 2
alert(Math.min(1,2));// 1 */
//-------------pow--------------------------------
alert(Math.pow(2,4));// pow 计算参数1 的参数2 次方.
5、Function 对象(重点)
1、函数的定义
function 函数名 (参数) {
函数体;
return 返回值;
}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>张根</title> <script> function zhanggen (a) {
console.log(\'hellow\'+a) } zhanggen("张根") </script> </head>
2、函数的属性：
console.log(zhanggen.length) 查看函数的参数的个数
3、Function 的调用：
Python里的函数需先定义再执行，JS里的函数可以在定义代码的前面调用；因为Python和JS的加载顺序不同，Python顺序执行，JS是先加载函数。
4、函数的内置对象arguments：
JS的函数可以接收无数个参数；
在JS函数里面可以通过arguments对象，收集这个函数所有的参数。
5、匿名函数 lambda x,y:x+y
匿名函数的调用：
（lambda x,y:x+y）（1+1）
为什么会有lambda函数？
因为每定义一个函数就会开辟一块内存空间来存放函数执行的代码，并引用函数名，解释器无法回收这块内存，为了节省内存，所以出现了lambada函数；
1、Window 对象方法
window是全局变量，所以window对象下面的方法可以直接调用：
alert() 显示带有一段消息和一个确认按钮的警告框。
confirm() 显示带有一段消息以及确认按钮和取消按钮的对话框。
prompt() 显示可提示用户输入的对话框。
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
//var res=window.confirm(\'确定要删除吗？\'); //setTimeout("window.open(\'http://www.baidu.com\',\'_self\')",3000);//在当前窗口open一个新页面 //setTimeout("window.open(\'www.baidu.com\',\'_paren\')",3000);//在父级窗口open一个新页面 //setTimeout("window.open(\'www.baidu.com\',\'_top\')",3000);//在顶级窗口open一个新页面 window.open(\'http://www.baidu.com\',\'new_window\',\'width=200,height=200\') //设置打开窗口的大小
window.open()
close() 关闭浏览器窗口。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
scrollTo() 把内容滚动到指定的坐标.
location:提供当前窗口加载的信息
//alert(window.location.hash);//返回url中的hash //alert(window.location.port);//当前访问端口号 //alert(window.location.search)//当前url携带的参数 //alert(window.location.pathname)//当前访问的url地址 //window.location.assign(\'http://www.baidu.com\'); //window.location.href=\'http://www.baidu.com\'//网页跳转 alert(navigator.userAgent) //获取当前用户使用的浏览器
location
2、方法使用
1.1、alert confirm prompt以及open函数
var id=setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval(id) 取消由 setInterval() 设置。
1.2、setInterval，clearInterval
输出框内显示时间案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>张根</title> </head> <body> <input type="text" id="time" onfocus="start()"> <!给输入标签 一个事件触发器，一旦用户双击该输入框就会 JS就会执行bar函数--> <button onclick="stop()">end</button> </body> <script> var id function start() { if (id==undefined){ //第一次进来id只声明了，没有赋值 。 bar()} id=setInterval(bar,1000)} function bar () { var cuur_time=new Date(); //获取当前时间 s_time=cuur_time.toLocaleString(); //把当前时间转换成字符串格式 var ele=document.getElementById("time"); //JS查找到input标签 ele.value=s_time //设置input标签的值 } function stop() { clearInterval(id) id=undefined //每次清空id重写为 undefined } </script> </html>
View Code
DOM对象：
什么是HTML DOM？
HTML Document Object Model（文档对象模型）
HTML DOM 定义了访问和操作HTML文档的标准方法
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树)
DOM树
DOM树中对象可以分为4类：
1、docucment对象（ 完整的HTML页面）
2、标签对象（html中的标签）
3、文本对象（标签里内容）
4、属性对象（标签中定义的属性）
DOM操作HTML标签和用户交互；
1、节点查找(访问HTML标签)
1.1直接查找html标签的方式：返回一个数组对象，里面包含查找到的标签；
document.getElementById(“idname”) 通过html标签里的元素查找到标签；
document.getElementsByTagName(“tagname”) 通过html标签的标签名字查找到标签；
document.getElementsByName(“name”) 通过html标签里定义的属性，查找到标签；document.getElementsByClassName(“name”) 通过html标签里定义的类名，查找到标签；parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
2、节点操作（操作HTML标签）
1、创建节点：通过JS创建HTML标签，使用document对象的createElement方法创建标签对象；
例：var tag=document.createElement(“input”)
tag.setAttribute(\’type\’,\’text\’);
2、添加节点：通过JS把创建好的HTML标签，查找到父标签—–>使用父标签对象的appendChild方法
3、删除节点：通过JS把创建好的HTML标签，查找到父标签—–>使用父标签对象的removeChild()方法删除子节点；
4、替换节点：通过JS把创建好的HTML标签，查找到父标签—–>使用父标签对象的replaceChild(新标签，旧标签 )方法 替换父标签下面的子标签
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>张根</title> </head> <body> <div class="outer"></div> </body> <script> var outer=document.getElementsByClassName("outer")[0]; //查找到要操作的父标签 var ele=document.createElement("div"); //创建标签对象 ele.innerText="游勤兵SB"; //设置标签对象的属性 ele.style.width="90px"; //设置标签对象的CSS样式 ele.style.height=\'90px\'; ele.style.backgroundColor="red"; var new_ele=document.createElement("p"); new_ele.innerText="11111111111111111111111111111"; outer.appendChild(ele); //通过父标签 添加子标签 outer.replaceChild(new_ele,ele) //通过父标签 替换子标签 outer.removeChild(new_ele) //通过父标签 删除子标签
节点属性操作：
1、获取文本节点的值：innerText innerHTML
2、attribute操作（HTML标签内 的ID、class等属性。。。。注意不能设置标签的CSS样式）
elementNode.setAttribute(name,value) elementNode.getAttribute(name) 简写方式设置标签属性：<-------------->elementNode.value(DHTML) elementNode.removeAttribute(“属性名”);
3、value获取当前选中的value值 （仅限于 select 标签和 input标签使用 value属性）
1.input
2.select （selectedIndex）
3.textarea
select标签 清空所以包含的option的方法： ele2.options.length=0
4、innerHTML 给节点添加html代码：
该方法不是w3c的标准，但是主流浏览器支持
tag.innerHTML = “<p>要显示内容</p>”;
5、关于class的操作：
|
1
2
3
|
elementNode.classNameelementNode.classList.addelementNode.classList.remove |
6、通过DOM改变HTML标签的css样式：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>张根</title> </head> <body> <div class="outer"></div> </body> <script> var div_outer=document.getElementsByClassName("outer")[0]; console.log(div_outer) div_outer.style.width="90px"; div_outer.style.height="90px"; div_outer.style.backgroundColor=\'red\' </script> </html>
View Code
DOM Event(事件)
onclick 当用户点击某个对象时调用的事件句柄。 ondblclick 当用户双击某个对象时调用的事件句柄。 onfocus 元素获得焦点。 练习：输入框 onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证. onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动） onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交. onkeypress 某个键盘按键被按下并松开。 onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。 onmousemove 鼠标被移动。 onmouseout 鼠标从某元素移开。 onmouseover 鼠标移到某元素之上。 onmouseleave 鼠标从元素离开 onselect 文本被选中。 onsubmit 确认按钮被点击
绑定事件方式：
绑定方式1 在html标签里绑定事件，执行函数里的参数写(this)；
绑定方式2 标签对象.事件=function(){}；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>张根</title> </head> <body> <p onclick="func1(this)" >ppppp</p> <p>p11111</p> <button>clik</button> </body> <script> //绑定方式1 在html标签里绑定事件，执行函数里的参数写(this) function func1(self) { console.log(self) } //绑定方式2 标签对象.事件=function var ele=document.getElementsByTagName("p")[0]; ele.onclick=function () { console.log(this.innerText) alert(this.innerText) } </script> </html>
事件介绍
1、onload：
onload 属性开发中 只给 body元素加.这个属性的触发 标志着 页面内容被加载完成.应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性.
2、onsubmit：
当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
3、Event 对象：
Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！event对象在事件发生时系统已经创建好了,并且会在事件函数被调用时传给事件函数.我们获得仅仅需要接收一下即可.
比如onkeydown,我们想知道哪个键被按下了，需要问下event对象的属性，这里就时KeyCode；
4、事件传播：
5、onselect：
6、onchange:onchange事件：内容被改变时，触发该事件，例如select标签，选择之后触发
JavaScript的作用域
1.谁可以开辟本地作用域？
JavaScript的全局作用域是Window，而且是JS里面最大的对象，声明在全局作用域中的所有变量都是window的属性；
JavaScript的函数、object类型都可以开辟自己的本地作用域；
2.本地作用域—->全局作用域经历了什么？
JavaScript调用变量的顺序是：本地—-》外部—》全局—-》undefined
如果变量声明在局部作用域，调用该变量时会先从本作用域开始调用，本地作用域没有，再去本地作用域的外部作用域，直到全局作用域；
如果全局作用域也没有查询到就显示undefined；
<script>
/*
function box1(num) {
if (num <= 1) {
return 1
}
else {
return num * arguments.callee(num - 1) //arguments.callee调用函数本身！
}
}
alert(box1(4))
*/
// window 是1个对象，而且是JS里面最大的对象，声明在全局作用域中的所有变量都是window的属性；
// alert(this==window) //this 目前表示的是Windows因为在全局作用域下！
var color=\'red\';//如果在全局作用域 声明了变量，这个变量又是window的属性
//alert(window.color==this.color)
var box ={color:\'bule\',saycolor:function () {
alert(this.color) //bule //如果变量声明在局部作用域，调用该变量时会先从本作用域开始调用，本地没有在去全局作用域；
}};
box.saycolor();
function saycolor () { //在局部作用域查询不到 color属性，js就会去全局变量查找；如果全局作用域也没有查询到就显示undefined
alert(this.color);
alert(this.cooosdefhfeh);
}
saycolor()
</script>
JavaScript的作用域
3.JavaScript的自执行函数中this，是什么鬼？
Window对象
(function () { alert(this); //window对象 })()
自执行函数
4.如何在本地作用域 引用到 外部作用域中的 this？
如想要在本地作用域引用外部作用域中的this，可以在外部作用域把this赋值给其他变量；本地作用域调用直接去按顺序查找到外部作用域；
userinfo = { name: \'zhanggen\', age: 18, show: function () { //userinfo 是1个字典对象 alert(this.age); //this是userinfo对象 var that = this; //自执行函数开始 (function () { alert(this); //在自执行函数中，this还代表window对象 alert(that); // 如想要在本地作用域引用外部作用域中的this，可以在外部作用域把this赋值给其他变量；本地作用域调用直接去按顺序查找； that 还是userinfo对象 })() //自执行函数结束 } }; userinfo.show() //如果函数 被对象.函数执行，那么函数中的this代指该对象本身 //如果在自执行函数中 this代指 window 对象; //this可以被赋值，由于this 被赋值为 that,那么即使在自执行函数中也是 userinfo对象
在本地作用域 引用 外部作用域中的this
JavaScript的面向对象与原型
前言：
ECMAScript和python、Java等语言有相同之处：支持两种开发模式：1.函数式编程（面向过程） 2.面向对象编程
有所不同得是ECMAScript中没有clas类的概念，它的面向对象是借助原型的方式实现的；
下面开始详细 介绍 ECMAScript 为了面向对象，采取了那些N种方式。（只有1个核心，使js 可以拥有面向对象的3大特征：封装、继承、多态）;
new Object()
<script>
var person0=new Object();//创建1个对象
person0.user=\'zhanggen\';//为对象添加 name 属性
person0.age=18;
person0.run=function () { //this代表当前作用域下的对象(new Object实例化出来的对象。 )
return this.user+ \'跑步中....\'
//注意this一定要放在一个作用域中使用，而不能在全局使用！只有在对象的方法中调用this才代表对象本身！
};
alert(person0.run());
// alert(this) 全局作用域中的this代表window
var person1=new Object();//创建1个对象
person1.user=\'zhangsan\';//为对象添加 name 属性
person1.age=18;
person1.run=function () { //this代表当前作用域下的对象(new Object实例化出来的对象。 )
return this.user+ \'跑步中....\'
//注意this一定要放在一个作用域中使用，而不能在全局使用！只有在对象的方法中调用this才代表对象本身！
};
alert(person1.run())
// alert(this) 全局作用域中的this代表window
</script>
基本方法
总结：缺陷1：重复实例化造成大量重复、冗余代码。
工厂函数模式
创建1个集中实例化的函数，专门用来创建对象；
// 工厂函数0 function create_object0(user,age) { var obj=new Object(); //每次调用工厂函数创建1个对象； obj.user=user; //为这个对象添加属性 obj.age=age; //为这个对象添加方法 obj.run=function () { //最后返回这个对象 return this.user+this.age+\'运行中\' }; return obj } //工厂函数1 function create_object1(user,age) { var obj=new Object(); //每次调用工厂函数创建1个对象； obj.user=user; //为这个对象添加属性 obj.age=age; //为这个对象添加方法 obj.run=function () { //最后返回这个对象 return this.user+this.age+\'运行中\' }; return obj } //工厂函数2 function create_object2(user,age) { var obj=new Object(); //每次调用工厂函数创建1个对象； obj.user=user; //为这个对象添加属性 obj.age=age; //为这个对象添加方法 obj.run=function () { //最后返回这个对象 return this.user+this.age+\'运行中\' }; return obj } var obj0=create_object0(\'liufengyi\',30); //工厂函数0创建了 实例0 var obj1=create_object1(\'gaofei\',31); // 工厂函数1创建了 实例1 var obj2=create_object2(\'zhujingshan\',32); //工厂函数2创建了 实例2 alert(obj0.run()); alert(obj1.run()) ; alert(obj2.run()) ; alert(typeof obj0); //object类型 alert(typeof obj1); //object类型 alert(typeof obj2) //object类型 //使用工厂函数创建出来的实例都属于object类型，如果有多个工厂函数，根本无法区分是那个实例，是哪个工厂函数创建出来的！ // （众多娃，不知爹是谁的问题？）
工厂函数
优势：解决了重复实例化的问题；
缺陷：使用工厂函数创建出来的实例都属于object类型，如果有多个工厂函数，根本无法区分是哪个实例是由哪个工厂函数创建出来的！
众多娃，不知爹是谁？总多爹，不知道娃是谁？这是母系社会？
构造函数
构造函数式JavaScript专门用来构造对象的，构造函数不仅解决了重复实例化的问题，还解决了对象和创建对象函数的关系识别问题
是工厂函数的改良版；
0.构造函数使用规范
a.构造函数也是函数，但是函数名的第1个字母必须大写
b.实例化时 使用 new 构造函数名(参数0，参数1 ) var obj0=new Person(\’xx\’,538);
1.构造函数和工厂函数的区别？
a.无需return object
b.构造函数没有使用 new Object关键字来实例化对象；（它后台会自动new Object）
c.this相当于self =对象
d.构造函数不需要返回对象（后台自动返回！）
e.构造函数和普通函数调用的方式不同，构造函数 必须使用new运算符 / 冒充调用Person.call(obj4,\’朱允炆\’,250)
2.构造函数对比工厂函数的优势
0.解决了重复实例化的问题
1.无需return object
2.解决了对象和创建对象函数的关系识别问题
// --------------------构造函数-------------------------------------- //构造函数式JavaScript专门用来构造对象的，是工厂函数的改良版！ function Person(user,age) { this.user=user; //添加属性 this.age=age; //添加属性 this.run=function () { //添加方法 return this.user+this.age+\'运行中\' }; } function Animals(user,age) { this.user=user; //添加属性 this.age=age; //添加属性 this.run=function () { //添加方法 return this.user+this.age+\'运行中\' }; } var obj0=new Person(\'朱标\',538); //实例化出个对象0 var obj1=new Person(\'朱樉\',535);//实例化出个对象1 var obj2=new Person(\'朱棡\',532);//实例化出个对象2 var obj3=new Animals(\'朱棣\',529);//实例化出个对象3 var obj4=new Object(); Person.call(obj4,\'朱允炆\',250); //以对象冒充的方式，实例化出对象4 alert(obj4.run()); alert(obj0.run()); alert(obj1.run()); alert(obj2.run()); alert(obj3.run()); alert(obj0 instanceof Person ); alert(obj1 instanceof Person ); alert(obj2 instanceof Person ); alert(obj3 instanceof Person ); //false 对象和对象创建者 的关系可分辨； // <<-----------构造函数和工厂函数的区别-------->> // 0.无需return object // 1.构造函数没有使用 new Object关键字来实例化对象；（它后台会自动new Object） // 2.this相当于self =对象 // 3.构造函数不需要返回对象（后台自动返回！） // 4.构造函数和普通函数调用的方式不同，构造函数 必须使用new运算符来调用！ // <<-----------构造函数对比工厂函数的优势-------->> // 0.解决了重复实例化的问题 // 1.无需return object // 2.解决了对象和创建对象函数的关系识别问题 // <<-----------------构造函数使用规范---------->> // 0.构造函数也是函数，但是函数名的第1个字母必须大写 // 1.实例化时 使用 new 构造函数名(参数0，参数1 ) var obj0=new Person(\'朱标\',538);
构造函数
原型实现JavaScript面向对象（封装+多态）
构造函数虽然解决了工厂函数无法解决解决的问题，但是无法实现同1构造函数构造出得实例， 共享属性、方法；所以JavaScript要实现真正的面向对象，必须借助原型；
1、构造函数+原型实现JavaScript面向对象
// 原型方法 function Person () {} //构造函数体内什么都没有 Person.prototype.name1=\'A\'; //添加原型属性 Person.prototype.age=18; //添加原型属性 Person.prototype.run=function () { //添加原型方法 return this.name1+this.age+\'运行中！\' }; var obj0=new Person(); //如果是实例属性、方法不同的实例各自的属性、方法都是不一致！(不共享) /* //alert(obj0.__proto__); //__proto__这个属性是1个指针，指向prototype原型对象中共享属性！ //alert(obj0.constructor); // constructor 查看对象的构造函数！ //alert(Person.prototype.isPrototypeOf(obj0) );//判断实例 和原型 是否有指向关系？ */ obj0.age=19; //添加实例属性 alert(obj0.age); //如果调用实例的属性，先去实例属性中查找，然后再去实例的原型属性里查找；（顺序）
JavaScript 构造函数+原型 实现面向对象
obj0.name2=\'C\'; //设置私有属性 alert(obj0.hasOwnProperty(\'C\')); //hasOwnProperty判断实例是否拥有私有属性 ？ alert(\'age\'in obj0 ); //in 判断 实例属性、原型属性中是否存在该属性？
实例 与 原型属性和实例属性的关系判断
obj0.gender1=\'male\'; // 添加实例属性 //delete obj0.gender1; //删除实例属性 delete Person.prototype.name1; //删除原型中共享属性 Person.prototype.name1=\'B\'; //重写覆盖原型中共享属性 alert(obj0.name1);
操作 原型属性（共享属性）和实例属性（实例属性）
2.字面量 + 原型实现JavaScript面向对象
为了让属性和方法更好得封装，JavaScript支持使用字面量的方式实现面向对象；
// <-----------------------------------使用原型字面量的方式 创建原型对象 ---------> function Person() {} //使用字面量的方式，创建对象； Person.prototype={ constructor:Person, nickname:\'牛魔王\', age:1000, run:function () { return this.nickname+this.age+\'运行中！\' } }; /* // 使用字面量方式,重写了原型对象，不会保留原型对象任何数据； Person.prototype={age:1200}; */ var n1= new Person(); alert(n1.run()); alert(n1.constructor)
字面量写法
利用原型对JavaScript 内置数据类型做功能扩展
//利用原型对JavaScript 内置数据类型的功能扩展 alert(String.prototype.format); //查看字符串对象 是否拥有 format方法？ //使用原型 给字符串类，增加format共享方法； String.prototype.format = function () { var args = arguments; return this.replace(/\{(\d+)\}/g, function (s, i) { return args[i]; }); };
内置数据类型的功能扩展
3.原型+构造函数实现面向对象的 缺点
无法动态传参，实现面向对象的多态性；
//原型+构造函数实现面向对象的 缺点 function Person() {} Person.prototype={ constructor:Person, name:\'A\', age:100, run:function () { return this.name+this.age+\'运行中！\' } }; var obj0=new Person(); alert(obj0.run()); var obj1=new Person(); //无法动态传参，实现面向对象 多态性； alert(obj1.run())
原型+构造函数实现面向对象的 缺点
4.组合构造函数+原型模式实现JavaScript面向对象
function Perosn(name,age) { //私有属性和方法使用 构造函数； this.name=name; this.age=age; } Perosn.prototype={ //公共属性和方法 使用原型 constructor:Perosn, env:"earth", run:function () { return this.name + this.age } }; var peron1=new Perosn(\'小明\',18); alert(peron1.env); alert(peron1.name); var peron2=new Perosn(\'小刚\',28); var peron3=new Perosn(\'小虎\',38); alert(peron3.env); alert(peron3.name);
组合构造函数+原型模式实现JavaScript面向对象
5.动态原型模式
更好得把，原型和构造函数封装粘合在一起！
function Person(name, age) { //私有属性和方法使用 构造函数； this.name = name; this.age = age; //原型的初始化，只有初始化1次就可以了，没有必要每次构造对象都要初始化； 公共属性和方法 使用原型 if (typeof this.run != \'function\') { Person.prototype.env = "earth"; Person.prototype.run = function () { return this.name + this.age + \'正在\' + this.env + \'跑步中！\' } } } var p1 = new Person(\'小马\', 18); var p2 = new Person(\'小杨\', 28); alert(p1.run()); alert(p2.run());
最终版！
JavaScript 原型链（实现继承）
// JavaScript 原型链实现继承！ function Biology() { this.cells=function() { return \'细胞\' } } function Animal() { this.breathing=function() { return \'呼吸\' } } function Person() { this.walk=function() { return \'走路\' } } Animal.prototype=new Biology(); //动物继承生物类 Person.prototype=new Animal(); //人类继承了动物类，此时人拥有了 生物类和 动物类的所有特征！ var p1= new Person(); alert(p1.cells()); alert(p1.breathing()); alert(p1.walk());
原型链
由于原型链继承无法动态传参，实现面向对象的多态性， 所以使用 原型链+对象冒充的方式实现继承；
//使用对象冒充 + 原型链 继承 function Animal (username,age) { this.username=username; this.age=age; } Animal.prototype.sex=function () { return this.username+this.age+\'运行中\' }; function Person(name1,age) { Animal.call(this,name1,age) //对象冒充只能继承 私有属性无法 继承公共属性 } Person.prototype=new Animal(); //原型链继承(共享属性和方法 ) var p1= new Person(\'小红\',19); var a1=new Animal(\'小狗\',2); alert(p1.sex()); alert(a1.sex())
原型链+对象冒充