数据类型

js中的数据类型有两类：值类型和引用类型

值类型：number、string、boolean、Symbol、undefined
引用类型：null、数组、对象

使用typeof能用来干什么

1. 判断是否是值类型

typeof obj !== 'object' || typeof obj == null

2. 判断是否是函数

typeof obj === 'function'

3. 判断是否是引用类型

typeof obj === 'object'

值类型和引用类型的区别

每声明一个值类型的变量，就会去开辟一个新的内存空间去存储变量的值

// 值类型
let a = 10;  // 在内存中开辟一个空间给变量 a，a的地址为 100，值为 10
let b = a;  // 在内存中开辟一个空间给变量 b，b 的地址为 200，并且把 a 的值赋值给 b，为10
a = 20;  // 查找 a 的地址，并把 a 的值更改为20
console.log(a);  // 20，查找 a 的地址 100，然后找到对应的值 20
console.log(b);  // 10，查找 b 的地址 200，然后找到对应的值10

而引用类型的值，则是放在堆中的，在复制的时候引用的状态，

// 引用类型
// 在内存中开辟一个空间给变量 obj1，
// 然后在堆中创建一个对象 { age: 20 }, 并把堆中的这个对象的内存地址 600 赋值给 obj1
let obj1 = { age: 20 };  
// 在内存中开辟一个空间给变量 obj2，然后把 obj1 的值 地址600 赋值给 obj2，
// 而 obj1 存的是 对象 { age: 20 } 的地址，故 obj2 存的就是该对象的地址 600
let obj2 = obj1;
// obj1存的是地址，故 obj1.age = 30 修改的是 地址 600 的内容，修改为30
obj1.age = 30;
// 故打印出来的 obj1.age 和 obj2.age 都是 30
console.log(obj1.age);  // 30
console.log(obj2.age);  // 30

之所有引用类型是因为担心性能的问题，若一个对象的特别大，那么如果按照值类型的话，那么就特别占用内存。

类型转换

1. 字符串拼接
2. ==
3. if 语句和逻辑运算

字符串拼接

10 + '10' // 1010
10 + false // 10false

双等==

除了 == null 之外、其它一律使用 ===。
a == null 相当于 a === undefined || a === null

if语句和逻辑运算

在 js 中的 if 语句中的条件语句的值实际上是 truely 和 falsely，这和c语言可能有点不一样。
以下都是 falsely 变量，除此之外都是 truely 变量

!!0 === false
!!NaN === false
!!'' === false
!!null === false
!!undefined === false
!!false === false

深拷贝

因为引用的类型的存在，我们有时候需要赋值的不对原来的对象造成影响，那么我们就需要拷贝该引用对象。

function deepClone(obj) {
  // 判断是否是值类型以是否是null
  if (typeof obj !== 'object' || typeof obj == null) {
    // 只有当 obj 是值类型或者 obj 为 null 或者 undefined 时，才会直接返回
    return obj;
  }

  // 初始化返回值类型
  let result;
  if (obj instanceof Array) {
    result  = []
  } else {
    result = {}
  }

  // 递归遍历设置值
  for (let key in obj) {
    // 判断是否是自身的属性
    if (obj.hasOwnProperty(key)) {
      // 若是自身的属性就去赋值，并通知递归判断是否需要再次拷贝
      result[key] = deepClone(obj[key])
    }
  }

  return result;
}

// 测试
let obj1 = { age: 20 };  
let obj2 = deepClone(obj1);
obj1.age = 30;
console.log(obj1.age);  // 20
console.log(obj2.age);  // 30

如何准确判断一个变量是不是数组

instanceof

手写一个简易的jQuery，考虑插件和扩展性

class jQuery {
  constructor(selector) {
    const els = document.querySelectorAll(selector);
    const length = els.length;
    this.length = length;
    this.selector = selector;
    for (let i = 0; i < length; i++) {
      this[i] = els[i]
    }
  }
  
  html(val) {}

  css() {}

}

// 插件
jQuery.prototype.style = function() {}

// 扩展性
class myJquery extends jQuery {
  constructor(selector) {
    super(selector)
  }

  on() {}

  each() {}
}

原型

原型关系

每个构造函数都有一个现实原型prototype，每个实例都有一个隐式原型__proto__，每个实例的隐式原型指向其构造函数的显示原型。

基于原型的执行规则

获取属性或执行方法时，先在自身身上查找，倘若找不到就去隐式原型__proto__上去寻找，层层向上，直到null为止

class People {
  constructor(){}
  eat(){}
}

class Student extends People{
  constructor(name) {
    super();
    this.name = name;
  }
  study(){}
}

const stu = new Student('George');
// stu 自身上有study方法
stu.study();
// stu 自身上没有eat方法，故去 stu 的隐式原型__proto__上去寻找，
// stu.__proto__指向People.prototype，而People.prototype上有 eat 方法
stu.eat();
// stu 自身上没有toString方法，故去stu的隐式原型__proto__上去寻找,
// stu.__proto__指向People.prototype，而People.prototype上没有toString方法，
// 则继续去People.prototype.__proto__上去寻找，
// 而People.prototype.__proto__指向的是Object.prototype
// Object.prototype有toString方法，则找到
stu.toString();

作用域

在js中，作用域一共有三种

1. 全局
2. 函数
3. 块级

自由变量

1. 一个变量在当前作用域没有被定义，但被使用
2. 若当前作用域找不到该变量则向上层作用域寻找，层层向上，直到找到为止
3. 若全局作用域也没找到，则操作xxx is not defined

ps：自由变量的查找是在函数定义的作用域向上找，而不是执行的作用域

// 案例1
function foo() {
  let a = 2;
  function bar() {
    console.log(a);  // 2
  }
  bar();
}
foo();

// 案例2
function foo() {
  let a = 2;
  bar();
}
let a = 10;
function bar() {
  // 自由变量的查找是在函数定义的作用域向上找，而不是执行的作用域
  console.log(a);  // 10
}
foo();

闭包

闭包是作用域应用的特殊情况，有两种表现

1. 函数作为参数传递
2. 函数作为返回值

闭包在实际开发中的应用

闭包经常用来隐藏数据，做私有变量

// 在这个例子中，无论怎样都无法去直接获取data的值，只能通过方法去设置或获取对应的值
function store() {
  // 永远无法直接操作该数据 data
  const data = {};
  return  {
    get(key) {
      return data[key];
    }
    set(key, value) {
      data[key] = value;
    }
  }
}

const s = store();
s.set('a', 'asd');
console.log(s.get('a'));  // asd

闭包的影响

变量会常驻内存，得不到释放，所以闭包不要乱用

• 自由变量：内存会被释放

let a = 1;
function fn1() {
  let b = 10;
  function fn2() {
    let c = 20;
    function fn3() {
      let d = 30;
      return a + b + c + d;
    }
    fn3(); // 1. fn3执行完后 c、d 就被释放
  }
  fn2();  // 2. fn2执行完后 b 就被释放
}
fn1();  // 3. fn1执行完后 a 就被释放

• 函数作为返回值：内存不会被释放

function store() {
  // 永远无法直接操作该数据 data，data永远不会被释放
  const data = {};
  return  {
    get(key) {
      return data[key];
    }
    set(key, value) {
      data[key] = value;
    }
  }
}

const s = store();
s.set('a', 'asd');
console.log(s.get('a'));  // asd

this

1. 作为普通函数被调用
2. 使用call、apply、bind改变this指向
3. 作为对象方法被调用
4. 在class的方法中被调用
5. 箭头函数，其this是上级作用域的值
   this的指向实在函数执行的时候确定的，不是在函数定义的时候确定的，而作用域是在定义的时候确定的

function fn1() {
  console.log(this);  
}

fn1();  // this = window

fn1.call({ x: 100 });  // this = {x:100}
const fn2 = fn1.bind({ x: 200 })
fn2();  // this = { x: 200 }

const zhang = {
  name: 'zhang',
  sayHi() {
    console.log(this);   // 当前对象
  },
  wait() {
    console.log(this);  // 当前对象
    setTimeout(function() {
      console.log(this);  // window，这个函数是setTimeout调用的，而setTimeout指向的是window
    });
  },
  wait() {
    setTimeout(() => {
      console.log(this);  // 当前对象
    });
  }
};

class People {
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    console.log(this); // People的实例对象
  }
}
new People().sayHi();

手写一个bind函数

Function.prototype._bind = function() {
  // 将arguments参数转换为数组
  const args = Array.prototype.slice.call(arguments);

  // 取出args中的第一个元素，这个元素作为this的范围，并删除第一个元素
  const cxt = args.shift();

  // 返回一个函数
  return function() {
    return this.apply(ctx, args)
  }
}

手写一个apply函数

// apply的第一个参数是上下文，第二个参数是数组
Function.prototype._apply = function() {
  // 将arguments参数转化为数组
  const args = Array.prototype.slice.call(arguments);

  // 取出args中的第一个元素，这个元素作为this的范围，并删除第一个元素
  const ctx = args.shift();
  
  // 当前this指向的是调用的函数，把this绑定到ctx即obj上
  // 将要当前调用的函数绑定到新的this上
  ctx._fn = this;

  // 通过ctx来执行_fn函数，此时的this指向的是ctx对象，此时foo的this就指向为obj对象，从而改变了this的指向
  // 执行调用的函数
  ctx._fn(...args[0]);

  // 删除ctx上的_fn删除
  // 删除调用的函数
  delete ctx._fn;
};

function foo(name, age) {
  console.log(this);  // 指向 obj 对象
  this.name = name;
  this.age = age;
}
const obj = { a: 2 };
foo._apply(obj, ["leo", 20]);

手写一个call函数【和apply的原理一样】

Function.prototype._call = function() {
  // 将arguments参数转化为数组
  const args = Array.prototype.slice.call(arguments);

  // 取出args中的第一个元素，这个元素作为this的范围，并删除第一个元素
  const ctx = args.shift();
  console.log(args);
  // 将this即foo函数绑定到ctx即obj上
  ctx._fn = this;
  // 通过ctx来执行_fn函数，此时的this指向的是ctx对象，此时foo的this就指向为obj对象，从而改变了this的指向
  ctx._fn(...args);
  // 删除ctx上的_fn删除
  delete ctx._fn;
};

function foo(name, age) {
  this.name = name;
  this.age = age;
}
const obj = { a: 2 };
foo._call(obj, "leo", 20);

单线程和异步

js是单线程的语言，只能同时做一件事，浏览器和nodejs已支持js启动进程，如web worker，js和dom渲染公用一个线程，因js可修改dom结构，遇到等待（请求、定义）不能卡住，使用异步的用调用callback形式。

异步的使用场景

1. 网络请求
2. 定时任务

异步的出现会出现一个问题就是callback hell，就会一直嵌套，如果有100个请求那就会嵌套100次

$.get(url， function(res) {
  $.get(url1， function(res1) {
    $.get(url2， function(res2) {
      $.get(url3， function(res3) {
        
      })
    })
  })
})

为了解决解决callback hell【地域回调】，现在最佳的方式是使用Promise，这样就不会出现地域回调的问题

$.get(url).then(res => {
  return $.get(url1)
}).then(res => {
  return $.get(url2)
}).then(res => {
  return $.get(url3)
})