- 手写instanceof
instanceof作用:
判断一个实例是否是其父类或者祖先类型的实例。
instanceof 在查找的过程中会遍历左边变量的原型链,直到找到右边变量的 prototype查找失败,返回 false
- 实现数组的map方法
3. reduce实现数组的map方法
4. 手写数组的reduce方法
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终为一个值,是ES5中新增的又一个数组逐项处理方法
5. 数组扁平化
数组扁平化就是把多维数组转化成一维数组
- es6提供的新方法 flat(depth)
其实还有一种更简单的办法,无需知道数组的维度,直接将目标数组变成1维数组。depth的值设置为Infinity。
2. 利用cancat
- 函数柯里化
柯里化的定义:接收一部分参数,返回一个函数接收剩余参数,接收足够参数后,执行原函数。
当柯里化函数接收到足够参数后,就会执行原函数,如何去确定何时达到足够的参数呢?
有两种思路:
通过函数的 length 属性,获取函数的形参个数,形参的个数就是所需的参数个数 在调用柯里化工具函数时,手动指定所需的参数个数
将这两点结合一下,实现一个简单 curry 函数: 我们常用的工具库 lodash 也提供了 curry 方法,并且增加了非常好玩的 placeholder 功能,通过占位符的方式来改变传入参数的顺序。
比如说,我们传入一个占位符,本次调用传递的参数略过占位符, 占位符所在的位置由下次调用的参数来填充,比如这样:
直接看一下官网的例子:
图片
接下来我们来思考,如何实现占位符的功能。
对于 lodash 的 curry 函数来说,curry 函数挂载在 lodash 对象上,所以将 lodash 对象当做默认占位符来使用。
而我们的自己实现的 curry 函数,本身并没有挂载在任何对象上,所以将 curry 函数当做默认占位符
使用占位符,目的是改变参数传递的顺序,所以在 curry 函数实现中,每次需要记录是否使用了占位符,并且记录占位符所代表的参数位置。
直接上代码:
至此,我们已经完整实现了一个 curry 函数~~
- 实现深拷贝
浅拷贝和深拷贝的区别:
浅拷贝:只拷贝一层,更深层的对象级别的只拷贝引用
深拷贝:拷贝多层,每一级别的数据都会拷贝。这样更改拷贝值就不影响另外的对象
ES6浅拷贝方法:Object.assign(target,...sources) //实现深拷贝 递归 可以用于生命游戏那个题对二维数组的拷贝, //但比较麻烦,因为已知元素都是值,直接复制就行,无需判断 8. 手写call, apply, bind
手写call
手写bind
简单版本
new失败的原因:
例:
生成的实例是个空对象
在new操作符执行时,我们的thovinoEat函数可以看作是这样:
在new操作符进行到第三步的操作thovinoEat.call(obj, ...args)时,这里的obj是new操作符自己创建的那个简单空对象{},但它其实并没有替换掉thovinoEat函数内部的那个上下文对象thovino。这已经超出了call的能力范围,因为这个时候要替换的已经不是thovinoEat函数内部的this指向,而应该是thovino对象。
换句话说,我们希望的是new操作符将eat内的this指向操作符自己创建的那个空对象。但是实际上指向了thovino,new操作符的第三步动作并没有成功!
可new可继承版本
- 手动实现new
new的过程文字描述:
创建一个空对象 obj; 将空对象的隐式原型(proto)指向构造函数的prototype。 使用 call 改变 this 的指向 如果无返回值或者返回一个非对象值,则将 obj 返回作为新对象;如果返回值是一个新对象的话那么直接直接返回该对象。
////手动实现new
细节: 10. 手写promise(常见promise.all, promise.race)
11. 手写原生AJAX
步骤
创建 XMLHttpRequest 实例 发出 HTTP 请求 服务器返回 XML 格式的字符串 JS 解析 XML,并更新局部页面 不过随着历史进程的推进,XML 已经被淘汰,取而代之的是 JSON。
了解了属性和方法之后,根据 AJAX 的步骤,手写最简单的 GET 请求。
promise实现
12. 手写节流防抖函数
防抖:
节流:
13. 手写Promise加载图片
14. 函数实现一秒钟输出一个数
15. 创建10个标签,点击的时候弹出来对应的序号?