JavaScript部分基础知识回顾（一）

js的数据类型

• string number boolean undefined null object symbol
• object中包含了function Array Date等

js判断类型方法

js中判断类型主要有三种方式，分别为：typeof instanceof Object.prototype.toString.call()

// typeoftypeof "abc" === "string"  //true typeof [] === "array"      //falsetypeof function () {} === "function"  //true//typeof 的返回值有：string, number, boolean, undefined, function, object//instanceof[] instanceof Array  //true"abc" instanceof String  //true//Object.prototype.toString.call()Object.prototype.toString.call("abc")  //[object String]

Get请求和Post请求的区别

Get请求：

• 参数拼接在url上
• 浏览器可以产生缓存
• 浏览器对get请求的url长度有限制
• 一般用于获取数据

Post请求：

• 数据包装在请求体中发送
• 一般用于提交表单
• 要比get安全性高些

闭包

• 什么是闭包？
  闭包简单点说，就是返回一个函数，而这个函数保存了父作用域，此时父作用域不会被清理，此时就形成了一个闭包。闭包的作用很多，比方某些时候需要缓存一个结果，实现一个私有变量等等。
• 闭包实现的单例模式

const Sington = (function () {  let instance = null;  function F() {    if (instance) return instance;    instance = this;  }  F.getInstance = function () {     if (!instance) instance = this;    return instance;   }  return F;})();

类的继承

// 说到继承，就需要一个基类function Human(name, age) {  this.name = name;  this.age = age;}Human.prototype.say = function () {  console.log(`I am ${this.name}, ${this.age} years old.`);}

• 原型链继承

function Man() {  this.gender = "man";}Man.prototype = new Human("a man", 30);Man.prototype.constructor = Man;new Man().say();  //I am a man, 30 years old.new Man().gender;  //man

• 构造方法继承

function Woman(name, age) {  Human.call(this, name, age);  this.gender = "woman";}new Woman("Tina", 26).say();  //此处报错，由于构造方法继承，只是继承了属性，而没有继承原型上的方法//所以需要定义say方法Woman.prototype.say = function () {  console.log(`I am ${this.name}, ${this.age} years old ${this.gender}.`);}new Woman("Tina", 26).say();  //I am Tina, 26 years old woman.

• 原型链和构造方法组合继承

/** 1.原型链继承 * 弊： *    a.不方便传递构造函数参数 *    b.假如父类中含有引用类型的属性，则子类实例对其修改会对其余实例有影响 *    c.子类的原型包含父类的一个实例，有点耗费资源 * 利： *    既能继承属性又能继承原型 * * 2.构造函数继承 * 弊： *    a.只能继承属性，不能继承原型 * 利： *    方便传参；不存在引用修改影响问题；不存在白费资源问题 */// 组合继承，结合两者优势，当然也会存在两者缺陷function People(name, age) {  Human.call(this, name, age);}People.prototype = new Human();People.prototype.constructor = People;new People("Tom", 34).say();  //I am Tom, 34 years old.

• 寄生继承

function Personal(name, age) {  Human.call(this, name, age);}(function () {  function F() {}  //中间宿主  F.prototype = Human.prototype;  Personal.prototype = new F();  Personal.prototype.constructor = Personal;})();new Personal("Jet", 99).say();  //I am Jet, 99 years old.

bind，apply，call

/** 三个方法都是改变当前环境中的this指向 *  call, apply 调用后立即执行，但是参数不一样，第一个参数都是指定的this，其后的参数都是需要传递的参数，call通过逗号分隔，而apply传入数组 *  bind 调用后返回一个一个待执行的方法，需要再次主动调用。参数值传递只要要指定的那个this */var vn = "window";function F() {  this.vn = "F";}var f = new F();function say(name, ex) {  console.log(name + " say: " + this.vn + " is current this, " + ex);}//直接调用say("Tom", "hahaha");  //Tom say: window is current this, hahaha// call, applysay.call(f, "Tom", "hahaha");say.apply(f, ["Tom", "hahaha"]);// bindvar say2 = say.bind(f);say2("Tom", "hahaha");

实现一个深度克隆

var t = {  a: 1,  b: [1,2],  c: [{h: true, i: "abc"}],  d: {    x: 1,    z: function () {}  },  e: [1, {a:1}]}function copyDeep(obj) {  var result = obj instanceof Array ? [] : {};  for (var o in obj) {    if (obj[o] instanceof Array) {        result[o] = copyDeep(obj[o]);    } else if (o instanceof Object) {        result[o] = copyDeep(obj[o]);    } else {        result[o] = obj[o];    }  }  return result;}

实现一个将原生的ajax封装成promise

const PromiseAjax = function (url) {  return new Promise((resolve, rejected) => {    const httpRequest = new XMLHttpRequest();    httpRequest.open("GET", url);    httpRequest.send();    httpRequest.onreadystatechange = text => {      if (httpRequest.readyState === 4 && httpRequest.status === 200) {          //解决成功          resolve(text);      }      if (httpRequest.readyState === 4 && httpRequest.status !== 200) {          //解决失败          rejected(text);      }    }  });}

实现一个私有变量，用getName方法可以访问，不能直接访问

• Object.defineProperty方式

var test = {  id: 123,  name: 'Jaimor'}Object.defineProperty(test, 'name', {});

• 自己设置变量形式

function User(id) {  this.id = id;  const name = 'Jaimor';  this.getName = function () {    return name;  }}const test = new User(123);console.log(test.id, test.getName(), test.name);  //123, Jaimor, undefined

• 闭包方式

const Person = (function () {  let name = 'Tom';  return function (id, n) {    this.id = id;    name = n;    this.getName = _ => name  }})();

箭头函数与普通函数的区别

• 普通函数：有原型，可以通过new创立一个实例，有自己的this绑定。
• 箭头函数：
  a) 箭头函数是匿名函数，不能作为构造函数，不能使用new。
  b) 箭头函数不绑定arguments，可以使用...reset。
  c) 箭头函数不绑定this，会捕获其所在的上下文的this作为自己的this值，同时call apply bind也不能改变this。
  d) 箭头函数没有原型属性。