文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

JavaScript 自定义对象方法汇总

2024-04-02 19:55

关注

一 使用object创建对象


<script>
        // 创建对象
        var stu = new Object()
        // 给对象添加属性
        stu.name='jibu'
        stu[9527] = 'jibu'  //特殊属性名使用中括号
        // 为对象添加方法
        stu.study = function(){
            console.log('学习')
        }
        // 调用对象属性和方法
        console.log(stu.name,stu['name'])
        //调用方法
        stu.study()
    </script>

二 使用构造函数创建对象


<script>
        // 1.定义一个构造函数创建对象
        function Student() {
            // 对象属性
            this.name = 'jibu'
            this.age = 18
                //对象的方法
            this.study = function() {
                console.log('正在学习......')
            }
        }
        // 2. 调用构造函数创建对象
        var stu = new Student()
        console.log(stu.name)
        stu.study()

        // 定义一个带参数的构造函数
        // 定义一个构造函数创建对象
        function Student(name, age) {
            // 对象属性
            this.name = name
            this.age = age
                //对象的方法
            this.study = function() {
                console.log('正在学习......')
            }
        }
        //调用构造函数创建对象
        var stu = new Student('tom', 18)
        console.log(stu.name)
        stu.study()
    </script>

三 字面量创建对象


var stu = {
            name: 'jibu',
            age: 100,
            '特殊变量':1111
            study: function() {
                console.log('正在学习')
            },
            show: function() {
                console.log('我叫' + this.name, '年龄:' + this.age)
            }
        }
        console.log(stu.name)
        console.log(stu['特殊变量']

四 this 关键字

this 表示当前对象

示例一


<script>
        // 函数中的this,表示函数的调用者
        var a = 1

        function f1() {
            var a = 2
            console.log(this)
                // 解决局部变量和全局变量同名问题
            console.log('局部变量: ', a)
            console.log('全局变量: ', window.a)
            console.log('全局变量: ', this.a)

        }
        f1()
    </script>

示例二


 <script>
        window.onload = function() {
            document.querySelector('#btn').onclick = function() {
                console.log(this) //此处this表示事件源 触发事件的目标元素
            }
        }
    </script>
</head>

<body>
    <button id="btn">按钮</button>
</body>

示例三


<script>
        function Student(name, age) {
            // 构造函数中this,表示将来new出来的当前对象 
            this.name = name
            this.age = age
        }
    </script>

五 基本数据类型和引用数据类型

基本数据类型


string,number,boolean,undefined,null

<script>
        var a = 5
        var b = a
        b = 8
        console.log(a)
        console.log(b)
    </script>

创建变量a,b引用a相当于赋值了一份,修改互不影响

引用数据类型


object,array,Student…

<script>
        var stu1 = {
            name: 'tom',
            age: 18
        }
        var stu2 = stu1; //将stu1地址赋值给stu2
        stu1.name = 'alice'
        console.log(stu1.name)
        console.log(stu2.name)
    </script>

这里会发现和基本数据类型操作一样但是结果不一样会互相影响,
这里就涉及到了内存问题

内存分为两种:

栈内存:

基本数据类型的变量和引用数据类型的变量的引用,会存储在栈内存中,存取速度比较快

堆内存:

引用数据类型的变量,会存储在堆内存中,存取速度较慢

引用数据类型的变量会存储在栈里面(内存地址),其对象会存储在堆里面,stu2引用stu1其实就是内存地址的引用是一样的,所有修改的时候结果都是一样的

基本数据类型的变量和值都是存储在栈中的,把a的值给b,所有修改互不影响

六 闭包

如何理解闭包?

闭包的用途

闭包的使用

 


   <script>
        function add() {
            for (var i = 1; i <= 5; i++) {
                var li = document.createElement('li')
                li.innerText = 'li' + i
                li.onclick = function() {
                    console.log('点击了第' + i + 'li')
                }
                document.getElementById('myul').appendChild(li)
            }
        }
    </script>
    <style>
        ul {
            width: 300px;
            height: 300px;
            border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <button onclick="add()">添加元素</button>
    <ul id="myul">

    </ul>
</body>



因为循环在点击元素按钮的时候就已经结束了,所有始终获取的都是最后一个,这就形成了闭包

解决方法一:

不在函数内部定义含,将函数定义在外面,在函数内部调用


<script>
        function add() {
            for (var i = 1; i <= 5; i++) {
                var li = createLi(i)
                document.getElementById('myul').appendChild(li)
            }
        }

        function createLi(num) {
            var li = document.createElement('li')
            li.innerText = 'li' + num
            li.onclick = function() {
                console.log('点击了第' + num + 'li')
            }
            return li
        }

解决方法二:

为元素添加属性用来存储变量


<script>
        function add() {
            for (var i = 1; i <= 5; i++) {
                var li = document.createElement('li')
                li.innerText = 'li' + i
                li.num = i; //存储数据
                li.onclick = function() {
                    console.log('点击了第' + this.num + 'li')
                }
                document.getElementById('myul').appendChild(li)
            }
        }
    </script>

解决方法三:

使用let定义变量

块级作用域,它所申明的变量所在的区域不会收到外部影响,称为暂时性死去


<script>
        function add() {
            for (let i = 1; i <= 5; i++) {
                var li = document.createElement('li')
                li.innerText = 'li' + i
                li.onclick = function() {
                    console.log('点击了第' + i + 'li')
                }
                document.getElementById('myul').appendChild(li)
            }
        }
    </script>

七 Json

JavaScript Object Notation 是一种轻量级的数据交换格式,用于表示JavaScript对象的一种方式,采用与编程语言无关的文本格式,易于编写和阅读,同时也易于解析和生成

基本用法

{“属性名”:“属性值”,“属性名”:“属性值”…}

注意:

符合属性


<script>
        //复合属性 值为json对象
        var user = {
            "name": {
                "firstName": "ji",
                "lastName": "bu"
            },
            "age": 100
        }
        console.log(user.name.firstName)
    </script>

Json对象的集合


<script>
        //复合属性 值为json对象
        var user = [{
                    "id": 1,
                    "firstName": "ji",
                    "lastName": "bu"
                }, {
                    "id": 1,
                    "firstName": "ji",
                    "lastName": "bu"
                }, {
                    "id": 1,
                    "firstName": "ji",
                    "lastName": "bu"
                },

            ]
            //循环
        for (var i = 0; i < user.length; i++) {
            console.log(user[i])
        }
    </script>

JSON 操作


 <script>
        //JSon对象转换成字符串
        var stu = {
            "id": 1,
            "name": "jibu"
        }
        console.log(typeof stu)
        var str = JSON.stringify(stu);
        console.log(typeof str)


        // 将字符串转成JSON
        var str = '{"id": 1,"name": "jibu"}'
        console.log(typeof str)

        var obj = JSON.parse(str)
        console.log(typeof obj)
    </script>



到此这篇关于JavaScript 自定义对象介绍的文章就介绍到这了,更多相关JavaScript 自定义对象内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯