call(), apply() and bind()

call(), apply()和bind()

js中的call(), apply()和bind()是Function.prototype下的方法，都是用于改变函数运行时上下文，最终的返回值是你调用的方法的返回值，若该方法没有返回值，则返回undefined。

  • apply()

使用 apply， 你可以继承其他对象的方法：注意这里apply()的第一个参数是null，在非严格模式下，第一个参数为null或者undefined时会自动替换为指向全局对象，apply()的第二个参数为数组或类数组。

1
2
const arr = [1,2,3,4,9,8,7]
const max = Math.max.apply(Math, arr)
  • call()

call()是apply()的一颗语法糖，作用和apply()一样，同样可实现继承，唯一的区别就在于call()接收的是参数列表，而apply()则接收参数数组。

1
2
const arr = [1,2,3,4,9,8,7]
const max = Math.max.apply(Math, ...arr)
  • bind()

bind()的作用与call()和apply()一样，都是可以改变函数运行时上下文，区别是call()和apply()在调用函数之后会立即执行，而bind()方法调用并改变函数运行时上下文后， 返回一个新的函数，供我们需要时再调用。

JavaScript

CSS Flex布局

Flex布局

Flex是Flexible Box的缩写，即“弹性盒子”

  • flex-direction，决定主轴的方向（即项目的排列方向）: row | row-reverse | column | column-reverse;

  • flex-wrap，定义换行情况: nowrap | wrap | wrap-reverse;

  • flex-flow：flex-direction和flex-wrap的简写，默认row nowrap

  • justify-content属性，定义项目在主轴上的对齐方式：flex-start | flex-end | center space-between | space-around

  • align-items属性，定义在交叉轴上的对齐方式：flex-start | flex-end | center | baseline | stretch;

  • 子项目： flex-grow，定义项目的放大比例，默认值为0，即如果空间有剩余，也不放大

CSS

Debounce and Throttle

防抖（Debounce）和节流（Throttle）都是用来控制某个函数在一定时间内执行多少次的技巧

  • Debounce: 把触发非常频繁的事件合并成一次执行。
  • Throttle: 把触发非常频繁的事件变成每隔一定时间触发一次。
Read More
JavaScript