合格的前端工程师总结

一、JavaScript基础
1.JavaScript规定了几种语言类型

1.Undefined，2.Null，3.Boolean，4.String，5.Number，6.Symbol，7.Object，8.BigInt

**2.JavaScript对象的底层数据结构是什么**

JavaScript基本类型数据都是直接按值存储在栈中的(Undefined、Null、不是new出来的布尔、数字和字符串)，每种类型的数据占用的内存空间的大小是确定的，并由系统自动分配和自动释放。这样带来的好处就是，内存可以及时得到回收，相对于堆来说
，更加容易管理内存空间。 JavaScript引用类型数据被存储于堆中
(如对象、数组、函数等，它们是通过拷贝和new出来的）。其实，说存储于堆中，也不太准确，因为，引用类型的数据的地址指针是存储于栈中的，当我们想要访问引用类型的值的时候，需要先从栈中获得对象的地址指针，然后，在通过地址指针找到堆中的所需要的数据。

3.JavaScript中的变量在内存中的具体存储形式

栈和堆，基本数据类型用栈，引用类型是堆

4.理解值类型和引用类型

值类型在内存中是按值存储的。引用类型在内存中是按引用存储的，存储的不是值，而是一个地址。

5.Null和Undefined 区别
1.数据类型不一样

console.log(typeof null) // object console.log(typeof undefined) //
undefined

2.null和undefined 两者相等，但是当两者做全等比较时，两者又不等。（因为它们的数据类型不一样）

console.log(null == undefined) // true console.log(null === undefined)
// false

3.转化成数字不同

console.log(Number(null)) // 0 console.log(Number(undefined)) // NaN

console.log(22+null) // 22 console.log(22+undefined) // NaN

4.null代表"空"，代表空指针；undefined是定义了没有赋值

var a; console.log(a); // undefined

var b=null; console.log(b) // null

6.至少可以说出三种判断JavaScript数据类型的方式，以及他们的优缺点，如何准确的判断数组类型

1 typeof typeof返回一个表示数据类型的字符串，返回结果包括： number boolean string object
undefined function等
typeof可以对js基础数据类型做出准确的判断，在对于引用类型返回的基本上都是object。判断是引用类型，typeof使用起来比较不方便。
2 instanceof instanceof是用来判断A是否为B的实例时，表达式为：A instanceof B,如果
A是B的实例，则返回true; 否则返回false 在这里特别注意的是 instanceof检测的是原型
3. Object.prototype.toString
toString是Object原型对象上的一个方法，该方法默认返回其调用者的具体类型，更严格的讲，是
toString运行时this指向的对象类型,
返回的类型格式为[object,xxx],xxx是具体的数据类型，其中包括：String,Number,Boolean,Undefined,Null,Function,Date,Array,RegExp,Error,HTMLDocument,…
基本上所有对象的类型都可以通过这个方法获取到。
4 constructor 查看对象对应的构造函数
construvtor在对应对象的原型下面，是自动生成的，当我们写一个构造函数的时候，程序自动添加，构造函数名.prototype.constructor
= 构造函数名。

7.可能发生隐式类型转换的场景以及转换原则，应如何避免或巧妙应用

在非 Numeber 类型进行数学运算符 - * / 时，会先将非 Number 转换成 Number 类型。 +
运算符要考虑字符串的情况，在操作数中存在字符串时，优先转换成字符串，

• 操作符的执行顺序是：

当一侧操作数为 String 类型，会优先将另一侧转换为字符串类型。 当一侧操作数为 Number
类型，另一侧为原始类型，则将原始类型转换为 Number 类型。 当一侧操作数为 Number 类型，另一侧为引用类型，将引用类型和
Number 类型转换成字符串后拼接。

8.instanceof的底层实现原理，手动实现一个instanceof
instanceof主要作用就是判断一个实例是否属于某种类型

function new_instance_of(leftVaule, rightVaule) { 
    let rightProto = rightVaule.prototype; // 取右表达式的 prototype 值
    leftVaule = leftVaule.__proto__; // 取左表达式的__proto__值
    while (true) {
    	if (leftVaule === null) {
            return false;	
        }
        if (leftVaule === rightProto) {
            return true;	
        } 
        leftVaule = leftVaule.__proto__ 
    }
}

9.实现继承的几种方式以及他们的优缺点

1）原型链继承：

我们使用原型继承时，主要利用sub.prototype=new super，这样连通了子类-子类原型-父类。

核心：将父类的实例作为子类的原型。

//父类，带属性  
function Super(){  
    this.flag = true;  
}  
//为了提高复用性，方法绑定在父类原型属性上  
Super.prototype.getFlag = function(){  
    return this.flag;  
}  
//来个子类  
function Sub(){  
    this.subFlag = false;  
}  
//实现继承  
Sub.prototype = new Super;  
//给子类添加子类特有的方法，注意顺序要在继承之后  
Sub.prototype.getSubFlag = function(){  
    return this.subFlag;  
}  
//构造实例  
var es5 = new Sub;

优点：

1. 非常纯粹的继承关系，实例是子类的实例，也是父类的实例

2. 父类新增原型方法/原型属性，子类都能访问到

缺点：

来自原型对象的引用属性是所有实例共享的，即属性没有私有化，原型上属性的改变会作用到所有的实例上。

2）构造函数继承：

在构造子类构造函数时内部使用call或apply来调用父类的构造函数

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

function Super(){  
    this.flag = true;  
}  
function Sub(){  
    Super.call(this)  //如果父类可以需要接收参数，这里也可以直接传递  
}  
var obj = new Sub();  
obj.flag = flase;  
var obj_2 = new Sub();  
console.log(obj_2.flag)  //依然是true，不会相互影响

优缺点：实现了属性的私有化，但是子类无法访问父类原型上的属性。

优点：
　　1. 解决了1中，子类实例共享父类引用属性的问题
　　2. 创建子类实例时，可以向父类传递参数
　　3. 可以实现多继承（call多个父类对象） 　
缺点：
　　1. 实例并不是父类的实例，只是子类的实例
　　2. 只能继承父类的实例属性和方法，不能继承原型属性/方法
　　3. 无法实现函数复用，每个子类都有父类实例函数的副本，影响性能

3）组合继承：

利用构造函数和原型链的方法，可以比较完美的实现继承

function Super(){  
    this.flag = true;   }   Super.prototype.getFlag = function(){  
    return this.flag;     // 继承方法   }   function Sub(){  
    this.subFlag = flase  
    Super.call(this)    // 继承属性   }   Sub.prototype = new Super;   var obj = new Sub();   // Sub.prototype = new Super; 会导致Sub.prototype的constructor指向Super; // 然而constructor的定义是要指向原型属性对应的构造函数的，Sub.prototype是Sub构造函数的原型， // 所以应该添加一句纠正：Sub.prototype.constructor = Sub; Sub.prototype.constructor
= Sub;  // 修复构造函数指向 Super.prototype.getSubFlag = function(){  
    return this.flag;   }

优点：
　　1. 弥补了方式2的缺陷，可以继承实例属性/方法，也可以继承原型属性/方法
　　2. 既是子类的实例，也是父类的实例
　　3. 不存在引用属性共享问题
　　4. 可传参
　　5. 函数可复用 　
　缺点：
　　1. 调用了两次父类构造函数，生成了两份实例（子类实例将子类原型上的那份屏蔽了）

4）寄生继承：

核心：通过寄生方式，砍掉父类的实例属性，这样，在调用两次父类的构造的时候，就不会初始化两次实例方法/属性，避免的组合继承的缺点

example1：

function Cat(name){
  Animal.call(this);
  this.name = name || 'Tom';
}
(function(){
  // 创建一个没有实例方法的类
  var Super = function(){};
  Super.prototype = Animal.prototype;
  //将实例作为子类的原型
  Cat.prototype = new Super();
})();
var cat = new Cat();
console.log(cat.name);
console.log(cat.sleep());
console.log(cat instanceof Animal); // true
console.log(cat instanceof Cat); //true
Cat.prototype.constructor = Cat; // 需要修复下构造函数

特点：使用到了Object.create(Fu.prototype)实现原型链的浅拷贝 　　优点：解决了原型链继承和构造函数继承的缺点

10.可以描述new一个对象的详细过程，手动实现一个new操作符

new操作符创建对象可以分为以下四个步骤：

① 创建一个空对象；

② 链接到原型（将所创建对象的__proto__属性值设为构造函数的prototype属性值）；

③ 绑定this（构造函数中的this指向新对象并且调用构造函数）；

④ 返回新对象。

function realizeNew () {
    //创建一个新对象
    let obj  = {};
    //获得构造函数
    let Con = [].shift.call(arguments);
    //链接到原型（给obj这个新生对象的原型指向它的构造函数的原型）
    obj.__proto__ = Con.prototype;
    //绑定this
    let result = Con.apply(obj,arguments);
    //确保new出来的是一个对象
    return typeof result === "object" ? result : obj
}