JavaScript入门教程解析

1、2020年7月5日,1,Web基础之一JavaScript基础,刘钰峰,2020年7月5日,2,目标,理解什么是 JavaScript 如何将 JavaScript 嵌入到 HTML 中 理解变量、数据类型和运算符 掌握 if-else 和 switch 语句 掌握函数 掌握内置对象,2020年7月5日,3,什么是JavaScript,脚本程序：嵌入在HTML文件中，提供了和用户进行交互的能力； 常见的脚本语言：VBScript，javascript JavaScript是NetScape公司的产品 提供用户交互 动态更改内容 数据验证,2020年7月5日,4,将JavaScript嵌入网页,

2、可以将 JavaScript 语句插入 HTML 文档，方式 如下： 使用 标签将语句嵌入文档 将 JavaScript 源文件链接到 HTML 文档中 将脚本代码作为HTML标签的属性值,2020年7月5日,5,使用 Script 标签,JavaScript 代码, document.write(欢迎来到 JavaScript 世界); 尽情享受学习的快乐! ,脚本代码,设置语言,2020年7月5日,6,使用外部 JS 文件,外部 JavaScript 文件可以链接到 HTML 文档中 SCRIPT 标签的 SRC（源文件）属性可用于包括此外部文件,2020年7月5日,7,使用外部 JS 文

3、件,JavaScript 代码 (test.htm), 使用外部文件 以上文本是通过访问外部 JavaScript 文件显示的 ,2020年7月5日,8,将脚本代码作为HTML标签的属性值,在href属性中必须指明是javascript 当前时间 在onclick事件属性中可以不用指明是javascript ,把script脚本作为属性值.html,2020年7月5日,9,Javascript的基本格式,区分大小写 以；作为语句结束符号(;可加可不加) 以/或/* */组为注释 Javascript的数据类型： 基本类型：存储在栈 引用类型：是存储在堆中的对象。,2020年7月5日,10,Ja

4、vascript是弱类型的语言,字符串,地址,null,布尔值,数字,undefined,对象,对象,对象,对象,对象,栈,堆,2020年7月5日,11,Javascript的数据类型,2020年7月5日,12,变量,Javascript采用弱类型的变量形式，即在声明时无需指定变量类型，在赋值的时候自动指定； 变量名必须以字母或下划线（_）开头 变量可以包含数字、从 A 至 Z 的大小写字母 JavaScript 区分大小写，即变量 myVar、 myVAR 和 myvar 是不同的变量,2020年7月5日,13,声明变量,var a; “var” 用于声明变量的关键字 “a” 变量名,同时声

5、明和初始化变量 var a= 10;,a = 10;,声明变量,声明多个变量 var x, y, z = 10;,赋值,不声明变量，直接使用 x = 10;,2020年7月5日,14,typeof运算符号,Typeof对变量的运算结果为以下之一： Undefined Boolean Number String Object,typeof(null)结果为object，此为历史遗留的错误。,观察以下alert的结果 var iNum ; alert(typeof(null) ; alert(typeof(iNum) ; iNum = 10 ; alert(typeof(iNum) ; var b

6、Flag = true; alert(typeof(bFlag) ; var aStu = new Array() ; alert(typeof(aStu) ; alert(typeof(hello) ;,2020年7月5日,15,观察以下运行结果,var otemp ; var otemp2 ; alert(typeof(otemp) ; alert(typeof(otemp2) ; alert(otemp=undefined) ; alert(otemp2=undefined) ;/会导致错误，因为没有定义过的变量只有typeof运算符可以使用，其他运算符都会导致错误。,2020年7月5日

7、,16,声明变量, 使用变量 var x; x=prompt(淘宝网竟拍，请出一口价,1) ; document.write(拍卖价格+x+) / +用来连接多个字符串 document.write(恭喜您，您以最高价拍卖成功！); alert(欢迎下次光临！); ,定义变量,赋 值,输 出,prompt(“提示信息”,”默认值”) 将弹出提示对话框，接受用户的输入。点击确定返回输入的字符串，点击取消反馈空字符串。,2020年7月5日,17,变量 a、b 和 c 只能 在其各自的函数中 被访问,变量的作用域,脚本,函数function1 局部变量a,函数function2 局部变量b,函数fu

8、nction3 局部变量c,可由函数 1、函数 2 和函数 3 访问,全局变量 gg,2020年7月5日,18,转义字符,2020年7月5日,19, var x=100; var y; var z; document.write(竞拍SONY数码相机 600万像素 +x+$起价); y=prompt(加多少银子？,1); z=x+y; alert(您最终的出价n+z+$); /”n”用于换行显示 ,Prompt函数返回输入的字符串,“+”号的用法-1,10020 ? bug,200,2020年7月5日,20, var x=100; var y; var z; document.write(竞拍

9、SONY数码相机 600万像素 +x+$起价); y=prompt(加多少银子？,1); z=x+parseFloat( y ); alert(您最终的出价n+z+$); /”n”用于换行显示 ,parseFloat( )函数将字符串转换为float数据 parseInt( )函数将字符串转换为int数据 如果转换失败，返回NaN值(not a number) 使用isNaN(z)判断是否为NULL,“+”号的用法-2,2020年7月5日,21,类型转换转换为字符串,在javascript中数字、字符串和boolean都是伪对象，因此他们都有toString方法。 var sColor = r

10、ed ; alert(sColor.toString() ; var bFound = true ; alert(bFound.toString() ; var iNum1 = 10 ; var iNum2 = 10.6 ; alert(iNum1) ; alert(iNum2) ; alert(iNum1.toString(2) ; alert(iNum1.toString(8) ; alert(iNum1.toString(16) ; alert(iNum2.toString(8) ; alert(iNum2.toString(16) ;,2020年7月5日,22,类型转换转换为数字,pa

11、rseInt和parseFloat：其解析方式为从位置0开始查看直到找到无法解析的字符。,var iNum1 = parseInt(123abc) ; var iNum2 = parseInt(0 xa) ; var iNum3 = parseInt(013) ; var iNum4 = parseInt(blue) ; alert(iNum1) ; alert(iNum2) ; alert(iNum3) ; alert(iNum4) ;,var iNum1 = parseInt(10,2) ; var iNum2 = parseInt(10,8) ; var iNum3 = parseInt

12、(10,16) ; alert(iNum1) ; alert(iNum2) ; alert(iNum3) ;,2020年7月5日,23,强制类型转换,Boolean(value) Number(value) String(value),var b1 = Boolean() ; var b2 = Boolean(hello) ; var b3 = Boolean(100) ; var b4 = Boolean(null) ; var b5 = Boolean(0) ; var b6 = Boolean(new Object() ; alert(b1=+b1) ; alert(b2=+b2) ;

13、alert(b3=+b3) ; alert(b4=+b4) ; alert(b5=+b5) ; alert(b6=+b6) ;,非0、非空串、非空对象为true， 其他false,2020年7月5日,24,强制类型转换,Boolean(value) Number(value) String(value),alert(Number(false)=+Number(false) ; alert(Number(true)=+Number(true) ; alert(Number(undefined)=+Number(undefined) ; alert(Number(null)=+Number(nul

14、l) ; alert(Number(3.6)=+Number(3.6) ; alert(Number(3.3.3)=+Number(3.3.3) ; alert(Number(new Object()=+Number(new Object() ;,Number转换和parseInt，parseFloat转换的不同之处在于Number要求整个值都要有效,2020年7月5日,25,引用类型,Object类 与java中的Object类相似 具体有： constructor，prototype，tostring，valueof等方法 New Object() 等价于 ;,2020年7月5日,26,属

15、性名,属性值,name,“zhangsan”,age,123,getName,function() alert() ; ,从JavaScript的内部实现的角度来看问题，一个JavaScript对象就是属性集的组合。 内部如何组织这些属性集的呢？使用类似于java中的Map,?为什么使用for循环遍历属性的时候，没有找到constructor属性,2020年7月5日,27,引用类型,Boolean：一般不用 Number为基本数字类型的包装类 有用的方法,var oNum = new Number(99) ; alert(oNum.toFixed(2); oNum = new

16、 Number(999) ; alert(oNum.toExponential(2) ; oNum = new Number(9999) ; alert(oNum.toPrecision(6) ;,2020年7月5日,28,运算符,2020年7月5日,29,算术运算符,运算符示例.html,2020年7月5日,30,比较运算符,比较运算符 2-1,2020年7月5日,31,运算符,逻辑运算符,2020年7月5日,32,等号运算符规则,和！在进行运算之前都会进行类型转换，规则如下： 如果一个运算数是Boolean则在检查相等之前先把他转换为数字值。False转换为0，true转换为1 如果一个运

17、算数是字符串，另一个是数字，则在检查相等之前先把字符串转换为数字值。 如果一个运算数是字符串，另一个是对象，则在检查相等之前先把对象调用toString方法转换为字符串。 如果一个运算数是对象，另一个是数字，则在检查相等之前先把对象转换为数字值。 值null和undefined相等 如果两个都是对象，则比较引用值,alert(null = undefined) ; alert(5 = 5) ; alert(false = 0 ) ;,2020年7月5日,33,全等号,在作比较之前，不作类型转换,alert(null = undefined) ; alert(5 = 5) ; alert(fal

18、se = 0 ) ;,2020年7月5日,34,条件语句用于测试条件。,if(条件) JavaScript代码; ,语法：,if 语句,如果要执行多个语句，必须将这些语句放在一对大括号 ( ) 内。但如果只要执行一个语句，则可以省略大括号,2020年7月5日,35, function calcu() var numb1= document.calc.num1.value; var numb2= document.calc.num2.value; if (numb1!=) .其他代码略，同上例,2020年7月5日,36,if else 语句 2-1,if(条件) /JavaScript代码; e

19、lse /JavaScript代码; ,语法：,2020年7月5日,37,switch 语句,switch (表达式) case 常量1 : JavaScript语句; break; case 常量2 : JavaScript语句; break; . default : JavaScript语句; ,语法：,swtich示例.html,2020年7月5日,38,数组,声明数组 var 数组名 = new Array(数组大小); 例： var emp = new Array(3) 添加元素 emp0 = “AA; emp1 = “BB; emp2 = “CC;,emp,也可以声明数组并赋初值：

20、 例： var emp=new Array(“AA”，“BB”，“CC”)；,2020年7月5日,39, 使用数组 var emp = new Array(3); emp0 = Ryan Dias; emp1 = Graham Browne; emp2 = David Greene; document.write(数组emp中的数据为:); document.write(emp0+); document.write(emp1+); document.write(emp2+); ,数组,2020年7月5日,40,数组,常用属性 length ：返回数组中元素的个数 ? 应该是最大下标值+1 常用

21、方法,2020年7月5日,41, var emp = new Array(3); emp0 = Ryan Dias; emp1 = Graham Browne; emp2 = David Greene; emp.sort( ); document.write(“排序结果是：); document.write(emp0+); document.write(emp1+); document.write(emp2+); var x = emp.join() ; document.write(x) ; ,数组排序,2020年7月5日,42,循环,for循环 do-while while,For 循环演

22、示.html,Do-while循环演示.html,2020年7月5日,43,函数,定义函数： function 函数名( 参数1,参数2， ) 语句; 调用函数：函数调用一般和表单元素的事件一起使用，调用格式为：事件名“函数名” ;,function sum ( one, two) var result = one + two; return result; ,表示单击此按钮时，调用函数sum( )执行,2020年7月5日,44,JavaScript 函数,内置函数 eval 函数： 用于计算字符串表达式的值 isNaN 函数：用于验证参数是否为 NaN（非数字）,Eval示例.html,20

23、20年7月5日,45,函数的应用,num1,num2,result,函数.html,2020年7月5日,46,Javascript函数特性无重载,但在javascript中定义两个名字相同的函数不会引发错误。他将会调用后定义的函数。,function doAdd(iNum) alert(iNum + 1000) ; function doAdd(iNum) alert(iNum + 100) ; doAdd(100) ;,2020年7月5日,47,Javascript函数特性利用arguments模拟重载,Javascript不会验证传递给函数的参数的个数是否等于函数定义的参数个数。开发者定义

24、的函数在调用时可以接受任意的参数，不会引发错误。遗漏的参数以undefined传递给函数，多余的参数被忽略，但可以使用arguments数组接受。,function sayHello() if (arguments0 = exit) return ; alert(arguments0) ; sayHello() ; sayHello(zhangsan) ; sayHello(exit) ;,2020年7月5日,48,Javascript函数特性利用arguments模拟重载,function doAdd() if (arguments.length = 1) alert(arguments0)

25、 ; else if (arguments.length = 2 ) alert(arguments0 + arguments1) ; doAdd(30) ; doAdd(30,30) ;,2020年7月5日,49,Function类,Var function_name = new Function(arg1,arg2,argN,function_body) ; 例： var sayHello = new Function(sName,alert(Hello + sName ) ; sayHello(zhangsan) ;,2020年7月5日,50,借助Function来理解函数,var do

26、Add = new Function(iNum,alert(iNum + 100) ; doAdd = new Function(iNum,alert(hello + iNum) ; doAdd(1) ; 由以上可见，函数名只是指向函数对象的一个引用值，同样的，我们也可以使用不同的变量指向同一个函数。,2020年7月5日,51,借助Function来理解函数,var doAdd = new Function(iNum,alert(iNum + 100) ; doAdd = new Function(iNum,alert(hello + iNum) ; var otherAdd = doAdd

27、; doAdd(1) ; otherAdd(9) ;,2020年7月5日,52,把函数作为参数传给其他函数,var sayHello = new Function(sName,sMessage,alert(Hello + sName +, +sMessage) ; function callOtherFunc(fnCall,vArg1,vArg2) fnCall(vArg1,vArg2) ; callOtherFunc(sayHello,“zhangsan ”,“ good”) ; alert(callOtherFunc.toString() ;,2020年7月5日,53,函数：指针,func

28、tion myFunction() alert(Old);myFunction(); / 输出 OldmyFunction=function() alert(New);myFunction(); / 输出 New,可见，函数的名字相当于一个指针,2020年7月5日,54,函数：指针,function myFunction() alert(Old);var savedFuncion=myFunction;myFunction=function() alert(New);myFunction(); / 输出 NewsavedFuncion(); / 输出 Old,2020年7月5日,55,基于对象

29、的Javascript,JavaScript中的对象是由属性(properties)和方法(methods)两种基本的元素的构成的。前者是对象在实施其所需要行为的过程中，实现信息的装载单位，从而与变量相关联；后者是指对象能够按照设计者的意图而被执行，从而与特定的函数相联。 对象要真正地被使用，可采用以下几种方式获得： 引用JavaScript内部对象； 由浏览器环境中提供； 创建新对象。,2020年7月5日,56,Javascript的内部对象,Object、Array、Function、String、Boolean、Number、Date、RegExp、Math、Global、Error、E

30、valError、RangeError、ReferenceError、SyntaxError、TypeError、URIError,2020年7月5日,57,对象操作语句for.in,格式如下： For（属性名 in 已知对象名） 优点：无需知道对象中属性的个数即可进行操作。 例：,Function showData(object) for (var X=0; X30;X+) document.write(objecti)； ,Function showData(object) for (var x in object) document.write(objecti)； ,2020年7月5日,

31、58,对象操作语句 with语句,在该语句体内，任何对变量的引用被认为是这个对象的属性，以节省一些代码。 with (object) . 所有在with语句后的花括号中的语句，都是在后面object对象的作用域的。 with (o) name = 李四 ; age = 100 ; height = 12.3 ; ,2020年7月5日,59,再论数组,/定义方法1 var aColors = new Array() ; aColors0 = red ; aColors1 = green ; aColors2 = blue ; for (var x in aColors) alert(aColor

32、sx) ; /定义方法2 var aColors2 = new Array(red,green,blue) ; /定义方法3 var aColors3 = red,green,blue ;,2020年7月5日,60,再论数组,数组的大小是动态变化的 var aColors3 = red,green,blue ; aColors6 = gray ; for (var x = 0 ; x aColors.length ; x+) alert(aColorsx) ; for (var x in aColors) alert(aColorsx) ; ,2020年7月5日,61,再论数组,数组的toSt

33、ring方法和valueOf方法 var aColors3 = red,green,blue ; aColors10 = gray ; alert(aColors.toString() ; 字符串和数组之间的转换：split var aColors3 = red,green,blue ; var sString = aColors.toString() ; alert(sString) ; var aColors4 = sString.split(,) ; for (var i = 0 ; i aColors4.length ; i+ ) alert(aColors4i) ; ,2020年7月

34、5日,62,再论数组,Javascript中，可以把数组看成是一个栈 var aColors = new Array() ; aColors.push(red) ; aColors.push(green) ; aColors.push(blue) ; for (var i = 0 ; i aColors.length ; i+ ) alert(aColorsi) ; var sColor = aColors.pop() ; alert(sColor:+sColor) ;,2020年7月5日,63,再论数组,结合shift()和unshift()，以及push和pop，可以把数组看成是一个队列

35、Shift：删除数组中的第一个元素 Unshift：把一个元素放在数组的第一个位置 var queue = red,green,blue ; queue.push(white) ; alert(queue.toString() ; queue.shift() ; alert(queue.toString() ; queue.unshift(yellow) ; alert(queue.toString() ; queue.sort() ; alert(queue.toString() ; queue.reverse() ; alert(queue.toString() ;,2020年7月5日,6

36、4,String 对象,创建字符串有两种不同方法 ： 使用 var 语句 var newstr = “这是我的字符串 创建 String 对象 var newstr = new String (“这是我的字符串),2020年7月5日,65,String 对象,语法： indexOf(“查找的子字符串”，查找的起始位置) 返回子字符串所在的位置，如果没找到，返回 1 例如： var x var y=“abcdefg”; x=y.indexOf(“c” , 0 ); /返回结果为2，起始位置是0,2020年7月5日,66, function checkEmail( ) var e=document

37、.myform.email.value; if (e.length=0) /检测长度是否为0，即是否为空 alert(电子邮件不能为空!); return ; if (e.indexOf(,0)=-1) /检测是否包含”符号 alert(电子邮件格式不正确n必须包含符号！); return ; if (e.indexOf(.,0)=-1) /检测是否包含”.”符号 alert(电子邮件格式不正确n必须包含.符号！); return ; document.write(恭喜您！，注册成功！); ,检查电子邮件email 是否包含“”和”.”,String 对象,返回结果-1表示没找到“”字符,字符

38、串对象.htm,2020年7月5日,67,Math 对象,Math.random( ) ：产生01的随机小数 Math.round( )：四舍五入取整，如9.34 取整为9,2020年7月5日,68, 自动刷新 document.write(2秒自动刷新，随机显示图片); var i=0; i=Math.round(Math.random( )*8+1); document.write(); ,Math 对象,假定随机产生的数字i=3，上述代码即为： 显示第三幅图片（3.jpg）,如何实现,每隔2秒刷新网页,Math.round(Math.random( )*8+1) 产生1-9的数字,202

39、0年7月5日,69,Date 对象,Date 对象存储的日期为自 1970 年 1 月 1 日 00:00:00 以来的毫秒数,var 日期对象 = new Date (年、月、日等参数),例： var mydate=new Date( “July 29, 1998,10:30:00 ”) 如果没有参数，表示当前日期和时间 例： var today = new Date( ),2020年7月5日,70,Date 对象,Data 方法的分组：,2020年7月5日,71,Date 对象,用作 Date 方法的参数的整数：,2020年7月5日,72,Date 对象,Set 方法：,2020年7月5日

40、,73,Date 对象,Get 方法：,2020年7月5日,74,Date 对象,To 方法：,Parse 方法和 UTC 方法,2020年7月5日,75, var now= new Date( ); var hour = now.getHours( ); if (hour=0 ,Date对象,获得当前日期和时间,获得小时，即当前是几点,判断上午、下午还是晚上,月份数字011，注意1,日期对象 1.htm,2020年7月5日,76,Date对象,setTimeout的用法： setTimeout（“调用的函数”,”定时的时间”） 例： var myTimesetTimeout（”disptim

41、e( )”,1000）; clearTimeout（myTime）;,本例的时间可以采用定时显示，使用定时器函数，每隔1秒调用disptime( )函数显示时间,每隔1000毫秒调用函数disptime( )执行,关闭定时器,2020年7月5日,77,Date 对象10-8,var myTime = setTimeout(disptime( ),1000); 设置定时器每隔1秒（1000毫秒），调用函数disptime( )执行，刷新时钟显示,2020年7月5日,78,Date对象, ,设置样式：无边框的文本框,Onload ( ) 事件，页面加载就调用函数：disptime （显示时间）,2

42、020年7月5日,79,Date,var dDate = new Date() ; alert(dDate.toString() ; alert(dDate.toDateString() ; alert(dDate.toLocaleDateString() ; alert(dDate.toLocaleTimeString() ; dDate = new Date(2007,7,7) ;,2020年7月5日,80,this,this这个词在function中有特别的意义。它指向了调用函数的那个对象。 var oCar = new Object() ; oCar.color = red ; oCa

43、r.showColor = function () alert(this.color) ; ; oCar.showColor() ;,2020年7月5日,81,function showColor() alert(this.color) ; ; var oCar1 = new Object() ; oCar1.color = red ; oCar1.showColor = showColor ; var oCar2 = new Object() ; oCar2.color = blue ; oCar2.showColor = showColor ; oCar1.showColor() ; oC

44、ar2.showColor() ;,this这个词在function中有特别的意义。它指向了调用函数的那个对象。,2020年7月5日,82,this关键字,function Employee(name, salary, mySupervisor) =name; this.salary=salary; this.supervisor=mySupervisor;var boss=new Employee(John, 200); var manager=new Employee(Joan, 50, boss); var teamLeader=new Employee(Rose, 5

45、0, boss); alert(+ is the supervisor of +);alert(+s supervisor is +);,2020年7月5日,83,定义类或对象的方法工厂方法,前提：对象的属性可以在对象对象创建后动态定义。,var oCar = new Object() ; oCar.color = red ; oCar.doors = 4 ; oCar.mpg = 20 ; oCar.showColor = function () ale

46、rt(this.color) ; ; oCar.showColor(oCar) ;,function createCar() var oCar = new Object() ; oCar.color = red ; oCar.doors = 4 ; oCar.mpg = 20 ; oCar.showColor = function () alert(this.color) ; ; return oCar ; var oCar = createCar() ; oCar.showColor() ;,2020年7月5日,84,function createCar(sColor,iDoors,iMpg

47、) var oCar = new Object() ; oCar.color = sColor ; oCar.doors = iDoors ; oCar.mpg = iMpg ; oCar.showColor = function () alert(this.color) ; ; return oCar ; var oCar = createCar(black,5,30) ; oCar.showColor() ;,function showColor() alert(this.color) ; function createCar(sColor,iDoors,iMpg) var oCar =

48、new Object() ; oCar.color = sColor ; oCar.doors = iDoors ; oCar.mpg = iMpg ; oCar.showColor = showColor ; return oCar ; var oCar = createCar(yellow,3,6) ; oCar.showColor() ;,2020年7月5日,85,函数示例6.html,函数示例7.html,2020年7月5日,86,定义类或对象的方法构造函数方式,function Car(sColor,iDoors,iMpg) this.color = sColor ; this.do

49、ors = iDoors ; this.mpg = iMpg ; this.showColor = function () alert(this.color) ; ; var oCar1 = new Car(red,5,6) ; var oCar2 = new Car(blue,8,9) ; oCar1.showColor() ; oCar2.showColor() ; alert(typeof Car) ; alert(typeof new Car() ;,当这个函数创建的时候有一个同名的对象也被创建。,2020年7月5日,87,函数：原型,function Fish(name, color

50、) =name; this.color=color;Ftotype.livesIn=water;Ftotype.price=20;,var fish1=new Fish(mackarel, gray);var fish2=new Fish(goldfish, orange);var fish3=new Fish(salmon, white);,for (var i=1; i=3; i+) var fish=eval(fish+i); / 只是取得指向这条鱼的指针 alert(+,+fish.color+,+fish.livesIn

51、+,+fish.price);,输出：mackarel, gray, water, 20goldfish, orange, water, 20salmon, white water, 20,当一个对象被创建时，这个构造函数将会把它的属性prototype赋给新对象的内部属性_proto_。这个_proto_被这个对象用来查找它的属性。,2020年7月5日,88,用prototype给对象添加函数,function Employee(name, salary) =name; this.salary=salary;Etotype.getSalary=func

52、tion getSalaryFunction() return this.salary; Etotype.addSalary=function addSalaryFunction(addition) this.salary=this.salary+addition;,2020年7月5日,89,用prototype给对象添加函数,var boss1=new Employee(Joan, 200000); var boss2=new Employee(Kim, 100000); var boss3=new Employee(Sam, 150000); 输出： alert(bo

53、ss1.getSalary(); / 输出 200000 alert(boss2.getSalary(); / 输出 100000 alert(boss3.getSalary(); / 输出 150000,2020年7月5日,90,定义类或对象的方法原型方式,function Car(sName) C = sName ; Ctotype.showName = function () alert() ; var oCar = new Car(benz) ; oCar.showName() ; var yourCar = new Ca

54、r(haha) ; yourCar.showName() ; oCar.showName() ; /输出”haha”,每一个构造函数都有一个属性叫做原型(prototype)。这个属性非常有用：为一个特定类声明通用的变量或者函数。,原型方式的缺点： 1、无法参数化的构造对象； 2、修改一个引用属性会影响另一个对象,2020年7月5日,91,定义类或对象的方法原型方式,function Car() ; Ctotype.color = red ; Ctotype.doors = 4 ; Ctotype.mpg = 23 ; Ctotype.drive

55、rs = new Array(mike,tom) ; Ctotype.showColor = function () alert(this.color) ; var oCar1 = new Car() ; var oCar2 = new Car() ; oCar1.showColor() ; oCar2.showColor() ; alert(oCar2.drivers) ; oCar1.drivers.push(jim) ; /改变oCar1.drivers,结果确把oCar2也改变了 alert(oCar2.drivers) ;,每一个构造函数都有一个属性叫做原型(protot

56、ype)。这个属性非常有用：为一个特定类声明通用的变量或者函数。,原型方式的缺点： 1、无法参数化的构造对象； 2、修改一个引用属性会影响另一个对象,2020年7月5日,92,定义类或对象的方法混合构造函数和原型方式,function Car(sColor,iDoors,iMpg,aDrivers) this.color = sColor ; this.doors = iDoors ; this.mpg = iMpg ; this.drivers = aDrivers ; ; Ctotype.showColor = function () alert(this.color) ; v

57、ar oCar1 = new Car(red,5,3,new Array(Tom,Jack) ; var oCar2 = new Car(blue,5,3,new Array(Mike,Jim) ; oCar1.showColor() ; oCar2.showColor() ; alert(oCar2.drivers) ; oCar1.drivers.push(Jim) ; alert(oCar2.drivers) ;,构造函数的方式定义属性； 用原型方式定义方法； 推荐使用！,2020年7月5日,93,定义类或对象的方法动态原型方式,function Car(sColor,iDoors,iM

58、pg,aDrivers) this.color = sColor ; this.doors = iDoors ; this.mpg = iMpg ; this.drivers = aDrivers ; if (typeof Car._initialized = undefined) Ctotype.showColor = function () alert(this.color) ; Car._initialized = true ; ; var oCar1 = new Car(red,5,3,new Array(Tom,Jack) ; var oCar2 = new Car(bl

59、ue,5,3,new Array(Mike,Jim) ; oCar1.showColor() ; oCar2.showColor() ; alert(oCar2.drivers) ; oCar1.drivers.push(Jim) ; alert(oCar2.drivers) ;,2020年7月5日,94,进一步认识prototype,问题：资源耗费太大 var str = hello ; str += world ; 因此：优点是资源耗费较小，但是语义不够清楚。 var arr = new Array() ; arr0 = hello ; arr1 = world ; var str1 = arr.join() ; alert(str1) ;,2020年7月