一、JavaScript事件详解
1、事件流:描述的是在页面中结束事件的顺序
事件传递有两种方式:冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中,用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢?
在 冒泡 中,内部元素的事件会先被触发,然后再触发外部元素,即: <p> 元素的点击事件先触发,然后会触发 <div> 元素的点击事件。
在 捕获 中,外部元素的事件会先被触发,然后才会触发内部元素的事件,即: <div> 元素的点击事件先触发 ,然后再触发 <p> 元素的点击事件。
2、事件的处理:
①HTML事件处理:直接添加到HTML结构中
<body> <div id="div"> <button id="btn" onclick="demo()">按钮</button> </div> <script> function demo() { alert("Hello html事件处理"); } </script> </body>
②DOMO级事件处理:把一个函数赋值给一个事件处理程序属性
<body> <div id="div"> <button id="btn1">按钮</button> </div> <script> var btn1 = document.getElementById("btn1"); btn1.onclick = function(){alert("Hello DOMO事件出现程序1")}//设置事件处理 btn1.onclick = function(){alert("Hello DOMO事件出现程序2")}//前一个被覆盖 btn1.onclich = null;//移除事件处理 </script> </body>
③DOM2级事件处理:
addEventListener("事件名","事件处理函数","布尔值");
true:事件捕获
false:事件冒泡<body>
<div id="div"> <button id="btn1">按钮</button> </div> <script> var btn1 = document.getElementById("btn1"); btn1.addEventListener("click",demo1);//不会被覆盖,依次执行 btn1.addEventListener("click",demo2); function demo1(){ alert("Hello DOM2级事件出现程序1") } function demo2(){ alert("Hello DOM2级事件出现程序2") } btn1.removeEventListener("click",demo2);//移除事件2
</script> </body>
removeEventListener();
④IE事件处理程序
attachEvent
datachEvent
1 <body> 2 <div id="div"> 3 <button id="btn1">按钮</button> 4 </div> 5 <script> 6 var btn1 = document.getElementById("btn1"); 7 if(btn1.addEventListener){ 8 btn1.addEventListener("click",demo); 9 }else if(btn1.attachEvent){ 10 btn1.attachEvent("onclick",demo); 11 }else{ 12 btn1.onclick = demo(); 13 } 14 function demo(){ 15 alert("Hello DOM2级事件出现程序2") 16 } 17 </script> 18 </body>
3、事件对象:在触发DOM事件的时候都会产生一个对象
①事件对象event:
- type:获取事件类型
- target:获取事件目标
-
1 <body> 2 <div id="div"> 3 <button id="btn1">按钮</button> 4 </div> 5 <script> 6 var btn1 = document.getElementById("btn1"); 7 btn1.addEventListener("click",show); 8 function show(event) { 9 alert(event.type);//获取对象类型,如click 10 alert(event.target);//获取事件目标,如[object HTMLButtonElement] 11 } 12 </script> 13 </body>
- stopPropagation():阻止事件冒泡
- preventDefault():阻止事件默认行为
-
1 <body> 2 <div id="div"> 3 <button id="btn1">按钮</button> 4 <a id="aid" href="http://www.hao123.com">好123</a> 5 </div> 6 <script> 7 document.getElementById("btn1").addEventListener("click",showTarget); 8 document.getElementById("div").addEventListener("click",showDiv); 9 document.getElementById("aid").addEventListener("click",showA); 10 function showTarget(event) { 11 alert(event.target); 12 event.stopPropagation();//阻止事件冒泡,即点击按钮时,阻止事件传递到div(阻止触发div) 13 } 14 function showDiv() { 15 alert("div") 16 } 17 function showA(event) { 18 event.stopPropagation();//跳转,但阻止向上传递(阻止触发div) 19 event.preventDefault();//阻止事件默认行为,如点击链接时跳转 20 } 21 </script> 22 </body>
二、JavaScript内置对象
1、对象
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...
每个对象带有属性和方法的特殊数据类型。
JavaScript 允许自定义对象
2、创建 JavaScript 对象
通过 JavaScript,您能够定义并创建自己的对象。
创建新对象有两种不同的方法:
- 定义并创建对象的实例
- 使用函数来定义对象,然后创建新的对象实例
-
<body> <!--创建对象--> <script> // 创建对象方式一 // people = new Object(); // people.name = "lilei"; // people.age = "15"; // people ={name:"lilei",age:"15"};//上三行可合并写此方式 // document.write("name:"+people.name+" age:"+people.age); // 创建对象方式二 function people(name,age) { this.name=name;//this 指明对象 this.age = age; } son = new people("lilei",15); document.write("name:"+son.name+"age:"+son.age); </script> </body>
3、String字符串对象
字符串可以存储一系列字符,如 "John Doe"。
字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号;
①字符串属性
属性 |
描述 |
---|---|
constructor | 返回创建字符串属性的函数 |
length | 返回字符串的长度 |
prototype | 允许您向对象添加属性和方法 |
②字符串常见方法
方法 | 描述 |
indexOf() | 返回字符串中检索指定字符第一次出现的位置 |
lastIndexOf() | 返回字符串中检索指定字符最后一次出现的位置 |
match() | 找到一个或多个正则表达式的匹配 |
replace() | 替换与正则表达式匹配的子串 |
toUpperCase() | 把字符串转换为大写 |
toLowerCase() | 把字符串转换为小写 |
split() | 把字符串分割为子字符串数组 |
charAt() | 返回指定索引位置的字符 |
charCodeAt() | 返回指定索引位置字符的 Unicode 值 |
concat() | 连接两个或多个字符串,返回连接后的字符串 |
fromCharCode() | 将 Unicode 转换为字符串 |
localeCompare() | 用本地特定的顺序来比较两个字符串 |
search() | 检索与正则表达式相匹配的值 |
slice() | 提取字符串的片断,并在新的字符串中返回被提取的部分 |
substr() | 从起始索引号提取字符串中指定数目的字符 |
substring() | 提取字符串中两个指定的索引号之间的字符 |
toString() | 返回字符串对象值 |
trim() | 移除字符串首尾空白 |
valueOf() | 返回某个字符串对象的原始值 |
4、Date 对象
Date 对象用于处理日期与实际。
①Date 对象属性
属性 |
描述 |
---|---|
constructor | 返回对创建此对象的 Date 函数的引用。 |
prototype | 使您有能力向对象添加属性和方法。 |
②常用方法:
-
- Date() :获得当前的时间。
- getFullYear():使用 getFullYear() 获取年份。
- getTime():getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
- setFullYear():如何使用 setFullYear() 设置具体的日期。
- toUTCString():如何使用 toUTCString() 将当日的日期(根据 UTC)转换为字符串。
- getDay():如何使用 getDay() 和数组来显示星期,而不仅仅是数字。
- Display a clock:如何在网页上显示一个钟表。
-
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鸟教程(runoob.com)</title> 6 <script> 7 function startTime(){ 8 var today=new Date(); 9 var h=today.getHours(); 10 var m=today.getMinutes(); 11 var s=today.getSeconds();// 在小于10的数字前加一个‘0’ 12 m=checkTime(m); 13 s=checkTime(s); document.getElementById(‘txt‘).innerHTML=h+":"+m+":"+s; 14 t=setTimeout(function(){startTime()},500); 15 } 16 function checkTime(i){ 17 if (i<10){ 18 i="0" + i; 19 } 20 return i; 21 } 22 </script> 23 </head> 24 <body > 25 <div id="txt"></div> 26 </body> 27 </html>
5、 Array(数组) 对象
数组对象是使用单独的变量名来存储一系列的值。
①创建数组方法:
- 常规方式:
var myCars=new Array(); myCars[0]="Saab"; myCars[1]="Volvo"; myCars[2]="BMW";
- 简洁方式:var myCars=new Array("Saab","Volvo","BMW");
- 字面:var myCars=["Saab","Volvo","BMW"];
②数组的属性
属性 | 描述 |
---|---|
constructor | 返回创建数组对象的原型函数。 |
length | 设置或返回数组元素的个数。 |
prototype | 允许你向数组对象添加属性或方法。 |
③常用方法
方法 | 描述 |
concat() | 连接两个或更多的数组,并返回结果。 |
sort() | 对数组的元素进行排序。 |
push() | 向数组的末尾添加一个或更多元素,并返回新的长度。 |
reverse() | 反转数组的元素顺序。 |
//升序排列 var points = [40,100,1,5,25,10]; points.sort(function(a,b){return a-b}); //降序排列 var points = [40,100,1,5,25,10]; points.sort(function(a,b){return b-a});
6、Math对象
Math 对象用于执行数学任务。
使用Math的属性/方法的语法:
var x=Math.PI;
var y=Math.sqrt(16);
round():如何使用 round()。
random():使用 random() 来返回 0 到 1 之间的随机数。使用parstInt(Math.random()*10)产生0-10间的随机整数。
max(): max() 来返回两个给定的数中的较大的数。
min():使用 min() 来返回两个给定的数中的较小的数。
三、JavaScript DOM对象控制HTML元素详解
在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。
1、常用方法:
方法 | 描述 |
getElementById() | 返回带有指定 ID 的元素。 |
getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。 |
getElementsByName() | 返回包含带有指定name名称的所有元素的节点列表(集合/节点数组)。 |
getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
appendChild() | 把新的子节点添加到指定节点。 |
childNodes() | 访问子节点 |
parentNode() | 访问父节点 |
removeChild() | 删除子节点。 |
replaceChild() | 替换子节点。 |
insertBefore() | 在指定的子节点前面插入新的子节点。 |
createAttribute() | 创建属性节点。 |
createElement() | 创建元素节点。 |
createTextNode() | 创建文本节点。 |
getAttribute() | 返回指定的属性值。 |
setAttribute() | 把指定属性设置或修改为指定的值。 |
offsetHeight | 返回,任何一个元素的高度包括边框和填充,但不是边距 |
scrollHeight | 返回整个元素的高度(包括带滚动条的隐蔽的地方) |
示例:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <p name="pn">Hello</p> 9 <p name="pn">Hello</p> 10 <p name="pn">Hello</p> 11 <p name="pn">Hello</p> 12 <a id="aid" title="得到了a标签的属性"></a> 13 <a id="aid2"></a> 14 <ul><li>1</li><li>2</li><li>3</li></ul> 15 <div id="div"> 16 <p id="pid">div的p元素</p> 17 </div> 18 <script> 19 //获取元素 20 function getName() { 21 var count = document.getElementsByName("pn");//以name方式获取获取该类集合 22 //var count = document.getElementsByTagName("p");//以元素名获取集合 23 alert(count.length); 24 var p = count[2]; 25 p.innerHTML = "World"; 26 } 27 //获取节点属性 28 function getAttr() { 29 var anode = document.getElementById("aid"); 30 var attr = anode.getAttribute("title"); 31 alert(attr); 32 } 33 //设置节点属性 34 function setAttr() { 35 var anode = document.getElementById("aid2"); 36 anode.setAttribute("title","动态标签title属性"); 37 var attr = anode.getAttribute("title"); 38 alert(attr); 39 } 40 //获取子节点 41 function getChildNode() { 42 var childnode = document.getElementsByTagName("ul")[0].childNodes; 43 alert(childnode.length); 44 alert(childnode[0].nodeType); 45 } 46 //获取父节点 47 function getParentNode() { 48 var div = document.getElementById("pid"); 49 alert(div.parentNode.nodeName); 50 } 51 //创建节点 52 function createNode() { 53 var body = document.body; 54 var input = document.createElement("input"); 55 input.type="button"; 56 input.value="按钮"; 57 body.appendChild(input);//添加节点到body末尾 58 } 59 //指定位置添加节点 60 function addNode() { 61 var div = document.getElementById("div"); 62 var node = document.getElementById("pid"); 63 var newnode = document.createElement("p"); 64 newnode.innerHTML = "动态添加一个p元素"; 65 div.insertBefore(newnode,node); 66 } 67 //删除节点 68 function removeNode() { 69 var div = document.getElementById("div"); 70 var p = div.removeChild(div.childNodes[1]); 71 } 72 //获取页面尺寸 73 function getSize() { 74 var width = document.body.offsetWidth || document.documentElement.offsetWidth; 75 //前半句兼容性较好 76 var height = document.documentElement.offsetHeight; 77 alert(width+","+height); 78 } 79 getSize(); 80 </script> 81 </body> 82 </html>
四、JavaScript浏览器对象
1、window对象
①window对象
-
- 所有浏览器都支持 window 对象。它表示浏览器窗口。
- 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
- 全局变量是 window 对象的属性。
- 全局函数是 window 对象的方法。
- 甚至 HTML DOM 的 document 也是 window 对象的属性之一
②Window 尺寸
有三种方法能够确定浏览器窗口的尺寸。
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
-
- window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
- window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
对于 Internet Explorer 8、7、6、5:
-
- document.documentElement.clientHeight
- document.documentElement.clientWidth
或者
-
- document.body.clientHeight
- document.body.clientWidth
③其他 Window 方法
-
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
- window.moveTo() - 移动当前窗口
- window.resizeTo() - 调整当前窗口的尺寸
示例:
1 <body> 2 <button id="btn" onclick="btnClicked()">按钮</button> 3 <script> 4 //打印窗口的高度和宽度 5 // document.write("宽度:"+window.innerWidth+",高度:"+window.innerHeight); 6 function btnClicked() { 7 //打开一个新的窗口(第二、三个参数为可选项),并可设置窗口属性,第三个参数可根据需要设置新窗口的一些属性 8 //window.open("obindex.html","windowname","height = 200,width=200,top=100,left=100"); 9 //关闭窗口 10 window.close(); 11 } 12 </script> 13 </body>
2、JavaScript 计时事件
①计时事件
通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
②计时方法
-
- setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
window.setInterval("javascript function",milliseconds);
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
window.clearInterval(intervalVariable)
1 <body> 2 <button id="btn" onclick="stopTime()">按钮</button> 3 <p id="ptime"></p> 4 <script> 5 var mytime = setInterval(function () { 6 getTime(); 7 },1000); 8 function getTime() { 9 var d = new Date(); 10 var t = d.toLocaleTimeString(); 11 document.getElementById("ptime").innerHTML=t; 12 } 13 function stopTime() { 14 //停止执行 15 clearInterval(mytime); 16 } 17 </script> 18 </body>
-
- setTimeout() - 暂停指定的毫秒数后执行指定的代码
window.setTimeout("javascript 函数",毫秒数);
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
window.clearTimeout(timeoutVariable)
1 <body > 2 <button id="btn" onclick="stopWin()">按钮</button> 3 <script> 4 var win; 5 function myWin(){ 6 alert("hello") 7 //延迟3秒弹出,自调自,形成死循环 8 win = setTimeout(function(){myWin()},3000); 9 } 10 //停止执行 11 function stopWin() { 12 clearTimeout(win); 13 } 14 </script> 15 </body>
Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法,调用时可直接写该方法,省略window
3、History对象
①History对象
window.history 对象包含浏览器的历史(url)的集合。
②History方法:
- history.back() - 与在浏览器点击后退按钮相同,加载历史列表中的前一个 URL。
-
1 <html> 2 <head> 3 <script> 4 function goBack(){ 5 window.history.back() 6 } 7 </script> 8 </head> 9 <body> 10 <input type="button" value="Back" onclick="goBack()"> 11 </body> 12 </html>
- history.forward() - 与在浏览器中点击按钮向前相同
- history.go() - 进入历史中的某个页面
-
模拟跳转到登录界面再返回原先界面 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <a href="obindex.html">跳转</a> 9 </body> 10 </html>
//obindex.html 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script> 7 function safe() { 8 var name = document.getElementById("username").value; 9 if (name=="hello"){ 10 // 跳转到前一个页面 11 history.go(-1); 12 }else{ 13 alert("输入错误"); 14 } 15 } 16 </script> 17 </head> 18 <body> 19 <form> 20 <input type="text" id="username"> 21 <button id="btn" onclick="safe()">按钮</button> 22 </form> 23 </body> 24 </html>
4、JavaScript Window Location
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
Location对象的属性:
-
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 (80 或 443)
- location.protocol 返回所使用的 web 协议(http:// 或 https://)
- location.href 属性返回当前页面的 URL。
- location.assign() 方法加载新的文档。
<script> document.write(location.pathname); </script>
window.location.assign("http://www.w3cschool.cc")
5、JavaScript Window Screen
window.screen 对象包含有关用户屏幕的信息。
一些属性:
- screen.availWidth - 可用的屏幕宽度
-
<script> document.write("可用宽度: " + screen.availWidth); </script>
- screen.availHeight - 可用的屏幕高度
- screen.width-屏幕宽度
- screen.height -屏幕高度
五、面向对象
- 一切事物皆对象
- 对象具有封装和继承特性
- 对象与对象之间使用消息通信,各自存在信息隐藏
1、对象的创建
①创建一个没有任何属性的对象:
var obj = {};
②创建一个对象并设置属性及初始值:
var person = {name:"Angel",age:18,married:false};
③创建一个对象并设置属性和方法:
var speaker = {text:"Hello World",say:function(){aler(this.text)}};
④创建一个复杂的对象,嵌套其他对象和对象数组等:
var company ={ name: "Microsoft", product: "softwares", chairman: {name: "Bill Gates", age: 53, Married: true}, employees: [{name: "Angel", age: 26, Married: false}, {name: "Hanson", age: 32, Marred: true}], readme: function() {document.write(this.name + " product " + this.product);} };
2、对象的另外一种创建方法(函数构造器)
使用new操作符结合一个函数的形式来创建对象。
function MyFunc() {}; //定义一个空函数 var anObj = new MyFunc(); //使用new操作符,借助MyFun函数,就创建了一个对象
上述创建方法等价于:
function MyFunc(){}; var anObj = {}; //创建一个对象 MyFunc.call(anObj); //将anObj对象作为this指针调用MyFunc函数
继承的体现:
1 function Person(name) { //带参数的构造函数 2 this.name = name; //将参数值赋给给this对象的属性 3 this.SayHello = function() {alert("Hello, I‘m " + this.name);}; //给this对象定义一个SayHello方法。 4 }; 5 6 function Employee(name, salary){ //子构造函数 7 Person.call(this, name); //将this传给父构造函数 8 this.salary = salary; //设置一个this的salary属性 9 this.ShowMeTheMoney = function() {alert(this.name + " $" + this.salary);}; //添加ShowMeTheMoney方法。 10 }; 11 12 var BillGates = new Person("Bill Gates"); //用Person构造函数创建BillGates对象 13 var SteveJobs = new Employee("Steve Jobs", 1234); //用Empolyee构造函数创建SteveJobs对象 14 15 BillGates.SayHello(); //显示:I‘m Bill Gates 16 SteveJobs.SayHello(); //显示:I‘m Steve Jobs 17 SteveJobs.ShowMeTheMoney(); //显示:Steve Jobs $1234 18 19 alert(BillGates.constructor == Person); //显示:true 20 alert(SteveJobs.constructor == Employee); //显示:true 21 22 alert(BillGates.SayHello == SteveJobs.SayHello); //显示:false
这段代码表明,函数不但可以当作构造函数,而且还可以带参数,还可以为对象添加成员和方法。其中的第9行,Employee构造函数又将自己接收的 this作为参数调用Person构造函数,这就是相当于调用基类的构造函数。第21、22行还表明这样一个意思:BillGates是由Person构造的,而SteveJobs是由Employee构造的。对象内置的constructor属性还指明了构造对象所用的具体函数!
3、原型
① JavaScript的所有function类型的对象都有一个prototype属性。这个prototype属性本身又是一个object类型的对 象,因此我们也可以给这个prototype对象添加任意的属性和方法。既然prototype是对象的“原型”,那么由该函数构造出来的对象应该都会具 有这个“原型”的特性。事实上,在构造函数的prototype上定义的所有属性和方法,都是可以通过其构造的对象直接访问和调用的。也可以这么 说,prototype提供了一群同类对象共享属性和方法的机制。(类似于Java 中的继承)
function Person(name){ this.name = name; //设置对象属性,每个对象各自一份属性数据 }; Person.prototype.SayHello = function(){ //给Person函数的prototype添加SayHello方法。 alert("Hello, I‘m " + this.name); } var BillGates = new Person("Bill Gates"); //创建BillGates对象 var SteveJobs = new Person("Steve Jobs"); //创建SteveJobs对象 BillGates.SayHello(); //通过BillGates对象直接调用到SayHello方法 SteveJobs.SayHello(); //通过SteveJobs对象直接调用到SayHello方法 alert(BillGates.SayHello == SteveJobs.SayHello); //因为两个对象是共享prototype的SayHello,所以显示:true
程序运行的结果表明,构造函数的prototype上定义的方法确实可以通过对象直接调用到,而且代码是共享的。
②用这简单的掩盖机制实现了对象的“多态”性(类似于Java中的overrid):
function Person(name){ this.name = name; }; Person.prototype.company = "Microsoft"; //原型的属性 Person.prototype.SayHello = function(){ //原型的方法 alert("Hello, I‘m " + this.name + " of " + this.company); }; var BillGates = new Person("Bill Gates"); BillGates.SayHello(); //由于继承了原型的东西,规规矩矩输出:Hello, I‘m Bill Gates var SteveJobs = new Person("Steve Jobs"); SteveJobs.company = "Apple"; //设置自己的company属性,掩盖了原型的company属性 SteveJobs.SayHello = function(){ //实现了自己的SayHello方法,掩盖了原型的SayHello方法 alert("Hi, " + this.name + " like " + this.company + ", ha ha ha "); }; SteveJobs.SayHello(); //都是自己覆盖的属性和方法,输出:Hi, Steve Jobs like Apple, ha ha ha BillGates.SayHello(); //SteveJobs的覆盖没有影响原型对象,BillGates还是按老样子输出
③动态扩展性
function Person(name){ this.name = name; }; Person.prototype.SayHello = function(){ //建立对象前定义的方法 alert("Hello, I‘m " + this.name); }; var BillGates = new Person("Bill Gates"); //建立对象 BillGates.SayHello(); Person.prototype.Retire = function(){ //建立对象后再动态扩展原型的方法 alert("Poor " + this.name + ", bye bye!"); }; BillGates.Retire(); //动态扩展的方法即可被先前建立的对象立即调用
④信息的隐藏(类似于Java中的封装)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>菜鸟教程(runoob.com)</title> 6 </head> 7 <body> 8 9 <p>局部变量计数。</p> 10 <button type="button" onclick="myFunction()">计数!</button> 11 <p id="demo">0</p> 12 <script> 13 var add = (function () { 14 var counter = 0; 15 return function () {return counter += 1;} 16 })(); 17 function myFunction(){ 18 document.getElementById("demo").innerHTML = add(); 19 } 20 </script> 21 </body> 22 </html>
⑤原型模型大致写法
//定义构造函数 function Person(name){ this.name = name; //在构造函数中定义成员 }; //方法定义到构造函数的prototype上 Person.prototype.SayHello = function(){ alert("Hello, I‘m " + this.name); }; //子类构造函数 function Employee(name, salary){ Person.call(this, name); //调用上层构造函数 this.salary = salary; //扩展的成员 }; //子类构造函数首先需要用上层构造函数来建立prototype对象,实现继承的概念 Employee.prototype = new Person() //只需要其prototype的方法,此对象的成员没有任何意义! //子类方法也定义到构造函数之上 Employee.prototype.ShowMeTheMoney = function(){ alert(this.name + " $" + this.salary); }; var BillGates = new Person("Bill Gates"); BillGates.SayHello(); var SteveJobs = new Employee("Steve Jobs", 1234); SteveJobs.SayHello(); SteveJobs.ShowMeTheMoney();