尚硅谷js高级基础部分

SakuraCaslana

已于 2022-11-08 08:55:01 修改

阅读量98

点赞数

分类专栏：前端 js高级文章标签： javascript ecmascript 前端

于 2022-11-01 11:54:24 首次发布

本文链接：https://blog.csdn.net/weixin_45608124/article/details/127631099

版权

前端同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

js高级

4 篇文章 0 订阅

订阅专栏

基于尚硅谷的尚硅谷JavaScript高级教程提供笔记撰写，加入一些个人理解

github源码
如果你想下载本文可以前往我的博客博客地址

数据类型的分类和判断

主要问题

数据类型判断

typeof:

typeof返回值是数据类型的字符串表达

例如：
```
var a = 3
console.log(typeof a==='number');//输出true
```
可以区别: 数值, 字符串, 布尔值, undefined, function

不能区别: null与对象, 一般对象与数组

typeof判断null为object
instanceof

专门用来判断对象数据的类型: Object, Array与Function
===

可以判断: undefined和null

简单来说，===只能判断出只有一个值的数据类型

数据,变量, 内存的理解

主要问题

什么是数据?

在内存中可读的, 可传递，可运算的保存了特定信息的’东东’，本质就是0101二进制
一切皆数据, 函数也是数据
在内存中的所有操作的目标: 数据
- 算术运算
- 逻辑运算
- 赋值
- 调用函数传参

什么是变量?

值可以变化的量, 由变量名与变量值组成
一个变量对应一块小内存, 变量名用来查找到内存, 变量值就是内存中保存的内容

什么是内存?

内存条通电后产生的存储空间(临时的)

产生和死亡: 内存条(集成电路板)>通电>产生一定容量的存储空间==>存储各种数据==>断电==>内存全部消失

内存的空间是临时的, 而硬盘的空间是持久的
一块内存包含2个方面的数据
- 内部存储的数据*(一般数据/地址数据)*
- 内存地址值
内存空间的分类
- 栈空间: 全局变量和局部变量
- 堆空间: 对象

内存,数据, 变量三者之间的关系

内存是容器, 用来存储不同数据
变量是内存的标识, 通过变量我们可以操作(读/写)内存中的数据

相关问题

赋值与内存的问题

问题: var a = xxx, a内存中到底保存的是什么?

 var a = 3 // 保存3
    a = function () {
    }//保存地址值
    var b = 'abc'
    a = b // b保存的数据'abc'
    b = []
    a = b // b保存的地址值

xxx是一个基本数据，保存的就是这个数据

xxx是一个对象，保存的是对象的地址值

xxx是一个变量，保存的是xxx的内存内容（可能是基本数据，也可能是地址值)

关于引用变量赋值问题

n个引用变量指向同一个对象, 通过一个引用变量修改对象内部数据, 其他所有引用变量也看得见

    var obj1 = { name: 'Tom' }
    var obj2 = obj1
    obj2.age = 12
    console.log(obj1.age);//12

    function fn(obj) {
      obj.name = 'Bob'
    }
    fn(obj1)
    console.log(obj2.name);//Bob

2个引用变量指向同一个对象,让一个引用变量指向另一个对象, 另一个引用变量还是指向原来的对象

 var a = { age: 12 }
    var b = a
    a = { name: 'Jack', age: 13 }
    console.log(b.age, a.name, a.age);//12 Jack 13
/*
 这里记住一点，是将实参a赋值给形参obj，即 obj=a，此时他们指向同一对象。执行obj={age:15}，obj指向发生改变，而a指向未发生改变
*/
    function fn2(obj) {
      obj = { age: 15 }
    }
    fn2(a)
    console.log(a.age);//13

在js调用函数时传递变量参数时, 是值传递还是引用传递

对这个问题可以有着两种理解，第一种是理解为两个都是值传递，只是这个值可以是基本数据，也可以是地址数据。第二种则是把传递的地址值看作是引用传递，不过一般来说都当做是值传递。

    var a = 3
    function fn(a) {
      a = a + 1
    }
    fn(a)// 传的不是a，而是3这个值
    console.log(a);// 3
    /* 
    执行到:fn(a);先读到a是3，把a的值传给形参a，形参a去加1，输出为4。
    实参a还是实参a，所以最后输出a仍然是3。这里是基本值传递。
    */
    function fn2(obj) {
      console.log(obj.name);
    }
    var obj = { name: 'Tom' }
    fn2(obj)
    /*
    执行到:fn2(obj);把obj中的内容（不是把{name:‘tom’}传递给形参obj，
    是把obj的地址值传给形参obj，只是地址值指向的是 {name:‘tom’}）传递给形参obj。
    这里是地址值传递。
    */

JS引擎如何管理内存

内存生命周期

分配需要的内存空间，得到使用权
存储数据，可以反复操作
释放当前的内存空间

释放内存

为执行函数分配的栈空间内存（局部变量）: 函数执行完自动释放

存储对象的堆空间内存（对象）: 当内存没有引用指向时, 对象成为垃圾对象, 垃圾回收器后面就会回收释放此内存

    var a = 3
    var obj = {}// 执行到这里，一共开辟了3个内存空间
    obj = null //  obj指向的对象内存空间被释放，obj不释放，手动释放

    function fn() {
      var b = {} // 只有函数被执行的时候才会开辟内存空间，即 fn()调用
    }
    fn()
    /*
    fn()执行完，b被自动释放，b所指向的对象在后面的某个时刻由垃圾回收器回收
    */

对象的理解和使用

主要问题

什么是对象

代表现实中的某个事物, 是该事物在编程中的抽象
多个数据的集合体(封装体)
用于保存多个数据的容器

为什么要用对象?

便于对多个数据进行统一管理

对象的组成

属性

代表现实事物的状态数据
由属性名和属性值组成
属性名都是字符串类型, 属性值是任意类型

属性的分类

一般属性 : 属性值不是function 描述对象的状态
方法 : 属性值为function的属性描述对象的行为

特别的对象

数组: 属性名是0,1,2,3之类的索引
函数: 可以执行的

如何操作内部属性(方法)

obj.属性名
obj[‘属性名’] 一般不用，但通用

函数的理解和使用

主要问题

什么是函数?

具有实现特定功能的n条语句的封装体
只有函数是可执行的, 其它类型的数据是不可执行的
函数也是对象

为什么要用函数?

提高复用性
便于阅读交流

如何定义函数?

函数声明
表达式

    fn1()// 输出fn1
    fn2()// 输出undefined
    //函数声明
    function fn1() {
      console.log('fn1');
    }
    //表达式
    var fn2 = function () {
      console.log('fn2');
    }

区别：js中的变量提升

函数声明可以在声明前调用
表达式不能在声明前调用，输出为undefined

如何调用(执行)函数?

test()：直接调用
new test()：new调用
obj.test()：对象调用
test.call/apply(obj)：临时让test成为obj的方法进行调用

    var obj = {}
    function test2() {
      this.xxx = 'atguigu'
    }
    test2.call(obj) // 可以让一个函数成为指定任意对象的方法进行调用
  //test2.apply(obj)
    console.log(obj.xxx) // atguigu

这里我的想法是，call和apply改变了函数test2中的this指向，将函数test2中的this指向从window改变，指向call和apply传入的对象（后面有讲到this的指向问题）

函数也是对象

instanceof Object===true
函数有属性: prototype
函数有方法: call()/apply()
可以添加新的属性/方法

函数的3种不同角色

一般函数 : 直接调用
构造函数 : 通过new调用
对象 : 通过.调用内部的属性/方法

回调函数的理解

什么函数才是回调函数?
- 你定义的
- 你没有调用
- 但它最终执行了(在一定条件下或某个时刻)
常用的回调函数
- dom事件回调函数
- 定时器回调函数
- ajax请求回调函数(后面讲解)
- 生命周期回调函数(后面讲解)

匿名函数自调用:

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

专业术语为: IIFE (Immediately Invoked Function Expression) 立即调用函数表达式

作用

隐藏内部实现
不污染外部命名空间
编码js模块

this是什么?

任何函数本质上都是通过某个对象来调用的，没有直接指定就是window
所有函数内部都有一个变量this
它的值是调用函数的当前对象

如何确定this的值?

test()：window
obj.test()：obj
new test()：新建的对象
test.call(obj)：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是谁? 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();

补充

分号问题

js一条语句的后面可以不加分号
是否加分号是编码风格问题, 没有应该不应该，只有你自己喜欢不喜欢
在下面2种情况下不加分号会有问题

小括号开头的前一条语句

中方括号开头的前一条语句

解决办法: 在行首加分号

 // 情形一: 小括号开头的前一条语句
  var a = 3
  ;(function () {
  })()
  /*
  错误理解: 将3看成是函数调用
    var a = 3(function () {
    })
   */
  // 情形二: 中方括号开头的前一条语句
  var b = 4
  ;[1, 3, 5].forEach(function (item) {
    console.log(item)
  })
  /*
    错误理解:
    b= 4[5].forEach(function(e){
    console.log(e)
    })*/

强有力的例子: vue.js库
知乎热议