python16_day13【css、js】
一、部局
1.pg-header(title)
1 .pg-header{ 2 height: 48px; 3 background-color: cadetblue; 4 line-height: 48px; 5 min-width: 1000px; 6 }
2.左则Logo
.pg-header .logo{ height: 44px; line-height: 44px; //居中 padding: 2px; float: left; }
3.头像
1 .pg-header .avatar{ 2 height: 40px; 3 width: 40px; 4 padding: 2px 10px 2px 0; float right; 5 } 6 .pg-header .avatar img{ 7 /*overflow: hidden; 下面有2个100%，不就需要，如果没有下2个100%，只能显示图片局部*/ 8 height: 100%; 9 width: 100%; 10 border-radius: 50%; /*变成圆的*/ 11 }
4.头像上的用户信息
1 .pg-header .avatar .user-menu{ 2 position: absolute; /*avatar上面有relative*/ 3 border: 1px solid black; 4 width: 150px; 5 top: 44px; 6 right: 0px; 7 display: none; 8 z-index: 91; /*bug,通过优先级解决*/ 9 } 10 .pg-header .avatar .user-menu a{ 11 display: block; 12 text-decoration: none; 13 } 14 .pg-header .avatar:hover .user-menu{ 15 display: block; /*鼠标放到头像，显示菜单*/ 16 }
5.莫泰对话框(登录)
1 <a class="item"><input type="button" value="登录" onclick="showLogin();"/></a> 2 <a class="item"><input type="button" value="注册" onclick="showRegister();"/></a> 3 <div id="i1" class="mid hide"></div> 4 <div id="i2" class="modal hide"> 5 6 7 /*CSS莫泰对话框*/ 8 .pg-header .mid{ 9 position: fixed; 10 opacity: 0.5; 11 z-index: 95; 12 top: 0; 13 bottom: 0; 14 left: 0; 15 right: 0; 16 background-color: black; 17 } 18 19 .pg-header .modal{ 20 position: fixed; 21 z-index: 96; 22 width: 400px; 23 height: 300px; 24 margin-left: -550px; 25 background-color: darkgreen; 26 top:50%; 27 margin-top: -150px; 28 } 29 30 //JS 31 function showLogin(){ 32 document.getElementById('i1').classList.remove('hide'); 33 document.getElementById('i2').classList.remove('hide'); 34 } 35 function hideLogin(){ 36 document.getElementById('i1').classList.add('hide'); 37 document.getElementById('i2').classList.add('hide'); 38 } 39 40 function showRegister(){ 41 document.getElementById('i1').classList.remove('hide'); 42 document.getElementById('i3').classList.remove('hide'); 43 } 44 function hideRegister(){ 45 document.getElementById('i1').classList.add('hide'); 46 document.getElementById('i3').classList.add('hide'); 47 }
6.菜单选择
HTML: <div class="item"> <div class="title" onclick="changeMenu(this);">监控</div> <div class="c1 hide"> <a href="#">内容一</a> <a href="#">内容一</a> <a href="#">内容一</a> </div> </div> <div class="item"> <div class="title" onclick="changeMenu(this);" id="m2">操作</div> <div class="c1 hide"> <a href="#">内容二</a> <a href="#">内容二</a> <a href="#">内容二</a> </div> </div> <div class="item"> <div class="title" onclick="changeMenu(this);">日志</div> <div class="c1 hide"> <a href="#">内容三</a> <a href="#">内容三</a> <a href="#">内容三</a> </div> CSS: /*菜单选择*/ .pg-body .menus .item .title{ border: 1px solid green; height: 40px; background-color: darkslategray; line-height: 40px; text-align: center; border-radius: 10%; color: white; } .pg-body .c1 a{ display: block; left: 0px; text-align: center; color: pink; } JS: //菜单选择 function changeMenu(currentTagObj){ var contentOjb= currentTagObj.nextElementSibling; contentOjb.classList.remove('hide') var item_list=document.getElementsByClassName('title'); for(var i=0;i<item_list.length;i++){ var loop = item_list[i] if(loop != currentTagObj){ loop.nextElementSibling.classList.add('hide'); } } }
7.表单
1 <div class="search"> 2 <form action="http://www.sogou.com/web" method="get"> 3 搜索:<input type="text" id="key" name="query" onfocus="keyFocus();" onblur="keyBlur();" placeholder="请输入关键字"/> 4 <input style="border: 0px" type="submit" value="提交"> 5 </form> 6 </div> 7 8 JS: 9 function keyFocus() { 10 //console.log('获取焦点'); 11 var val = document.getElementById('key').value; 12 if (val == "请输入关键字"){ 13 document.getElementById('key').value = ""; 14 } 15 } 16 17 function keyBlur() { 18 //console.log('失去焦点'); 19 var val = document.getElementById('key').value; 20 if(val.length>0){ 21 22 }else{ 23 document.getElementById('key').value = "请输入关键字"; 24 } 25 26 }
8.多选反选
1 <input type="button" value="全选" onclick="checkAll();"> 2 <input type="button" value="取消" onclick="removeAll();"> 3 <input type="button" value="反选" onclick="reverseAll();"> 4 5 <table border="1px"> 6 <thead> 7 <tr> 8 <th>选择</th> 9 <th>主机</th> 10 <th>端口</th> 11 </tr> 12 </thead> 13 <tbody id="tbody1"> 14 <tr> 15 <td><input class="option1" type="checkbox"/></td> 16 <td>c1.com</td> 17 <td>80</td> 18 </tr> 19 <tr> 20 <td><input class="option1" type="checkbox"/></td> 21 <td>c2.com</td> 22 <td>80</td> 23 </tr> 24 <tr> 25 <td><input class="option1" type="checkbox"/></td> 26 <td>c3.com</td> 27 <td>80</td> 28 </tr> 29 </tbody> 30 </table> 31 32 33 JS： 34 function checkAll(){ 35 var inpList = document.getElementsByClassName('option1'); 36 for(var i=0;i<inpList.length;i++){ 37 var inp = inpList[i]; 38 inp.checked=true; 39 } 40 } 41 42 function removeAll(){ 43 var inpList = document.getElementsByClassName('option1'); 44 for(var i=0;i<inpList.length; i++){ 45 var inp = inpList[i]; 46 inp.checked=false; 47 } 48 } 49 50 function reverseAll(){ 51 var inpList=document.getElementsByClassName('option1'); 52 for(var i=0;i<inpList.length; i++){ 53 var inp = inpList[i]; 54 if(inp.checked){ 55 inp.checked = false; 56 }else { 57 inp.checked = true; 58 } 59 } 60 }
9.点赞
1 <div style="top:410px; position: fixed"> 2 <div class="click_good"> 3 <a onclick="Favor(this);" href="#">点赞1</a> 4 </div> 5 <div class="click_good"> 6 <a onclick="Favor(this);" href="#">点赞2</a> 7 </div> 8 <div class="click_good"> 9 <a onclick="Favor(this);" href="#">点赞3</a> 10 </div> 11 </div> 12 13 CSS: 14 /*点赞*/ 15 .click_good{ 16 padding: 10px; 17 position: relative; 18 } 19 .click_good a{ 20 text-decoration: none; 21 } 22 .click_good span{ 23 font-size: 18px; 24 position: absolute; 25 top:10px; 26 left: 50px; 27 opacity: 1; 28 } 29 30 JS: 31 function Favor(ths){ 32 // ths ==> this表示当前触发事件的标签. 33 var top = 10; 34 var left = 50; 35 var op =1 ; 36 var fontSize =18; 37 var tag = document.createElement('span'); 38 tag.innerText="+1" 39 tag.style.position = 'obsolute'; 40 tag.style.top = top + 'px'; 41 tag.style.left = left + 'px'; 42 tag.style.opacity = op; 43 tag.style.fontSize = fontSize + 'px'; 44 ths.parentElement.appendChild(tag); 45 46 //处理span标签变大,透明,消失. 47 var interval = setInterval(function(ths){ 48 top -= 10; 49 left += 10; 50 fontSize += 5; 51 op -= 0.1; 52 53 tag.style.top = top + 'px'; 54 tag.style.left = left + 'px'; 55 tag.style.opacity = op; 56 tag.style.fontSize = fontSize + 'px'; 57 58 if(op <= 0.1){ 59 clearInterval(interval); 60 ths.parentElement.removeChild(tag); 61 } 62 },50); 63 }
10.动态时间
1 JS： 2 function currentDate() { 3 //new object 4 var da = new Date(); 5 6 var year = da.getFullYear(); 7 //月份从0开始 8 var month = da.getMonth() + 1; 9 var day = da.getDate(); 10 11 var hours = da.getHours(); 12 var minutes = da.getMinutes(); 13 var seconds = da.getSeconds(); 14 15 var txt = year + "-" + month + "-" + day + " " + hours+":"+minutes+":"+seconds; 16 17 document.getElementById('h4').innerHTML = txt; 18 } 19 20 setInterval(currentDate,1000);
11.滚动字体
1 setInterval(function(){ 2 var txt = document.getElementById('welcome').innerText; 3 var a = txt.charAt(0) 4 var b = txt.substring(1, txt.length) 5 var new_txt = b + a 6 document.getElementById('welcome').innerText = new_txt; 7 },1000)
12.增加删除标签、删除成功
1 function addElement() { 2 // 获取用户输入的内容 3 var host = document.getElementById('host_numb').value; 4 var port = document.getElementById('host_port').value; 5 6 // 创建标签(对象) ***** 7 var tag_tr = document.createElement('tr'); 8 var tag_td1 = document.createElement('td'); 9 var tag_td2 = document.createElement('td'); 10 var tag_td3 = document.createElement('td'); 11 var tag_input = document.createElement('input'); 12 13 tag_td2.innerHTML = host; 14 tag_td3.innerHTML = port; 15 tag_input.setAttribute("class","option1"); 16 tag_input.setAttribute("type","checkbox"); 17 18 tag_td1.appendChild(tag_input); 19 tag_tr.appendChild(tag_td1); 20 tag_tr.appendChild(tag_td2); 21 tag_tr.appendChild(tag_td3); 22 23 // 将对象添加到 append 24 document.getElementById('tbody1').appendChild(tag_tr); 25 26 27 document.getElementById('host_numb').value = ""; 28 document.getElementById('host_port').value = ""; 29 } 30 31 function delElement(){ 32 var list = document.getElementById("tbody1"); 33 list.removeChild(list.lastElementChild); 34 35 var temp = document.getElementById('display_delete'); 36 temp.setAttribute('style', 'color:red;'); 37 temp.innerHTML="删除成功"; 38 console.log(temp) 39 40 setTimeout(function () { 41 document.getElementById('display_delete').innerHTML = ""; 42 },3000); 43 }
HTML:table
1 <table border="1px"> 2 <thead> 3 <tr> 4 <th>选择</th> 5 <th>主机</th> 6 <th>端口</th> 7 </tr> 8 </thead> 9 <tbody id="tbody1"> 10 <tr> 11 <td><input class="option1" type="checkbox"/></td> 12 <td>c1.com</td> 13 <td>80</td> 14 </tr> 15 <tr> 16 <td><input class="option1" type="checkbox"/></td> 17 <td>c2.com</td> 18 <td>80</td> 19 </tr> 20 <tr> 21 <td><input class="option1" type="checkbox"/></td> 22 <td>c3.com</td> 23 <td>80</td> 24 </tr> 25 </tbody> 26 </table>
二、JavaScripts
1.如何编写
JavaScript代码存在形式
<!-- 方式一 -->
<script type"text/javascript" src="JS文件"></script>
<!-- 方式二 -->
<script type"text/javascript">
Js代码内容
</script>
JavaScript代码存放位置
a.HTML的head中
b.HTML的body代码块底部(推荐)
总结：由于Html代码是从上到下执行，如果Head中的js代码耗时严重，就会导致用户长时间无法看到页面，如果放置在body代码块底部，
那么即使js代码耗时严重，也不会影响用户看到页面效果，只是js实现特效慢而已。
<script src="https://www.gstatic.com/og/_/js/k=og.og2.en_US.iF4jnkQuaf0.O/rt=j/t=zcms/m=def/exm=in,fot/d=1/ed=1/rs=AA2YrTv5-POC4Ks9GtGRdY2ywUWisqz7-Q"></script>
<script>
alert('123');
</script>
2.变量
全局变量和局部变量
<script type="text/javascript">
// 全局变量
name = 'seven';
function func(){
// 局部变量
var age = 18;
// 全局变量
gender = "男"
}
</script>
注释方式(注意：此注释仅在Script块中生效)
a.//
b./**/
3.数据类型
JavaScript 中的数据类型分为原始类型和对象类型：
- 原始类型
- 数字
- 字符串
- 布尔值
- 对象类型
- 数组
- 字典
- ...
特别的，数字、布尔值、null、undefined、字符串是不可变。
1 // null、undefined 2 null是JavaScript语言的关键字，它表示一个特殊值，常用来描述“空值”。 3 undefined是一个特殊值，表示变量未定义。
(1)数字(Number)
JavaScript中不区分整数值和浮点数值，JavaScript中所有数字均用浮点数值表示。
转换：
- parseInt(..) 将某值转换成数字，不成功则NaN
- parseFloat(..) 将某值转换成浮点数，不成功则NaN
特殊值：
- NaN，非数字。可使用 isNaN(num) 来判断。
- Infinity，无穷大。可使用 isFinite(num) 来判断。
更多数值计算：
1 常量 2 3 Math.E 4 常量e，自然对数的底数。 5 6 Math.LN10 7 10的自然对数。 8 9 Math.LN2 10 2的自然对数。 11 12 Math.LOG10E 13 以10为底的e的对数。 14 15 Math.LOG2E 16 以2为底的e的对数。 17 18 Math.PI 19 常量figs/U03C0.gif。 20 21 Math.SQRT1_2 22 2的平方根除以1。 23 24 Math.SQRT2 25 2的平方根。 26 27 静态函数 28 29 Math.abs( ) 30 计算绝对值。 31 32 Math.acos( ) 33 计算反余弦值。 34 35 Math.asin( ) 36 计算反正弦值。 37 38 Math.atan( ) 39 计算反正切值。 40 41 Math.atan2( ) 42 计算从X轴到一个点的角度。 43 44 Math.ceil( ) 45 对一个数上舍入。 46 47 Math.cos( ) 48 计算余弦值。 49 50 Math.exp( ) 51 计算e的指数。 52 53 Math.floor( ) 54 对一个数下舍人。 55 56 Math.log( ) 57 计算自然对数。 58 59 Math.max( ) 60 返回两个数中较大的一个。 61 62 Math.min( ) 63 返回两个数中较小的一个。 64 65 Math.pow( ) 66 计算xy。 67 68 Math.random( ) 69 计算一个随机数。 70 71 Math.round( ) 72 舍入为最接近的整数。 73 74 Math.sin( ) 75 计算正弦值。 76 77 Math.sqrt( ) 78 计算平方根。 79 80 Math.tan( ) 81 计算正切值。
(2)字符串(string)
字符串是由字符组成的数组，但在JavaScript中字符串是不可变的：可以访问字符串任意位置的文本，但是JavaScript并未提供修改已知字符串内容的方法。
1 obj.length 长度 2 3 obj.trim() 移除空白 4 obj.trimLeft() 5 obj.trimRight) 6 obj.charAt(n) 返回字符串中的第n个字符 7 obj.concat(value, ...) 拼接 8 obj.indexOf(substring,start) 子序列位置 9 obj.lastIndexOf(substring,start) 子序列位置 10 obj.substring(from, to) 根据索引获取子序列 11 obj.slice(start, end) 切片 12 obj.toLowerCase() 大写 13 obj.toUpperCase() 小写 14 obj.split(delimiter, limit) 分割 15 obj.search(regexp) 从头开始匹配，返回匹配成功的第一个位置(g无效) 16 obj.match(regexp) 全局搜索，如果正则中有g表示找到全部，否则只找到第一个。 17 obj.replace(regexp, replacement) 替换，正则中有g则替换所有，否则只替换第一个匹配项， 18 $数字：匹配的第n个组内容； 19 $&：当前匹配的内容； 20 $`：位于匹配子串左侧的文本； 21 $'：位于匹配子串右侧的文本 22 $$：直接量$符号
(3)布尔值
布尔类型仅包含真假，与Python不同的是其首字母小写。
- == 比较值相等
- != 不等于
- === 比较值和类型相等
- !=== 不等于
- || 或
- && 且
(4)数组
JavaScript中的数组类似于Python中的列表
1 obj.length 数组的大小 2 3 obj.push(ele) 尾部追加元素 4 obj.pop() 尾部获取一个元素 5 obj.unshift(ele) 头部插入元素 6 obj.shift() 头部移除元素 7 obj.splice(start, deleteCount, value, ...) 插入、删除或替换数组的元素 8 obj.splice(n,0,val) 指定位置插入元素 9 obj.splice(n,1,val) 指定位置替换元素 10 obj.splice(n,1) 指定位置删除元素 11 obj.slice( ) 切片 12 obj.reverse( ) 反转 13 obj.join(sep) 将数组元素连接起来以构建一个字符串 14 obj.concat(val,..) 连接数组 15 obj.sort( ) 对数组元素进行排序
(5)其它
序列化
- JSON.stringify(obj) 序列化
- JSON.parse(str) 反序列化
转义
- decodeURI( ) URl中未转义的字符
- decodeURIComponent( ) URI组件中的未转义字符
- encodeURI( ) URI中的转义字符
- encodeURIComponent( ) 转义URI组件中的字符
- escape( ) 对字符串转义
- unescape( ) 给转义字符串解码
- URIError 由URl的编码和解码方法抛出
eval
JavaScript中的eval是Python中eval和exec的合集，既可以编译代码也可以获取返回值。
- eval()
- EvalError 执行字符串中的JavaScript代码
正则表达式
A.定义正则表达式
- /.../ 用于定义正则表达式
- /.../g 表示全局匹配
- /.../i 表示不区分大小写
- /.../m 表示多行匹配
JS正则匹配时本身就是支持多行，此处多行匹配只是影响正则表达式^和$，m模式也会使用^$来匹配换行的内容)
1 var pattern = /^Java\w*/gm; 2 var text = "JavaScript is more fun than \nJavaEE or JavaBeans!"; 3 result = pattern.exec(text) 4 result = pattern.exec(text) 5 result = pattern.exec(text)
注：定义正则表达式也可以 reg= new RegExp()
B.匹配
JavaScript中支持正则表达式，其主要提供了两个功能：
<1>test(string) 检查字符串中是否和正则匹配
1 n = 'uui99sdf' 2 reg = /\d+/ 3 reg.test(n) ---> true 4 5 # 只要正则在字符串中存在就匹配，如果想要开头和结尾匹配的话，就需要在正则前后加 ^和$
<2>exec(string) 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。
1 获取正则表达式匹配的内容，如果未匹配，值为null，否则，获取匹配成功的数组。 2 3 非全局模式 4 获取匹配结果数组，注意：第一个元素是第一个匹配的结果，后面元素是正则子匹配（正则内容分组匹配） 5 var pattern = /\bJava\w*\b/; 6 var text = "JavaScript is more fun than Java or JavaBeans!"; 7 result = pattern.exec(text) 8 9 var pattern = /\b(Java)\w*\b/; 10 var text = "JavaScript is more fun than Java or JavaBeans!"; 11 result = pattern.exec(text) 12 13 全局模式 14 需要反复调用exec方法，来一个一个获取结果，直到匹配获取结果为null表示获取完毕 15 var pattern = /\bJava\w*\b/g; 16 var text = "JavaScript is more fun than Java or JavaBeans!"; 17 result = pattern.exec(text) 18 19 var pattern = /\b(Java)\w*\b/g; 20 var text = "JavaScript is more fun than Java or JavaBeans!"; 21 result = pattern.exec(text)
<3>字符串中相关方法
1 obj.search(regexp) 获取索引位置，搜索整个字符串，返回匹配成功的第一个位置(g模式无效) 2 obj.match(regexp) 获取匹配内容，搜索整个字符串，获取找到第一个匹配内容，如果正则是g模式找到全部 3 obj.replace(regexp, replacement) 替换匹配替换，正则中有g则替换所有，否则只替换第一个匹配项， 4 $数字：匹配的第n个组内容； 5 $&：当前匹配的内容； 6 $`：位于匹配子串左侧的文本； 7 $'：位于匹配子串右侧的文本 8 $$：直接量$符号
时间处理
JavaScript中提供了时间相关的操作，时间操作中分为两种时间：
- 时间统一时间
- 本地时间（东8区）
更多操作参见：http://www.shouce.ren/api/javascript/main.html
4.语句和异常
(1)JavaScript中支持两个中条件语句，分别是：if 和 switch
1 if(条件){ 2 3 }else if(条件){ 4 5 }else{ 6 7 }
1 switch(name){ 2 case '1': 3 age = 123; 4 break; 5 case '2': 6 age = 456; 7 break; 8 default : 9 age = 777; 10 }
(2)循环语句
1 var names = ["alex", "tony", "rain"]; 2 3 for(var i=0;i<names.length;i++){ 4 console.log(i); 5 console.log(names[i]); 6 }
方法二
1 while(条件){ 2 // break; 3 // continue; 4 }
(3)异常处理
1 try { 2 //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行 3 } 4 catch (e) { 5 // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。 6 //e是一个局部变量，用来指向Error对象或者其他抛出的对象 7 } 8 finally { 9 //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。 10 }
注：主动跑出异常 throw Error('xxxx')
5.函数
1 // 普通函数 2 function func(arg){ 3 return true; 4 } 5 6 // 匿名函数 7 var func = function(arg){ 8 return "tony"; 9 } 10 11 // 自执行函数 12 (function(arg){ 13 console.log(arg); 14 })('123')
注意：对于JavaScript中函数参数，实际参数的个数可能小于形式参数的个数，函数内的特殊值arguments中封装了所有实际参数。
6.作用域
JavaScript中每个函数都有自己的作用域，当出现函数嵌套时，就出现了作用域链。当内层函数使用变量时，会根据作用域链从内到外一层层的循环，
如果不存在，则异常。
切记：所有的作用域在创建函数且未执行时候就已经存在。
1 function f2(){ 2 var arg= 111; 3 function f3(){ 4 console.log(arg); 5 } 6 7 return f3; 8 } 9 10 ret = f2(); 11 ret();
1 function f2(){ 2 var arg= [11,22]; 3 function f3(){ 4 console.log(arg); 5 } 6 arg = [44,55]; 7 return f3; 8 } 9 10 ret = f2(); 11 ret();
注：声明提前，在JavaScript引擎“预编译”时进行。
更多：http://www.cnblogs.com/wupeiqi/p/5649402.html
a.js没有块级作用域
b.js是函数作用域
c.js如果出现函数嵌套函数，则就会出现作用域链,从内逐步向外部找,找不到则报错。
d.JavaScript的作用域在被执行之前已经创建。
1 xo = 'alex'; 2 3 function Func(){ 4 var xo = "seven"; 5 function inner(){ 6 7 console.log(xo); 8 } 9 return inner; 10 } 11 12 var ret = Func(); 13 ret(); 14 // 输出结果： seven
1 xo = 'alex'; 2 3 function Func(){ 4 var xo = "eirc"; 5 function inner(){ 6 7 console.log(xo); 8 } 9 xo = 'seven'; 10 return inner; 11 } 12 13 var ret = Func(); 14 ret(); 15 // 输出结果： seven
1 xo = 'alex';<br> 2 function Bar(){ 3 console.log(xo); 4 } 5 6 function Func(){ 7 var xo = "seven"; 8 9 return Bar; 10 } 11 12 var ret = Func(); 13 ret(); 14 // 输出结果： alex
当执行【ret();】时，由于其代指的是inner函数，此函数的作用域链在执行之前已经被定义为：全局作用域 -> Func函数作用域 -> inner函数作用域，
所以，在执行【ret();】时，会根据已经存在的作用域链去寻找变量
7.闭包
闭包是指可以包含自由（未绑定到特定对象）变量的代码块。
「闭包」，是指拥有多个变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。
闭包是个函数，而它「记住了周围发生了什么」。表现为由「一个函数」体中定义了「另个函数」
由于作用域链只能从内向外找，默认外部无法获取函数内部变量。闭包，在外部获取函数内部的变量。
1 function f2(){ 2 var arg= [11,22]; 3 function f3(){ 4 return arg; 5 } 6 return f3; 7 } 8 9 ret = f2(); 10 ret();
8.面向对象
1 function Foo (name,age) { 2 this.Name = name; 3 this.Age = age; 4 this.Func = function(arg){ 5 return this.Name + arg; 6 } 7 } 8 9 var obj = new Foo('alex', 18); 10 var ret = obj.Func("sb"); 11 console.log(ret);
对于上述代码需要注意：
- Foo充当的构造函数
- this代指对象
- 创建对象时需要使用 new
上述代码中每个对象中均保存了一个相同的Func函数，从而浪费内存。使用原型和可以解决该问题：
1 function Foo (name,age) { 2 this.Name = name; 3 this.Age = age; 4 } 5 Foo.prototype = { 6 GetInfo: function(){ 7 return this.Name + this.Age 8 }, 9 Func : function(arg){ 10 return this.Name + arg; 11 } 12 }
