过程 首先创建了一个新的空对象 设置原型，将对象的原型设置为函数的 prototype 对象。 让函数的 this 指向这个对象，执行构造函数的代码（为这个新对象添加属性） 判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。 代码实现 function newPolyfill () { //创建新对象 let newObject = null,flag //拿到构造函数 const constructor = Array.prototype.sh...

前言 组合-寄生式继承是javascript对象继承中比较好的方案，它是在一系列继承方案改进的结果 原型链继承 // 父类: 公共属性和方法 function Person() { this.name = "kun" this.friends = [] } Person.prototype.eating = function() { console.log(this.name + " eating") } // 子类: 特有属性和方法 function Student() { this.sno = 111 } //继承Stude...

前期准备 视图层准备了四个盒子，相同宽高，并且给他们各自不同的颜色以区分，并且全部设置为左浮动，这样能观察到v-if显隐的排序问题。 <title...

盒子宽高已知 使用绝对定位将top left 都设为50%，并减去盒子一般宽高，盒子将居中显示。 .box { height: 200px; width: 200px; background-color: black; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; } 盒子宽高未知 使用绝对定位将top ...

什么是BFC？ Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 触发条件 一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可： 根元素（） 浮动元素（元素的 float 不是 none） 绝对定位元素（元素的 position 为 absolute 或 fixed） 行内块元素（元素的 display 为 inline-block） 表格单元格（元素的 display 为 ...

前言 在工作中频繁遇到Vue的生命周期与watch、computed之间联系紧密的逻辑，所以特地起了一个项目专门研究他们之间的关系和执行顺序。 本项目页面分成两个组件，父组件和其包含的子组件，分别定义其各个生命周期钩子函数，函数作用是输出执行时机，以此来判断执行顺序。 接下来直接做验证： 初始化 如果只有单个组件，在Vue初始化时的组件执行顺序如下 beforeCreate > watch(?立即监听) > created > beforeMount > computed > mounted 如果父组件中 页面中关...

function reactive(obj) { Object.keys(obj).forEach((key) => { let value = obj[key]; Object.defineProperty(obj, key, { get() { const depend = getDepend(obj, key); depend.addDepend(); return value; }, set(newVal) { value = newVal...

What is 节流? 为了限制函数一段时间内只能执行一次。 通过使用定时任务，延时方法执行。 在延时的时间内，方法若被触发，则直接退出方法。 从而实现一段时间内只执行一次。 执行过程 当事件触发时，相应的函数不会立即触发，而是会等待一定的时间 当事件密集触发时，函数的触发将会在间隔指定时间后触发一次 <img src="https://docs.hgyn23.cn/static/09d59b2ae785070fbe1b8a8fac6e14de" width="600px" height="auto" alt="09d59b2ae785070fbe1b8a8fac6e...

function reactive(obj) { return new Proxy(obj, { get(target, key, receiver) { const depend = getDepend(target, key); depend.addDepend(); return Reflect.get(target, key, receiver); }, set(target, key, newValue, receiver) { console.log(`对象的${key}值改变为...

ES6的类继承其实是寄生-组合式继承的语法糖，本质上还是对原型的继承。 ES6 类继承代码 class Person { constructor(name,age) { this.name=name; this.age=age; } eating() { console.log(this.name+'eating') } } class student extends Person { constructor(name,age,sno){ super(name,age) this.s...