![](https://img-blog.csdnimg.cn/2019091813595558.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
JS原生手写实现
面向JS基本特性的部分笔记
Blacktdfj
这个作者很懒,什么都没留下…
展开
-
事件循环与 async/await
本质:promise 与 事件循环原创 2022-11-17 00:47:40 · 332 阅读 · 0 评论 -
JS 原型与原型链
原型是js中非常重要的东西,其串起了很多常用的js实现最开始js没有原型这个概念。为什么会出现原型呢?假如我们有一个对象:const obj = {}然后我们添加一个属性,一个方法obj.name = 'Tony Dog'obj.sayName = function () { console.log(this.name)}然后我们运行一下这个函数obj.sayName() // Tony Dog那假如我有十个类似于obj的对象呢,我想给他们都执行一下sayName方法,就只能单原创 2022-03-17 16:46:04 · 135 阅读 · 0 评论 -
JS Array.prototype.fill 值引用问题
Array.prototype.fill = function (value) { const me = this; for (let i = 0; i < me.length; i++) { me[i] = value } return me}const arr = new Array(3).fill(new Array(3).fill(0))console.log(arr) // [ [ 0, 0, 0 ], [ 0, 0, 0 ], [ 0, 0, 0 ] ]c原创 2022-03-08 15:39:44 · 204 阅读 · 0 评论 -
JS 手写bind
Function.prototype.myBind = function (thisArg, ...args) { if (typeof this !== 'function') { throw new Error ('Not a function!') } const _this = this const fnBound = function (...args1) { const self = this instanceof _this ? this : thisArg _this.a原创 2022-03-06 21:24:46 · 115 阅读 · 0 评论 -
JS 深拷贝
function deepClone (obj) { if (obj === null) return null // 下面这句替换为 (typeof obj !== 'object') 也可 // 使用instanceof的时候注意其与 ! 的优先级,!的优先级更高,稍有不慎则会爆栈 if (!(obj instanceof Object)) return obj if (obj instanceof Date) return new Date(obj) if (obj instanceof原创 2022-03-03 21:27:00 · 71 阅读 · 0 评论 -
JS cookie与web存储(localStorage与sessionStorage)
cookie<script> document.cookie = 'a=1' console.log(document.cookie) // style=null; a=1</script>设置了cookie,请求会携带给服务端。cookie的构成:名字name值value域domain路径path过期时间expires安全标志secure设置了cookie后,只要请求的域和路径正确,就会自动携带cookie框架中也许需要在配置中手动设置withCre原创 2021-12-10 20:24:43 · 707 阅读 · 0 评论 -
JS 实现原生防抖函数时遇到的onclick和行内onclick的区别问题
在html的onclick行内添加一个方法,每次触发点击事件都会执行该方法看似没什么问题,但如果这个方法返回的是一个方法呢,如果我们想让返回出来的方法得到执行,就要在行内的末尾加上一对 ()结果就是每次执行返回出来的内部方法都是新的,闭包?我们想要使用的闭包莫得了。解决方案 2种:在script标签中给dom元素的onclick赋值这个方法的执行,返回出来的内部方法就可以应用闭包使用addEventListener给dom元素添加click事件,赋值依然为外层方法的执行<body>原创 2021-11-27 15:31:41 · 826 阅读 · 2 评论 -
React hooks 防抖 改良版
前阵子在打游戏,突然想起来前端貌似是有什么防抖、节流,就百度了一下,看了一眼没看懂,过了好久才又想起来,遂照着别人的代码码了一下。参考:经典防抖:人类高质量JS防抖与节流机制hooks防抖:React hooks 怎样做防抖?因为我用的react hooks写的项目,看完经典防抖直接就去试了一下,发现不行,感觉是因为react hooks的特性引发的问题,又去找了一篇react hooks有关的知乎,二者结合了一下,成功。核心debounce.js文件:import { useCallbac原创 2021-09-05 14:08:59 · 249 阅读 · 0 评论 -
JS 笔记 继承 原型式 + 寄生式 + 寄生式组合继承
原型式继承: 将父级对象整个赋值给一个空函数的原型,然后new这个函数,将返回值传出去。因此外面的实例可以通过[[proto]]找到构造函数的prototype,沿着原型链找到父级的属性。基本实现:function object(father) { function Fun () {} Fun.prototype = father return new Fun()}let fa = { name: 'father', colors: ['red', 'blue', 'green']}原创 2021-11-25 21:56:28 · 437 阅读 · 0 评论 -
JS 笔记 继承 原型链 + 盗用构造函数 + 组合继承
原型链继承:子类的原型赋值为父类的一个实例,所有子类的实例将共享同一个原型包含的引用值。同时子类型在实例化的时候不能给父类型的构造函数传参。只能继承原型上的属性和方法,没法继承父类的实例属性。盗用构造函数继承:在子类的构造函数中调用父类的构造函数,并将this指向子类的实例,Father.call(this)。所以,可以传参。但是单纯调用父类构造方法无法赋予子类实例父类的方法,唯一的实现方法就是在父类构造函数中定义方法,效果为子类实例无法访问父类原型上的方法,而且函数不能重用(每个子类实例中继承的方法都是原创 2021-11-25 20:30:07 · 123 阅读 · 0 评论 -
JS 手写instanceof
是我疏忽了,居然没发instanceof的。instanceof的概念:判断右边的构造函数是否存在于左边实例的原型链上。简单来说,判断一个实例的类型是否为右边的构造函数。原型链的理解可以看我的另一篇。代码:function instance_of (L, R) { L = L.__proto__ while (true) { if (!L) return false if (L === R.prototype) return true L = L.__proto__ }}fu原创 2021-11-23 21:58:08 · 74 阅读 · 0 评论 -
JS 类型判断 完善版
事情是这样的,typeof可以正确判断除了null之外的原始数据类型(typeof null === object),instanceof可以判断复杂数据类型,但是不能正确判断基本数据类型(为什么?因为instanceof操作不了,操作对象必须是某一个构造函数的实例,我们没法往后面放构造函数)。先看一下typeof能做的事情:console.log(typeof undefined); // undefinedconsole.log(typeof 1); // numberconsole.log(t原创 2021-11-22 22:26:33 · 199 阅读 · 0 评论 -
JS 函数柯里化 console.log(curry(柯)(里)(化) === curry(柯, 里, 化)) // true
参考优质博客:5.函数柯里化函数柯里化:允许在一次函数调用中传入数量不足的参数。调用了,但是不会返回结果,而是等待继续调用时传入剩余参数。看代码:function Sum(a, b, c, d) { return a + b + c + d;}const sum = curry(Sum)sum(1, 2, 3, 4) // 10sum(1)(2)(3)(4) // 10sum(1, 2)(3, 4) // 10curry函数实现:function curry(fn, ...arg原创 2021-11-18 21:54:21 · 613 阅读 · 0 评论 -
JS 事件循环 同步任务 + 异步任务(宏任务 + 微任务)
JS代码中的各个任务分类如下:同步任务:放入主线程直接执行异步任务微任务:放到微任务队列,等待主线程执行完步。宏任务:放到宏任务队列,等待主线程执行完毕,执行并清空微任务队列后,执行。宏任务:1. 整体script代码2. setTimeout、setInterval、setImmediate、I/O、UI rendering、...原创 2021-10-19 19:36:23 · 480 阅读 · 1 评论 -
JS 立即执行函数(IIFE)的作用域问题
IIFE: Immediately Invoked Function Expression立即调用函数表达式格式为两个连续的括号,第一个括号内填写函数声明,第二个括号内填写参数。(function (args) { statement;})(args)需要注意的两点:该函数表达式在定义时就会调用该函数将拥有自己独立的词法作用域,外部无法访问该函数可以外探(我在写什么?),可以访问到外部的变量var a = 0; // 可以被立即执行函数访问(function () { cons原创 2021-10-25 21:19:43 · 523 阅读 · 0 评论 -
JS __proto__ 和 prototype
function Foo (name) { this.name}Foo.prototype.callMyName = function () { console.log(this.name)}const f = new Foo('雪树')f.callMyName() // 雪树原创 2021-11-04 11:10:24 · 144 阅读 · 1 评论 -
JS 手写bind 我写bug的能给你看生代码段子?
今天看完手写bind真的是寄了。call 和 apply说实话还好,这bind到底是什么寄吧。上一段完整代码:在__proto__被不推荐使用的情况下,支持检测new的手写bind代码如下:先别看这部分代码,建议先看最下面的几种实现。Function.prototype.my_bind = function (thisArg) { if (typeof this !== 'function') { throw new TypeError('not a function') }原创 2021-11-12 22:55:02 · 882 阅读 · 0 评论 -
JS 闭包
简单来说,闭包就是我们试图在函数外访问函数内的变量一般来说我们是无法这样访问的,鉴于人们总是想得到自己原本得不到的东西,所以就有了闭包这种途径。作用:闭包通常用来保存一个需要长期保存的变量实现函数拥有私有变量,外界无法任意修改有这样的一项规则:如果被return出来的内部函数有着对外部函数的变量的引用,那么被引用的变量将不会在函数执行完时被销毁,而是保持其状态,除非被手动设为null但我们使用return来体现闭包,并不意味着体现闭包一定要用return体现出一个问题:闭包会造成额外的原创 2021-11-13 18:44:34 · 963 阅读 · 0 评论 -
JS 手写new
最近在看手写new,涉及到原型对象和隐式原型,虽然现在手写new已经不会明显地操作__proto__了,但我们还是要明白。先看现在手写new的代码:function _new(fn) { const obj = Object.create(fn.prototype) const rel = fn.apply(obj, [arguments]) return rel instanceof Object ? rel : obj}...原创 2021-11-03 21:52:15 · 225 阅读 · 0 评论 -
JS 箭头函数的this指向
参考博文:嗨,你真的懂this吗?箭头函数是ES6中的新增特性,他没有自己的this,其this指向从外层代码库继承。使用箭头函数时要注意一下几点:箭头函数不能用作构造函数,用的话会抛出一个错误无法使用arguments参数,如果要用的话就用rest无法使用yield命令,所以箭头函数无法用作Generator函数因为没有自己的this,所以没法通过bind、call、apply来改变this指向箭头函数的this从外层代码库继承字面量对象中直接定义的箭头函数的this不绑定该对象,而是往原创 2021-11-09 20:03:16 · 365 阅读 · 0 评论 -
JS this的指向
参考优质博文:嗨,你真的懂this吗?每次看到this都会痛苦面具。首先我们想一下this的含义,我觉得应该是:本。英文含义本身是:这个。在不手动修改的前提下,基本遵循这个意思。要想知道this指向何方,我们要先了解四种this的绑定:默认绑定隐式绑定显示绑定new绑定以下问题的前提是在浏览器环境下:默认绑定最简单的情况,看一下代码var name = 'snowt'function sayName() { console.log(this.name) cons原创 2021-11-07 22:20:45 · 91 阅读 · 0 评论 -
JavaScript apply()与call()函数
apply和call方法允许一个对象调用不属于自己的方法例:let person = { f: function () { return this.firstname + ' ' + this.lastname }}let man = { firstname: 'John', lastname: 'Smith'}console.log(person.f.apply(man)) // John Smith上面的例子中,函数 f 不属于man,但是却输出了man中的属性,说明 f原创 2021-07-14 00:09:49 · 71 阅读 · 0 评论