87,955
社区成员
发帖
与我相关
我的任务
分享JS的AJAX问题和链式调用问题
simple.xml
①点击提交按钮无法显示网页，找不到原因啊
链式调用
链式调用其实只不过是一种语法招数。它能让你通过重用一个初始操作来达到用少量代码表达复杂操作的目的。该技术包括两个部分：
一个创建代表HTML元素的对象的工厂。
一批对这个HTML元素执行某些操作的方法。
调用链的结构
$函数负责创建支持链式调用的对象
由于所有对象都会继承其原型对象的属性和方法，所以我们可以让定义在原型对象中的那些方法都返回用以调用方法的实例对象的引用，这样就可以对那些方法进行链式调用了。
链式调用的方法获取数据
使用回调函数从支持链式调用的方法获取数据。链式调用很适合赋值器方法，但对于取值器方法，你可能希望他们返回你要的数据而不是this(调用该方法的对象).解决方案：利用回调技术返回所要的数据.
设计一个支持方法链式调用的JS库
JS库特征：
事件： 添加和删除事件监听器、对事件对象进行规划化处理
DOM： 类名管理、样式管理
Ajax： 对XMLHttpRequest进行规范化处理
小结：
链式调用有助于简化代码的编写工作，并在某种程度上可以让代码更加简洁、易读。很多时候使用链式调用可以避免多次重复使用一个对象变量，从而减少代码量。如果想让类的接口保持一致，让赋值器和取值器都支持链式调用，那么你可以在取值器中使用回调函数来解决获取数据问题。
②这段为什么这么写？什么意思？是给_$添加函数吗？
③(function{})()什么意思？JQ里面的(function{})(jQuery)什么意思？
<?xml version="1.0" encoding="utf-8"?>
501
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>simpleRequest</title>
<script language=javascript>
var xmlHttp;
<!--创建XMLHttpRequest对象-->
function createXMLHttpRequest()
{
//判断浏览器是否支持ActiveXObject对象
if(window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
//判断浏览器是否支持XMLHttpRequest对象
else if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
<!--向服务器请求-->
function startRequest()
{
createXMLHttpRequest();
//设置在请求结束后调用handleStateChange函数
xmlHttp.onreadystatechange = handleStateChange;
//用get方法请求服务器端的simple.xml
xmlHttp.open("GET","simple.xml",true)
//发送请求
xmlHttp.send(null);
}
<!--如果一切正常，在客户端显示simple.xml中的内容-->
function handleStateChange()
{
if(xmlHttp.readyState == 4)
{
if(xmlHttp.status == 200)
{
alert(xmlHttp.responseText);
}
}
}
</script>
</head>
<body>
<form action="GET">
<p><input name="" type="submit" value="提交"/></p>
</form>
<form action="#">
<p><input type="button" value="按钮" name="B3" onclick="startRequest();"></p>
</form>
</body>
</html>
①点击提交按钮无法显示网页，找不到原因啊
链式调用
链式调用其实只不过是一种语法招数。它能让你通过重用一个初始操作来达到用少量代码表达复杂操作的目的。该技术包括两个部分：
一个创建代表HTML元素的对象的工厂。
一批对这个HTML元素执行某些操作的方法。
调用链的结构
$函数负责创建支持链式调用的对象
(function() {
/*
* 创建一个私有class
* @param {Object} els arguments 所有参数组成的类数组
*/
function _$(els) {
this.elements = []; //存放HTML元素
for(var i=0, len=els.length; i<len; i++) {
var element = els[i];
if(typeof element === 'string') {
element = document.getElementById(element);
}
this.elements.push(element);
}
}
//对HTML元素可执行的操作
_$.prototype = {
each: function() {},
setStyle: function() {},
show: function() {},
addEvent: function() {},
};
//对外开放的接口
window.$ = function() {
return new _$(arguments);
};
})();
由于所有对象都会继承其原型对象的属性和方法，所以我们可以让定义在原型对象中的那些方法都返回用以调用方法的实例对象的引用，这样就可以对那些方法进行链式调用了。
(function() {
/*
* 创建一个私有class
* @param {Object} els arguments 所有参数组成的类数组
*/
function _$(els) {
//...
}
//对HTML元素可执行的操作
_$.prototype = {
each: function(fn) { //fn 回调函数
for(var i=0; i<this.elements.length; i++) {
//执行len次，每次把一个元素elements[i]作为参数传递过去
fn.call(this, this.elements[i]);
}
return this;
},
setStyle: function(prop, value) {
this.each(function(el) {
el.style[prop] = value;
});
return this;
},
show: function() {
var that = this;
this.each(function(el) {
that.setStyle('display', 'block');
});
return this;
},
addEvent: function(type, fn) {
var addHandle = function(el) {
if(document.addEventListener) {
el.addEventListener(type, fn, false);
}else if(document.attachEvent) {
el.attachEvent('on'+type, fn);
}
};
this.each(function(el) {
addHandle(el);
});
return this;
}
};
//对外开放的接口
window.$ = function() {
return new _$(arguments);
}
})();
//----------------------- test --------
$(window).addEvent('load', function() {
$('test-1', 'test-2').show()
.setStyle('color', 'red')
.addEvent('click', function() {
$(this).setStyle('color', 'green');
});
})
链式调用的方法获取数据
使用回调函数从支持链式调用的方法获取数据。链式调用很适合赋值器方法，但对于取值器方法，你可能希望他们返回你要的数据而不是this(调用该方法的对象).解决方案：利用回调技术返回所要的数据.
window.API = window.API || function() {
var name = 'mackxu';
//特权方法
this.setName = function(name0) {
name = name0;
return this;
};
this.getName = function(callback) {
callback.call(this, name);
return this;
};
};
//------------- test ---
var obj = new API();
obj.getName(console.log).setName('zhangsan').getName(console.log);
设计一个支持方法链式调用的JS库
JS库特征：
事件： 添加和删除事件监听器、对事件对象进行规划化处理
DOM： 类名管理、样式管理
Ajax： 对XMLHttpRequest进行规范化处理
Function.prototype.method = function(name, fn) {
this.prototype[name] = fn;
return this;
};
(function() {
function _$(els) {
//...
}
/*
* Events
* addEvent
* removeEvent
*/
_$.method('addEvent', function(type, fn) {
//...
}).method('removeEvent', function(type, fn) {
})
/*
* DOM
* addClass
* removeClass
* hover
* hasClass
* getClass
* getStyle
* setStyle
*/
.method('addClass', function(classname) {
//...
}).method('removeClass', function(classname) {
//...
}).method('hover', function(newclass, oldclass) {
//...
}).method('hasClass', function(classname) {
//...
}).method('getClass', function(classname) {
//...
}).method('getStyle', function(prop) {
//...
}).method('setStyle', function(prop, val) {
//...
})
/*
* AJAX
* ajax
*/
.method('ajax', function(url, method) {
//...
});
window.$ = function() {
return new _$(arguments);
};
//解决JS库命名冲突问题
window.installHelper = function(scope, interface) {
scope[interface] = function() {
return _$(arguments)
}
}
})();
小结：
链式调用有助于简化代码的编写工作，并在某种程度上可以让代码更加简洁、易读。很多时候使用链式调用可以避免多次重复使用一个对象变量，从而减少代码量。如果想让类的接口保持一致，让赋值器和取值器都支持链式调用，那么你可以在取值器中使用回调函数来解决获取数据问题。
②这段为什么这么写？什么意思？是给_$添加函数吗？
_$.prototype = {
each: function() {},
setStyle: function() {},
show: function() {},
addEvent: function() {},
};
③(function{})()什么意思？JQ里面的(function{})(jQuery)什么意思？
...全文
请发表友善的回复…
发表回复
wudichaoren2010 2015-08-29
- 打赏
- 举报
Date.prototype.format = function(format) {
var o = {
"M+": this.getMonth() + 1, // month
"d+": this.getDate(), // day
"h+": this.getHours(), // hour
"m+": this.getMinutes(), // minute
"s+": this.getSeconds(), // second
"q+": Math.floor((this.getMonth() + 3) / 3), // quarter
"S": this.getMilliseconds()
// millisecond
}
wudichaoren2010 2015-08-29
- 打赏
- 举报
<html>
<title>-</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<script>
Date.prototype.format = function(format) {
var o = {
"M+": this.getMonth() + 1, // month
"d+": this.getDate(), // day
"h+": this.getHours(), // hour
"m+": this.getMinutes(), // minute
"s+": this.getSeconds(), // second
"q+": Math.floor((this.getMonth() + 3) / 3), // quarter
"S": this.getMilliseconds()
// millisecond
}
if (/(y+)/.test(format)) {
format = format.replace(RegExp.$1, (this.getFullYear() + "")
.substr(4 - RegExp.$1.length));
}
for (var k in o) {
if (new RegExp("(" + k + ")").test(format)) {
format = format.replace(RegExp.$1, RegExp.$1.length == 1 ? o[k]
: ("00" + o[k]).substr(("" + o[k]).length));
}
}
return format;
}
//四舍五入 v表示要转换的值 e表示要保留的位数
function round(v, e) {
var t = 1;
for (; e > 0; t *= 10, e--);
for (; e < 0; t /= 10, e++);
return Math.round(v * t) / t;
}
//本月第一天
function showMonthFirstDay() {
var Nowdate = new Date();
var MonthFirstDay = new Date(Nowdate.getYear(), Nowdate.getMonth(), 1);
return MonthFirstDay;
}
//下月第一天
function showNextFirstDay() {
var MonthFirstDay = showMonthFirstDay()
return new Date(MonthFirstDay.getYear(), MonthFirstDay.getMonth() + 1, 1)
}
/* 得到日期年月日等加数字后的日期 */
Date.prototype.dateAdd = function(interval, number) {
var d = this;
var k = { 'y': 'FullYear', 'q': 'Month', 'm': 'Month', 'w': 'Date', 'd': 'Date', 'h': 'Hours', 'n': 'Minutes', 's': 'Seconds', 'ms': 'MilliSeconds' };
var n = { 'q': 3, 'w': 7 };
eval('d.set' + k[interval] + '(d.get' + k[interval] + '()+' + ((n[interval] || 1) * number) + ')');
return d;
}
/* 计算两日期相差的日期年月日等 */
Date.prototype.dateDiff = function(interval, objDate2) {
var d = this, i = {}, t = d.getTime(), t2 = objDate2.getTime();
i['y'] = objDate2.getFullYear() - d.getFullYear();
i['q'] = i['y'] * 4 + Math.floor(objDate2.getMonth() / 4) - Math.floor(d.getMonth() / 4);
i['m'] = i['y'] * 12 + objDate2.getMonth() - d.getMonth();
i['ms'] = objDate2.getTime() - d.getTime();
i['w'] = Math.floor((t2 + 345600000) / (604800000)) - Math.floor((t + 345600000) / (604800000));
i['d'] = Math.floor(t2 / 86400000) - Math.floor(t / 86400000);
i['h'] = Math.floor(t2 / 3600000) - Math.floor(t / 3600000);
i['n'] = Math.floor(t2 / 60000) - Math.floor(t / 60000);
i['s'] = Math.floor(t2 / 1000) - Math.floor(t / 1000);
return i[interval];
}
function chktable() {
if (document.getElementById("payNum").value == "" || document.getElementById("payNum").value.search("^[0-9]*$") == -1) {
document.getElementById("errmsg").style.display = "block";//判断payNum是否为空或不是数字 提示错误
document.getElementById("errmsg").innerHTML = "提示信息：期数为空或不是数字！";
}
else {
document.getElementById("errmsg").style.display = "none";//隐藏提示信息
var moneyAmount = parseFloat(document.getElementById("moneyAmount").innerText); //获取总金额
var payNum = parseInt(document.getElementById("payNum").value); //获取分期数
var startTime = document.getElementById("beginjsdate").value; //获取开始还款日期
var myDate = new Date(startTime.substring(0, 4), startTime.substring(5, 7), startTime.substring(8, 10));//转化时间类型
var moneythen = 0; //已还款
if (myDate.getDate() > 28) {// myDate.getDate(); //获取当前日(1-31)
//如果天数大于28，就到下一个月1号开始还
myDate = showNextFirstDay(myDate);
}
var timedate = myDate.dateAdd('m', -2); //当前月份减2
var flag = true;
var data = "";
data += " <table width='750' border='0' cellspacing='0' cellpadding='0' class='pagetab' align='left'>";
data += " <tr class='header'>" +
"<td align='center' width='30' rowspan='2'>期次</td>" +
"<td align='center' rowspan='2'>还款方式</td>" +
"<td colspan='2' align='center '>各期金额</td>" +
"<td align='center' width='80' rowspan='2'>利率</td>" +
"<td align='center' width='100' rowspan='2'>计划还款日期</td>" +
"<td align='center' rowspan='2' width='150px'>备注</td>" +
"</tr>" +
"<tr class='header'>" +
"<td align='center' width='100'>本期金额</td>" +
"<td align='center' width='100'>还款余额</td>" +
"</tr>";
for (var i = 1; i <= payNum; i++) {
moneythen += moneyAmount / payNum;
timedate = myDate.dateAdd('m', 1);
timedate = timedate.format('yyyy-MM-dd');
data += "<tr height='22'>";
data += "<td>" + i + "</td>";
data += "<td>分期付款</td>";
data += "<td><input name='capital' id='capital_" + i + "' type='text' style='text-align:right;' size='11' maxlength='100' class='input' isNull='false' dataType='filter' value='" + round(moneyAmount / payNum, 2) + "' tipMsg='各期金额' Onchange='textToChange(" + i + ")'></td>";
data += "<td align='right' id='balance_" + i + "'>" + round((moneyAmount - moneythen), 2) + "</td>";
data += "<td align='right'>0.058</td>";
data += "<td><input name='repayment' id='repayment_" + i + "' type='text' size='10' maxlength='64' value='" + timedate+ "'class='readonly input' readonly ></td>";
data += "<td><input name='remarks' id='remarks_" + i + "' type='text' size='20' maxlength='100' class='input'></td>";
data += "</tr>";
}
data += " <tr class='header'>";
data += "<td> </td>";
data += "<td> </td>";
data += "<td><div id='div2' style='display: none'></div></td>";
data += "<td align='right'></td>";
data += "<td align='right'></td>";
data += "<td> </td>";
data += "<td> </td>";
data += "</tr>";
data += "</table>";
document.getElementById("div1").style.display = "block";
document.getElementById("table1").innerHTML = data;
}
}
function textToChange(num) {
if (document.getElementById("capital_" + num).value == "" || document.getElementById("capital_" + num).value.search("^[0-9]+(.[0-9]{1,2})?$") == -1) {
document.getElementById("errmsg").style.display = "block";
document.getElementById("errmsg").innerHTML = "提示信息：本金为空或不是数字！";
}
else {
document.getElementById("errmsg").style.display = "none";
var moneyAmount = parseFloat(document.getElementById("moneyAmount").innerText); //获取总金额
var capitals = document.getElementsByName("capital");
var tmpAmt = 0;
var textdiv2 = "合计：<font color='#006600'>";
for (var i = 0; i < capitals.length; i++) {
tmpAmt += parseFloat(capitals[i].value);
if (i >= (num - 1)) {
document.getElementById("balance_" + (i + 1)).innerHTML = round((moneyAmount - tmpAmt), 2);//更新本金余额
}
}
textdiv2 += round((tmpAmt), 2) + "</font> ";
if ((moneyAmount - tmpAmt) >= 0) {
textdiv2 += "<font color='red'>-" + round((moneyAmount - tmpAmt), 2) + "</font>";
}
else {
textdiv2 += "<font color='#006600'>+" + round((tmpAmt - moneyAmount), 2) + "</font>";
}
document.getElementById("div2").style.display = "block";
document.getElementById("div2").innerHTML = textdiv2;
}
}
</script>
</head>
</html>
wuxian2015 2015-06-14
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function foo()
{
alert("测试");
}
foo();
function Car(color,door){
var ocar = new Object;
ocar.color = color;
ocar.doors = door;
ocar.showColor = function(){
alert(this.color)
};
return ocar;
}
var car1 = Car("red",4);
var car2 = Car("blue",4);
car1.showColor() //output:"red"
car2.showColor() //output:"blue"
</script>
</head>
<body>
<script type="text/javascript">
/*
js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样用class来定义类,
但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类.
*/
/*
function ShapeBase()
{
this.show = function()
{
alert("ShapeBase show");
};
this.init = function()
{
alert("ShapeBase init");
};
}
*/
/*
这个类里定义了两个方法:show和init, 需要注意的是这里用到了this来声明, 而不是var, 因为用var是用来定义私有方法的
另外, 我们还可以用prototype属性来定义Shape的方法
*/
/*
ShapeBase.prototype.show=function()
{
alert("ShapeBase show");
}
ShapeBase.prototype.init=function()
{
alert("ShapeBase init");
}
*/
//上面这种写法看起来不太直观，我们可以将所有的方法写在一起
function ShapeBase()
{
}
/*
ShapeBase.prototype=
{
show:function()
{
alert("ShapeBase show");
},
init:function()
{
alert("ShapeBase init");
}
};
*/
function test(){
var s=new ShapeBase();
s.init();
s.show();
ShapeBase.StaticDraw();
}
/*
看到了吧, 其调用方式和C#一模一样, 而结果也如我们所料
到目前为止, 我们学会了如何创建js的类了, 但还只是实例方法，要是实现跟C#中的静态方法要怎么做呢？
其实, 实现js的静态方法很简单, 看下面如何实现
*/
//静态方法
ShapeBase.StaticDraw = function()
{
alert("method draw is static");
}
/*
实现JS类抽象和继承
同样, js中也不支持类继承机制，但我们可以通过将父类prototype中的成员方法复制到子类的prototype中来实现
和类的继承一样,JavaScript也没有任何机制用于支持抽象类.但利用JavaScript语言本身的性质.可以实现自己的抽象类
首先来看看js中的虚方法, 在传统语言中虚方法是要先定义的, 而包含虚方法的类就是抽象类,不能被实例化
而在JavaScript中，虚方法就可以看作该类中没有定义的方法，但已经通过this指针使用了
和传统面向对象不同的是，这里虚方法不需经过声明，而直接使用了, 并且类也可以被实例化
先定义object的extend方法, 一个为静态方法，一个为实例方法, 这两个方法用于实现继承的prototype复制
*/
Object.extend = function(destination, source) {
for (property in source) {
destination[property] = source[property];
}
return destination;
}
Object.prototype.extend = function(object) {
return Object.extend.apply(this, [this, object]);
}
//接下来我们实现一个继承类Rect, 这里先用一种简单的方法来实现
function Rect() {
}
Rect.prototype = ShapeBase.prototype; //只这一句就行了
//扩充新的方法
Rect.prototype.add=function() {
alert("Rect add");
}
/*
这种方法不能用于重写,如果改变了show方法, ShapeBase的show也会指向同一函数可能是由于prototype赋值只是简单的改变指向地址
如果上面也定义了
*/
Rect.prototype.show=function() {
alert("Rect show");
}
/*
那么执行结果如下:
function test(){
var s=new ShapeBase();
s.show(); //结果:Rect show
var r=new Rect();
r.show(); //结果:Rect show
r.add();
}
*/
//我们再使用object.extend实现继承, 并实现一个oninit虚方法, 修改ShapeBase如下
ShapeBase.prototype={
show:function()
{
alert("ShapeBase show");
},
initialize:function () {
this.oninit();
}
};
//实现Rect类继承
Rect.prototype=(new ShapeBase).extend({
//添加新的方法
add:function() {
alert("Rect add");
},
//使用这种方法可以重写show方法
show:function() {
alert("Rect show");
},
//实现虚方法
oninit:function() {
alert("Rect oninit");
}
})
function test2(){
ShapeBase.StaticDraw();
var s=new ShapeBase();
s.show(); //alert("ShapeBase show")
var r=new Rect();
r.show(); //alert("Rect show")
r.add();
r.initialize(); //alert("Rect oninit")
}
</script>
<!--
<input name="" type="button" value="test" onclick="test()"/>
-->
<input name="" type="button" value="test2" onclick="test2()"/>
</body>
</html>
wuxian2015 2015-06-14
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
function foo()
{
alert("测试");
}
foo();
function Car(color,door){
var ocar = new Object;
ocar.color = color;
ocar.doors = door;
ocar.showColor = function(){
alert(this.color)
};
return ocar;
}
var car1 = Car("red",4);
var car2 = Car("blue",4);
car1.showColor() //output:"red"
car2.showColor() //output:"blue"
</script>
</head>
<body>
<script type="text/javascript">
/*
js并不是一种面向对向的语言, 没有提供对类的支持, 因此我们不能像在传统的语言里那样用class来定义类,
但我们可以利用js的闭包封装机制来实现js类, 我们来封装一个简的Shape类.
*/
/*
function ShapeBase()
{
this.show = function()
{
alert("ShapeBase show");
};
this.init = function()
{
alert("ShapeBase init");
};
}
*/
/*
这个类里定义了两个方法:show和init, 需要注意的是这里用到了this来声明, 而不是var, 因为用var是用来定义私有方法的
另外, 我们还可以用prototype属性来定义Shape的方法
*/
/*
ShapeBase.prototype.show=function()
{
alert("ShapeBase show");
}
ShapeBase.prototype.init=function()
{
alert("ShapeBase init");
}
*/
//上面这种写法看起来不太直观，我们可以将所有的方法写在一起
function ShapeBase()
{
}
ShapeBase.prototype=
{
show:function()
{
alert("ShapeBase show");
},
init:function()
{
alert("ShapeBase init");
}
};
//静态方法
ShapeBase.StaticDraw = function()
{
alert("method draw is static");
}
function test(){
var s=new ShapeBase();
s.init();
s.show();
ShapeBase.StaticDraw();
}
/*
看到了吧, 其调用方式和C#一模一样, 而结果也如我们所料
到目前为止, 我们学会了如何创建js的类了, 但还只是实例方法，要是实现跟C#中的静态方法要怎么做呢？
其实, 实现js的静态方法很简单, 看下面如何实现
*/
</script>
<input name="" type="button" value="test" onclick="test()"/>
</body>
</html>
wudichaoren2010 2015-05-29
- 打赏
- 举报
(function() {
/*
* 创建一个私有class
* @param {Object} els arguments 所有参数组成的类数组
*/
function _$(els) {
//...
}
//对HTML元素可执行的操作
_$.prototype = {
each: function(fn) { //fn 回调函数
for(var i=0; i<this.elements.length; i++) {
//执行len次，每次把一个元素elements[i]作为参数传递过去
fn.call(this, this.elements[i]);
}
return this;
},
setStyle: function(prop, value) {
this.each(function(el) {
el.style[prop] = value;
});
return this;
},
show: function() {
var that = this;
this.each(function(el) {
that.setStyle('display', 'block');
});
return this;
},
addEvent: function(type, fn) {
var addHandle = function(el) {
if(document.addEventListener) {
el.addEventListener(type, fn, false);
}else if(document.attachEvent) {
el.attachEvent('on'+type, fn);
}
};
this.each(function(el) {
addHandle(el);
});
return this;
}
};
//对外开放的接口
window.$ = function() {
return new _$(arguments);
}
})();
//----------------------- test --------
$(window).addEvent('load', function() {
$('test-1', 'test-2').show()
.setStyle('color', 'red')
.addEvent('click', function() {
$(this).setStyle('color', 'green');
});
})
wudichaoren2010 2015-05-29
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>LJ</title>
</head>
<body>
<script type="text/javascript">
function dw(message){return document.write(message);}
function dwb(message){return document.write(message+"<br />");}
/*
javascript的方法可以分为三类：
a 类方法
b 对象方法
c 原型方法
*/
function People(name)
{
this.name=name;
//对象方法
this.Introduce=function(){
dwb("My name is "+this.name);
}
}
//类方法
People.Run=function(){
dwb("I can run")
//alert("I can run");
}
//原型方法
People.prototype.IntroduceChinese=function(){
dwb("我的名字是"+this.name);
//alert("我的名字是"+this.name);
}
//测试
var p1=new People("Windking");
p1.Introduce();
People.Run();
p1.IntroduceChinese();
/*
prototype是什么含义？
javascript中的每个对象都有prototype属性，Javascript中对象的prototype属性的解释是：返回对象类型原型的引用。
A.prototype = new B();
理解prototype不应把它和继承混淆。A的prototype为B的一个实例，可以理解A将B中的方法和属性全部克隆了一遍。A能使用B的方法和属性。
这里强调的是克隆而不是继承。可以出现这种情况：A的prototype是B的实例，同时B的prototype也是A的实例。
先看一个实验的例子
function baseClass()
{
this.showMsg = function()
{
//alert("baseClass::showMsg");
document.write("baseClass::showMsg"+"<br />");
}
}
function extendClass()
{
document.write("extendClass"+"<br />");
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg(); // 显示baseClass::showMsg
*/
/*
我们首先定义了baseClass类，然后我们要定义extentClass
但是我们打算以baseClass的一个实例为原型，来克隆的extendClass也同时包含showMsg这个对象方法。
extendClass.prototype = new baseClass()就可以阅读为：extendClass是以baseClass的一个实例为原型克隆创建的。
那么就会有一个问题，如果extendClass中本身包含有一个与baseClass的方法同名的方法会怎么样？
下面是扩展实验2：
*/
function baseClass()
{
this.showMsg = function()
{
dwb("baseClass::showMsg");
}
}
function extendClass()
{
this.showMsg =function ()
{
dwb("extendClass::showMsg");
}
}
extendClass.prototype = new baseClass();
var instance = new extendClass();
instance.showMsg();//显示extendClass::showMsg
/*
function baseClass1()
{
this.showMsg = function()
{
//alert("baseClass::showMsg");
dwb("baseClass::showMsg");
}
}
function extendClass1()
{
this.showMsg =function ()
{
//alert("extendClass::showMsg");
dwb("extendClass::showMsg");
}
}
extendClass1.prototype = new baseClass1();
var instance1 = new extendClass1();
instance1.showMsg();//显示extendClass::showMsg
*/
/*
实验证明：函数运行时会先去本体的函数中去找，如果找到则运行，找不到则去prototype中寻找函数。或者可以理解为prototype不会克隆同名函数。
那么又会有一个新的问题：
如果我想使用extendClass的一个实例instance调用baseClass的对象方法showMsg怎么办？
答案是可以使用call:
*/
extendClass.prototype = new baseClass();
var instance = new extendClass();
var baseinstance = new baseClass();
baseinstance.showMsg.call(instance);//显示baseClass::showMsg
/*
这里的baseinstance.showMsg.call(instance);阅读为“将instance当做baseinstance来调用，调用它的对象方法showMsg”
好了，这里可能有人会问，为什么不用baseClass.showMsg.call(instance);
这就是对象方法和类方法的区别，我们想调用的是baseClass的对象方法
*/
</script>
</body>
</html>
wudichaoren2010 2015-05-19
- 打赏
- 举报
基础看了
似梦飞花 2015-05-17
- 打赏
- 举报
你可以先去看下基础的东西 没必要这么急着去看这些
