前端必会的js基本知识总结(面试篇)

前端必会的js基本知识总结，通常在面试中被问到

学会以下知识点，会给你的面试加分的喔

1、JavaScript中关键字this的作用尤为重要

随着使用场景不同

this的指向会发生变化

例如:

<script>
  // 全局作用域，this指向Window
  console.log(this === window);// 打印true
  // 在方法函数内部，this指向这个函数本身
  function fn(){
    return this;
  }
  console.log(fn() === window);// 打印true
</script>

<script>
  // 标签绑定点击事件，内部this指向本身
  let span = document.querySelector('span');
  span.onclick = function(){
    console.log(this);
  }
</script>

<script>
  // 一个构造函数中this指向函数本身，this.xxx指向函数内部属性
  function change(name,type){
    console.log(this);
    this.name = name;
    this.val = type;
  }
  change('name','success');
  // 打印如下图
</script>

<script>
  let obj = {
    fn1(){
      console.log(this);
    },
    fn2(){
      console.log(this);
    }
  }
  obj.fn1();
  obj.fn2();
  // 打印的this指向obj对象中每个方法函数本身
</script>

2、JavaScript异步执行和同步执行

js同步执行和异步执行差别在于

同步执行指，在主线程中每个任务排队执行，只有前一个任务执行完毕时，后面的任务才能执行，如果一个任务执行时间过长，那么后面的任务就只能耐心等待

异步执行指，在主线程之外生成一个任务队列，队列中每个任务开始运算，只要有了运行结果，就会在任务队列中放置一个事件，主线程中所有同步任务执行完之后，会读取任务队列中的事件，带到主线程中执行，执行完毕后会再向任务队列读取事件往复操作

3、JavaScript面向对象编程思想

3.1什么是面向对象？

面向对象是一种编程开发思想，俗称万物皆对象

面向对象具有封装性、继承性、多态性的特点

多态性是强类型语言中面向对象拥有的特点，因为JavaScript是弱类型语言，所以不支持多态性

3.2什么是字面量？

字面量指，用最直观的方式来创建对象，例如：

// Object对象
var boy = {
  name : "汤姆",
  age : 3
}
// Array数组对象
var arr = [1,2,3];

3.3构造函数创建对象

// new一个方法函数
var boy = new Object();
boy.name = '汤姆';
boy.age = 3;
boy.eat = function(){
  console.log('开吃');
}
boy.eat();
// 打印'开吃'

3.4工厂模式创建对象

function creatBoy(name,age){
 return {
   name:name,
   age:age,
   eat:function(){
     console.log(this.name + "开吃");
   }
 }
}
// 创建boy实例
var boyNumberOne = creatBoy("汤姆",3);
var boyNumberTwo = creatBoy("哈瑞",6);
boyNumberOne.eat();
// 打印"汤姆开吃"

3.5自定义构造函数模式创建对象

function CreatBoy(name,age){
  this.name = name;
  this.age = age;
  this.eat = function(){
    console.log(this.name + "开吃");
  }
}
var boyNumberOne = new CreatBoy("汤姆",3);
boyNumberOne.eat();
// 打印"汤姆开吃"，注意函数名首字母要大写，比较规范点

更好的创建对象方法是对象封装

把每个方法函数单独提出去，每个页面进行外部引入，避免造成资源浪费，效率会更高

4、原型

JavaScript中每个构造函数都有一个prototype属性指向另外一个对象，这个对象中所有的属性和方法，都会被构造函数创建的实例对象继承，名为原型对象

原型的作用是把所有对象实例需要的属性和方法直接定义在prototype上，达到数据共享，例如：

function CreatBoy(name,age){
  this.name = name;
  this.age = age;
}
CreatBoy.prototype.sex = "男";
CreatBoy.prototype.eat = function(){
  console.log(this.name + "开吃");
}
var boy1 = new CreatBoy(name,age);
console.log(boy1);
// 打印对象如下图
boy1.eat();
// 打印"汤姆开吃"

4.1面向对象继承性

面向对象继承性指实例对象从prototype中找到属性和方法可以直接使用

通过构造函数创建的对象，都会自带一个__proto__属性，此属性指向构造函数的prototype原型对象

prototype为显式原型对象，__proto__为隐式原型对象，它们指向同一个构造函数

4.2原型链

原型链查找原则是沿着__proto__一直往上找

现在自身层查找 => __proto__查找 => 对象的prototype查找，如果再找不到，那就真是找不到了

5、函数闭包

什么是函数闭包？

函数闭包指，当一个内部函数被调用，就会形成闭包

闭包就是能够读取其他函数内部变量的函数

外界无法访问闭包内部的数据

如果在闭包内声明变量

外界是无法访问的

除非闭包主动向外界提供访问接口

普通方法函数在执行完之后会被系统回收

但对于闭包来讲，当外部函数调用这个闭包时，这个闭包会一直留在内存中

如果闭包过多，会导致内存溢出