【温故而知新-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 
时间: 2024-10-10 03:04:44

【温故而知新-Javascript】对象的相关文章

JavaScript 对象

JavaScript 中的所有事物都是对象:字符串.数值.数组.函数... 此外,JavaScript 允许自定义对象. JavaScript 对象 JavaScript 提供多个内建对象,比如 String.Date.Array 等等. 对象只是带有属性和方法的特殊数据类型. 建 JavaScript 对象 通过 JavaScript,您能够定义并创建自己的对象. 创建新对象有两种不同的方法: 定义并创建对象的实例 使用函数来定义对象,然后创建新的对象实例

javascript对象简介

javascript对象可分为三大类: 1.javascript本地对象和内置对象 2.浏览器对象(BOM) 3.文档对象(DOM) 一:javascript内置对象 1.Array(数组对象) 2.Number(数字对象) 3.String(字符串对象) 4.Boolean(布尔对象) 5.Math(数学对象) 6.RegExp(正则对象) 7.Date(日期时间对象) 二:浏览器对象(BOM) 1.Window对象: 2.Screen对象:可以获取屏幕的信息 3.Navigator:可以获取

【温故而知新-Javascript】使用 Ajax(续)

1. 准备向服务器发送数据 Ajax 最常见的一大用途是向服务器发送数据.最典型的情况是从 客户端发送表单数据,即用户在form元素所含的各个 input 元素里输入的值.下面代码展示了一张简单的表单: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>基本表单</title> <style>

【温故而知新-Javascript】使用canvas元素(第一部分)

1. 开始使用 canvas 元素 canvas 元素非常简单,这是指它所有的功能都体现在一个JavaScript对象上,因此该元素本身只有两个属性:width 和 height. canvas 元素里的内容会在浏览器不支持此元素时作为备用内容显示.下面例子展示了canvas 元素和一些简单的备用内容. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

【温故而知新-Javascript】理解 DOM

DOM(Document Object Model,文档对象模型)允许我们用 JavaScript 来探查和操作 HTML 文档里的内容.它对于创建丰富性内容而言是必不可少的一组功能. 1. 理解文档对象模型 DOM 是一组对象的集合,这些对象代表了HTML文档里的各个元素.顾名思义,DOM就像一个模型,它由代表文档的众多对象组成. 先来个简单的HTML文档的例子: <!DOCTYPE html> <html> <head> <meta name="au

JavaScript对象--------------你又知道那些

今天我和大家带来的是JavaScript对象的一些属性和函数(方法),通过这些了解,我们又能做出那些页面效果呢,下面就来进行今天的主题. 1.完整的JavaScript是由ECMAScript.BOM(浏览器对象模型)和DOM(文档对象模型)构成的.示意图如下: 而window对象是整个BOM的核心,Window对象是客户端javascript最高层对象之一,只要打开浏览器窗口,不管该窗口中是否有打开的网页,当遇到BODY,FRAMESET或FRAME元素时,都会自动建立window对象的实例.

javascript对象的一点理解

<script type="text/javascript"> /* js对象:对象的职责是调用属性和调用方法 */ //1.对象的创建的三种方式 var obj = {}; //常用且不会浪费空间 var obj = new Object(); //var obj = Object.create(); /* 第三种方式测试的时候有问题,百度下,发现 Object.create() 方法创建一个拥有指定原型和若干个指定属性的对象. 参数: prototype 必需. 要用作

JavaScript对象之关联数组

Tip: 内容摘抄自<JavaScript权威指南>,看过该书的同学可以忽略本文. 存取一个对象的属性的方式: obj.attr; obj["attr"]; 两者最重要的区别就是前者的属性名是标示符,后者的属性名是一个字符串. 用"."运算符来存取一个对象的属性时,属性名是标示符,JavaScript程序中,标示符必须被逐字输入,它们不是一种数据类型,因此程序不能对他们进行操作. 用数组的概念"[]"来存取一个对象的属性时,属性名是用

15条规则解析JavaScript对象布局(__proto__、prototype、constructor)

大家都说JavaScript的属性多,记不过来,各种结构复杂不易了解.确实JS是一门入门快提高难的语言,但是也有其他办法可以辅助记忆.下面就来讨论一下JS的一大难点-对象布局,究竟设计JS这门语言的人当时是怎么做的?设计完之后又变成了什么? 我们来看一张图: 相信大家对这张图都不陌生了,构造函数有一个prototype属性指向其原型.相反原型也有一个constructor指向构造函数.与此同时实例也有一个constructor指向构造函数,这简直就是互相捆绑生怕找不到啊不是吗? 还有一个我们称之

如何判断Javascript对象是否存在

Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言描述的算法如下: if (myObj不存在){ 声明myObj; } 你可能会觉得,写出这段代码很容易.但是实际上,它涉及的语法问题,远比我们想象的复杂.Juriy Zaytsev指出,判断一个Javascript对象是否存在,有超过50种写法.只有对Javascript语言的实现细节非常清楚,才可能分得清它们的区别