一 ，使用object创建对象
>
// 创建对象
var stu = new Object()
// 给对象添加属性
stu.name='jibu'
stu[9527] = 'jibu'//特殊属性名使用中括号
// 为对象添加方法
stu.study = function(){
console.log('学习')
}
// 调用对象属性和方法
console.log(stu.name,stu['name'])
//调用方法
stu.study()
二 ，使用构造函数创建对象
>
// 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()
三 字面量创建对象
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出来的当前对象
>
// 函数中的this，表示函数的调用者
var a = 1function f1() {
var a = 2
console.log(this)
// 解决局部变量和全局变量同名问题
console.log('局部变量: ', a)
console.log('全局变量: ', window.a)
console.log('全局变量: ', this.a)}
f1()
文章图片
示例二
>
window.onload = function() {
document.querySelector('#btn').onclick = function() {
console.log(this) //此处this表示事件源 触发事件的目标元素
}
}
文章图片
示例三
>
function Student(name, age) {
// 构造函数中this,表示将来new出来的当前对象
this.name = name
this.age = age
}
五 基本数据类型和引用数据类型 基本数据类型
string,number,boolean,undefined,null
>
var a = 5
var b = a
b = 8
console.log(a)
console.log(b)
创建变量a,b引用a相当于赋值了一份，修改互不影响
文章图片
引用数据类型
object,array,Student…
>
var stu1 = {
name: 'tom',
age: 18
}
var stu2 = stu1;
//将stu1地址赋值给stu2
stu1.name = 'alice'
console.log(stu1.name)
console.log(stu2.name)
这里会发现和基本数据类型操作一样但是结果不一样会互相影响，
这里就涉及到了内存问题
文章图片
内存分为两种：
- 栈内存
基本数据类型的变量和引用数据类型的变量的引用,会存储在栈内存中，存取速度比较快 - 堆内存
引用数据类型的变量，会存储在堆内存中，存取速度较慢
文章图片
引用数据类型的变量会存储在栈里面(内存地址)，其对象会存储在堆里面，stu2引用stu1其实就是内存地址的引用是一样的，所有修改的时候结果都是一样的
文章图片
基本数据类型的变量和值都是存储在栈中的，把a的值给b，所有修改互不影响
六 闭包 如何理解闭包？
- 在一个函数内部又定义了一个函数，这个定义在内部的函数就是闭包
- 闭包能够读取其他函数内部变量的函数
- 闭包是某个作用域内定义的函数，该函数可以访问这个作用域的所有变量
- 从作用上来说，闭包就是将函数内部和外部函数连接起来的一座桥梁
- 在函数的内部，可以读取到函数内部的变量
- 让变量的值始终保存在内存中
>
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)
}
}
>
ul {
width: 300px;
height: 300px;
border: 1px solid #ccc;
}
文章图片
因为循环在点击元素按钮的时候就已经结束了，所有始终获取的都是最后一个，这就形成了闭包
解决方法一：
不在函数内部定义含，将函数定义在外面，在函数内部调用
>
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
}
解决方法二：
为元素添加属性用来存储变量
>
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)
}
}
解决方法三：
使用let定义变量
块级作用域，它所申明的变量所在的区域不会收到外部影响，称为暂时性死去
>
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)
}
}
七, Json JavaScript Object Notation 是一种轻量级的数据交换格式，用于表示JavaScript对象的一种方式，采用与编程语言无关的文本格式，易于编写和阅读，同时也易于解析和生成
基本用法
{“属性名”:“属性值”,“属性名”:“属性值”…}
注意
- Json结构是由一系列的键值对组成，称为Json对象
- 属性名使用双引号
- Json和对象字面量的区别：JSON属性必须使用双引号，而对象字面量可以不加
>
//复合属性 值为json对象
var user = {
"name": {
"firstName": "ji",
"lastName": "bu"
},
"age": 100
}
console.log(user.name.firstName)
Json对象的集合
>
//复合属性 值为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])
}
JSON 操作
>
//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)
【JavaScript|JavaScript 自定义对象】
文章图片
推荐阅读
- vue|Vue + Element UI 实现权限管理系统（页面权限控制（菜单 + 按钮））
- javascript|express+mongodb+vue实现增删改查-全栈之路
- 数据库|20189216 《网络攻防技术》第十周作业
- 趣学Java|干掉Session（这个跨域认证解决方案真的优雅）
- javascript|关于单元测试的一些看法
- Java|Redis Pipeline原来是这么用的
- 工具|StreamLit构造Web应用
- 算法|JavaScript数据结构与算法 - 哈希表详解
- 前端|ApiPost中的Mock如何使用