IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript 对象 -> 正文阅读

[JavaScript知识库]JavaScript 对象

在这里插入图片描述

创建无属性,无方法的对象

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;">
    </head>
    <body>
       <script type="text/javascript">
            // 定义一个对象,该对象没有任何属性和方法    
            var p = {};
            // 为p对象增加name, age 属性
            p.age = 30;
            p.name = 'lili';

            // 为p对象增加info方法
            p.info = function()
            {
                document.writeln("namge:"+this.age + "<br/>" + "age:"+this.age);
            }

            // 调用p对象的info()方法
            p.info();
       </script>
    </body>
</html>

创建对象

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;">
    </head>
    <body>
        <script type="text/javascript">
            function Person(name, age)
            {
                this.name = name;
                this.age = age;
            }

            var p = new Person('john', 33);

            if (p instanceof Person) {
                document.writeln("p 是Person的实例<br/>");
            }

            if (p instanceof Object) {
                document.writeln("p 是Object的实例<br/>");
            }

        </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;">
    </head>
    <body>
        <script type="text/javascript">
            function Person(name, age)
            {
                this.name = name;
                this.age = age;
                this.info = function() 
                {
                    document.writeln("name:"+this.name +" age:"+this.age);
                }
            }

            var p = new Person('jims', 18);
            for (propName in p)
            {
                document.writeln("p对象的"+propName + '属性值为:'+ p[propName] + "<br/>");
            }

            p.info();
        </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;">
    </head>
    <body>
        <script type="text/javascript">
            // 创建Person函数
            function Person(name, age)
            {
                this.name = name;
                this.age = age;
                // 为Person对象指定info方法
                this.info = function()
                {
                    // 输出Person实例的name和age属性
                    document.writeln("name:"+this.name);
                    document.writeln("age:"+this.age);
                }
            }

            // 创建Person实例屏
            var p1 = new Person('LIMING', 29);
            p1.info();
            document.writeln("<hr/>");

            var p2 = new Person('XIAOHONG', 23);
            p2.info();
        </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;">
    </head>
    <body>
        <script type="text/javascript">
            function Person()
            {
                var locVal = 'JavaScript';
                this.info = function()
                {
                    document.writeln("locVal:" + locVal);
                    return locVal;
                }
            }

            var p = new Person();
            // 调用p对象的info()方法
            var val = p.info();
            // 输出val返回值,该返回值即局部变量的locVal
            alert(val);
        </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;">
    </head>
    <body>
        <script type="text/javascript">
            // 定义一个Person函数,同时也定义了Person类
            function Person(name, age)
            {
                // 将局部变量name, age赋值给实例属性name,age
                this.name = name;
                this.age = age;
                // 使用内嵌函数定义了Person()类的方法
                this.info = function()
                {
                    document.writeln("姓名:" + this.name + "<br/>");
                    document.writeln("年龄:" + this.age + "<br/>");
                }
            }
            // 创建Person的实例p1
            var p1 = new Person('KEKE', 22);
            // 执行Person的info()方法
            p1.info();
            // 此处不可调用walk方法,变量p还没有walk方法
            // 将walk方法增加到Person的prototype属性上
            Person.prototype.walk = function()
            {
                document.writeln(this.name + ' do walk....<br/>');
            }
            document.writeln('<br/>');
            // 创建Person的实例p2
            var p2 = new Person('LiMing', 32);
            p2.info();
            document.writeln('<hr/>');
            // 执行p2的walk方法
            p2.walk();
            // 次数p1也具有了walk方法
            // 执行p1的walk方法
            p1.walk();
        </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;">
    </head>
    <body>
        <script type="text/javascript">
            // 为Array增加indexof方法,将该函数增加到prototype属性上
            Array.prototype.indexof = function(obj)
            {
                // 定义result的值为-1
                var result = -1;
                // 遍历数组的每个元素
                for (var i=0; i<this.length; i++)
                {
                    // 当数组的第i个元素值等于obj时
                    if (this[i] == obj) 
                    {
                        result = i;
                        break;
                    }
                }

                // 返回该元素所在的位置
                return result;
            }

            var arr = [4, 3, 5, 6, 8, 9];
            alert(arr.indexof(6));
        </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;">
    </head>
    <body>
        <script type="text/javascript">
            // 定义一个函数,同时也定义了一个Person类
            function Person(name, age)
            {
                // 将name,age形参赋值给name,age实例属性
                this.name = name;
                this.age = age;
            }

            // 分别以两种方式创建Personshili
            var p1 = new Person();
            var p2 = new Person('keke', 22);

                
            p1.age = 99;

            // 输出p1的属性值
            document.writeln("p1的属性:"+p1.name + ' ' +p1.age + "<br/>");

            // 输出p2的属性值
            document.writeln("p2的属性:" + p2.name + " " + p2.age);
        </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;s">
    </head>
    <body>
        <script type="text/javascript">
            // 创建空对象
            var myObj = new Object();
            // 增加属性
            myObj.name = 'kego';
            myObj.age = 22;

            myObj.info = function()
            {
                document.writeln("这里是info方法");
            }

            document.writeln(myObj.name + myObj.age);

            myObj.info();
        </script>    
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html;">
    </head>
    <body>
        <script type="text/javascript">
            // 定义一个对象
            var person = 
            {
                // 定义属性
                name : 'gogo',
                age  : 18,

                // 定义数组
                schools : ['小学', '中学', '高中'],
                // 定义四个属性;对象数组
                parents : [
                    {
                        name : 'father',
                        age : 50,
                        address: 'zhuhai'
                    },
                    {
                        name : 'mother',
                        age : 48,
                        address : 'shanghai'
                    }
                ]
            };

            alert(person.parents);
        </script>
    </body>
</html>
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-12 16:23:29  更:2022-05-12 16:24:18 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 20:06:42-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码