前端甜糖
前端开发工程师
前端的一个小菜鸡
获得徽章 0
- #每天一个知识点# 说说bind、call、apply 有什么区别？如何实现一个bind?
作用：call 、apply 、bind 作用是改变函数执行时的上下文，简而言之就是改变函数运行时的this指向
apply、call、bind三者的区别在于：
三者都可以改变函数的this对象指向
三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window
三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入
bind 是返回绑定this之后的函数，apply 、call 则是立即执行
实现bind的步骤，我们可以分解成为三部分：
修改this指向
动态传递参数
兼容new关键字
整体实现代码如下：
Function.prototype.myBind = function (context) {
// 判断调用对象是否为函数
if (typeof this !== "function") {
throw new TypeError("Error");
}
// 获取参数
const args = [...arguments].slice(1),
fn = this;
return function Fn() {
// 根据调用方式，传入不同绑定值
return fn.apply(this instanceof Fn ? new fn(...arguments) : context, args.concat(...arguments));
}
}展开赞过 13 - #每天一个知识点# 说说你对git rebase 和 git merge的理解？以及它们的区别？
git rebase 与 git merge都有相同的作用，都是将一个分支的提交合并到另一分支上，但是在原理上却不相同
用法上两者也十分的简单：
git merge
将当前分支合并到指定分支，命令用法如下：
git merge xxx
git rebase
将当前分支移植到指定分支或指定commit之上，用法如下：
git rebase -i <commit>
常见的参数有--continue，用于解决冲突之后，继续执行rebase
git rebase --continue
区别
merge：通过merge合并分支会新增一个merge commit，然后将两个分支的历史联系起来，其实是一种非破坏性的操作，对现有分支不会以任何方式被更改，但是会导致历史记录相对复杂
rebase：rebase 会将整个分支移动到另一个分支上，有效地整合了所有分支上的提交，主要的好处是历史记录更加清晰，是在原有提交的基础上将差异内容反映进去，消除了 git merge所需的不必要的合并提交展开等人赞过 14 - #每天一个知识点# 说说React事件和原生事件的执行顺序?
我们知道，React在内部对事件做了统一的处理，合成事件是一个比较大的概念
那为什么要有合成事件呢？
1、在传统的事件里，不同的浏览器需要兼容不同的写法，在合成事件中React提供统一的事件对象，抹平了浏览器的兼容性差异
2、React通过顶层监听的形式，通过事件委托的方式来统一管理所有的事件，可以在事件上区分事件优先级，优化用户体验
React在合成事件上对于16版本和17版本的合成事件有很大不同，我们也会简单聊聊区别。
概念
事件委托：事件委托的意思就是可以通过给父元素绑定事件委托，通过事件对象的target属性可以获取到当前触发目标阶段的dom元素，来进行统一管理
事件监听：事件监听主要用到了addEventListener这个函数，具体怎么用可以点击进行查看 事件监听和事件绑定的最大区别就是事件监听可以给一个事件监听多个函数操作，而事件绑定只有一次
React 根据 W3C 规范定义了每个事件处理函数的参数，即合成事件。
事件处理程序将传递 SyntheticEvent 的实例，这是一个跨浏览器原生事件包装器。它具有与浏览器原生事件相同的接口，包括 stopPropagation() 和 preventDefault() ，在所有浏览器中他们工作方式都相同。
React 合成的 SyntheticEvent 采用了事件池，这样做可以大大节省内存，而不会频繁的创建和销毁事件对象。
另外，不管在什么浏览器环境下，浏览器会将该事件类型统一创建为合成事件，从而达到了浏览器兼容的目的。
总结
16版本先执行原生事件，当冒泡到document时，统一执行合成事件
17版本在原生事件执行前先执行合成事件捕获阶段，原生事件执行完毕执行冒泡阶段的合成事件,通过根节点来管理所有的事件
原生的阻止事件流会阻断合成事件的执行，合成事件阻止后也会影响到后续的原生执行展开
等人赞过 413 - #每天一个知识点# ”flex: auto;“是什么意思？
flex 是复合属性，是flex-grow,flex-shrink 和 flex-basis的简写，默认值为0 1 auto，后两个属性可选。
flex-grow 属性定义项目的放大比例，默认为0，即如果存在剩余空间也不放大
flex-shrink 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间（相当于我们设置的width）
而 flex: auto; 是 flex:1 1 auto; 的简写，即元素尺寸可以弹性增大，也可以弹性变小，具有十足的弹性，但在尺寸不足时会优先最大化内容尺寸。
再介绍下使用场景：
当希望元素充分利用剩余空间，但是各自的尺寸按照各自内容进行分配的时候，适合使用 flex:auto。
flex:auto 多用于内容固定，或者内容可控的布局场景，例如导航数量不固定，每个导航文字数量也不固定的导航效果就适合使用 flex:auto 效果来实现，展开赞过 评论1
![[力量]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_118.1612154.png)