- 博客(17)
- 收藏
- 关注
RSS订阅原创 【无标题】
前端面试考点1. 继承方式 原型链继承 构造函数继承 组合继承 原型式继承 寄生继承 寄生组合继承 extends继承说出每个继承方式的优缺点原型链继承 造成实例原型共享 构造函数继承 只能继承实例不能继承原型组合继承 每次实例化都会执行构造函数继承 影响性能原型式继承 说服实例指向相同的内存 即：原型式继承object.creat() 是通过prototype继承 存在共享串改的可能寄生继承 增加了自身对象扩展的方法或属性等 但同样存在内存共享 object.create继承原因造
2022-01-11 16:24:59
140
1
原创 JavaScript弱类型的问题
1. 异常需要等到运行时才能发现const obj = {}// obj.foo()setTimeout(() => {obj.foo()}, 1000000)=========================================2. 函数功能可能发生改变function sum (a, b) {return a + b}console.log(sum(100, 100))console.log(sum(100, ‘100’))==================
2021-12-23 22:58:45
633
原创 详解vue原理之观察模式Dep-＞Watcher
根据前几节课，相信大家都明白的vue的基本原理 能够实现vue响应及渲染 这如果还不清楚的 请看上几篇文章这节课 我们讲解vue中数据的响应实现 即vue中的观察模式 如果还不明白观察模式的 也请看我的文章详解js中观察模式和订阅发布模式的区别Dep(Dependency)功能收集依赖，添加观察者(watcher)通知所有观察者结构下面是代码的基本实现 // 要实现数据的响应机制 即数据变化 视图变化 // 在vue的响应机制中 我们要使用观察模式来监听数据的变化
2021-04-25 18:10:32
2579
原创 详解vue原理中的编译compiler
前面我们讲了vue五种类型中的vue及ovserver这节课我们讲第三中类型compilerCompiler下面我们简单讲解下compiler的功能和结构功能1：负责编译模板，解析指令/插值表达式2：负责页面的首次渲染3：当数据变化后重新渲染视图结构简单梳理下compiler的实现思路 在compiler中 我们需要编译模板 因此 需要遍历当前dom对象即el dom对象中的节点 在这里 针对每个不同的节点做判断 在这里 用isTextNode判断文本节点 isElementNode
2021-04-25 16:06:40
1613
原创 vue原理之observer
上节课我们讲了vue五种类型中的vue 实现data响应这节课我们讲第二中类型observerObserver功能负责把 data 选项中的属性转换成响应式数据data 中的某个属性也是对象，把该属性转换成响应式数据数据变化发送通知具体代码实现如下class Observer { constructor(data) { this.walk(data) } // 1. 判断数据是否是对象，如果不是对象返回
2021-04-25 00:08:39
3896
原创 vue原理代码的基本实现
上一篇，我们分析了vue的基本结构 这节课 我们就按照vue的基本结构去实现我们需要的功能 即：vue原理经过上节课的分析 我们可以得知Vue的功能1:负责接收初始化的参数(选项)2:负责把 data 中的属性注入到 Vue 实例，转换成 getter/setter3:负责调用 observer 监听 data 中所有属性的变化4：负责调用 compiler 解析指令/插值表达式vue结构在这里 给大家分析下_proxyData() 即：代理data 其目的是 将data中的数据转换为g
2021-04-24 22:46:11
462
1
原创 详解vue实现原理之vue基本结构和功能
**本章我讲向大家讲解vue实现的基本原理 该原理我会分成很多个小章节 一步一步的为大家讲解 咋们小步快跑1. 在模拟vue原理之前 我们得明白vue的基本结构以及我们需要实现的基本功能 我们打印vue实例 关注我们需要模拟的成员2. 如下代码 是一个基本的vue实例let vm = new Vue({ el: '#app', data: { count: 1, msg: '文案' }});以上代码vue实例化 可以看出vue是一个构造
2021-04-24 21:48:24
1040
1
原创 详解js中观察模式和订阅发布模式的区别
观察者模式和订阅发布模式的区别是没有事件中心 在观察者模式中 发布者需要知道订阅者的存在 不需要像订阅发布模式一样 需要事件中心来隔离订阅者和发布者 详细可参考上偏文章详解js中订阅发布模式的原理即运用场景观察者模式中只有订阅者和发布者观察者观察者（订阅者）--watcher 所有的订阅者中 都有一个update方法 当事件发生的时候 会调用所有订阅者的unpdate方法 在vue的响应机制中 当数据发生变化时 会调用观察者的update方法 update方法会去更新视图发布者 update
2021-04-24 18:23:07
540
原创 详解js中订阅发布模式的原理即运用场景
订阅发布模式由三部分构成1：订阅者2：事件中心3：发布者具体实现流程 发布者发布消息给事件中心 事件中心通知所有的订阅者案例1：家长都想知道自己孩子在学校的成绩 因此老师就创建了一个群来告知家长学习成绩 在这里 家长就是订阅者 群 就相当于是实践中心 而老师就是发布者 老师只需要向群（事件中心）发布消息 所有的家长都能得知消息 这就是订阅发布模式案例2vue中的自定义事件在自定义事件中 new一个vue实例 这个实例 就相当于我们的事件中心 on注册事件在这里就是订阅者而on
2021-04-24 16:54:36
1211
原创 js实例化New原理
要明白new原理 就得明白new的实例化过程及返回值1.新生成对象2.链接到原型3.绑定this4.返回新对象具体代码如下 相当简单方法一： function Mynew(fn, ...args) { let obj = {}; obj.__proto__ = fn.prototype; let result = fn.apply(obj, [...args]); return result instanceof Object ? result : obj;}
2021-04-04 00:38:37
216
原创 高级前端之js数据结构之线二叉树（下）
废话少说，上干货，二叉树数据结构实现增删改查排序等功能 class Node { constructor(key) { this.key = key; this.left = null; this.right = null; } } class BinaryTree { root = null; arr = []; insert(key
2021-03-21 20:11:39
99
原创 高级前端之js数据结构之线性结构（下）
双向链表如果你把上面介绍的单向列表都看明白了，那么这里介绍的双向列表其实差不多，无外乎多了一个指针而已从上面的图可以很清楚的看到双向链表和单向链表的区别。双向链表多了一个指向上一个节点的指针。**初始化节点指向前一个节点的指针指向后一个节点的指针节点数据class ListNode { this.prev = null; this.next = null; this.key = key;}初始化双向链表头指针指向NULLclass List {
2021-03-21 01:03:47
126
原创 高级前端之js数据结构之线性结构
上一节课 我们讲到了基本的堆和队列，不明白的同学可回过头再学习一下，这一节课，我们花时间重点讲一下线性结构在讲数组之前，我们先回顾下开发者常用的数组数组其实是一种线性表的顺序存储结构，它的特点是用一组地址连续的存储单元依次存储数据元素。而它的缺点也正是其特点而造成，比如对数组做删除或者插入的时候，可能需要移动大量的元素。这里大致模拟一下数组的插入操作：function insert(arr, index, data) { for (let i = arr.length; i >index;
2021-03-20 21:05:50
289
原创 高级前端之js数据结构与算法
从本篇开始 我们讲解js中常用的数据结构与算法 咋们小步快跑 每篇一个知识点本篇我们讲数据结构__栈栈是一个先进后出的数据结构具体代码实现如下class Stack {items = [];// 入栈push(ele) {this.items.push(ele);}// 出栈pop() {this.items.pop()}// 末位get peek() {return this.items[this.items.length - 1];}// 是否为空栈get isEm
2021-03-20 14:55:17
484
1
原创 js常用的排序方式
最近复习js基本知识 发现对时间和空间的复杂度有些含蓄不清，通过排序来梳理一下 如下是手写的各种排序方式// 冒泡排序let arrs = [3, 1, 4, 6, 0, 7];function bubbSort(arr) {for (let i = 0; i < arr.length; i++) {for (let j = 0; j < arr.length - i; j++) {if (arr[j] > arr[j + 1]) {[arr[j], arr[j + 1]]
2021-03-20 12:13:35
169
原创 2021 Vue全家桶面试-大厂面试-学会了-高薪等你拿
理解vue的单项数据流所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。这里有两种常见的试图改变一个 prop 的情形：这个 prop 用来传递一个初始值；这个子
2021-02-27 12:38:02
494
原创 2021中高级前端面试题
最近为公司面试了一些中高级的前端开发中，主要简单考察了下原型，异步和this指向，如下是自己亲出的一小套测试题！一：有一个类如下function Person(name) {this.name = name}let p = new Person(‘Tom’);1: p.__proto__等于什么？2: Person.__proto__等于什么?二：请写出下面console的值var foo = {},F = function({};Object.prototype.a = ‘value
2021-02-26 09:51:56
2487
6
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人