目 录
情况讨论:var a = xxx(赋值操作),a内存中到底保存的是什么?
P11 11.尚硅谷_JS高级_函数中的this 10:50
P12 12.尚硅谷_JS高级_关于语句分号问题 18:38
P13 13.尚硅谷_JS高级_webstorm设置 23:02
P1 01.尚硅谷_JS高级_准备 07:07
WebStrom 下载及安装
1、WebStorm 卸载
2、WebStrom 下载(官网)
3、WebStrom 下载(百度网盘)
- 【链接:https://pan.baidu.com/s/1-iVrlbLbvx8MX4UZT5lIeA 提取码:zjxs】
JS高级 Xmind 思维导图
WebStorm 导入文件
P2 02.尚硅谷_JS高级_数据类型 40:43
数据类型 分类
基本(值)类型
- Number:任意数值
- String:任意文本
- Boolean:true / false
- undefined:undefined
- null:null
对象(引用)类型
- Object:任意对象([]、函数...)
- Array:特别的对象类型(数值下标 / 内部数据有序)
- Function:特别的对象类型(可执行)
数据类型 判断
typeof
- 返回数据类型的字符串表达;
- 可以区别:数值、字符串、布尔值、undefined、function;
- 不能区别:null与object、一般object与array。
instanceof
- 专门用来判断对象数据的类型:Object、Array与Function。
===
- 可以判断:undefined和null。
=== 可以判断:undefined和null。默认值唯一 ---> undefined:undefined;null:null。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01_数据类型</title>
</head>
<body>
<script type="text/javascript">
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.b3 === 'function') // true
console.log(typeof b1.b2[2] === 'function') // true
b1.b2[2](4) // 4
console.log(b1.b3()()) // xfzhang
console.log(typeof Array) // function
console.log(typeof b1.b2) // object
console.log(typeof b1.b2[2]) // function
console.log("---")
console.log(b1.b2[2](4)) // 4 undefined
console.log("--- ---")
console.log(b1.b2[2]) // ƒ log() { [native code] }
console.log("--- --- --- ---")
console.log(b1.b2[2]('abc')) // 'abc' undefined
console.log("--- --- ---")
console.log(b1.b3()) // b3 ƒ (){ return 'xfzhang' }
</script>
</body>
</html>
P3 03.尚硅谷_JS高级_相关问题 20:31
实例
使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类。我们将通过一个构造函数创建的对象,称为是该类的实例。
1. undefined与null的区别?
1. undefined与null的区别?
undefined代表定义未赋值;null定义并赋值,只是值为null。
2. 什么时候给变量赋值为null呢?
2. 什么时候给变量赋值为null呢?
初始赋值,表明将要赋值为对象;结束前,让对象成为垃圾对象(被垃圾回收器回收)。初始化赋值:将要作为引用变量使用, 但对象还没有确定。结束时:将变量指向的对象成为垃圾对象。
var a = null // a将指向一个对象,但对象此时还没有确定
a = null // 让a指向的对象成为垃圾对象
3. 严格区别变量类型与数据类型?
3. 严格区别变量类型与数据类型?
js的变量本身是没有类型的,变量的类型实际上是变量内存中数据的类型(js是弱类型的语言)。var a; 判断变量类型,实际上 是判断值的类型。
数据的类型(数据对象):
* 基本类型
* 对象类型变量的类型(变量内存值的类型):
* 基本类型:保存基本类型的数据(保存基本类型数据的变量)。
* 引用类型:保存对象地址值(保存对象地址值的变量)。
P4 04.尚硅谷_JS高级_数据_变量_内存 47:39
1. 什么是数据?
存储于内存中代表特定信息的'东东',本质就是0101(二进制)...
数据的特点:具有可读、可传递、可运算的基本特性。
万物(一切)皆数据,函数也是数据。
内存(程序)中所有操作的目标: 数据
* 算术运算
* 逻辑运算
* 赋值
* 运行函数(调用函数传参)
...
2. 什么是内存?
内存条通电后产生的可存储数据的空间(临时的)。
内存产生和死亡: 内存条(集成电路板)==>通电==>产生一定容量的存储(内存)空间==>存储各种数据==>处理数据==>断电==>内存和数据全部消失
内存的空间是临时的, 而硬盘的空间是持久的
一块内存包含2个数据
* 内部存储的数据(一般数据/地址数据)
* 内存地址值数据
内存分类
* 栈: 全局变量/局部变量 (空间较小)
* 堆: 对象 (空间较大)
3. 什么是变量?
值可以变化的量,由变量名与变量值组成。
一个变量对应一块小内存,变量名用来查找对应的内存,变量值就是内存中保存的内容。
4. 内存、数据、变量三者之间的关系。
内存是一个容器,用来存储程序运行需要操作的数据(内存是用来存储数据的空间)。
变量是内存的标识,我们通过变量找到对应的内存,进而操作(读/写)内存中的数据。
P5 05.尚硅谷_JS高级_相关问题1 24:22
情况讨论:var a = xxx(赋值操作),a内存中到底保存的是什么?
问题:var a = xxx(赋值操作),a内存中到底保存的是什么?
- xxx是一个基本数据,保存的就是这个数据。
- xxx是一个对象,保存的是对象的地址值。
- xxx是一个变量,保存的xxx的内存内容(保存的可能是基本数据,也可能是地址值数据)。
关于引用变量赋值问题
关于引用变量赋值问题
- 2个引用变量指向同一个对象(保存的内容是同一个对象的地址值),通过一个引用变量修改对象内部数据,另一个引用变量也看得见(看见的是修改之后的数据)。
- 2个引用变量指向同一个对象,让一个引用变量指向另一个对象,另一个引用变量还是指向原来的对象。
此图,针对第1条解释。
此图,针对第2条解释。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02_关于引用变量赋值问题</title>
</head>
<body>
<script type="text/javascript">
//1. 2个引用变量指向同一个对象, 通过一个引用变量修改对象内部数据, 另一个引用变量也看得见
var obj1 = {}
var obj2 = obj1
obj2.name = 'Tom'
console.log(obj1.name) // Tom
function f1(obj) {
obj.age = 12
}
f1(obj2)
console.log(obj1.age) // 12
//2. 2个引用变量指向同一个对象,让一个引用变量指向另一个对象, 另一个引用变量还是指向原来的对象
var obj3 = {
name: 'Tom'
}
var obj4 = obj3
obj3 = {
name: 'JACK'
}
console.log(obj4.name) // Tom
function f2(obj) {
obj = {
name: 'Bob'
}
}
f2(obj4)
console.log(obj4.name) // Tom
var a = {age: 12}; // 2个引用变量指向同一个对象
var b = a; // 2个引用变量指向同一个对象
a = {name: 'Bob', age: 13}; // 将新的对象赋值给a
b.age = 14; // 另一个引用变量还是指向原来的对象
console.log(b.age, a.name, a.age); // 14 "Bob" 13
function fn2 (obj) {
obj = {age: 15}; // 新的对象(垃圾对象)
}
fn2(a); // 函数执行完,函数内部的局部变量(obj)会自动释放
//总结:obj引用的地址值发生改变,不再引用传进来的形参地址,并且函数作用域的原因,这个对象只能在函数内使用。
console.log(a.age); // 13
</script>
</body>
</html>
P6 06.尚硅谷_JS高级_相关问题2 25:38
关于引用变量赋值问题
obj和a存的堆地址相同,下一步赋值obj的堆地址改变了,但是他并没有改变之前a里存的堆地址的内容。
就是把a的内容拷贝一份到函数参数obj上,但函数内部obj指向了新对象,但不影响a指向的对象。
函数形参传进去之后,复制a的值给obj,这两个栈内存指向一个堆内存的数据。之后obj={age:15},这时:obj指向另一个堆内存,这两个堆内存不一样了,再用obj修改age也不会影响到a指向的age。
关于数据传递问题
问题:在js调用函数时传递变量参数时,是值传递还是引用传递?
- 理解1:都是值(基本/地址值)传递。
- 理解2:可能是值传递,也可能是引用传递(地址值)。
- 只有值传递,没有引用传递,传递的都是变量的值,只是这个值可能是基本数据,也可能是地址(引用)数据。
- 如果后一种看成是引用传递,那就值传递和引用传递都可以有。
因为函数里的a是函数内的局部变量,换成this.a = a + 1,这时候this.a就是你最开始定义的a。
假设形参是x,调用函数传参时,发生了两件事:1、读取全局变量a的值;2、将值赋值给x ,然后执行函数内代码。
括号里的a是全局里的a的值copy给他的。
内存管理
问题:JS引擎如何管理内存?
1. 内存生命周期
- 分配小内存空间,得到它的使用权(分配需要的内存)。
- 存储数据,可以反复进行操作(使用分配到的内存)。
- 释放小内存空间(不需要时将其释放/归还)。
2. 释放内存
- 局部变量:函数执行完 自动释放(为执行函数分配的栈空间内存)。
- 对象:成为垃圾对象==>垃圾回收器回收(存储对象的堆空间内存:当内存没有引用指向时,对象成为垃圾对象,垃圾回收器后面就会回收释放此内存。)
var a = 3; var obj = {}; // 占用3个空间,2个栈区一个堆区:a = 3、obj、{}(对象占用空间最大)。
obj = null; // 占用2个空间,{}占用的空间被回收。
obj等于任意值,与堆的连接就取消了,所以堆的那块成了垃圾,而栈这边的obj还是等于任意值,全局变量obj并没有释放。
P7 07.尚硅谷_JS高级_对象 23:30
1. 什么是对象?
1. 什么是对象?
- 多个数据的封装体(集合体)。
- 用于保存多个数据的容器。
- 一个对象代表现实中的一个事物(代表现实中的某个事物,是该事物在编程中的抽象)。
2. 为什么要用对象?
2. 为什么要用对象?
- 便于对多个数据进行统一管理。
3. 对象的组成
3. 对象的组成 对象中的函数是方法;对象中的字符串、数字等等叫属性。
- 属性:属性名(字符串)和属性值(任意)组成。(代表现实事物的状态数据;属性名都是字符串类型,属性值是任意类型)
- 方法:一种特别的属性(属性值是函数)。(代表现实事物的行为数据)
4. 如何访问对象内部数据?
4. 如何访问对象内部数据?
- .属性名:编码简单,但有时不能用
- ['属性名']:编码麻烦,但通用
5. 什么时候必须使用['属性名']的方式?
问题:什么时候必须使用['属性名']的方式?
- 属性名包含特殊字符:-、空格(属性名不是合法的标识名)。
- 属性名不确定。