HTML5中JavaScript的对象语法

前言

JavaScript中也有对象,本章主要是介绍JS中对象的基本语法, 本章的重点: "this"的引用

  • 1, 创建一个简单的JS对象
<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>JavaScript中对象的基本语法</title>
    </head>
    <body>
        <script type="text/javascript">
//           创建一个人对象
//            var person = {
//                name : 'Alex',
//                age : 25
//            }
//            console.log(person.name);
            var student = {
                name : 'Lily',
                age : 18,
                run : function (){
                    console.log(this.name + '迟到了,被老师罚跑操场');
                },
                eat : function(rose){
                    console.log(this.age + '岁, ' + '刚好是一朵' + rose);
                }
            }
//            调用对象中的方法
            student.run();
            student.eat('玫瑰花');
        </script>
    </body>
</html>
  • 注意 : 在创建JS对象时,如果对象中有函数,那么函数是不能直接拿到对象中的属性的.所以,这里提出了一个新词"this",我们可以通过"this"来调用成员变量,它代表的意思就是当前对象,比如说例子中的this就是当前对象student.

  • 2, 遍历对象

<!DOCTYPE html>
<html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>JavaScript中对象的基本语法</title>
    </head>
    <body>
        <script type="text/javascript">
            var student = {
                name : 'Lily',
                age : 18,
                height : 1.65,
                width : 80,
                friends : ['Jhon', 'Smith'],
                run : function (){
                    console.log(this.name + '迟到了,被老师罚跑操场');
                },
                eat : function(rose){
                    console.log(this.age + '岁, ' + '刚好是一朵' + rose);
                }
            }
            循环遍历对象
            for(var Sname in  student) {
                console.log(Sname, student[Sname]);
            }
            student.run();
            student.eat('排骨大侠');
            console.log(student.friends[1]);
        </script>
    </body>
</html>
  • 注意 : 本章需要注意的是: 如何调用对象中的函数,以及This的引入.
  • 运行结果 :


    Snip20160318_22.png
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容