行知任之 每一次旅行都是不同的尝试!

JavaScript 中的多态

“多态”一词,从字面上看可以理解为多种形态。在语言中可以这样理解,同样一段代码或者一个函数运行得到不同的结果反馈。
通过对封装继承多态组合等技术的反复使用,提炼出一些可重复使用的面向对象设计技巧。而多态在其中又是重中之重,绝大部分设计模式的实现都离不开多态性的思想。

如何实现javascript的函数重载

  Javascript 与JAVA不同,是没有函数重载的概念的,相同的函数名,后面的函数将替换之前的函数。可是在编程过程中又需要根据传入的参数不同调用不同的方法,跟函数重载的理念很相同,如何去实现,其实重点依据的就是传入参数的个数,即 arguments.length;

方法一:

  判断传入参数的个数,根据个数的不同执行不同的运算方法


    // 传入不同个数的参数,执行不一样的运算方法
    function compute(){<!--autointro-->

标签: JavaScript

作者:Bryan 分类:JavaScript 浏览:11 评论:0

函数节流的分析以及实际应用场景

函数节流

  JavaScript中的函数多数是由用户触发的,在一些情况下函数的触发不受用户的直接控制,比如在某些场景下函数会被频繁的调用,从而造成性能上的影响。

函数频繁调用的场景

  • window.onresize 事件。   window.onresize事件是在浏览器窗口大小发生改变时触发,当用户在拖拽改变浏览器窗口大小时,在此过程中会频繁调用执行。
  • window.scroll 事件。   window.scroll 事件在浏览器滚动条滚动

标签: JavaScript

作者:Bryan 分类:JavaScript 浏览:10 评论:0

实现函数的无限累加

题目解读

  使用JS实现一个函数,该函数可以用于无线的累加求和。当传递参数时,获取参数并参与计算,没有传递参数时或者调用结束时返回最终的计算结果。最终的实现类似如下的效果:

    add(1); // =˃ 1
    add(1)(2); // =˃ 3
    add(1)(2)(3); // =˃ 6
    add(1)(2)(3)(4); // =˃ 10
    add(1)(2)(3)(4)(); // =˃ 10

标签: JavaScript

作者:Bryan 分类:JavaScript 浏览:10 评论:0

函数柯理化的理解与应用

柯理化(currying)

˃ 柯理化,也常以为“局部套用”,是把多参数函数转换为一系列单参数函数并进行调用的技术。这项技术以数学家 Haskell Curry 的名字命名。 --- 《JavaScript语言精粹》

  柯理化函数的作用是为每一个逻辑参数返回一个新函数。

初步实现

  先通过一个简单的 add 函数了解一下柯理化。


    // 参数相加
    var add = function(a,b<!--autointro-->

标签: JavaScript

作者:Bryan 分类:JavaScript 浏览:11 评论:0

清除浮动的几种方式

清除浮动的几种方式:

  清除浮动可以理解为清除浮动产生的影响。当元素浮动时也就是为当前元素创建了块格式化上下文(BFC),会对周围的元素或者父元素在布局上会产生一定的影响,比如:父元素因无法自动计算高度而产生的高度塌陷;因脱离文档流而使兄弟元素错位等。

  要清除浮动产生的影响,其实就是在解决这两方面的问题。方法是可以通过设置父元素高度,或利用BFC,或者使用自带属性 `clear1 进行清除。

1. 设置父元素的高度   设置父元素的高度解决的是元素浮动产

标签: css

作者:Bryan 分类:CSS 浏览:10 评论:0

判断数据类型的多种方式和区别

方法一: typeof 运算符

  typeof 操作符返回一个字符串,表示未经计算的操作数的类型,返回结果包括: "string"、"number"、"boolean"、"undefined"、"object"、"function"、"symbol" 七种类型。


    typeof NaN; // =˃ 'number'
    typeof Infinity; // =˃ 'number'
    typeof 1; // =˃ 'numb<!--autointro-->

标签: JavaScript

作者:Bryan 分类:JavaScript 浏览:13 评论:0

数组去重的灵活应用

  数组去重在实际的项目中貌似没怎么用到,不过在面试题中到见的不少:

˃ 手写实现数组去重方法。

  一般这样的面试题还要求的不止一种方法实现,这就需要充分考虑数组的使用了。

方法一: 使用ES6中的 Set() 方法

  Set()是ES6提供的新的数据结构,其类似于数组,但是成员值都是唯一的,没有重复的值。利用这一特性,完成数组的去重操作。这里需要注意的是返回值也是类数组的 Set数据结构,需要转换成数组结构。


  <!--autointro-->

标签: JavaScript

作者:Bryan 分类:JavaScript 浏览:11 评论:0

可迭代对象的特点

可迭代对象可通过 for...of进行循环。

模拟迭代器:


    function makeIterator(arr) {
        var nextIndex = 0;
        return {
            next: function () {
                return nextIndex  为了实现可迭代,一个对象必须实现 iterator 方法,这意味着这个对象(或其原型链中的一个对象<!--autointro-->

标签: JavaScript

作者:Bryan 分类:JavaScript 浏览:10 评论:0

JS如何实现深拷贝

  前段时间在网上刷面试题有看到深度拷贝,当时只是简单的看了一下,没有细致的研究,不巧的是在面试的时候刚好有一个笔试题是手写深度拷贝,顿时有点儿凌乱了,凭着一丝丝的记忆,写了一个基础版本。现在重点看待深度拷贝问题,写一篇自己的理解。

  在了解深度拷贝前,先说一下为什么会需要深度拷贝。

  众所周知的问题,JS数据类型大致分为两类,一类是基础数据类型,一类是复杂数据类型(引用类型)。复杂数据类型在变量中保存的是引用地址,当复制变量的时候其实复制的是该引用地址,而非数据。当原始数据发声

标签: JavaScript

作者:Bryan 分类:JavaScript 浏览:7 评论:0