01. 数据类型

1. 分类(2大类)
* 基本(值)类型
* Number: 任意数值
* String: 任意文本
* Boolean: true/false
* undefined: undefined
* null: null
* 对象(引用)类型
* Object: 任意对象
* Array: 特别的对象类型(下标/内部数据有序)
* Function: 特别的对象类型(可执行)
2. 判断
* typeof:
* 可以区别: 数值, 字符串, 布尔值, undefined, function
* 不能区别: null与对象, 一般对象与数组
* instanceof
* 专门用来判断对象数据的类型: Object, Array与Function
* ===
* 可以判断: undefined和null

// typeof: 返回的是数据类型的字符串表达形式
//1. 基本类型
var a
console.log(a, typeof a, a === undefined) // undefined 'undefined' true
console.log(a === typeof a) // false a = 3
console.log(typeof a === 'number')
a = 'atguigu'
console.log(typeof a === 'string')
a = true
console.log(typeof a === 'boolean') a = null
console.log(a === null) // true
console.log(typeof a) // 'object' console.log('--------------------------------') //2. 对象类型
var b1 = {
b2: [2, 'abc', console.log],
b3: function() {
console.log('b3()')
}
}
console.log(b1 instanceof Object, typeof b1) // true 'object'
console.log(b1.b2 instanceof Array, typeof b1.b2) // true 'object'
console.log(b1.b3 instanceof Function, typeof b1.b3) // true 'function' console.log(typeof b1.b2[2]) // 'function'
console.log(b1.b2[2]('abc')) // 'abc' undefined

1. undefined与null的区别?
* undefined代表没有赋值
* null代表赋值了, 只是值为null
2. 什么时候给变量赋值为null呢?
* var a = null //a将指向一个对象, 但对象此时还没有确定
* a = null //让a指向的对象成为垃圾对象
3. 严格区别变量类型与数据类型?
* js的变量本身是没有类型的, 变量的类型实际上是变量内存中数据的类型
* 变量类型:
* 基本类型: 保存基本类型数据的变量
* 引用类型: 保存对象地址值的变量
* 数据对象
* 基本类型
* 对象类型

// 1. undefined与null的区别?
var a1
var a2 = null
console.log(a1, a2) // 2. 什么时候给变量赋值为null呢?
//初始
var a3 = null
//中间
var name = 'Tom'
var age = 12
a3 = {
name: name,
age: age
}
//结束
a3 = null

02. 数据、变量、内存

1. 什么是数据?
* 存储于内存中代表特定信息的'东东', 本质就是0101二进制
* 具有可读和可传递的基本特性
* 万物(一切)皆数据, 函数也是数据
* 程序中所有操作的目标: 数据
* 算术运算
* 逻辑运算
* 赋值
* 调用函数传参
...
2. 什么是内存?
* 内存条通电后产生的存储空间(临时的)
* 产生和死亡: 内存条(集成电路板)==>通电==>产生一定容量的存储空间==>存储各种数据==>断电==>内存全部消失
* 内存的空间是临时的, 而硬盘的空间是持久的
* 一块内存包含2个数据
* 内部存储的数据(一般数据/地址数据)
* 内存地址值数据
* 内存分类
* 栈: 全局变量, 局部变量 (空间较小)
* 堆: 对象 (空间较大)
3. 什么是变量?
* 值可以变化的量, 由变量名与变量值组成
* 一个变量对应一块小内存, 变量名用来查找到内存, 变量值就是内存中保存的内容
4. 内存,数据, 变量三者之间的关系
* 内存是一个容器, 用来存储程序运行需要操作的数据
* 变量是内存的标识, 我们通过变量找到对应的内存, 进而操作(读/写)内存中的数据

var a1 = 3
var a2 = a1 + 4
var a3 = {}
a3.name = 'Tom'

问题: var a = xxx, a内存中到底保存的是什么?
* xxx是一个基本数据
* xxx是一个对象
* xxx是一个变量

var a = 3
a = function () {}
var b = 'abc'
a = b
b = []
a = b

关于引用变量赋值问题
* 2个引用变量指向同一个对象, 通过一个引用变量修改对象内部数据, 另一个引用变量也看得见
* 2个引用变量指向同一个对象,让一个引用变量指向另一个对象, 另一个引用变量还是指向原来的对象

//1. 2个引用变量指向同一个对象, 通过一个引用变量修改对象内部数据, 另一个引用变量也看得见
var obj1 = {}
var obj2 = obj1
obj2.name = 'Tom'
console.log(obj1.name)
function f1(obj) {
obj.age = 12
}
f1(obj2)
console.log(obj1.age) //2. 2个引用变量指向同一个对象,让一个引用变量指向另一个对象, 另一个引用变量还是指向原来的对象
var obj3 = {name: 'Tom'}
var obj4 = obj3
obj3 = {name: 'JACK'}
console.log(obj4.name)
function f2(obj) {
obj = {name: 'Bob'}
}
f2(obj4)
console.log(obj4.name)

问题: 在js调用函数时传递变量参数时, 是值传递还是引用传递
* 只有值传递, 没有引用传递, 传递的都是变量的值, 只是这个值可能是基本数据, 也可能是地址(引用)数据
* 如果后一种看成是引用传递, 那就值传递和引用传递都可以有

function f(a) {
console.log(a)
}
var n = 4
f(n) //传递的是n的值 --->值传递 function f2(a) {
a.name = 'atguigu'
}
n = {}
f2(n) // 传递的是n指向的对象 ---> 引用传递 ???
console.log(n.name)

问题: JS引擎如何管理内存?
1. 内存生命周期
1). 分配需要的内存
2). 使用分配到的内存
3). 不需要时将其释放/归还
2. 释放内存
* 为执行函数分配的栈空间内存: 函数执行完自动释放
* 存储对象的堆空间内存: 当内存没有引用指向时, 对象成为垃圾对象, 垃圾回收器后面就会回收释放此内存

var obj = {}
obj = null // ? function fn () {
var a = 3
var b = {}
}
fn() // ?

03. 对象

1. 什么是对象?
* 代表现实中的某个事物, 是该事物在编程中的抽象
* 多个数据的集合体(封装体)
* 用于保存多个数据的容器
2. 为什么要用对象?
* 便于对多个数据进行统一管理
3. 对象的组成
* 属性
* 代表现实事物的状态数据
* 由属性名和属性值组成
* 属性名都是字符串类型, 属性值是任意类型
* 方法
* 代表现实事物的行为数据
* 是特别的属性==>属性值是函数
4. 如何访问对象内部数据?
* .属性名: 编码简单, 但有时不能用
* ['属性名']: 编码麻烦, 但通用

// 创建对象
var p = {
name: 'Tom',
age: 12,
setName: function (name) {
this.name = name
},
setAge: function (age) {
this.age = age
}
} // 访问对象内部数据
console.log(p.name, p['age'])
p.setName('Jack')
p['age'](23)
console.log(p['name'], p.age)

问题: 什么时候必须使用['属性名']的方式?
* 属性名不是合法的标识名
* 属性名不确定

// 创建对象
var p = {} /*情形一: 属性名不是合法的标识名*/
/*需求: 添加一个属性: content-type: text/json */
// p.content-type = 'text/json' //不正确
p['content-type'] = 'text/json' /*情形二: 属性名不确定*/
var prop = 'xxx'
var value = 123
// p.prop = value //不正确
p[prop] = value
console.log(p['content-type'], p[prop])

04. 函数

1. 什么是函数?
* 具有特定功能的n条语句的封装体
* 只有函数是可执行的, 其它类型的数据是不可执行的
* 函数也是对象
2. 为什么要用函数?
* 提高代码复用
* 便于阅读和交流
3. 如何定义函数?
* 函数声明
* 表达式
4. 如何调用(执行)函数?
* test()
* new test()
* obj.test()
* test.call/apply(obj)

function f1 () { // 函数声明
console.log('f1()')
}
var f2 = function () { // 表达式
console.log('f2()')
} /*
编写程序实现以下功能需求:
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(22) /*
函数也是对象
*/
function fn() { }
console.log(fn instanceof Object) // 是Object类型的实例
console.log(fn.prototype) // 内部有属性
console.log(fn.call) // 内部有方法
fn.t1 = 'atguigu' // 可以添加属性
fn.t2 = function () { // 可以添加方法
console.log('t2() '+this.t1)
}
fn.t2()

1. 什么函数才是回调函数?
* 你定义的
* 你没有直接调用
* 但最终它执行了(在特定条件或时刻)
2. 常见的回调函数?
* DOM事件函数
* 定时器函数

* ajax回调函数(后面学)
* 生命周期回调函数(后面学)

//1. DOM事件函数
var btn = document.getElementById('btn')
btn.onclick = function () {
alert(this.innerHTML)
} //2. 定时器函数
setInterval(function () {
alert('到点啦!')
}, 2000)

IIEF-立即调用函数表达式
1. 理解
* 全称: Immediately-Invoked Function Expression 立即调用函数表达式
* 别名: 匿名函数自调用
2. 作用
* 隐藏内部实现
* 不污染外部命名空间

(function (i) {
var a = 4
function fn() {
console.log('fn ', i+a)
}
fn()
})(3)

函数中的this
1. this是什么?
* 一个关键字, 一个内置的引用变量
* 在函数中都可以直接使用this
* this代表调用函数的当前对象
* 在定义函数时, this还没有确定, 只有在执行时才动态确定(绑定)的
2. 如何确定this的值?
* test()
* obj.test()
* new test()
* test.call(obj)
前置知识:
* 本质上任何函数在执行时都是通过某个对象调用的

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是谁? var p = new Person("yello"); //this是谁? p.getColor(); //this是谁? var obj = {};
p.setColor.call(obj, "black"); //this是谁? var test = p.setColor;
test(); //this是谁? function fun1() {
function fun2() {
console.log(this);
} fun2(); //this是谁?
}
fun1();

01. JavaScript基础总结深入的更多相关文章

  1. 初识 Javascript.01 -- Javascript基础|输出方式、变量、变量命名规范、数据类型、

    Javascript基础 1 聊聊Javascript 1.1 Javascript的历史来源 94年网景公司   研发出世界上第一款浏览器. 95年 sun公司   java语言诞生 网景公司和su ...

  2. javascript基础01

    javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...

  3. javaScript系列 [01]-javaScript函数基础

    [01]-javaScript函数基础 1.1 函数的创建和结构 函数的定义:函数是JavaScript的基础模块单元,包含一组语句,用于代码复用.信息隐蔽和组合调用. 函数的创建:在javaScri ...

  4. javascript基础入门之js中的数据类型与数据转换01

    javascript基础入门之js中的数据结构与数据转换01 js的组成(ECMAScript.BOM.DOM)        js中的打印语句:        数据类型        变量      ...

  5. JavaScript基础第01天笔记

    JavaScript基础第01天 1 - 编程语言 1.1 编程 编程: 就是让计算机为解决某个问题而使用某种程序设计语言编写程序代码,并最终得到结果的过程. 计算机程序: 就是计算机所执行的一系列的 ...

  6. JavaScript基础系列目录(2014.06.01~2014.06.08)

    下列文章,转载请亲注明链接出处,谢谢! 链接地址: http://www.cnblogs.com/ttcc/tag/JavaScript%20%E5%9F%BA%E7%A1%80%E7%9F%A5%E ...

  7. 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】

    一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...

  8. JavaScript基础:数据类型的中的那些少见多怪

    原文:JavaScript基础:数据类型的中的那些少见多怪 Javascript共有6种数据类型,其中包括3个基本数据类型(string,number,boolean).2个特殊数据类型(undefi ...

  9. javascript基础教程学习总结(1)

    摘自javascript基础教程 开始: 1.将脚本放在哪里: 1.1 放在html和<html>之间 范例: <!DOCTYPE html PUBLIC "-//W3C/ ...

随机推荐

  1. 2019 SDN上机第3次作业

    1. 利用Mininet仿真平台构建如下图所示的网络拓扑,配置主机h1和h2的IP地址(h1:10.0.0.1,h2:10.0.0.2),测试两台主机之间的网络连通性 创建拓扑 配置主机h1和h2的I ...

  2. navicat密码错误的问题

    上集说到我的navicat打不开对吧..‘ 这下就来聊聊打开了的问题 下午非常开心,就打开了mysql的图形化界面, 但是,在我连接数据库的时候就报错了 错误就是密码错误那行 什么什么‘localho ...

  3. [Taro] 解决 使用 Taro UI 小程序下 Iconfont 图标 不显示问题

    Taro UI 配置 第三方 的 文档 配置即可解决 https://taro-ui.jd.com/#/docs/icon 解决问题: 之前 只有在H5下 才显示 Iconfont 图标 后来按照此文 ...

  4. <Math> 165 8

    165. Compare Version Numbers class Solution { public int compareVersion(String version1, String vers ...

  5. 11/3 <binary search>

    278. First Bad Version 二分法,如果isBadVersion返回true则坏版本在左边,right = mid,否则 left = mid + 1. 注意溢出问题 left+(r ...

  6. 洛谷 P1950 长方形_NOI导刊2009提高(2)

    传送门 思路 首先定义\(h\)数组,\(h[i][j]\)表示第\(i\)行第\(j\)列最多可以向上延伸多长(直到一个被用过的格子) 然后使用单调栈算出 \(l_i\)和 \(r_i\) ,分别是 ...

  7. 前端Vue项目——课程详情页面实现

    一.详情页面路由跳转 应用 Vue Router 编程式导航通过 this.$router.push() 来实现路由跳转. 1.绑定查看详情事件 修改 src/components/Course/Co ...

  8. WPF 目录树绑定 与 遍历

    定义树节点,(编译环境VS2017) public class GBTreeNode : INotifyPropertyChanged { private string _deviceId = str ...

  9. jquery.pagination.js的使用

    html页面 //要显示内容表格 <table id="gifts"> <tr class='first'> <th>时间</th> ...

  10. 应用层协议:HTTPS

    1. HTTPS定义 Hyper Text Transfer Protocol over Secure Socket Layer,安全的超文本传输协议,网景公式设计了SSL(Secure Socket ...