前端基础知识1

今天不知道什么原因心血来潮，说一说JS中最最最最最基本的概念吧，但是很多人可能不知道喔。
自己有个小计划就是希望五年内写一门自己的语言，虽然已经有JS了。此处吹个牛逼，莫怪，莫怪。废话不多说，还是写心得吧。

基础知识

（1）数据类型

分类

基本(值)类型
- String: 任意字符串
- Number: 任意的数字
- boolean: true/false
- undefined: undefined
- null: null
对象(引用)类型
- Object: 任意对象
- Function: 一种特别的对象(可以执行)
- Array: 一种特别的对象(数值下标, 内部数据是有序的)

判断

typeof:
- 可以判断: undefined/ 数值 / 字符串 / 布尔值 / function
- 不能判断: null与object object与array
instanceof:
- 判断对象的具体类型
===
- 可以判断: undefined, null

（2）数据变量内存

什么是数据?

存储在内存中代表特定信息的’东东’, 本质上是0101…
数据的特点: 可传递, 可运算
一切皆数据
内存中所有操作的目标: 数据
- 算术运算
- 逻辑运算
- 赋值
- 运行函数

什么是内存?

内存条通电后产生的可储存数据的空间(临时的)
内存产生和死亡: 内存条(电路版)>通电>产生内存空间==>存储数据==>处理数据==>断电==>内存空间和数据都消失
一块小内存的2个数据
- 内部存储的数据
- 地址值
内存分类
- 栈: 全局变量/局部变量
- 堆: 对象

什么是变量?

可变化的量, 由变量名和变量值组成
每个变量都对应的一块小内存, 变量名用来查找对应的内存, 变量值就是内存中保存的数据

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

内存用来存储数据的空间
变量是内存的标识

问题: 在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>

问题: JS引擎如何管理内存?

内存生命周期

分配小内存空间, 得到它的使用权
存储数据, 可以反复进行操作
释放小内存空间

释放内存

局部变量: 函数执行完自动释放
对象: 成为垃圾对象==>垃圾回收器回收

<script type="text/javascript">
  var a = 3
  var obj = {}
  obj = undefined

  function fn () {
    var b = {}
  }

  fn() // b是自动释放, b所指向的对象是在后面的某个时刻由垃圾回收器回收

</script>

关于对象

什么是对象?

多个数据的封装体
用来保存多个数据的容器
一个对象代表现实中的一个事物

为什么要用对象?

统一管理多个数据

对象的组成

属性: 属性名(字符串)和属性值(任意)组成
方法: 一种特别的属性(属性值是函数)

如何访问对象内部数据?

.属性名: 编码简单, 有时不能用
[‘属性名’]: 编码麻烦, 能通用

问题: 什么时候必须使用[‘属性名’]的方式?

属性名包含特殊字符: - 空格
属性名不确定

<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>

函数

什么是函数?

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

为什么要用函数?

提高代码复用
便于阅读交流

如何定义函数?

函数声明
表达式

如何调用(执行)函数?

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

回调函数

什么函数才是回调函数?
1). 你定义的
2). 你没有调
3). 但最终它执行了(在某个时刻或某个条件下)
常见的回调函数?

dom事件回调函数 ==>发生事件的dom元素
定时器回调函数 ===>window
ajax请求回调函数
生命周期回调函数

<script type="text/javascript">
  document.getElementById('btn').onclick = function () { // dom事件回调函数
    alert(this.innerHTML)
  }
  //定时器
    // 超时定时器
    // 循环定时器
  setTimeout(function () { // 定时器回调函数

    alert('到点了'+this)
  }, 2000)
</script>

IIFE

理解

全称: Immediately-Invoked Function Expression
中文名：立即执行函数表达式

作用

隐藏实现
不会污染外部(全局)命名空间
用它来编码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>

this

this是什么?

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

如何确定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>

函数高级

原型

函数的prototype属性(图)

每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)
原型对象中有一个属性constructor, 它指向函数对象

给原型对象添加属性(一般都是方法)

作用: 函数的所有实例对象自动拥有原型中的属性(方法)

<script type="text/javascript">

  // 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)
  console.log(Date.prototype, typeof Date.prototype)
  function Fun () {//alt + shift +r(重命名rename)

  }

  console.log(Fun.prototype)  // 默认指向一个Object空对象(没有我们的属性)

  // 原型对象中有一个属性constructor, 它指向函数对象
  console.log(Date.prototype.constructor===Date)
  console.log(Fun.prototype.constructor===Fun)

  //给原型对象添加属性(一般是方法) ===>实例对象可以访问
  Fun.prototype.test = function () {
    console.log('test()')
  }
  var fun = new Fun()
  fun.test()

</script>

显式原型和隐式原型

每个函数function都有一个prototype，即显式原型(属性)
每个实例对象都有一个__proto__，可称为隐式原型(属性)
对象的隐式原型的值为其对应构造函数的显式原型的值
内存结构(图)
总结:

函数的prototype属性: 在定义函数时自动添加的, 默认值是一个空Object对象
对象的__proto__属性: 创建对象时自动添加的, 默认值为构造函数的prototype属性值
程序员能直接操作显式原型, 但不能直接操作隐式原型(ES6之前)

<script type="text/javascript">

  // 每个函数都有一个prototype属性, 它默认指向一个Object空对象(即称为: 原型对象)
  console.log(Date.prototype, typeof Date.prototype)
  function Fun () {//alt + shift +r(重命名rename)

  }

  console.log(Fun.prototype)  // 默认指向一个Object空对象(没有我们的属性)

  // 原型对象中有一个属性constructor, 它指向函数对象
  console.log(Date.prototype.constructor === Date)
  console.log(Fun.prototype.constructor === Fun)

  //给原型对象添加属性(一般是方法) ===>实例对象可以访问
  Fun.prototype.test = function () {
    console.log('test()')
  }
  var fun = new Fun()
  fun.test()

</script>

原型链

1. 原型链(图解)

访问一个对象的属性时，
- 先在自身属性中查找，找到返回
- 如果没有, 再沿着__proto__这条链向上查找, 找到返回
- 如果最终没找到, 返回undefined
别名: 隐式原型链
作用: 查找对象的属性(方法)

2. 构造函数/原型/实体对象的关系(图解)

3. 构造函数/原型/实体对象的关系2(图解)

    <script type="text/javascript">
      // console.log(Object)
      //console.log(Object.prototype)
      console.log(Object.prototype.__proto__)
      function Fn() {
        this.test1 = function () {
          console.log('test1()')
        }
      }
      console.log(Fn.prototype)
      Fn.prototype.test2 = function () {
        console.log('test2()')
      }
    
      var fn = new Fn()
    
      fn.test1()
      fn.test2()
      console.log(fn.toString())
      console.log(fn.test3)
      // fn.test3()
    
    
      /*
      1. 函数的显示原型指向的对象默认是空Object实例对象(但Object不满足)
       */
      console.log(Fn.prototype instanceof Object) // true
      console.log(Object.prototype instanceof Object) // false
      console.log(Function.prototype instanceof Object) // true
      /*
      2. 所有函数都是Function的实例(包含Function)
      */
      console.log(Function.__proto__===Function.prototype)
      /*
      3. Object的原型对象是原型链尽头
       */
      console.log(Object.prototype.__proto__) // null
    
    </script>

原型链_属性问题

读取对象的属性值时: 会自动到原型链中查找
设置对象的属性值时: 不会查找原型链, 如果当前对象中没有此属性, 直接添加此属性并设置其值
方法一般定义在原型中, 属性一般通过构造函数定义在对象本身上

<script type="text/javascript">

  function Fn() {

  }
  Fn.prototype.a = 'xxx'
  var fn1 = new Fn()
  console.log(fn1.a, fn1)

  var fn2 = new Fn()
  fn2.a = 'yyy'
  console.log(fn1.a, fn2.a, fn2)

  function Person(name, age) {
    this.name = name
    this.age = age
  }
  Person.prototype.setName = function (name) {
    this.name = name
  }
  var p1 = new Person('Tom', 12)
  p1.setName('Bob')
  console.log(p1)

  var p2 = new Person('Jack', 12)
  p2.setName('Cat')
  console.log(p2)
  console.log(p1.__proto__===p2.__proto__) // true
</script>

变量提升和函数提升

1. 变量声明提升

通过var定义(声明)的变量, 在定义语句之前就可以访问到
值: undefined

2. 函数声明提升

通过function声明的函数, 在之前就可以直接调用
值: 函数定义(对象)

3. 问题: 变量提升和函数提升是如何产生的?
自己想吧，哈哈哈哈！

<script type="text/javascript">
  console.log('-----')
  /*
  面试题 : 输出 undefined
   */
  var a = 3
  function fn () {
    console.log(a)
    var a = 4
  }
  fn()

  console.log(b) //undefined  变量提升
  fn2() //可调用  函数提升
  // fn3() //不能  变量提升

  var b = 3
  function fn2() {
    console.log('fn2()')
  }

  var fn3 = function () {
    console.log('fn3()')
  }
</script>

函数执行上下文

1. 代码分类(位置)

全局代码
函数(局部)代码

2. 全局执行上下文

在执行全局代码前将window确定为全局执行上下文
对全局数据进行预处理
- var定义的全局变量==>undefined, 添加为window的属性
- function声明的全局函数==>赋值(fun), 添加为window的方法
- this==>赋值(window)
开始执行全局代码

3. 函数执行上下文

在调用函数, 准备执行函数体之前, 创建对应的函数执行上下文对象(虚拟的, 存在于栈中)
对局部数据进行预处理
- 形参变量==>赋值(实参)==>添加为执行上下文的属性
- arguments==>赋值(实参列表), 添加为执行上下文的属性
- var定义的局部变量==>undefined, 添加为执行上下文的属性
- function声明的函数 ==>赋值(fun), 添加为执行上下文的方法
- this==>赋值(调用函数的对象)
开始执行函数体代码

<script type="text/javascript">
  function fn(a1){
    console.log(a1);  //2
    console.log(a2);  //undefine
    a3();  //a3
    console.log(this);  //window
    console.log(arguments); // [2,3,...........]为数组
    var a2 = 3；
    
  function a3(){
       console.log("a3");
    }
  }
  fn(2,3);
  console.log(a1, window.a1)
  window.a2()
  console.log(this)

  var a1 = 3
  function a2() {
    console.log('a2()')
  }
  console.log(a1)
</script>

执行上下文栈

在全局代码执行前, JS引擎就会创建一个栈来存储管理所有的执行上下文对象
在全局执行上下文(window)确定后, 将其添加到栈中(压栈)
在函数执行上下文创建后, 将其添加到栈中(压栈)
在当前函数执行完后,将栈顶的对象移除(出栈)
当所有的代码执行完后, 栈中只剩下window

举个例子：

<script type="text/javascript">
  console.log('gb: '+ i)
  var i = 1
  foo(1)
  function foo(i) {
    if (i == 4) {
      return
    }
    console.log('fb:' + i)
    foo(i + 1) //递归调用: 在函数内部调用自己
    console.log('fe:' + i)
  }
  console.log('ge: ' + i)
</script>

1. 依次输出什么?
gb: undefined
fb: 1
fb: 2
fb: 3
fe: 3
fe: 2
fe: 1
ge: 1
2. 整个过程中产生了几个执行上下文?
5

执行上下文栈中遇到的坑

<script type="text/javascript">

  /*
   测试题1:  先执行变量提升, 再执行函数提升
   */
  function a() {}
  var a
  console.log(typeof a) // 'function'


  /*
   测试题2:
   */
  if (!(b in window)) {
    var b = 1
  }
  console.log(b) // undefined

  /*
   测试题3:
   */
  var c = 1
  function c(c) {
    console.log(c)
  }
  c(2) // 报错

</script>

作用域

1. 理解

就是一块"地盘", 一个代码段所在的区域
它是静态的(相对于上下文对象), 在编写代码时就确定了

2. 分类

全局作用域
函数作用域
块作用域(ES6有了)

4. 作用

隔离变量，不同作用域下同名变量不会有冲突

<script type="text/javascript">
/*  //没块作用域
  if(true) {
    var c = 3
  }
  console.log(c)*/

  var a = 10,
    b = 20
  function fn(x) {
    var a = 100,
      c = 300;
    console.log('fn()', a, b, c, x)
    function bar(x) {
      var a = 1000,
        d = 400
      console.log('bar()', a, b, c, d, x)
    }

    bar(100)
    bar(200)
  }
  fn(10)
</script>

作用域与执行上下文

区别1

全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时
全局执行上下文环境是在全局作用域确定之后, js代码马上执行之前创建
函数执行上下文是在调用函数时, 函数体代码执行之前创建

区别2

作用域是静态的, 只要函数定义好了就一直存在, 且不会再变化
执行上下文是动态的, 调用函数时创建, 函数调用结束时就会自动释放

联系

执行上下文(对象)是从属于所在的作用域
全局上下文环境==>全局作用域
函数上下文环境==>对应的函数使用域

<script type="text/javascript">
  var a = 10,
    b = 20
  function fn(x) {
    var a = 100,
      c = 300;
    console.log('fn()', a, b, c, x)
    function bar(x) {
      var a = 1000,
        d = 400
      console.log('bar()', a, b, c, d, x)
    }

    bar(100)
    bar(200)
  }
  fn(10)
</script>

作用域链

理解

多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)
查找变量时就是沿着作用域链来查找的

查找一个变量的查找规则

在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入2
在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入3
再次执行2的相同操作, 直到全局作用域, 如果还找不到就抛出找不到的异常

<script type="text/javascript">
  var a = 1
  function fn1() {
    var b = 2
    function fn2() {
      var c = 3
      console.log(c)
      console.log(b)
      console.log(a)
      console.log(d)
    }
    fn2()
  }
  fn1()
</script>