首页 > 作文

JavaScript 自定义对象方法汇总

更新时间:2023-04-04 21:22:01 阅读: 评论:0

一 使用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 表示当前对象

函数中的this,表示调用函数的当前对象事件绑定的匿名回调函数中的this,表示事件源构造函数中的this,表示将来new出来的当前对象

示例一

<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.querylector('#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对象的一种方式,采用与编程语言无关的文本格式,易于编写和阅读,同时也易于解析和生成

基本用法

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

注意:

json结构是由一系列的键值对组成,称为json对象属性名使用双引号json和对象字面量的区别:json属性必须使用双引号,而对象字面量可以不加

符合属性

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

json对象的集合

<script>        //复合属性 值为json对象        var ur = [{                    "id": 1,                    "firstname": "ji",                    "lastname": "bu"                }, {                    "id": 1,                    "firstname": "ji",                    "lastname": "bu"                }, {                    "id": 1,                    "firstname": "ji",                    "lastname": "bu"                },            ]            //循环        for (var i = 0; i < ur.length; i++) {            console.log(ur[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.par(str)        console.log(typeof obj)    </script>

到此这篇关于javascript 自定义对象介绍的文章就介绍到这了,更多相关javasc2021新年文案短句ript 自定义对象内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com!

本文发布于:2023-04-04 21:22:00,感谢您对本站的认可!

本文链接:https://www.wtabcd.cn/fanwen/zuowen/74a6dbac6e35f9ff638cb557b2ab02ff.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

本文word下载地址:JavaScript 自定义对象方法汇总.doc

本文 PDF 下载地址:JavaScript 自定义对象方法汇总.pdf

标签:对象   函数   变量   属性
相关文章
留言与评论(共有 0 条评论)
   
验证码:
推荐文章
排行榜
  • JavaScript 自定义对象方法汇总
    一 使用object创建对象
Copyright ©2019-2022 Comsenz Inc.Powered by © 专利检索| 网站地图