JavaScript基础知识（二）

一、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 onload="startTime()">

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 onload="myWin()">

 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();

秒客网

JavaScript基础知识（二）

相关文章