温故而知新-Javascript对象

Posted 2020-08-12

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了温故而知新-Javascript对象相关的知识，希望对你有一定的参考价值。

1 创建对象

javascript 支持对象的概率。有多种方法可以用来创建对象。

<!DOCTYPE html>
<html lang="en">
<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 lang="en">
<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 lang="en">
<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 lang="en">
<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 lang="en">
<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 lang="en">
<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 lang="en">
<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

以上是关于温故而知新-Javascript对象的主要内容，如果未能解决你的问题，请参考以下文章

温故而知新-Javascript使用 DOM 元素

温故而知新-Javascript对象

温故而知新-Javascript使用 Window 对象

温故而知新-Javascript使用 Document 对象

温故而知新-Javascript理解 DOM

温故而知新-Javascript为DOM元素设置样式