1, Common es6
const, let, arrow function, deconstruction assignment, extension operator... class, promise, async:await, generator, symbol, data type, set, map, etc.
1,const
a. Define constants, which cannot be changed, but can be changed for data of reference type;
b. Repeated statements are not allowed, and errors will be reported;
c. There is the concept of block level scope
d. No variable lifting;
e. There is a temporary dead zone problem
es5 define constants:
Object.defineProperty(window,'arg2'{value:1,writeable:false})
es5 reassignment will not take effect, but no error will be reported. es6 will not take effect and an error will be reported
2,let
a. Define variables;
b. Block level scope;
c. No variable lifting;
d. There is a temporary dead zone problem
Variables defined by var in es5 can be redeclared, overwriting the previous declaration.
var has no block level scope, only function scope and global scope. const,let has block level scope:
if(true){ var a = 1; } console.log(a);//1 --- can print out 1 if(true){ const b = 1; } console.log(b);An error is reported. You can't access it here b
var has variable promotion, let and const have no variable promotion
console.log(a);//You can print as undefine var a = 1; console.log(b);//cannot access const b = 1;
Temporary deadband:
var a = 1; if(true){ console.log(a);//This is a temporary dead zone. If it cannot be accessed, an error will be reported. Although a is defined in the front, indicating that it can be accessed before and after, it cannot be accessed because the subsequent const declaration binds this scope and const has no variable promotion. const a = 2; }
Note: let and const have a block level scope but no variable promotion, so an error will be reported when accessing before it is declared within its scope
3. let and const, who is better, give priority to const.
Q: how do reference types freeze, that is, become variables whose values cannot be changed
const obj = { a:1, b:2, c:[0,1,2] } Object.freeze(obj); //The above can freeze the first layer, that is, the first layer cannot be modified, but the second layer, that is, the sub attribute or reference type, can still be modified //The solution is to freeze layer by layer function deepfreeze(obj){ Object.freeze(obj); for(let key in obj){ if(typeof obj[key] == 'object'){ this.deepfreeze(obj[key]) } } }
2: Difference between arrow function and ordinary function
Ordinary function: function a() {}; const a = function(){}
Arrow function: const a = () = > {}
1. This points to. The normal function this points to the object that calls it, and the arrow function points to the object above the object that defines it
2. The arrow function is not used in the callback of dom operation, because this of the arrow function does not point to the node object that calls it, and a lot of data can not be obtained
3. The arrow function cannot construct a class, that is, it cannot new out an instance.
4. Arrow functions cannot construct methods on prototypes
5. The arrow function has no arguments object.
The arrow function mainly retains the this direction of the upper level, which makes the writing more concise.
3: class is the syntax sugar of function, which helps js to be more object-oriented.
Legacy objects:
function Course(teacher,course){ this.teacher = teacher; this.course = course } Course.prototype.getCourse = function(){ return `teacher${this.teacher},course${this.course}` } const course = new Course('li','mathematics')
es6:
class Course{ constructor(teacher,course){ this.teacher = teacher; this.course = course} } getCourse(){ return `teacher${this.teacher},course${this.course}`} } } const course = new Course('li','mathematics')
Class is the syntax sugar of function, typeof Course is function, and class also has prototype
1. class has two ways to define properties -- constructor and top-level definition
class Course{ constructor(teacher,course){ this.teacher = teacher;//This is the constructor definition this.course = course // this._teacher = teacher; } set _teacher(val){this.teacher = val;}//Top level definition get _teacher(){return this.teacher} }
2. class constructs a read-only variable and uses the set/get top-level definition property. Only get is written, not set
class Course1 { constructor(teacher, course) { this._teacher = teacher; this.course = course; } getCourse() { return `teacher: ${this._teacher}, course: ${this.course}`; } get teacher() { return this._teacher; } } const course1 = new Course1('YY', 'ES6'); course1.teacher = '222'; // Will an error be reported when modifying a read-only variable- It cannot be changed, but no error will be reported
3. Build private variables -- use closures or use the #name of the new scheme
class Course1 { constructor(teacher, course) { this._teacher = teacher; let course = course; // Define a local variable in the scope of the constructor, and expose the variable internally in the form of closure this.getCourse = ()=>{return course} } getCourse2() { return `teacher: ${this._teacher}, course: ${this.course}`; } //Another solution class Course3 { #course = 'es6'; constructor(teacher, course) { this._teacher = teacher; } } get course() { return `${#course}~`; } set course(val) { if (val) { this.#course = val; } } }
4. Static method
//es5 function Course(){} Course.getCourse = function(){} //es6 class Course{ constructor(){} static getCourse(){} } //The static method is directly hung on the, and can be obtained directly without strength Course.getCourse();//Accessible
5. Inherit
ES5 inheritance
function Course(teacher, course) { this._teacher = teacher; this.course = course; } Course.call = function() {//Static method console.log('calling'); } Course.prototype.send = function() { console.log('sending'); } //Subclass inheritance function child(teacher, course){ //Initialize parent class Course.call(this,teacher, course); this.start = function() { console.log('starting'); } } // Implement inheritance child.prototype = Course.prototype;//The prototype chain of the child class points to the prototype chain of the parent class, and you can get the things on the prototype chain of the parent class
es6 inheritance
class Course { constructor(teacher, course) { this._teacher = teacher; this.course = course; } send() { console.log('sending'); } static call() { console.log('calling'); } } class Child extends Course{ constructor(){ super('teacher','mathematics'); } newstart(){//Subclass method} }