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

js的数据类型

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

js判断类型方法

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

// typeof
typeof "abc" === "string"  //true 
typeof [] === "array"      //false
typeof 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, apply
say.call(f, "Tom", "hahaha");
say.apply(f, ["Tom", "hahaha"]);
// bind
var 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) 箭头函数没有原型属性。