2020年最新最全的前端面试题整理----原生JS篇

前言

原生JS篇

JS是一种什么样的语言?

• 解释性脚本语言，代码不进行预编译
• 主要用来向HTML页面添加交互行为
• 可以直接嵌入HTML页面，但单独写成JS文件有利于结构和行为的分离
• 跨平台性，在绝大多数浏览器的支持下，可以在多种平台下运行：linux、windows

JS数据类型有哪些?

栈: (原始数据) string/number/boolean/null/undefined/symbol
堆: (引用数据类型)object（array和函数属于object）
数据类型一共7（6种基本类型+1种引用类型）种

介绍JS有哪些内置对象？

object是Javascript中所有对象的父对象
数据封装类对象：Object、Array、Boolean、Number和String
其他对象：Function、Arguments、Math、Date、RegExp、Error

栈与堆的区别?

栈与堆的储存位置不同;
原始数据是储存在栈中简单数据段,体积小,大小固定,属于频繁使用的数据.
引用数据类型是储存在堆中的对象,占据的空间大,如果储存在栈中会影响运行性能,引用数据类型在栈中指明了自己的所在地。当代码解析时,会先从栈中获取地址,然后再从堆中获取实体;

js中的作用域，变量声明与提升

**作用域：**每一个变量、函数都有其作用的范围，超出范围不得使用，这个叫做作用域
全局变量、局部变量：
全局变量：在全局范围内声明的变量，如var a =1；
只有赋值没有声明的值，如a =1（注：如果a=2在函数环境中，也是全局变量）
局部变量：写入函数的变量，叫做局部变量，作用范围仅限函数内部
作用：程序安全，内存的释放
作用域链：
查找变量的过程。先找自己局部环境内部有没有声明或者是函数，如果有，则查看声明有无赋值或者是函数的内容，如果没有，则向上一级查找。
变量声明提升：
在预编译阶段，编译器会把所有定义的变量全部提升到最顶部，即，把变量声明的语句会自动放置在最顶部。

console.log（a）何时会打印1？

当函数内部没有a这个变量的时候，才会向上一级查找

如何转化类型?

转数组parseFloat();
转字符串toString()/string()
数组转字符串 join();
字符串转数组: split();

什么是面向对象编程及面向过程编程，他们的异同和优缺点

面向过程就是分析出解决问题需要的步骤 ，然后用函数把这些步骤一步一步实现，使用的时候一个一个一次调用就可以了
面向对象是把构成问题分解成各个对象，建立对象的目的不是为了完成一个步骤，而是为描述某个实物在整个解决问题的步骤中的行为面向对象以功能来划分问题，而不是步骤面向对象编程思想基本思想是使用对象/类/继承/封装等基本概念来进行程序设计
优点：易维护

• 采用面向对象思想设计的结构，可读性高，由于继承的存在，即使改变需求，那么维护起来是非常方便你和较低成本的
  易扩展
  开发工作的重用性、继承性高、降低重复工作量，缩短了开发周期

如何解释this在js中起的作用?

如何解释this在js中起的作用?
Js中的this,一般取决于调用这个函数的方法
1、如果函数被实例化(new 构造函数名())的情况下,this指向全新的对象
2、如果是某标签触发什么事件,调用了这个函数,this指向标签(整个DOM节点,包含它的子元素);
3、如果函数使用了call/apply,this是作为参数传入对象
4、有时候this指向不明确的话,this会指向window,ES6中的箭头函数修改了this指向,永远指向作用域
js中this的用法（经典）：
this是js的关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象。

//在默认的函数调用,this指向window
//在对象方法调用：this指向对象
//在构造函数调用 , this指向new创建的对象

call（）
//call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

apply（）
//this指向的事apply中的第一个参数

bind（）
//不会立即执行函数，而是返回修改this之后的新函数(函数体一致，this指向不同)

☆说说JS原型和原型链

原型：函数都要prototype(显示原型)属性，而prototype会自动初始化一个空对象，这个对象就是原型对象
原型对象中会有一个constructor属性,这个属性将指向了函数本身
实例化对象都有一个_proto_(隐式原型)属性，_proto_属性指向原型对象
原型链：从实例对象往上找构造这个实例的相关对象，然后这个关联的对象再往上找，找到创造它的上一级的原型对象，以此类推，一直到object.prototype原型对象终止,原型链结束.
原型链中的原型对象中的内容,是会被不同的实例,所共有的

如何准确判断一个变量是数组类型?

instanceof用于判断引用类型属于哪个构造函数的方法

var arr = [];
arr  instanceof  Array;   //true
typeof  arr;    //object    typeof是无法判断是否为数组的

原理:
instanceof是用来判断实例的_proto_和构造函数的prototype是否指向一个原型对象，
但是有一个弊端，只要出现在一条原型链上的，都会返回true（每个函数都有prototype，每个对象都有一个内部属性__proto__，其指向它的原型对象。原型对象也是一个对象，所以也有__proto__）
这个时候要用实例__proto__.constructor更加严谨

var arr = [ ];
console.log(arr instanseof Array);   //true
console.log(arr.__proto__.constructor === Array)   //true

☆call和apply的区别和作用?

apply和call都是调用一个对象的一个方法，用另一个对象替换当前的对象。
相同点
方法的含义都是一样的。并且第一个参数的作用是一样的
不同点
call可以传入多个参数，apply只能传入两个参数，所以第二个参数往往是作为数组形式传入
存在意义：实现（多重）继承

继承的方法有哪些？

原型链继承、构造继承、实例继承、拷贝继承、组合继承、寄生组合继承
继承详情解释：
既然要实现继承，那么我们首先要有一个父类，代码如下:

//先定义一个父类
function Animal(name){
   
//属性
this.name = name || 'Animal';
//实例方法
this.sleep = function(){
   
console.log(this.name + "大佬喜欢pink!")
}
}
//原型方法
Animal.prototype.eat = function(food){
   
console.log(this.name + "大佬" + food);
}

原型链继承
核心：将父类的实例作为子类的原型

//原型链继承
function Cat(){
    }
Cat.prototype = new Animal();
Cat.prototype.name = "cat";
 
//Test Code
var cat = new Cat();
console.log(cat.name); //cat
console.log(cat.eat("fish")); //cat大佬fish
console.log(cat.sleep()); //cat大佬喜欢pink
console.log(cat instanceof Animal); //true
console.log(cat instanceof Cat); //true

特点：
1、非常纯粹的继承关系，实例是子类的实例，也是父类的实例
2、父类新增原型方法、原型属性，子类都能够访问到
3、简单，易于实现
缺点：
a.要想实现子类新增属性的方法,必须要在new Animal( )这样的语句之后执行,补鞥呢放在构造器中
b.无法实现多继承
c.来自原型对象的引用属性是所有实例共享的
d.创建子类实例时, 无法向父类构造函数传参

构造函数

核心：使用父类的构造函数来增强子类实例，等于是赋值父类的实例属性给子类（没有使用原型）

//构造函数
function Cat(name){
   
Animal.call(this);
this.name = name || "Tom"
}
//Test Code
var cat = new Cat();
console.log(cat.name); //Tom
console.log(cat.sleep()); //Tom大佬喜欢pink
console.log(cat instanceof Animal); //false
console.log(cat instanceof Cat); //true

特点
1.解决了1中，子类实例共享父类引用属性的问题
2.创建子类实例时，可以向父类传递参数
3.可以实现多继承（call多个父类对象）
缺点：
a.实例并不是父类的实例，只是子类的实例
b.只能继承父类的实例属性与方法，不能继承原型属性、方法
c.无法实现函数复用，每个子类都有父类实例函数的副本，影响性能
实例继承
核心: 为父类实例添加新特性，作为子类实例返回

//实例继承
function Cat(name){
   
var instance = new Animal();
instance.name = name || "Tom";
return instance;
}
//Test Code
var cat = new Cat();
console.log(cat.name); //Tom
console.log(cat.sleep()); //Tom大佬喜欢pink!
console.log(cat instanceof Animal);