- 博客(23)
- 收藏
- 关注
RSS订阅原创 从Preact学习hooks原理--useState
什么是PreactPreact可以理解为体积更小的react，实现了react的大部分功能，源码相对于react比较简单。Preact也实现了react中的hooks的内容，所以本文从Preact中探索hooks的实现原理。useState的使用先来看下useState的简单使用,在这里我们借用官网的例子。function Counter() { const [count, setCo...
2020-04-19 16:40:04
360
原创 013-使用Proxy实现数据劫持
let obj = { a: 1, b: 2, c: { d: 3 }}let handler = { get(target, key) { if(typeof target[key] === 'object') { return new Proxy(target[key], handler);...
2019-12-14 20:43:43
310
原创 012-使用defineProperty实现简单的数据劫持
let obj = { a: 1, b: 2, c: { d: 3 }}function defineReactive(target, key, value) { observer(value); Object.defineProperty(target, key, { get() { r...
2019-12-14 20:37:08
180
原创 实现一个Promise
1.极简版Promise在Promise的用法中，我们使用如下方式来使用Promise，那么这个最简单的功能是如何实现的呢，下面我们来探索一下let p = new Promise((resolve, reject) => { resolve('test');});p.then(data=> { console.log(data); // test})...
2019-12-08 17:10:31
157
原创 Promise的用法
1.什么是Promise引用MDN上关于Promise的定义Promise 对象是一个代理对象（代理一个值），被代理的值在Promise对象创建时可能是未知的。它允许你为异步操作的成功和失败分别绑定相应的处理方法（handlers）。 这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象一个 Promise有以下几种状态:...
2019-12-08 11:04:10
153
原创 React虚拟DOM转换为真实DOM
在上一篇博客React虚拟DOM原理中，我们探索了如何创建虚拟DOM，那么创建了虚拟DOM之后，又是怎么转换成真实DOM，渲染在页面中的呢，下面我们继续探索。...
2019-11-30 18:47:23
2094
原创 React虚拟DOM原理
1.什么是虚拟DOM我们在前端面试的时候，经常会被问到什么是虚拟DOM。这个概念，感觉很熟悉，但又说不出它到底是什么。现在我们来探索一下到底什么是虚拟DOM。首先我们看下什么是DOM，对于DOM，我们应该都很熟悉了，下面是MDN对于DOM的定义文档对象模型 (DOM) 将 web 页面与到脚本或编程语言连接起来。通常是指 JavaScript，但将 HTML、SVG 或 XML 文档建模...
2019-11-30 14:25:54
1611
原创 JavaScript数据结构与算法--栈
栈是一种特殊的列表，栈内的元素只能通过列表的一端访问，这一端称为栈顶。栈被称作是一种后入先出（LIFO，Last-In-First-Out）的数据结构。由于詹具有后入先出的特点，任何不在栈顶的元素都无法访问，为了得到栈底的元素，必须先拿到上面的元素。对栈的两种主要操作是将元素压入栈和将元素弹出栈，入栈使用push()方法，弹栈使用pop()方法。栈的代码实现如下：function Stac...
2019-11-24 14:32:43
134
原创 011-js常用数组方法
1.创建数组js中创建数组有两种方式：使用Array构造函数var name = new Array(2); // 创建一个length为2的数组var name = new Array(['James', 'Jack']); // 创建了包含两个字符串的数组使用数组字面量var name = ['James', 'Jack']; // // 创建了包含两个字符...
2019-11-24 13:55:11
207
原创 010-js继承
1.原型链继承构造函数、原型和实例之间的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个原型对象的指针。function SuperType() { this.property = true;}SuperType.prototype.getSuperValue = function() { return this.property...
2019-11-23 19:04:59
147
原创 009-new实现原理
在007-js创建对象的几种方法博客中，我们使用构造函数创建了对象，但是这里有个问题，new到底做了什么呢，导致构造函数模式和工厂模式不一样呢。我们借用《JavaScript高级程序设计》中的定义：要创建Person的新实例，必须使用new操作符，以这种方式调用构造函数实际上会经历以下4个步骤：创建一个新对象将构造函数的作用域赋给新对象（因此this就指向了这个新对象）执行构造函数中的代...
2019-11-16 22:39:23
147
原创 007-js创建对象的几种方式
1.字面量方式创建var person = { name: 'James', age: 20, say: function() { console.log(this.name); }}此种方式缺点：创建很多对象的时候，会产生很多重复代码2.工厂模式为了解决重复代码的问题，使用工厂模式创建对象function createPerson(n...
2019-11-16 21:49:57
133
原创 006-js实现科里化
什么是科里化柯里化通常也称部分求值，其含义是给函数分步传递参数，每次传递参数后部分应用参数，并返回一个更具体的函数接受剩下的参数，这中间可嵌套多层这样的接受部分参数函数，直至返回最后结果。因此柯里化的过程是逐步传参，逐步缩小函数的适用范围，逐步求解的过程。如何实现科里化废话不多数，直接上代码const add = (a, b, c, d, e) => { return a ...
2019-11-16 13:35:11
157
原创 005-apply的用法实现原理
apply的用法apply的用法和call类似，区别在于，apply的第二个参数是一个数组apply实现原理apply的实现原理和call的类似，区别在于第二个参数的处理Function.prototype.myApply = function(context, arr) { var context = context || window; context.fn = th...
2019-11-16 13:04:18
187
原创 004-call的用法和实现原理
在002-判断JS数据类型中我们使用了Object.prototype.toString.call()方法来判断数据类型，那么这个call方法是怎么使用的呢，这篇文章我们来探究这个问题。call的用法MDN定义：使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数语法：fun.call(thisArg, arg1, arg2, ...)应用：使用call实现继承获取数...
2019-11-09 09:53:12
320
原创 003-instanceof原理
实现一个instanceof上篇文章002-判断JS数据类型写到，instanceof可以判断引用类型，那么他是怎么判断的呢，现在我们来实现一个自己的instanceof。function myInstanceof(leftData, rightData) { let rightDataProto = rightData.prototype; // 找到右边值的prototype if(...
2019-11-06 21:10:07
116
原创 002-判断JS数据类型
1、typeoftypeof 返回一个表示数据类型的字符串，返回结果包括：number、boolean、string、object、undefined、function、symbol等7种数据类型。举个栗子：typeof null; // objecttypeof undefined; // undefinedtypeof 1; // numbertypeof '1'; // ...
2019-11-06 20:43:11
119
原创 008-JS原型和原型链（1）
1.第一个概念：构造函数关于创建对象我会在之后的博客中写，这里使用构造函数创建对象。现在有了第一个概念：构造函数。function Person() {}var person = new Person()person.name = 'James'console.log(person.name)2.第二个概念：prototype每个函数都有一个prototype属性，如下所示：...
2019-03-21 15:01:35
201
原创 001-JS基本类型和引用类型
1.什么是基本类型和引用类型?ECMAScript的变量有两种不同数据类型的值：基本类型和引用类型基本类型指的是简单的数据段引用类型是可能由多个值构成的对象2.基本类型和引用类型分别有哪些?基本类型有：Undefined、Null、Boolean、Number、String、Symbol(ES6)引用类型有：Object3.基本类型和引用类型的区别基本类型和引用类型的区别可...
2019-03-20 15:10:16
188
原创 this的指向
常用的this指向可分为以下4种作为普通函数作为对象的方法构造器调用call、apply调用1.作为普通函数当this出现在普通函数中时，此时的this总是指向全局对象，浏览器环境中，就是window对象。示例如下：window.name = "James"function getName() { console.log(this.name)}getName()2.作...
2019-03-19 14:59:59
171
原创 JavaScript数据结构与算法--列表
function List() { this.listSize = 0; // 列表中元素的个数 this.pos = 0; // 列表当前位置 this.dataStore = []; // 初始化一个空数组来保存列表元素 this.clear = clear; // 清空列表中所有元素 this.find = find; // 在列表中查找某个...
2019-02-15 12:59:52
123
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人