Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Thanks Jake and Surma for sharing the video “Old vs New javascript-http203”. Due to personal technology and English understanding limitations may be different, if you have a good explanation of the following problem, I hope you can discuss it.

Today we’ll take a look at some of the new JS features that hit the ground and help us write replace code more elegantly.

function Car(doors){
    Vehicle.call(this, {doors:doors,wheels:4});
}

Car.prototype = (function(){
    function tmp(){}
    tmp.prototype = Vehicle.prototype;
    return newtmp(); }) ();Copy the code

This code immediately takes us back to 2015, when I remember learning 7 or 8 ways to implement inheritance with JS. Prototype users might wonder what this is, since native JavaScript isn’t as common these days with frameworks like Vue, React, and Angular. And neither ES6 nor TS recommends you touch it.

Define a function, and then update the function prototype. When you call a function with the new keyword, the prototype will be used. The new object will be connected by prototype. The prototype of car is expected to be an instance of Vehicle.__proto__

In fact, the above code implements the super function that inherits and calls the superclass. Now it’s just a few lines of code.

class Car extends Vehicle{
    constructor(doors){
        super({doors:doors,wheels:4}}})Copy the code

The following

function spin(options){
    if(! options) options = {};var duration = ('duration' in options) ? options.duration :100;
    var direction = ('direction' in options) ? options.direction :'clockwise';
    var easing = ('easing' in options) ? options.easing :'ease-out';
    var iterations = ('iterations' in options) ? options.iterations :1;
}
Copy the code

The definition function takes an option, checks the format of the options, and completes the missing attributes with default values.

function spin({
    duration = 1000,
    direction = 'clockwise',
    easing = 'ease-out',
    iterations = 1
} = {}){}Copy the code

As shown in the code above, the ES6 destructor assigns the options object and gives the object a default value for each property.

function spin(options = {}){
    const {
        duration = 1000,
        direction = 'clockwise',
        easing = 'ease-out',
        iterations = 1
    }=options
}
Copy the code

Don’t like to deconstruct assignments in function arguments, which looks a bit crowded. Define the structure of the Options object separately elsewhere in the function. Then I will assign the default value in the first line of my function.

const ulEle = document.querySelector("#container");
ulEle.addEventListener('click'.function (event) {
    let li = event.target;
    while(li && li.tagName ! = ='LI') {
        li = li.parentNode;
        console.log(li)
    }
    if(! li)return;
})
Copy the code

The purpose is that when in a UL list each item li may wrap an A tag in it, this is handled so that the click event object falls on the LI instead of the element wrapped in it.

ulEle.addEventListener('click'.function (event) {
    const li = event.target.closest('li');
    console.log(li)
    if(! li)return;
})
Copy the code