javascript之数据类型、数据、变量、内存、对象、函数
来源：互联网 发布：淘宝官方 编辑：程序博客网 时间：2024/05/29 04:26
思维导图：
数据类型：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>01_数据类型</title></head><body><!--1. 分类 * 基本(值)类型 * String: 任意字符串 * Number: 任意的数字 * boolean: true/false * undefined: undefined * null: null * 对象(引用)类型 * Object: 任意对象 * Function: 一种特别的对象(可以执行) * Array: 一种特别的对象(数值下标, 内部数据是有序的)2. 判断 * typeof: * 可以判断: undefined/ 数值 / 字符串 / 布尔值 / function * 不能判断: null与object object与array * instanceof: * 判断对象的具体类型 * === * 可以判断: undefined, null--><script type="text/javascript"> //1. 基本 // typeof返回数据类型的字符串表达 var a console.log(a, typeof a, typeof a==='undefined',a===undefined ) // undefined 'undefined' true true console.log(undefined==='undefined') a = 4 console.log(typeof a==='number') a = 'atguigu' console.log(typeof a==='string') a = true console.log(typeof a==='boolean') a = null console.log(typeof a, a===null) // 'object' console.log('-----------------') //2. 对象 var b1 = { b2: [1, 'abc', console.log], b3: function () { console.log('b3') return function () { return 'xfzhang' } } } console.log(b1 instanceof Object, b1 instanceof Array) // true false console.log(b1.b2 instanceof Array, b1.b2 instanceof Object) // true true console.log(b1.b3 instanceof Function, b1.b3 instanceof Object) // true true console.log(typeof b1.b2, '-------') // 'object' console.log(typeof b1.b3==='function') // true console.log(typeof b1.b2[2]==='function') b1.b2[2](4) console.log(b1.b3()()) /*var obj = { name: 'Tom', age: 12 } function test () { var a = 3 } var arr = [3, 'abc'] arr[1]*/</script></body></html><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>01_相关问题</title></head><body><!--1. undefined与null的区别? * undefined代表定义未赋值 * nulll定义并赋值了, 只是值为null2. 什么时候给变量赋值为null呢? * 初始赋值, 表明将要赋值为对象 * 结束前, 让对象成为垃圾对象(被垃圾回收器回收)3. 严格区别变量类型与数据类型? * 数据的类型 * 基本类型 * 对象类型 * 变量的类型(变量内存值的类型) * 基本类型: 保存就是基本类型的数据 * 引用类型: 保存的是地址值--><script type="text/javascript"> // 实例: 实例对象 // 类型: 类型对象 function Person (name, age) {// 构造函数 类型 this.name = name this.age = age } var p = new Person('tom', 12) // 根据类型创建的实例对象 // Person('jack', 12) // 1. undefined与null的区别? var a console.log(a) // undefined a = null console.log(a) // null //起始 var b = null // 初始赋值为null, 表明将要赋值为对象 //确定对象就赋值 b = ['atguigu', 12] //最后 b = null // 让b指向的对象成为垃圾对象(被垃圾回收器回收) // b = 2 var c = function () { } console.log(typeof c) // 'function'</script></body></html>======================
数据、变量、内存：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>02_数据_变量_内存</title></head><body><!--1. 什么是数据? * 存储在内存中代表特定信息的'东东', 本质上是0101... * 数据的特点: 可传递, 可运算 * 一切皆数据 * 内存中所有操作的目标: 数据 * 算术运算 * 逻辑运算 * 赋值 * 运行函数2. 什么是内存? * 内存条通电后产生的可储存数据的空间(临时的) * 内存产生和死亡: 内存条(电路版)==>通电==>产生内存空间==>存储数据==>处理数据==>断电==>内存空间和数据都消失 * 一块小内存的2个数据 * 内部存储的数据 * 地址值 * 内存分类 * 栈: 全局变量/局部变量 * 堆: 对象3. 什么是变量? * 可变化的量, 由变量名和变量值组成 * 每个变量都对应的一块小内存, 变量名用来查找对应的内存, 变量值就是内存中保存的数据4. 内存,数据, 变量三者之间的关系 * 内存用来存储数据的空间 * 变量是内存的标识--><script type="text/javascript"> var age = 18 console.log(age) var obj = {name: 'Tom'} console.log(obj.name) function fn () { var obj = {name: 'Tom'} } var a = 3 var b = a + 2</script></body></html>关于赋值和内存问题：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>关于赋值和内存的问题</title></head><body><!-- 问题: var a = xxx, a内存中到底保存的是什么? * xxx是基本数据, 保存的就是这个数据 * xxx是对象, 保存的是对象的地址值 * xxx是一个变量, 保存的xxx的内存内容(可能是基本数据, 也可能是地址值)--><script type="text/javascript"> var a = 3 a = function () { } var b = 'abc' a = b b = {} a = b</script></body></html>关于引用变量赋值问题：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>02_关于引用变量赋值问题</title></head><body><!--关于引用变量赋值问题 * 2个引用变量指向同一个对象, 通过一个变量修改对象内部数据, 另一个变量看到的是修改之后的数据 * 2个引用变量指向同一个对象, 让其中一个引用变量指向另一个对象, 另一引用变量依然指向前一个对象--><script type="text/javascript"> var obj1 = {name: 'Tom'} var obj2 = obj1 obj2.age = 12 console.log(obj1.age) // 12 function fn (obj) { obj.name = 'A' } fn(obj1) console.log(obj2.name) //A var a = {age: 12} var b = a a = {name: 'BOB', age: 13} b.age = 14 console.log(b.age, a.name, a.age) // 14 Bob 13 function fn2 (obj) { obj = {age: 15} } fn2(a) console.log(a.age)</script></body></html>关于数据传递问题：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>02_关于数据传递问题</title></head><body><!--问题: 在js调用函数时传递变量参数时, 是值传递还是引用传递 * 理解1: 都是值(基本/地址值)传递 * 理解2: 可能是值传递, 也可能是引用传递(地址值)--><script type="text/javascript"> var a = 3 function fn (a) { a = a +1 } fn(a) console.log(a) function fn2 (obj) { console.log(obj.name) } var obj = {name: 'Tom'} fn2(obj)</script></body></html>内存管理：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>02_内存管理</title></head><body><!--问题: JS引擎如何管理内存?1. 内存生命周期 * 分配小内存空间, 得到它的使用权 * 存储数据, 可以反复进行操作 * 释放小内存空间2. 释放内存 * 局部变量: 函数执行完自动释放 * 对象: 成为垃圾对象==>垃圾回收器回收--><script type="text/javascript"> var a = 3 var obj = {} obj = undefined function fn () { var b = {} } fn() // b是自动释放, b所指向的对象是在后面的某个时刻由垃圾回收器回收</script></body></html>============================
对象：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>03_对象</title></head><body><!--1. 什么是对象? * 多个数据的封装体 * 用来保存多个数据的容器 * 一个对象代表现实中的一个事物2. 为什么要用对象? * 统一管理多个数据3. 对象的组成 * 属性: 属性名(字符串)和属性值(任意)组成 * 方法: 一种特别的属性(属性值是函数)4. 如何访问对象内部数据? * .属性名: 编码简单, 有时不能用 * ['属性名']: 编码麻烦, 能通用--><script type="text/javascript"> var p = { name: 'Tom', age: 12, setName: function (name) { this.name = name }, setAge: function (age) { this.age = age } } p.setName('Bob') p['setAge'](23) console.log(p.name, p['age'])</script></body></html>对象相关问题：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>03_相关问题</title></head><body><!--问题: 什么时候必须使用['属性名']的方式? 1. 属性名包含特殊字符: - 空格 2. 属性名不确定--><script type="text/javascript"> var p = {} //1. 给p对象添加一个属性: content type: text/json // p.content-type = 'text/json' //不能用 p['content-type'] = 'text/json' console.log(p['content-type']) //2. 属性名不确定 var propName = 'myAge' var value = 18 // p.propName = value //不能用 p[propName] = value console.log(p[propName])</script></body></html>=============================
函数：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>04_函数</title></head><body><!--1. 什么是函数? * 实现特定功能的n条语句的封装体 * 只有函数是可以执行的, 其它类型的数据不能执行2. 为什么要用函数? * 提高代码复用 * 便于阅读交流3. 如何定义函数? * 函数声明 * 表达式4. 如何调用(执行)函数? * test(): 直接调用 * obj.test(): 通过对象调用 * new test(): new调用 * test.call/apply(obj): 临时让test成为obj的方法进行调用--><script type="text/javascript"> /* 编写程序实现以下功能需求: 1. 根据年龄输出对应的信息 2. 如果小于18, 输出: 未成年, 再等等! 3. 如果大于60, 输出: 算了吧! 4. 其它, 输出: 刚好! */ function showInfo (age) { if(age<18) { console.log('未成年, 再等等!') } else if(age>60) { console.log('算了吧!') } else { console.log('刚好!') } } showInfo(17) showInfo(20) showInfo(65) function fn1 () { //函数声明 console.log('fn1()') } var fn2 = function () { //表达式 console.log('fn2()') } fn1() fn2() var obj = {} function test2 () { this.xxx = 'atguigu' } // obj.test2() 不能直接, 根本就没有 test2.call(obj) // obj.test2() // 可以让一个函数成为指定任意对象的方法进行调用 console.log(obj.xxx)</script></body></html>回调函数：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>05_回调函数</title></head><body><button id="btn">测试点击事件</button><!--1. 什么函数才是回调函数? 1). 你定义的 2). 你没有调 3). 但最终它执行了(在某个时刻或某个条件下)2. 常见的回调函数? * dom事件回调函数 ==>发生事件的dom元素 * 定时器回调函数 ===>window * ajax请求回调函数(后面讲) * 生命周期回调函数(后面讲)--><script type="text/javascript"> document.getElementById('btn').onclick = function () { // dom事件回调函数 alert(this.innerHTML) } //定时器 // 超时定时器 // 循环定时器 setTimeout(function () { // 定时器回调函数 alert('到点了'+this) }, 2000) /*var a = 3 alert(window.a) window.b = 4 alert(b)*/</script></body></html>============================
IIFE：Immediately-Invoked Function Expression
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>06_IIFE</title></head><body><!--1. 理解 * 全称: Immediately-Invoked Function Expression2. 作用 * 隐藏实现 * 不会污染外部(全局)命名空间 * 用它来编码js模块--><script type="text/javascript"> (function () { //匿名函数自调用 var a = 3 console.log(a + 3) })() var a = 4 console.log(a) ;(function () { var a = 1 function test () { console.log(++a) } window.$ = function () { // 向外暴露一个全局函数 return { test: test } } })() $().test() // 1. $是一个函数 2. $执行后返回的是一个对象</script></body></html>函数中的this：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>07_函数中的this</title></head><body><!--1. this是什么? * 任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window * 所有函数内部都有一个变量this * 它的值是调用函数的当前对象2. 如何确定this的值? * test(): window * p.test(): p * new test(): 新创建的对象 * p.call(obj): obj--><script type="text/javascript"> function Person(color) { console.log(this) this.color = color; this.getColor = function () { console.log(this) return this.color; }; this.setColor = function (color) { console.log(this) this.color = color; }; } Person("red"); //this是谁? window var p = new Person("yello"); //this是谁? p p.getColor(); //this是谁? p var obj = {}; p.setColor.call(obj, "black"); //this是谁? obj var test = p.setColor; test(); //this是谁? window function fun1() { function fun2() { console.log(this); } fun2(); //this是谁? window } fun1();</script></body></html>=================================
分号问题：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>01_分号问题</title></head><body><!--1. js一条语句的后面可以不加分号2. 是否加分号是编码风格问题, 没有应该不应该，只有你自己喜欢不喜欢3. 在下面2种情况下不加分号会有问题 * 小括号开头的前一条语句 * 中方括号开头的前一条语句4. 解决办法: 在行首加分号5. 强有力的例子: vue.js库6. 知乎热议: https://www.zhihu.com/question/20298345--><script type="text/javascript"> var a = 3 ;(function () { })() /* 错误理解 var a = 3(function () { })(); */ var b = 4 ;[1, 3].forEach(function () { }) /* 错误理解 var b = 4[3].forEach(function () { }) */</script></body></html>阅读全文
0 0
- javascript之数据类型、数据、变量、内存、对象、函数
- javascript基础编程の变量、对象、数据类型及函数
- JavaScript对象、函数、变量
- javascript之数据类型与变量
- JavaScript 中的数据&变量&内存
- JavaScript（2）变量、数据类型、对象
- JavaScript 数据类型 、JS 变量 、JS 对象
- 第三章 JavaScript 变量、数据类型、对象
- JavaScript 面向对象程序设计 变量，函数定义之不可不知
- JavaScript（一）--变量和数据类型/流程控制语句/函数/网页时钟/基于对象编程
- JavaScript基础_变量、数据类型、函数
- JavaScript深入之变量对象
- 初学javascript之变量的数据类型
- javascript学习之变量和数据类型
- 《JavaScript 闯关记》之变量和数据类型
- JavaScript基本概念之变量与数据类型
- JavaScript基础(一)之语法、变量、数据类型
- 《JavaScript 闯关记》之变量和数据类型
- 【数据结构之线性表总结】
- 数据结构实验之链表三：链表的逆置
- vtk单窗口显示多个源数据代码
- jsp三大指令
- bzoj 1731/hdu 3592（差分约束）
- javascript之数据类型、数据、变量、内存、对象、函数
- SpringMVC总结以及在面试中的一些问题
- 破解Navicat for MySQL
- BZOJ 2809 [Apio2012]dispatching dfs序+左偏树
- 关于markdown window10系统安装报错
- OkHttp深入理解（2）RetryAndFollowUpInterceptor
- 离线赛20171008总结
- 初识XML
- 前端之路——jQuery第三课（利用已学的jq，制作一个失去焦点时，为空报错的表单验证）
