大纲:
练习一:全选/全不选/反选
练习二:
函数:Arguments对象 变量的作用域 几种特殊的函数
闭包:作用域链 闭包 循环中的闭包
对象:定义对象的三种方式 操作对象的属性和方法 this的用法 Array对象 String对象
原型:原型的作用 原型属性与自身属性同名 扩展内建对象
继承:_对象之间的继承 只继承于原型 普通对象的继承
练习一
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>check.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> 您的爱好很广泛!!! <br> <input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选 <br> <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球"/>篮球 <input type="checkbox" name="items" value="游泳"/>游泳 <input type="checkbox" name="items" value="唱歌"/>唱歌 <br> <input type="button" name="checkall" id="checkall" value="全选" /> <input type="button" name="checkall" id="checkallNo" value="全不选" /> <input type="button" name="checkall" id="check_revsern" value="反选" /> </body> <script language="JavaScript"> /* * <input type="checkbox" name="items" value="足球" />足球 <input type="checkbox" name="items" value="篮球"/>篮球 <input type="checkbox" name="items" value="游泳"/>游泳 <input type="checkbox" name="items" value="唱歌"/>唱歌 */ var itemsElements = document.getElementsByName("items"); //<input type="button" name="checkall" id="checkall" value="全选" /> document.getElementById("checkall").onclick = checkall; function checkall(){ for(var i=0;i<itemsElements.length;i++){ var itemsElement = itemsElements[i]; itemsElement.checked = "checked"; } } //<input type="button" name="checkall" id="checkallNo" value="全不选" /> document.getElementById("checkallNo").onclick = checkallNo; function checkallNo(){ for(var i=0;i<itemsElements.length;i++){ var itemsElement = itemsElements[i]; //itemsElement.removeAttribute("checked"); //itemsElement.setAttribute("checked",null); itemsElement.checked = null; /* * 编写javascript代码时： * * 不仅要语法正确，而且效果也正确 * * 只看语法的正确性，最终要看效果对不对 */ } } //<input type="button" name="checkall" id="check_revsern" value="反选" /> document.getElementById("check_revsern").onclick = function(){ for(var i=0;i<itemsElements.length;i++){ var itemsElement = itemsElements[i]; if(itemsElement.checked){ itemsElement.checked = null; }else{ itemsElement.checked = "checked"; } } } //<input type="checkbox" name="checkItems" id="checkItems" value="全选/全不选"/>全选/全不选 document.getElementById("checkItems").onclick = function(){ if(this.checked){ //全选 checkall(); }else{ //全不选 checkallNo(); } } /* * 编写代码时，总是想一次性将代码做到最优： * * 即使是三行代码，多日后，也是需要维护的 * * 代码实现上： * * 完成功能，目标 * * 做优化 */ </script> </html>
练习二:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> <!-- BODY { font-family:"Courier"; font-size: 12px; margin:0px 0px 0px 0px; overflow-x:no; overflow-y:no; background-color: #B8D3F4; } td { font-size:12px; } .default_input { border:1px solid #666666; height:18px; font-size:12px; } .default_input2 { border:1px solid #666666; height:18px; font-size:12px; } .nowrite_input { border:1px solid #849EB5; height:18px; font-size:12px; background-color:#EBEAE7; color: #9E9A9E; } .default_list { font-size:12px; border:1px solid #849EB5; } .default_textarea { font-size:12px; border:1px solid #849EB5; } .nowrite_textarea { border:1px solid #849EB5; font-size:12px; background-color:#EBEAE7; color: #9E9A9E; } .wordtd5 { font-size: 12px; text-align: center; vertical-align:top; padding-top: 6px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; background-color: #b8c4f4; } .wordtd { font-size: 12px; text-align: left; vertical-align:top; padding-top: 6px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; background-color: #b8c4f4; } .wordtd_1 { font-size: 12px; vertical-align:top; padding-top: 6px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; background-color: #516CD6; color:#fff; } .wordtd_2{ font-size: 12px; text-align: right; vertical-align:top; padding-top: 6px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; background-color: #64BDF9; } .wordtd_3{ font-size: 12px; text-align: right; vertical-align:top; padding-top: 6px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; background-color: #F1DD34; } .inputtd { font-size:12px; vertical-align:top; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; } .inputtd2 { text-align: center; font-size:12px; vertical-align:top; padding-top: 3px; padding-right: 3px; padding-bottom: 3px; padding-left: 3px; } .tablebg { font-size:12px; } .tb{ border-collapse: collapse; border: 1px outset #999999; background-color: #FFFFFF; } .td2{line-height:22px; text-align:center; background-color:#F6F6F6;} .td3{background-color:#B8D3F4; text-align:center; line-height:20px;} .td4{background-color:#F6F6F6;line-height:20px;} .td5{border:#000000 solid; border-right-width:0px; border-left-width:0px; border-top-width:0px; border-bottom-width:1px;} .tb td{ font-size: 12px; border: 2px groove #ffffff; } .noborder { border: none; } .button { border: 1px ridge #ffffff; line-height:18px; height: 20px; width: 45px; padding-top: 0px; background:#CBDAF7; color:#000000; font-size: 9pt; font-family:"Courier"; } .textarea { font-family: Arial, Helvetica, sans-serif, "??"; font-size: 9pt; color: #000000; border-bottom-width: 1px; border-top-style: none; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-bottom-color: #000000; background-color:transparent; text-align: left } --> </style></head> <body> <div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; 350px; height:200px; background-color:#E6E6E6;"> <table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;"> <tr> <td width="126"> <!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度--> <select name="first" multiple="multiple" size="10" class="td3" id="first"> <option value="选项1">选项1</option> <option value="选项2">选项2</option> <option value="选项3">选项3</option> <option value="选项4">选项4</option> <option value="选项5">选项5</option> <option value="选项6">选项6</option> <option value="选项7">选项7</option> <option value="选项8">选项8</option> </select> </td> <td width="69" valign="middle"> <input name="add" id="add" type="button" class="button" value="-->" /> <input name="add_all" id="add_all" type="button" class="button" value="==>" /> <input name="remove" id="remove" type="button" class="button" value="<--" /> <input name="remove_all" id="remove_all" type="button" class="button" value="<==" /> </td> <td width="127" align="left"> <select name="second" size="10" multiple="multiple" class="td3" id="second"> <option value="选项9">选项9</option> </select> </td> </tr> </table> </div> </body> <script type="text/javascript"> //<input name="add" id="add" type="button" class="button" value="-->" /> document.getElementById("add").onclick = add; function add(){ /* * 将左边被选中的选项，移到右边去 * * 选中一个时 * * 选中多个时 */ var firstElement = document.getElementById("first"); var options = firstElement.getElementsByTagName("option"); var secondElement = document.getElementById("second"); // for(var i=0;i<options.length;i++){ // if(options[i].selected){ // secondElement.appendChild(options[i]); // i--; // } // } var len = options.length; for(var i=0;i<len;i++){ /* * select标签的selectedIndex属性 * * 当没有选中任何一个选项时，selectedIndex属性值是"-1" * * 当选中一个选项的时候，selectedIndex属性值是被选中的选项的索引值 * * 当选中多个选项的时候，selectedIndex属性值是第一个被选中的选项的索引值 */ //alert(firstElement.selectedIndex); if(firstElement.selectedIndex!=-1){ secondElement.appendChild(options[firstElement.selectedIndex]); } } } //<input name="add_all" id="add_all" type="button" class="button" value="==>" /> document.getElementById("add_all").onclick = function(){ var firstElement = document.getElementById("first"); var options = firstElement.getElementsByTagName("option"); var len = options.length; var secondElement = document.getElementById("second"); for(var i=0;i<len;i++){ secondElement.appendChild(options[0]); } } //<input name="remove" id="remove" type="button" class="button" value="<--" /> document.getElementById("remove").onclick = remove; function remove(){ var secondElement = document.getElementById("second"); var options = secondElement.getElementsByTagName("option"); var len = options.length; var firstElement = document.getElementById("first"); for(var i=0;i<len;i++){ if(secondElement.selectedIndex!=-1){ firstElement.appendChild(options[secondElement.selectedIndex]); } } } //<input name="remove_all" id="remove_all" type="button" class="button" value="<==" /> document.getElementById("remove_all").onclick = function(){ var secondElement = document.getElementById("second"); var options = secondElement.getElementsByTagName("option"); var len = options.length; var firstElement = document.getElementById("first"); for(var i=0;i<len;i++){ firstElement.appendChild(options[0]); } } //双击事件 document.getElementById("first").ondblclick = add; document.getElementById("second").ondblclick = remove; </script> </html>
函数:
<!DOCTYPE html> <html> <head> <title>01_Arguments 对象.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> /* * * java中的函数，重载 * * 节省了命名空间 * * 执行效率高 * * javascript中的函数有没有重载?没有 * * 当定义多个同名的函数时，最后一个函数会覆盖前面所有的函数 * * 当多个函数同名时，最后一个定义的函数起作用 */ // function add(a,b){ // return a+b; // } // // function add(a,b,c){ // return a+b+c; // } // // alert(add(1,2)); //output NaN // alert(add(1,2,3)); //output 6 //想办法：在javascript中，实现函数重载的效果 /* * arguments对象： * * arguments对象是数组对象 * * arguments对象的length属性，获取到的是参数的个数 */ // function fn(){ // alert(arguments.length); // } // // fn(); //output 0 // fn("a"); //output 1 // fn("a","b"); //output 2 // fn("a","b","c"); //output 3 function add(){ if(arguments.length==2){ return arguments[0] + arguments[1]; }else if(arguments.length==3){ return arguments[0] + arguments[1] + arguments[2]; } } alert(add(1,2)); //output 3 alert(add(1,2,3)); //output 6 </script> </html>
<!DOCTYPE html> <html> <head> <title>02_变量的作用域.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> /* * * 变量a是全局变量，环境中任意位置都可以访问 * * 变量b是局部变量，只能在函数fn()中访问 * * 在javascript中，只存在全局变量和局部变量 * * 在javascript中，只存在全局域和函数域 */ // var a = "a"; // // function fn(){ // var b = "b"; // // alert(a); //output a // // alert(b); //output b // } // // fn(); // alert(a); //output a // alert(b); //output undefind /* * 在javascript中，不使用修饰符"var"时： * * 环境会自动将变量的定义为全局变量 * * 并不报错 */ // var a = "a"; // // function fn(){ // b = "b"; // // alert(a); //output a // // alert(b); //output b // } // // fn(); // alert(a); //output a // alert(b); //output b /* * 全局变量与局部变量同名时： * * 定义了全局变量a，并初始化为"a" * * 定义了函数fn()，有没有执行函数中的代码？没有 * * 局部变量a，有没有被定义？被定义，但是没有初始化 * * 调用函数fn()时 * * 第一个打印结果，打印的是局部变量a。但是因为局部变量a没有初始化，所以是undefind * * 第二个打印结果，打印的是局部变量a。局部变量a初始化了，所以是b */ var a = "a"; function fn(){ alert(a); //output undefind var a = "b"; alert(a); //output b } fn(); alert(a); //output a </script> </html>
<!DOCTYPE html> <html> <head> <title>03_几种特殊的函数.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> // function add(a,b){ // return a+b; // } /* * 1 匿名函数：没有名的函数 * 作用： * * 可以将匿名函数作为参数传递给其他函数。这样，接收方函数就能利用所传递的函数来完成某些事情。 * * 可以定义某个匿名函数来执行某些一次性任务 */ // function(){} /* * one和two函数，叫做回调函数 * 回调函数：将函数作为参数传递给其他函数，作为参数的函数就是回调函数 */ function fn(a,b){ return a() + b(); } // var one = function(){return 1;} // var two = function(){return 2;} // alert(fn(one,two)); //output 3 //以上代码可以改写：匿名回调函数 // alert(fn(function(){return 1;},function(){return 2;})); //output 3 //定义即调用函数 // function fn(){ // alert("javascript"); // } // fn(); /* * 自调函数：执行一次性任务 * * 第一个小括号：封装函数体 * * 第二个小括号：调用封装的函数 */ // ( // function(){ // alert("javascript"); // } // )(); // ( // function(str){ // alert(str+" javascript"); // } // )("hello"); /* * 私有(内部)函数：内部类 * * 保证了私有性 ———— 只把必要性的内容暴露给外界，其他所有内容保留在私有空间中 * * 节省全局域命名空间 */ // function fn(){ // var a = "javascript"; // // function n(){ // return a; // } // // return n(); // } // alert(fn()); //output javascript // alert(n()); //output undefind /* * 返回函数的函数 * * 在定义一个函数的时候，可以执行两个逻辑代码 * * 第一个函数，没有真正的返回值 */ function fn(){ var a = "javascript"; return function(){ return a; } } //alert(fn()); //output function(){return a;} //var fun = fn(); //var fun = function(){return a;} //alert(fun()); //output javascript alert(fn()()); //output javascript </script> </html>
闭包:
<!DOCTYPE html> <html> <head> <title>01_作用域链.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> var a = "a"; function fn(){ var b = "b"; alert(a); //output a alert(b); //output b function n(){ var c = "c"; alert(a); //output a alert(b); //output b alert(c); //output c } return n(); } fn(); </script> </html>
<!DOCTYPE html> <html> <head> <title>02_闭包.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> var a = "a"; var n; function fn(){ var b = "b"; alert(a); //output a alert(b); //output b n = function(){ var c = "c"; alert(a); //output a alert(b); //output b alert(c); //output c } return n(); } fn(); n(); </script> </html>
<!DOCTYPE html> <html> <head> <title>03_循环中的闭包.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> /* * * 定义函数f() * * 定义一个空的数组a * * 定义局部变量i * * 遍历，循环3遍，变量i：0，1，2，3 * 初始化数组a：a[0],a[1],a[2]，function(){return i;} * * 返回数组a * * 定义一个全局变量fun，将函数f()的返回值，赋值给变量fun（fun是数组） */ // function f(){ // var a = []; // var i; // for(i = 0; i < 3; i++){ // a[i] = function(){ // return i; // } // } // return a; // } // // var fun = f(); // // alert(fun[0]()); //output 3 // alert(fun[1]()); //output 3 // alert(fun[2]()); //output 3 // function f(){ // var a = []; // var i; // function n(x){ // return x; // } // for(i = 0; i < 3; i++){ // a[i] = n(i); // } // return a; // } // // var fun = f(); // // alert(fun[0]); //output 0 // alert(fun[1]); //output 1 // alert(fun[2]); //output 2 function f(){ var a = []; var i; for(i = 0; i < 3; i++){ a[i] = ( function(x){ return x; } )(i); } return a; } var fun = f(); alert(fun[0]); //output 0 alert(fun[1]); //output 1 alert(fun[2]); //output 2 </script> </html>
对象:
<!DOCTYPE html> <html> <head> <title>01_定义对象的三种方式.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> //1 new Object() // var obj = new Object(); //2 直接量方式：最多 // var obj = { // name : "javascript", // sayMe : function(){ // alert("javascript"); // } // } //3 定义函数对象:最重要 // function obj(){ // //this代表obj对象 // this.name = "javascript"; // this.sayMe = function(){ // alert("javascript"); // } // } //定义一个空的对象 // var obj1 = new Object(); // var obj2 = {} //面试题：以下哪个选项是错误的？D // var a = {}; //定义一个空的对象 // var b = []; //定义一个空的数组 // var c = //; //定义一个空的正则表达式 // var d = (); //面试题(百度)：要求在alert()中，实现换行 alert("xxx yyy"); </script> </html>
<!DOCTYPE html> <html> <head> <title>02_操作对象的属性和方法.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> // var obj = { // name : "javascript", // sayMe : function(){ // alert("javascript"); // } // } //调用对象obj的属性和方法 // alert(obj.name); //output javascript // obj.sayMe(); //output javascript //删除对象obj的属性和方法 // delete obj.name; // alert(obj.name); //output undefind // delete obj.sayMe; // obj.sayMe(); //output javascript //修改对象obj的属性和方法 // obj.name = "jscript"; // alert(obj.name); //output jscript // obj.sayMe = function(){ // alert("jscript"); // } // obj.sayMe(); //output jscript function Hero(){ this.name = "HERO"; this.sayMe = function(){ alert("HERO"); } } alert(Hero.name); // var hero = new Hero(); //调用函数对象Hero的属性和方法 // alert(hero.name); //output HERO // hero.sayMe(); //output HERO //删除函数对象Hero的属性和方法 // delete hero.name; // alert(hero.name); //output undefind // delete hero.sayMe; // hero.sayMe(); //output undefind //修改函数对象Hero的属性和方法 hero.name = "hero"; alert(hero.name); //output hero // hero.sayMe = function(){ // alert("hero"); // } // hero.sayMe(); //output hero </script> </html>
<!DOCTYPE html> <html> <head> <title>03_this的用法.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> /* * this的用法： * * this表示HTML页面中具体的元素内容 * * this表示一个明确的对象 * * this的用法：程序员又爱又恨 * * 建议：只用会用的 * * 经常搞不清楚this指代谁，尽量不用！ */ function Hero(){ this.name = "javascript"; this.sayMe = function(){ alert(this.name); } } var hero = new Hero(); hero.sayMe(); //output javascript </script> </html>
<!DOCTYPE html> <html> <head> <title>04_Array对象.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> var arr1 = []; var arr2 = new Array(); alert(typeof arr1); //output object alert(typeof arr2); //output object //反转字符串示例（这种方式java与javascript不一样） // //定义一个字符串 // var str = "abcdefg"; // //利用String对象的split()方法，将字符串切割成一个数组 // var arr = str.split(""); // //利用Array对象的reverse()方法，将数组中元素的顺序颠倒。 // arr = arr.reverse(); // //测试打印 // alert(arr.toString()); </script> </html>
<!DOCTYPE html> <html> <head> <title>05_String对象.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> // var str1 = "aaa"; // var str2 = new String("aaa"); // // alert(typeof str1); //output string // alert(typeof str2); //output object //判断字符串是否包含指定字符串示例 //定义两个要判断的字符串 var str = "abcdefg"; var substr = "xyz"; /* * 定义判断字符串是否包含指定字符串的函数 * * 第一个参数：要判断的字符串 * * 第二个参数：指定的字符串 */ function sub(str,substr){ //将判断的字符串定义成String对象 var string = new String(str); //截取判断的字符串 var result = string.substr(string.indexOf(substr),substr.length); /* * 判断截取后的字符串是否为空 * * 为空，说明不包含指定字符串 * * 不为空，说明包含指定字符串 */ if(result==substr){ return true; }else{ return false; } } alert(sub(str,substr)); </script> </html>
<!DOCTYPE html> <html> <head> <title>01_原型的作用.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> function Hero(){ this.name = "javascript"; this.sayMe = function(){ alert("javascript"); } } // var hero = new Hero(); //利用原型属性，为函数对象增加属性和方法 //函数对象.原型.属性名 = 属性值 Hero.prototype.value = "HERO"; var hero = new Hero(); alert(hero.value); // Hero.prototype.sayHero = function(){ // alert("HERO"); // } // // hero.sayHero(); /* * * 先new对象，再增加属性和方法：无效 * * 先增加属性和方法，再new对象：有效 */ // Hero.prototype = { // value : "HERO", // sayHero : function(){ // alert("HERO"); // } // } // // var hero = new Hero(); alert(hero.value); </script> </html>
<!DOCTYPE html> <html> <head> <title>02_原型属性与自身属性同名.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> // function Hero(){ // this.name = "javascript"; // } // // Hero.prototype.name = "jscript"; // // var hero = new Hero(); // //// alert(hero.name); //output javascript // // delete hero.name; // // alert(hero.name); //output //定义空的函数对象 function Hero(){} Hero.prototype.name = "javascript"; var hero = new Hero(); hero.name = "jscript"; alert(hero.name); //output javascript delete hero.name; </script> </html>
<!DOCTYPE html> <html> <head> <title>03_扩展内建对象.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> //为原型 Array对象增加一个判断的函数 Array.prototype.inArray = function(color){ //this指代Array对象 for(var i = 0, len = this.length; i < len; i++){ if(this[i] === color){ return true; } } return false; } //定义一个Array对象 var a = ["red", "green", "blue"]; //测试 alert(a.inArray("red")); //true alert(a.inArray("yellow")); //false /* * * javascript的内建对象，提供很多属性和方法 * * 不能满足所有的需求，所以自定义属性或方法 * * 通过原型，将自定义的方法，添加到了内建对象上 * * 可以调用自定义方法，像内建对象原生方法一样 */ </script> </html>
继承:
<!DOCTYPE html> <html> <head> <title>01_对象之间的继承.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> //如果javascript中，支持继承的语法 function A(){ this.name = "a"; this.sayA = function(){ alert("a"); } } function B(){ this.value = "b"; this.sayB = function(){ alert("b"); } } B.prototype = new A(); var b = new B(); alert(b.name); //output a b.sayA(); //output a </script> </html>
<!DOCTYPE html> <html> <head> <title>02_只继承于原型.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> // function A(){ // this.name = "a"; // this.sayA = function(){ // alert("a"); // } // } // // function B(){ // this.value = "b"; // this.sayB = function(){ // alert("b"); // } // } // // B.prototype = A.prototype; // // var b = new B(); // // alert(b.name); //output undefind // function A(){} // // A.prototype = { // name : "a", // sayA : function(){ // alert("a"); // } // } // // //定义一个空的函数对象B // function B(){} // // //将函数对象A的原型内容，赋值给函数对象B的原型 // B.prototype = A.prototype; // // //向函数对象B的原型上增加属性和方法 // B.prototype = { // value : "b", // sayB : function(){ // alert("b"); // } // } // // //将函数对象A的原型内容，赋值给函数对象B的原型 //// B.prototype = A.prototype; // // var b = new B(); // // alert(b.name); //output a // alert(b.value); //output undefined function A(){} A.prototype = { name : "a", sayA : function(){ alert("a"); } } //定义一个空的函数对象B function B(){} //将函数对象A的原型内容，赋值给函数对象B的原型 B.prototype = A.prototype; B.prototype.value = "b"; var b = new B(); alert(b.name); //output a alert(b.value); //output b </script> </html>
<!DOCTYPE html> <html> <head> <title>03_普通对象的继承.html</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head> <body> This is my HTML page. <br> </body> <script type="text/javascript"> //该函数接受一个对象并返回它的副本 function extendCopy(p){ var z = {}; //定义一个空的对象z for(var i in p){ //var i =0 ; i < p.length ; i++ z[i] = p[i]; //都当做数组处理的话，可以理解 } //uber属性：将p作为z的父级，将z指向p的原型 z.uber = p; return z; } //定义对象a，但是对象a不是函数对象 var a = { name : "a" } //定义对象b，但是对象b不是函数对象 var b = extendCopy(a); b.toStr = function(){return this.name;}; alert(b.toStr()); //output a </script> </html>