【Javascript 基础】对象
1 创建对象
Javascript 支持对象的概率。有多种方法可以用来创建对象。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript Object </title>
</head>
<body>
<script>
var myData = new Object();
myData.name = "Luka";
myData.weather = "sunny";
document.writeln("Hello "+myData.name+".");
document.writeln("Today is "+myData.weather+".")
</script>
</body>
</html>输出结果：
Hello Luka. Today is sunny.
1.1 使用对象字面量
用对象字面向量的方式可以一口气定义一个对象及其属性。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript Object </title>
</head>
<body>
<script>
var myData = {
name:"Luka",
weather:"sunny"
};
document.writeln("Hello "+myData.name+".");
document.writeln("Today is "+myData.weather+".")
</script>
</body>
</html>1.2 将函数用作方法
对象可以添加属性，也能添加函数。属于一个对象的函数称为其方法。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript Object </title>
</head>
<body>
<script>
var myData = {
name:"Luka",
weather:"sunny",
printMessage:function(){
document.writeln("Hello "+this.name+".");
document.writeln("Today is "+this.weather+".")
}
};
myData.printMessage();
</script>
</body>
</html>2 使用对象
创建对象后，可以用来做许多事。
2.1 读取和修改属性值
对象最显而易见的操作是读取或修改属性值
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript Object </title>
</head>
<body>
<script>
var myData = {
name:"Luka",
weather:"sunny"
};
myData.name="Joe";
myData["weather"]="raining"; document.writeln("Hello "+myData.name+".");
document.writeln("It is "+myData["weather"]+".");
</script>
</body>
</html>输出结果：
Hello Joe. It is raining.
2.2 枚举对象
要枚举对象属性可以使用 for...in 语句。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript Object </title>
</head>
<body>
<script>
var myData = {
name:"Luka",
weather:"sunny",
printMessages:function(){
document.writeln("Hello "+this.name+". ");
document.writeln("Today is "+this.weather+".");
}
};
for(var prop in myData){
document.writeln("Name: "+prop+" Value: "+myData[prop]+"<br />");
}
</script>
</body>
</html>显示结果：
Name:name Value:Luka
Name:weather Value:sunny
Name:printMessages Value:function (){ document.writeln("Hello "+this.name+". "); document.writeln("Today is "+this.weather+"."); }2.3 增删属性和方法
就算是用对象字面量生成的对象，也可以为其定义新属性。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript Object </title>
</head>
<body>
<script>
var myData = {
name:"Luka",
weather:"sunny"
};
//为对象添加新属性
myData.dayOfWeek = "Monday";
//为对象添加新方法
myData.sayHello = function(){
document.writeln("Hello");
};
//对象的属性和方法可以用 delete 关键字删除
delete myData.name;
delete myData["weather"];
delete myData.sayHello;
</script>
</body>
</html>2.4 判断对象是否具有某个属性
可以用 in 表达式判断对象是否具有某个对象。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>Javascript Object </title>
</head>
<body>
<script>
var myData = {
name:"Luka",
weather:"sunny"
};
var hasName = "name" in myData;
var hasDate = "date" in myData; document.writeln("HasName: "+hasName+"<br />");
document.writeln("HasDate: "+hasDate);
</script>
</body>
</html>输出结果：
HasName: true HasDate: false
- 上一篇 »TypeScript 面向对象基础知识
- 下一篇 »java基础——简单工厂模式
