Сборник знаний о интервью по JavaScript

Why put the tag in the last of HTML file?

Putting the script tag in the last can reduce the delay time, users won't wait a long time to open the webpage. Because the render direction is from top to bottom.

How many data types does JavaScript have?

Js have 7 data type in total, they are 6 primitives types and Object:

• 6 primitives are Number, String, Boolean, Null, Undefined, Symbol
• Object

Какие результаты может вернуть оператор typeof?

Может возвращать 6 типов, typeof может различать только примитивные типы и функции.

undefined typeof undefined

string typeof 'abc'

number typeof 123

boolean typeof true

object typeof { } 或 typeof[ ] 或 typeof null

function typeof console.log

Каковы тип значения и тип ссылки Js?

value type: Boolean, String, Number, null, undefined.

var a=10;
var b=a;
a=20;
console.log(b) //10

reference type: Array, Function. Object.

var a={age:20}
var b=a;
b.age=18;
console.log(a.age)//18;

Когда тип значения и тип ссылки используются в качестве параметров функции соответственно

Когда тип значения используется в качестве параметра функции: переменные внутри функции, то есть формальный параметр и фактический параметр, являются просто простыми операциями присваивания, и эти два данных хранятся в памяти независимо. Изменения формальных параметров внутри функции не повлияют на внешние переменные.

var num=9;
function changeNum(num){
    num=10;
    console.log(num);
}
changeNum(num);//10
console.log(num);//9

var val='xixi';
function a(val){
    val=30;
    return val;
}
console.log(a(val)); //30
console.log(val); //xixi

Когда ссылочный тип используется в качестве параметра функции: адрес хранилища фактического параметра по-прежнему назначается формальному параметру.Внутри функции формальный параметр также указывает на объект, поэтому изменение объекта внутри функции повлияет на внешний переменные.

var obj={name:"meryl"}
function changeName(para){
    para.name="jesscia";
}
changeName(obj);
console.log(obj.name); //jesscia;


/* 注意：如果在函数内部重新创建对象,为该形参赋值，那么实参和形参这俩对象将不再有关系,修改其中
一个，另外一个不受影响,比如看下面的例子：*/
var obj2={name:"mohan"}
function changeName(para){
    para.name="lx";
    para={name:'zoe'};
    para.name='phoebe';
}
changeName(obj2);
console.log(obj2.name); //lx 

Нативные объекты Js /Глобальные объекты Js/ Что такое объекты класса инкапсуляции данных в Js?

Js имеет 13 встроенных конструкторов: Object Array Boolean String Number Date Function RegExp Error Global Math JSON

null  VS undefined  VS undeclared 

Undeclared is any variable that has not been declared yet. Console throws an error for this. 

Undefined means a variable has been declared but has not yet been assigned a value.

Null is an assignment value, it can be assigned to a variable as a no value.

typeof(undefined);  //undefined
typeof(null); //object
null == undefined  //true
null===undefined   //false

i++ VS ++i

++i is more effective. because i++ can creative a buff variable to save the value before + operator. but ++i won't, like this example: i++ ===> m=1; i=i+1;    ++i===>i=i+1;

Number.isNaN() VS isNaN()

Способы создания объекта в JS? / Несколько способов создания объекта (смотрите цепочку прототипов / объектно-ориентированный)

1. Use the bracket's syntax sugar to create an object

var obj={
    name:'meryl',
    gender:'girl',
    sayHi：function(){console.log(`${this.name} is a ${this.gender}`)}
}
//缺点： 不能把json对象当作一个模板来进行new操作

2. Use Object() constructor to create object

var obj=new Object();
obj.age=19;
obj.show=function(){};
//缺点： 不能把json对象当作一个模板来进行new操作

3. Use the function constructor to create an object

function Car(){
    this.made="斯巴鲁WRX";
    this.show=function(){
        console.log(this.made);
    }
}
var myCar=new Car();//通过构造函数，构造出一个对象出来
myCar.show();//斯巴鲁WRX

/*
    new内部的原理：
    第一步:创建一个空对象
    第二步:把this指向到那个空对象上
    第三步:使空对象的_proto_指向构造函数的原型对象
    第四步:当构造函数执行完后，如果无return的话,那么就把当前的空对象返回
*/

4. Use function constructor+prototype to create an object

function Car(model){
    this.made=model;
}
Car.prototype.show=function(){
    console.log(this.made);
}
var car1=new Car('beetle');
var car2=new Car('BMW E46');
car1.show();//beetle
car2.show();//BMW E46

5. Use ES6 class syntax:

class myObj{
    constructor(name){
        this.name=name;
    }
}
var e = new myObj('meryl');

6. Use Object.create( ), this method creates a new object extending the prototype object passed as parameter.

const person={
    isHuman:false,
    printInfo:function(){
        console.log(`My name is ${this.name}---Am I human? ${this.isHuman}`)
    }
}
const me = Object.create(person);
me.name='meryl';
me.isHuman=true; // inherited propertied can be overwritten
me.printInfo(); //My name is meryl---Am I human? true

Перечислите как минимум 3 явных преобразования типов (явные преобразование типов) и 2 неявных преобразования типов

1. Явные преобразования типов: Boolean Number String parseInt parseFloat

2. Неявные преобразования типов: + - == !

Копия объекта

• Неглубокая копия: скопируйте ссылочный объект в виде присвоения, по-прежнему указывая на тот же адрес, исходный объект также будет затронут при изменении
• Object.assign
• spread operator
• Глубокая копия: новый объект полностью копируется, и исходный объект больше не подвергается никаким изменениям.
• JSON.parse(JSON.stringfy(obj))
• Когда значение является функцией,undefinedилиsymbolнельзя скопировать
• Когда объект имеет циклическую ссылку, сообщается об ошибке

Есть несколько способов обойти Object?

1. for  in

В основном используется для обхода перечислимых свойств объектов, включая собственные свойства, свойства, унаследованные от прототипов.

var obj={name:"meryl", career:'FE'}
Object.defineProperty(obj,"age",{value:"forever21",enumerable:false});
Object.prototype.protoPer1=function(){console.log("proto")};
Object.prototype.protoPer2=2;
console.log("For in:");
for(var key in obj){
    console.log(key);
}

Результат выглядит следующим образом:

2.  Object.keys

Возвращает массив, содержащий собственные перечисляемые свойства объекта.

var obj={name:'meryl', career:'FE'}Object.defineProperty(obj,"age",{value:"forever21",enumerable:false});
Object.prototype.protoPer1=function(){console.log("proto")};
Object.prototype.protoPer2=2;
console.log("Object.keys:");
console.log(Object.keys(obj));

Результат выглядит следующим образом:

3. Object.getOwnProperty

Бесплатные свойства для возврата объектов, как перечисляемых, так и неперечисляемых

var obj={name:'meryl', career:'FE'}
Object.defineProperty(obj,"age",{value:"forever21",enumerable:false});
Object.prototype.protoPer1=function(){console.log("proto")};
Object.prototype.protoPer2=2;
console.log("Object.getOwnPropertyNames:")
console.log(Object.getOwnPropertyNames(obj));

В JS, как предотвратить изменение объекта?

1. используйте Object.preventExtensions(), чтобы предотвратить добавление новых методов или свойств к объекту (мы не можем добавлять новые свойства и методы к объекту, но мы также можем изменять исходные свойства):

var obj={name:'meryl'}
Object.preventExtensions(obj);//阻止篡改对象
obj.age=21;
console.log(obj.age);//undefined

//修改原有的属性：
obj.name='sean';
console.log(obj.name);//sean

2. use Object.seal( ) to seal an object. it not only makes an object as non-extensible but also gets objects' properties[[Configurable]] as false. it means we can't delete properties, but we still can modify the current properties.

var obj={name:'meryl'}
//密封对象
Object.seal(obj);
obj.age=21;
console.log(obj.age); // undefined  不能添加新的属性
delete obj.name;
console.log(obj.name); //meryl 不能删除对象的属性

3. use Object.freeze( ) to freeze an object. it makes an object as non-extensible and sealed also it set properties' [[Writable]] as false. it means we can't modify current properties.

var obj={name:'meryl'}
//冻结对象
Object.freeze(obj);
obj.age=21;
console.log(obj.age); // undefined  不可扩展
delete obj.name;
console.log(obj.name); //meryl 不可删除
obj.name='sean';
console.log(obj.name);//meryl 不可修改

Сводка сравнения трех методов показана в следующей таблице:

Как вы понимаете JSON?

• JSON является одним из встроенных объектов JavaScript, а другие включают Math, Date и т. д.
• Общие API для встроенных объектов JSON: JSON.stringify({a:1,b:2}) JSON.parse('{"a":1,"b":2}')
• JSON также является структурой данных

how to restrict the scope of a var variable from 'function' to 'block'?

1. Использование «IIFE» (немедленно вызываемое функциональное выражение):

(function(){
    var tmp='test';
})()
console.log(tmp);//Uncaught ReferenceError: tmp is not defined

2. use "let" keywords

Что это такое, и объясните несколько разных сценариев использования этого?

это объект среды, в котором выполняется функция («это» означает объект среды, в котором выполняется функция).

это выполняется как конструктор: именно через этот конструктор может быть сгенерирован новый объект, тогда это указывает на новый объект

function Fn(name,age){
    this.name=name;
}
var f=new Fn('meryl');
f.name// meryl

это выполняется как свойство объекта:

var obj={
    a:1,
    b:function(){
        console.log(this.a);
    }
}
obj.b();// this指向obj这个对象

var test=obj.b;
test();//undefined  因为this指向了全局,全局中未定义变量a

это выполняется как обычная функция:Это наиболее распространенное использование функций и глобальный вызов, поэтому он представляет глобальный объект

var a = 1;
function fn(){
    console.log(this.a);
}
fn(); //1

call, apply, bind: Все они являются методами функций, и они могут изменять объекты вызова функции.

function fn(name,age){
    console.log(name);
    console.log(this);
}
fn.call({x:100},'meryl',20); //meryl {x:100}

Расскажите мне о своем понимании подъема переменных?

Hoisting is a javascript mechanism where variables and function declarations are moved to the top of their scope before code execution. here is the example:

var a=3;
fn();
function fn(){
    var b=9;
    console.log(a); //undefined
    console.log(b); //9
    var a=9;
}
console.log(a); //3

что закрытие?

Закрытие - это внутренняя функция который имеет доступ к переменным внешней функции . Замыкание имеет три цепочки областей видимости: он имеет доступ к своей области, он имеет доступ к переменным внешней функции, и у него есть доступ к глобальным переменным, например:

function counter(){
    var count=0;
    return function(){
      count++;
      return count;
    }
}

var c1=counter();
c1();//1
c1();//2

var c2=counter();
c2();//1
c2();//2

c1();//3  this is not affected by c2;

В реальной разработке, каково применение замыканий?

В основном используется для инкапсуляции переменных и конвергентных разрешений. В следующем примере вне функции isFirstLoad невозможно изменить значение списка переменных.

function isFirstLoad(id){
    var list=[];
    return function(id){
        if(list.indexOf(id)>=0){
            //说明不是第一次load了
            return false;
        }
        else{
            list.push(id);
            return true;
        }
    }
}

Почему JS однопоточный в браузере? Как решить ситуацию с блокировкой одного потока?

Из-за предотвращения конфликтов рендеринга DOM

Решите с помощью «асинхронного», асинхронныйрешение

Какова связь между одиночным потоком и асинхронным?

Один поток должен делать только одну вещь одновременно, два JS не могут выполняться одновременно, причина в том, чтобы избежать конфликта рендеринга DOM, асинхронный - "беспомощное" решение, хотя есть много проблем (недостатков). Например, он выполняется не по написанному методу, читабельность плохая, коллбек не так просто модульно разбить.

Асинхронность — это решение. Конкретный метод реализации — цикл событий.

Когда интерфейс должен быть асинхронным? / Когда нельзя заблокировать запуск программы?

1. Временные задачи: setTimeout, setInterval
2. Сетевой запрос: ajax-запрос, динамическая загрузка
   
3. привязка событий
   

Каковы текущие асинхронные решения?

1. Jquery Deferred
2. Promise
3. Async/await
4. Generator

Что такое цикл событий? (Цикл событий)

Event-loop — это специфический метод реализации JS для достижения асинхронности.Принцип заключается в том, что синхронный код выполняется непосредственно последовательно, асинхронный код сначала помещается в асинхронную очередь (очередь), а уже после всех синхронный код/синхронные функции выполняются, асинхронная очередь опрашивается и выполняется функция в (queue).

//例子1:
setTimeout(function(){
    console.log(1);
})
console.log(2);
/*
结果： 先输出2,后1
主进程：console.log(2);
异步队列：function(){console.log(1)}
*/


//例子2：
setTimeout(function(){
    console.log(1);
}，100)
setTimeout(function(){
    console.log(2);
})
console.log(3);
/*
结果： 先输出3,后2,最后1
主进程：console.log(3);
异步队列：function(){console.log(2)}立刻被放入queue中,
         100ms之后function(){console.log(1)}被放入queue中
*/


//例子3：
$.ajax({
    url:'http://google.com',
    success:function(result){console.log('a');}
});
setTimeout(function(){console.log('b')},100);
setTimeout(function(){console.log('c')});console.log('d');
/*
结果1： 先输出d,后c, 再a, 最后b
结果2： 先输出d,后c, 再b, 最后a
主进程：console.log('d');
异步队列：function(){console.log(c)}最先被放入queue中,
         .ajax或function(){console.log('b')}是不确定哪一个最被先放进去queue中的.
*/

What's the promise? How to use promise?

• Promise is like a container. In this container have the result of future things.
• Promise is a cleaner way for running asynchronous tasks.
• Promise use methods like ".then" and "catch" to deal with all kinds of asynchronous operation

Here is a promise example:

Результат выглядит следующим образом:

Что делает новое ключевое слово? (Конструкторский тестовый полигон)

//构造函数
function Person(name,age,job){
    this.name=name;
    this.age=age;
    this.job=job;
}
Person.prototype.Intro=function(){
    console.log(this.name+this.age)
}
Person.prototype.showJob=function(){
    console.log(this.job)
}

//实例对象
var p1 = new Person('meryl',25,'web developer');

Новое ключевое слово используется в сочетании с конструктором.В качестве примера вышеприведенного примера операция, стоящая за ним, разделена на следующие шаги:

1. first create an empty object: p1{}
2. set the 'this' to be that empty object: this=== p1;
3. add the line 'return this' to the end of the constructor function:

function Person(name,age,job){
    this.name=name;
    this.age=age;
    this.job=job;
    return this;
}

4. set the instance object (p1) 's _proto_ links to the constructor function's prototype:

На следующем рисунке показана диаграмма отношений конструктора, объекта-экземпляра и объекта-прототипа:

Каковы правила прототипа?

1. Все типы ссылок (массив, функция, объект) все имеют объектные характеристики, то есть свободно расширяемые атрибуты (кроме null)

Свойства бесплатного расширения:

var obj ={ };                      
obj.a=100;

var arr=[ ];                      
arr.a=100;

function fn(){ }    
fn.a=100;

2. Все ссылочные типы (массив, функция, объект) имеют атрибут _proto_ (неявный прототип), а значением атрибута является обычный объект

console.log(obj._proro_); //_proto_是一个对象
console.log(arr._proro_); //_proto_是一个对象                                                console.log(fn._proro_);       //_proto_是一个对象

3. Все функции имеют свойство прототипа (прототип отображения), и значение свойства также является обычной функцией

console.log(fn.prototype); //prototype也是一个对象

4. Значение атрибута _proto_ всех ссылочных типов (массив, функция, объект) указывает на значение атрибута прототипа его конструктора.(явный прототип конструктора === неявный прототип экземпляра объекта)

console.log( obj._proto_ === Object.prototype) //true   因为obj的构造函数就是Object 
console.log( arr._proto_ === Object.prototype) //true   因为arr的构造函数就是Object 
console.log( fn._proto_ === Object.prototype)  //true   因为fn的构造函数就是Object

5. При попытке получить свойство объекта, если сам объект не имеет этого свойства, он пойдет к своему _прото_ (то есть прототипу своего конструктора) для его нахождения.

function Foo(name,age){
    this.name=name;
}
Foo.prototype.alertName=function(){alert(this.name);}

var f = new Foo('meryl');
f.printName=function(){console.log(this.name);} //printName是对象自身新添的一个属性
f.printName()// this指向f,不用去f的构造函数的原型中找printName这个属性
f.alertName()// this也指向f,其中alertName函数是f对象的原型中的函数

Что такое прототип JS и цепочка прототипов JS?

какой прототип:

Прототип является свойством функции-конструктора, и это объект. Объект-прототип может разделять методы и значения между объектами-экземплярами (каждый раз, когда функция создается, в функции будет свойство, называемое прототипом. Его значением является объект, и функция этого объекта заключается в том, что когда функция используется для создания экземпляра, то эти экземпляры совместно используют свойства и методы прототипа)

what's the prototype chain?

Цепочка прототипов состоит из объектов-прототипов. имеет свойство '_proto_', этот proto указывает на прототип объекта, но у прототипа тоже есть свой прототип.В финале. Прототип будет нулевым; Эта цепочка структура представляет собой цепочку прототипов. (В JS. Каждый экземпляр объекта имеет внутреннюю ссылку на свой объект-прототип (прототип) с именем _proto_, который имеет свой собственный прототип, Пока прототип объекта не станет нулевым , эта структура цепочки первого уровня является цепочкой прототипов. При поиске свойств объекта js будет проходить по цепочке прототипов вверх, пока не найдет свойство с заданным именем, а затем поиск достигает вершины цепочки прототипов, если указанное свойство все еще не найдено, оно вернет undefined)

Напишите пример наследования цепочки прототипов?

Вот пример, который имитирует функцию html() в jQuery:

//一个封装DOM的例子：
function Elem (id){
    this.elem=document.getElementById(id);
}
Elem.prototype.html=function(val){
    var elem=this.elem;
    if(val){
        elem.innerHTML=val;
        return this;//链式操作
    }else{
        return elem.innerHTML;
    }
}
Elem.prototype.on=function(type,fn){
    var elem=this.elem;
    elem.addEventListener(type,fn);
    return this;
}


var div1=new Elem('div1');
div1.html('<p>hello world</p>').on('click',function(){alert('clicked!')}).html('<p>JS</p>')

Каков принцип instanceof?

 This operator is used to check the type of an object at run time. The instanceof оператор возвращает логическое значение, указывающее, является ли объект экземпляром конкретного класса (instanceof используется для определения того, к какому конструктору принадлежит ссылочный тип) Принцип работы instanceof заключается в том, чтобы найти прототип (отобразить прототип) в соответствии с _proto_ (неявный прототип), а затем выполнить неявное и явное сравнение прототипов. Просто верните true, если нет, продолжайте поиск (потому что в объекте-прототипе также есть _proto_)

Напишите общую функцию forEach, которая перебирает объекты и массивы.

function forEach(obj,fn){
    if(obj instanceof Array){
        obj.forEach(function(item,index){
            fn(index,item);
        })
    }else{
        for(var key in obj){
            fn(key,obj[key])
        }
    }
}

var arr=[1,2,4];
var obj={x:10,y:20};
forEach(arr,function(index,item){console.log(index,item)});
forEach(obj,function(key,value){console.log(key,value)});

Что такое модель потока событий Js?

Модель потока событий состоит из трех этапов:

• Фаза захвата события: событие начинает инициироваться объектом верхнего уровня, а затем распространяется вниз к целевому элементу.
• в целевой фазе: на элементе, к которому привязано событие
• Стадия всплытия события: событие сначала принимается определенным элементом, а затем распространяется уровень за уровнем, пока неопределенный элемент

что за событие распространение?

Event propagation including event bubbling and event capturing, when an event occurs in an element inside another element and both elements have registered a handler for that event. The event propagation mode determines in which order the elements receive the event.

With bubbling, the event is first captured and handled by the innermost element and then propagated to outer elements.

With capturing, the event is first captured by the outermost element and propagated to the inner elements.

What is event bubbling?/Define event bubbling

Because js allows DOM elements to be nested inside each other. If the handler of the child is clicked, the handler of the parent will also work as if it were clicked too. That sums up what event bubbling really is.

what's Event Delegation?

Event Delegation is the method. this method will let you create one event listener to trigger all child elements. Each child element will be targeted by a unique ID.

e.target VS e.currentTarget ?

• It was designed for communication between server and client side

• cookie also can save data, but it has many disadvantages.

• Мы можем использовать «document.cookie = …." для получения или редактирования файлов cookie.

Недостатки файлов cookie для хранения

• Хранилища слишком мало, всего 4 КБ
• Все http-запросы содержат файлы cookie, что повлияет на эффективность получения ресурсов.

Опишите разницу между файлами cookie, sessionStorage и localStorage?

• емкость
• Максимальная емкость файлов cookie составляет 4 КБ, а максимальная емкость sessionStore и localStorage — 5 МБ.

• Будет ли это перенесено в ajax
• Все http-запросы содержат файлы cookie
• В http-запросе нет sessionStotage и localStorage. (sessionStotage и localStorage предназначены исключительно для хранения данных);

• Апи простота использования
• Файлы cookie требуют, чтобы программисты выполняли собственную инкапсуляцию
• API-интерфейсы sessionStorage и localStorage просты и удобны в использовании.
• Причина существования:
• Файл cookie — это то, с чем взаимодействует сервер, и он существует как часть спецификации http.
• localStorage и sessionStorage предназначены для локального «хранения» данных.

Есть несколько способов определить, является ли это массивом?

1. Используйте Array.isArray()

function is_array(arr){
    if(Array.isArray(arr)){
        return true;
    }else{
        return false;
    }
}

2. Использование экземпляра массива

function is_array(arr){
    return arr instanceof Array;
}

3. Используйте Object.prototype.toString.call()=='[массив объектов]'

function is_array(arr){
    return Object.prototype.toString.call(arr)=='[object Array]';
}

Реализуйте функцию clone(), которая может копировать значения 5 основных типов данных в JavaScript (включая число, строку, объект, массив, логическое значение).

В этом вопросе рассматриваются следующие точки знаний: использование typeof для определения типа значения, использование toString для различения массивов и объектов, использование рекурсивных функций.

function clone(obj){
    //判断是对象,就进行循环赋值
    if(typeof obj ==='object' && typeof obj !=='null'){
        //区分是数组还是对象，创建空的数组或对象
        var o = Object.prototype.toString.call(obj)==='[object Array]'?[]:{};
        for(var k in obj){
            //如果属性对应的值为对象，则递归赋值
            if(typeof obj[k] ==='object' && typeof obj[k] !=='null'){
                o[k]=clone(obj[k])
            }else{
                o[k]=obj[k];
            }
        }
    }
    else{
        //不是对象，直接把值返回
        return obj;
    }
    retrun o;
}

what is the use of async and defer attributes used inside <script> tag?

• The defer attribute means delaying script execution until the HTML parse has finished. A nice effect of this attribute is that the DOM will be available for your script.

• The async attribute means the script is executed asynchronously while the page continues parsing. Since we do not care exactly at which point the file is executed, asynchronous loading is the most suitable option.

what's jQuery method chaining? Why the method could be a chain? plz write implementation by using JS.

what's Jquery chaining?

jquery chaining allows us to operate multiple actions on the same set of elements, all within a single line of code. like: $('div').html().css().removeClass()…

why the method could be a chain?

Because it returning a reference to this when the method finishes.

write example:

var testObj={
    html:function(){console.log('method1');return this}
    css: function(){console.log('method2');return this}
}
testObj.html().css();

what is $(function(){ }) mean in Jquery?

1. $(function(){ }) is short for $(document).ready(function(){ });
2. it means code will run until DOM was loaded. 

what's a Document Object Model(DOM)?

• DOM is short for "Document object model";
• DOM is a conceptual way of visualizing a document and its contents.
• we can use javascript to access and edit the DOM, like adding, changing, deleting elements, etc.

Что означает уровень событий DOM?

What is reflow? What causes reflow? How could you reduce reflow?

what is reflow?

Reflow is the web browser process for re-calculating the positions of elements in the document, for the purpose of re-rendering the document.

 what caused reflow?

• change layout (geometry of the page)
• resize the window
• change height/width of an element
• changing font
• change font size
• move DOM element (animation)
• adding or removing stylesheet
• calculating offset height or offset width

• display: none;

How to reduce reflow?

1. Change classes on the element you wish to style (as low in the dom tree as possible)
2. Avoid setting multiple inline styles
3. Apply animations to elements that are position fixed or absolute
4. Trade smoothness for speed
5. Avoid tables for layout
6. Avoid JavaScript expressions in the CSS (IE only)

Что нового в ES6?

• Default Parameters in ES6.
• Template Literals in ES6.
• Multi-line Strings in ES6.
• Destructuring Assignment in ES6.
• Enhanced Object Literals in ES6.
• Arrow Functions in ES6.
• Promises in ES6.
• Block-Scoped Constructs Let and Const.

arrow function VS traditional function

• arrow function are less verbose than traditional function.
• arrow function has a lexical this, its value is determined by the surrounding scope. the traditional function has a dynamic this, its value is determined by how the function is called.
• arrow function can not be a Constructor
• arrow function has no arguments:

let fn=(...args)=>{console.log(args)};
fn(1,2,'rest'); //[1,2,'rest']

function fn2(){
    console.log(arguments);
}
fn2(1,2,'rest');

В чем разница между классом и обычным конструктором?

• class синтаксически больше соответствует «объектно-ориентированному» письму
• наследование реализации класса легче понять

• Суть класса — синтаксический сахар, и используется прототип