耀极客论坛

 找回密码
 立即注册
查看: 387|回复: 0

JavaScript 自定义对象方法汇总

[复制链接]

336

主题

318

帖子

22万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
220555
发表于 2022-5-7 01:36:12 | 显示全部楼层 |阅读模式
  这篇文章主要介绍了JavaScript 自定义对象,主要介绍一些方法object创建对象、使用构造函数创建对象、字面量创建对象、等展开话题,具有一定的参考价值,需要的小伙伴可以参考一下

一 使用object创建对象
  1. ‹script>
  2.         // 创建对象
  3.         var stu = new Object()
  4.         // 给对象添加属性
  5.         stu.name='jibu'
  6.         stu[9527] = 'jibu'  //特殊属性名使用中括号
  7.         // 为对象添加方法
  8.         stu.study = function(){
  9.             console.log('学习')
  10.         }
  11.         // 调用对象属性和方法
  12.         console.log(stu.name,stu['name'])
  13.         //调用方法
  14.         stu.study()
  15.     ‹/script>
复制代码
二 使用构造函数创建对象
  1. ‹script>
  2.         // 1.定义一个构造函数创建对象
  3.         function Student() {
  4.             // 对象属性
  5.             this.name = 'jibu'
  6.             this.age = 18
  7.                 //对象的方法
  8.             this.study = function() {
  9.                 console.log('正在学习......')
  10.             }
  11.         }
  12.         // 2. 调用构造函数创建对象
  13.         var stu = new Student()
  14.         console.log(stu.name)
  15.         stu.study()
  16.         // 定义一个带参数的构造函数
  17.         // 定义一个构造函数创建对象
  18.         function Student(name, age) {
  19.             // 对象属性
  20.             this.name = name
  21.             this.age = age
  22.                 //对象的方法
  23.             this.study = function() {
  24.                 console.log('正在学习......')
  25.             }
  26.         }
  27.         //调用构造函数创建对象
  28.         var stu = new Student('tom', 18)
  29.         console.log(stu.name)
  30.         stu.study()
  31.     ‹/script>
复制代码
三 字面量创建对象
  1. var stu = {
  2.             name: 'jibu',
  3.             age: 100,
  4.             '特殊变量':1111
  5.             study: function() {
  6.                 console.log('正在学习')
  7.             },
  8.             show: function() {
  9.                 console.log('我叫' + this.name, '年龄:' + this.age)
  10.             }
  11.         }
  12.         console.log(stu.name)
  13.         console.log(stu['特殊变量']
复制代码
四 this 关键字

this 表示当前对象

  • 函数中的this,表示调用函数的当前对象
  • 事件绑定的匿名回调函数中的this,表示事件源
  • 构造函数中的this,表示将来new出来的当前对象
  示例一
  1. ‹script>
  2.         // 函数中的this,表示函数的调用者
  3.         var a = 1
  4.         function f1() {
  5.             var a = 2
  6.             console.log(this)
  7.                 // 解决局部变量和全局变量同名问题
  8.             console.log('局部变量: ', a)
  9.             console.log('全局变量: ', window.a)
  10.             console.log('全局变量: ', this.a)
  11.         }
  12.         f1()
  13.     ‹/script>
复制代码

  示例二
  1. ‹script>
  2.         window.onload = function() {
  3.             document.querySelector('#btn').onclick = function() {
  4.                 console.log(this) //此处this表示事件源 触发事件的目标元素
  5.             }
  6.         }
  7.     ‹/script>
  8. ‹/head>
  9. ‹body>
  10.     ‹button id="btn">按钮‹/button>
  11. ‹/body>
复制代码
  示例三
  1. ‹script>
  2.         function Student(name, age) {
  3.             // 构造函数中this,表示将来new出来的当前对象
  4.             this.name = name
  5.             this.age = age
  6.         }
  7.     ‹/script>
复制代码


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

基本数据类型
  1. string,number,boolean,undefined,null
  2. ‹script>
  3.         var a = 5
  4.         var b = a
  5.         b = 8
  6.         console.log(a)
  7.         console.log(b)
  8.     ‹/script>
复制代码
  创建变量a,b引用a相当于赋值了一份,修改互不影响


引用数据类型
  1. object,array,Student…
  2. ‹script>
  3.         var stu1 = {
  4.             name: 'tom',
  5.             age: 18
  6.         }
  7.         var stu2 = stu1; //将stu1地址赋值给stu2
  8.         stu1.name = 'alice'
  9.         console.log(stu1.name)
  10.         console.log(stu2.name)
  11.     ‹/script>
复制代码
  这里会发现和基本数据类型操作一样但是结果不一样会互相影响,
这里就涉及到了内存问题

  内存分为两种:
  栈内存:
  基本数据类型的变量和引用数据类型的变量的引用,会存储在栈内存中,存取速度比较快
  堆内存:
  引用数据类型的变量,会存储在堆内存中,存取速度较慢

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

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

六 闭包

如何理解闭包?

  • 在一个函数内部又定义了一个函数,这个定义在内部的函数就是闭包
  • 闭包能够读取其他函数内部变量的函数
  • 闭包是某个作用域内定义的函数,该函数可以访问这个作用域的所有变量
  • 从作用上来说,闭包就是将函数内部和外部函数连接起来的一座桥梁

闭包的用途

  • 在函数的内部,可以读取到函数内部的变量
  • 让变量的值始终保存在内存中

闭包的使用
  1.    ‹script>
  2.         function add() {
  3.             for (var i = 1; i ‹= 5; i++) {
  4.                 var li = document.createElement('li')
  5.                 li.innerText = 'li' + i
  6.                 li.onclick = function() {
  7.                     console.log('点击了第' + i + 'li')
  8.                 }
  9.                 document.getElementById('myul').appendChild(li)
  10.             }
  11.         }
  12.     ‹/script>
  13.     ‹style>
  14.         ul {
  15.             width: 300px;
  16.             height: 300px;
  17.             border: 1px solid #ccc;
  18.         }
  19.     ‹/style>
  20. ‹/head>
  21. ‹body>
  22.     ‹button >添加元素‹/button>
  23.     ‹ul id="myul">
  24.     ‹/ul>
  25. ‹/body>
复制代码

  因为循环在点击元素按钮的时候就已经结束了,所有始终获取的都是最后一个,这就形成了闭包
  解决方法一:
  不在函数内部定义含,将函数定义在外面,在函数内部调用
  1. ‹script>
  2.         function add() {
  3.             for (var i = 1; i ‹= 5; i++) {
  4.                 var li = createLi(i)
  5.                 document.getElementById('myul').appendChild(li)
  6.             }
  7.         }
  8.         function createLi(num) {
  9.             var li = document.createElement('li')
  10.             li.innerText = 'li' + num
  11.             li.onclick = function() {
  12.                 console.log('点击了第' + num + 'li')
  13.             }
  14.             return li
  15.         }
复制代码
  解决方法二:
  为元素添加属性用来存储变量
  1. ‹script>
  2.         function add() {
  3.             for (var i = 1; i ‹= 5; i++) {
  4.                 var li = document.createElement('li')
  5.                 li.innerText = 'li' + i
  6.                 li.num = i; //存储数据
  7.                 li.onclick = function() {
  8.                     console.log('点击了第' + this.num + 'li')
  9.                 }
  10.                 document.getElementById('myul').appendChild(li)
  11.             }
  12.         }
  13.     ‹/script>
复制代码
  解决方法三:
  使用let定义变量
  块级作用域,它所申明的变量所在的区域不会收到外部影响,称为暂时性死去
  1. ‹script>
  2.         function add() {
  3.             for (let i = 1; i ‹= 5; i++) {
  4.                 var li = document.createElement('li')
  5.                 li.innerText = 'li' + i
  6.                 li.onclick = function() {
  7.                     console.log('点击了第' + i + 'li')
  8.                 }
  9.                 document.getElementById('myul').appendChild(li)
  10.             }
  11.         }
  12.     ‹/script>
复制代码
七 Json
  JavaScript Object Notation 是一种轻量级的数据交换格式,用于表示JavaScript对象的一种方式,采用与编程语言无关的文本格式,易于编写和阅读,同时也易于解析和生成

基本用法
  {“属性名”:“属性值”,“属性名”:“属性值”…}
  注意:

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

符合属性
  1. ‹script>
  2.         //复合属性 值为json对象
  3.         var user = {
  4.             "name": {
  5.                 "firstName": "ji",
  6.                 "lastName": "bu"
  7.             },
  8.             "age": 100
  9.         }
  10.         console.log(user.name.firstName)
  11.     ‹/script>
复制代码
Json对象的集合
  1. ‹script>
  2.         //复合属性 值为json对象
  3.         var user = [{
  4.                     "id": 1,
  5.                     "firstName": "ji",
  6.                     "lastName": "bu"
  7.                 }, {
  8.                     "id": 1,
  9.                     "firstName": "ji",
  10.                     "lastName": "bu"
  11.                 }, {
  12.                     "id": 1,
  13.                     "firstName": "ji",
  14.                     "lastName": "bu"
  15.                 },
  16.             ]
  17.             //循环
  18.         for (var i = 0; i ‹ user.length; i++) {
  19.             console.log(user[i])
  20.         }
  21.     ‹/script>
复制代码
JSON 操作
  1. ‹script>
  2.         //JSon对象转换成字符串
  3.         var stu = {
  4.             "id": 1,
  5.             "name": "jibu"
  6.         }
  7.         console.log(typeof stu)
  8.         var str = JSON.stringify(stu);
  9.         console.log(typeof str)
  10.         // 将字符串转成JSON
  11.         var str = '{"id": 1,"name": "jibu"}'
  12.         console.log(typeof str)
  13.         var obj = JSON.parse(str)
  14.         console.log(typeof obj)
  15.     ‹/script>
复制代码
  到此这篇关于JavaScript 自定义对象介绍的文章就介绍到这了,更多相关JavaScript 自定义对象内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|耀极客论坛 ( 粤ICP备2022052845号-2 )|网站地图

GMT+8, 2022-12-10 03:50 , Processed in 0.068820 second(s), 20 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表