<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>对象</title>
</head>
<body>
<script>
person = new Object();//定义一个对象
person.name = "Bill";//对象的属性,name
person.age = 0;
//定义对象的方法
person.doing = function donging(){
document.write(person.name+" is "+person.age+"<br />");
}
//调用对象的方法
person.doing();
//调用系统方法
document.write(person.name.toUpperCase());
</script>
</body>
</html>
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1.类:同一特性物体的统称,比如人类;
2.对象:类的具象化,比如具体的某一个人,张三.
运行图片
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>方法</title>
<script>
var All = 0;//全局变量,页面关闭时删除
//无参无返回值
function NoPerNoRet(){
alert("无参无返回值:All="+All+"(全局变量)");
}
//有参函数
function PerNoRet(per1,per2){
var Part = "!";//局部变量,方法结束时删除,包括per1,per2均为局部变量
alert(per1+" "+per2+" "+Part);
}
//有返回值函数
function NoPerRet(){
return 1;//直接return,不加任何返回值,则表示直接结束此方法.
}
//有参有返回值
function PerAndRet(per1){
if(per1 == "" || isNaN(per1)){
return "非数字!";//返回固定值
}else{
return per1;//返回变量值
}
}
</script>
</head>
<body>
<!--函数的调用,必须严格遵循函数定义的大小写-->
<button onclick="NoPerNoRet()">无参无返回值</button>
<br />
<br />
<button onclick="PerNoRet('Hello','World')">有参无返回值</button>
<br />
<br />
<button onclick="alert(NoPerRet())">有返回值函数</button>
<br />
<br />
<div>
<input type="text" id="inputNum"/>
<!--
document.getElementById().value 获得输入框值
PerAndRet(per1) 调用函数,参数为输入框获得的值
alert() 弹出框,参数为函数的返回值
ps:双引号与单引号要交叉使用 例:"aa'bb"cc"'"
-->
<button onclick="alert(PerAndRet(document.getElementById('inputNum').value))">有参有返回值</button>
</div>
</body>
</html>
未点击
无参无返回值
有参无返回值
有返回值
有返回值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>对象</title>
<style type="text/css">
.code{
color: gray;
border: 1px solid gainsboro;
font-size: 15px;
}
pre{
margin: 1em -19em;
}
.result{
color: gray;
background-color: ghostwhite;
font-size: 16px;
padding: 0.5em 1em;
}
h3{
color: red;
}
.result span:first-child{
display: block;
float: left;
width: 4em;
color: black;
}
</style>
<script type="text/javascript">
function objDisplay(eleId,obj){
if(typeof(eleId)!="string" || typeof(obj)!="object"){
alert("Function objDisplay() need the first parameter string and second object !")
}else{
var ele = document.getElementById(eleId);
if(!ele || !obj){
alert("Please check the parameter !")
}else{
for(i in obj){
var div = document.createElement("div");
for(var j=0;j<2;j++){
var span = document.createElement("span");
if(j==0) span.innerHTML = i+" : ";
else span.innerHTML = obj[i];
div.appendChild(span);
}
ele.appendChild(div);
}
}
}
}
</script>
</head>
<body>
<ul>
<li>
<h3>01. 直接创建对象实例</h3>
<h4>代码:</h4>
<div class="code">
<pre>
//新建对象
person = new Object();
//对象属性以及方法的定义
person.name = "case01";
person.age = 1;
person.say = function say(){
return "Hello , Case01 ! 直接创建对象"
}
//自定义展示对象内容的方法
objDisplay("case01",person);
//调用对象属性或方法的方式
document.getElementById("case01_01").innerHTML = person.say();
</pre>
</div>
<h4>结果:</h4>
<div id="case01" class="result"></div>
<p id="case01_01" class="result"></p>
<hr />
<script>
//新建对象
person = new Object();
//对象属性以及方法的定义
person.name = "case01";
person.age = 1;
person.say = function say(){
return "Hello , Case01 ! 直接创建对象"
}
//自定义展示对象内容的方法
objDisplay("case01",person);
//调用对象属性或方法的方式
document.getElementById("case01_01").innerHTML = person.say();
</script>
</li>
<li>
<h3>02. 使用{}创建对象实例</h3>
<h4>代码:</h4>
<div class="code">
<pre>
//新建对象并定义其属性方法
var pers = {
name:"case02",
age:2,
say:function say(){return "Hello , Case02 ! {}创建对象"}
};
//自定义展示对象内容的方法
objDisplay("case02",pers);
//调用对象属性或方法的方式
document.getElementById("case02_01").innerHTML = pers.say();
</pre>
</div>
<h4>结果:</h4>
<div id="case02" class="result"></div>
<p id="case02_01" class="result"></p>
<hr />
<script>
//新建对象并定义其属性方法
var pers = {
name:"case02",
age:2,
say:function say(){return "Hello , Case02 ! {}创建对象"}
};
//自定义展示对象内容的方法
objDisplay("case02",pers);
//调用对象属性或方法的方式
document.getElementById("case02_01").innerHTML = pers.say();
</script>
</li>
<li>
<h3>03. 对象构造器</h3>
<h4>代码:</h4>
<div class="code">
<pre>
//通过函数实现对象便利构造器
function per(name,age){
this.name = name;
this.age = age;
this.say = say;
function say(){
return "Hello , Case03 ! 对象构造器"
}
}
//直接通过函数创建对象
var perObj = new per("case03",3);
//为对象添加新的属性
perObj.sex = "male";
//自定义展示对象内容的方法
objDisplay("case03",perObj);
//调用对象属性或方法的方式
document.getElementById("case03_01").innerHTML = perObj.say();
</pre>
</div>
<h4>结果:</h4>
<div id="case03" class="result"></div>
<p id="case03_01" class="result"></p>
<hr />
<script>
//通过函数实现对象便利构造器
function per(name,age){
this.name = name;
this.age = age;
this.say = say;
function say(){
return "Hello , Case03 ! 对象构造器"
}
}
//直接通过函数创建对象
var perObj = new per("case03",3);
//为对象添加新的属性
perObj.sex = "male";
//自定义展示对象内容的方法
objDisplay("case03",perObj);
//调用对象属性或方法的方式
document.getElementById("case03_01").innerHTML = perObj.say();
</script>
</li>
</ul>
</body>
</html>
结果
网友评论