• 技术文章 >web前端 >js教程

    如何理解javascript的对象

    醉折花枝作酒筹醉折花枝作酒筹2021-07-22 14:25:26原创99

    在JS中或者说在面向对象的编程语言中,对象是一系列属性和方法的组合。一个属性包含属性名和属性值,这个值可以是任意类型的数据,也可以是个函数,这种情况下函数也被称为方法。

    本教程操作环境:windows7系统、javascript1.8.5版、Dell G3电脑。

    1.1 什么是对象?

    对象是事物,在现实世界中,一个球,一张桌子,一辆汽车都是对象。

    对象就是具有可描述特征的事物,我们可以用某种特定的方式去影响和操作它。

    在JS中或者说在面向对象的编程语言中,对象是一系列属性和方法的组合。

    一个属性包含属性名和属性值,这个值可以是任意类型的数据,也可以是个函数,这种情况下函数也被称为方法。

    而在JS中,你遇到的所有东西几乎都是对象,那么我们来了解一下对象的细节。

    1.2 对象的特征?

    对象有属性,也就是对象的特征,可以通过点符号来访问一个对象的属性。

    objectName.propertyName;

    如果把对象比作现实中的一个球,那这个球就是一个对象,拥有属性,有颜色有大小。这些可以这样表示:

    var ball = new Object();
    ball.color = “red";
    ball.size = 12;

    对象还有方法,方法用于定义对象的行为方式。

    比如这个球可能有滚动的方法可以计算能滚多远,有弹跳的方法可以计算跳多高。

    可以这样表示:

    ball.roll = function() {
    return this.size * laps
    }

    1.3 访问对象的属性

    前面讲过我们可以通过点符号来访问对象的属性,但如果是这样的情况,还能通过点符号访问对象的属性吗:

    var ball = new Object();
    ball.color = “red";
    ball.size = 12;
    var spec = “color”;
    ball.spec ??

    这里假设有一个变量spec,我们需要通过这个变量spec来访问对象属性。

    但如果用点符号将会访问ball的spec属性然后返回一个undefined,说明这里直接将spec当做了一个属性而不是变量。

    如果我们想要获得变量的值,来作为对象的属性那应该怎么做呢?

    可以使用方括号标记访问,这个标记法在属性名称那里是动态判定的,这样就可以通过存储在变量中的字符串来访问属性了:

    ball[spec]; // red

    1.4 枚举对象的属性

    另外我们可以通过for in循环语句来枚举对象的所有属性:

    var ball = {color: “red”, size: 12, border: 2};
    for (var prop in ball) {
    console.log(“ball.” + prop + “=“ + obj[prop]);
    }
    // ball.color = red
    // ball.size = 12
    // ball.border = 2
    // 如果希望继承的属性不显示,那么可以用hasOwnProperty函数来过滤一遍
    var bar = {a: 1, b: 2, c: 3};
    function Foo() {
    this.color = 'red';
    }
    Foo.prototype = bar;
    var obj = new Foo();
    for (var prop in obj) {
    if (obj.hasOwnProperty(prop)) {
    console.log(prop);
    }
    }

    也可以通过Object.keys(obj)的方法来返回一个属性名集合的数组:

    var obj = {a: “123”, b: “das”, c: “web”};
    console.log(Object.keys(obj)); // [“a”,”b”,”c”];
    var arr = [“a”, “b”, “c”];
    console.log(Object.keys(arr)); // [“0”,”1”,”2”];

    【推荐学习:javascript高级教程

    以上就是如何理解javascript的对象的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:javascript
    上一篇:JavaScript有哪几种类型转换 下一篇:JavaScript中blur的用法是什么
    第16期线上培训班

    相关文章推荐

    • javascript如何自动关闭窗口• javascript如何添加事件和删除事件• javascript预编译做了啥• 如何实现javascript延时加载• JavaScript有哪几种类型转换

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网