JavaScript 给我们带来了新的写法(上)(烧脑呀)

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

感谢 Jake 和 Surma 分享视频的《old vs new JavaScript - HTTP203》因为个人技术和英语理解的局限性可能会出入，如果大家对下面难题有好的解释希望大家踊跃讨论。

今天我们来看一看那些落地的 JS 新特性可以帮助我们更优雅写 replace 现有代码。

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

Car.prototype = (function(){
    function tmp(){}
    tmp.prototype = Vehicle.prototype;
    return new tmp();
})();
复制代码

这个代码一下子就给我们带回到了 2015 年，我记得那时自己学到 7、8 种用 JS 实现继承的方式。看到 prototype 的下伙伴会问这是什么东西，毕竟现在大家在 vue 、react 和 Angular 这样框架包裹下，已经很少接触一些 native JavaScript 了。而且 ES6 或者 TS 都不建议你去碰这个东西。

定义一个函数，然后更新了函数原型(prototype)，使用带有 new 关键字调用函数时，会用到这个原型，新对象会被执行 prototype 连接，也就是 car.__proto__,也就是希望 Car 的 prototype 是一个 Vehicle 的实例。

其实上面代码就是实现了继承和调用父类的 super 函数, 现在只要这么几行代码就搞定了。

class Car extends Vehicle{
    constructor(doors){
        super({doors:doors,wheels:4})
    }
}
复制代码

接下来

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;
}
复制代码

定义函数接收一个参数 options, 然后对 options 进行检查其格式，对于缺失的属性进行采用默认值补全。

function spin({
    duration = 1000,
    direction = 'clockwise',
    easing = 'ease-out',
    iterations = 1
} = {}){
    
}
复制代码

正如上面代码所示，这里用到 ES6 解构赋值了 options 这个对象，并且给这个对象一个各个属性默认值。

function spin(options = {}){
    const {
        duration = 1000,
        direction = 'clockwise',
        easing = 'ease-out',
        iterations = 1
    }=options
}
复制代码

不喜欢在函数的参数进行解构赋值，这样看起来有点拥挤，在函数中其他位置单独定义了 options 对象的结构。然后我在我的函数中的第一行将分配默认值。

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;
})
复制代码

用途就是当在一个 ul 列表每一个项目 li 可能包裹一个 a 标签在其中，这样处理就是让点击事件对象落在 li 而不是其中包裹的元素。

ulEle.addEventListener('click', function (event) {
    const li = event.target.closest('li');
    console.log(li)
    if (!li) return;
})
复制代码

JavaScript 给我们带来了新的写法(上)(烧脑呀)

猜你喜欢