blog
blog copied to clipboard
yygmind
我是木易杨，公众号「高级前端进阶」作者，跟着我每周重点攻克一个前端面试重难点。接下来让我带你走进高级前端的世界，在进阶的路上，共勉！
## 引言 上篇文章介绍了赋值、浅拷贝和深拷贝，其中介绍了很多赋值和浅拷贝的相关知识以及两者区别，限于篇幅只介绍了一种常用深拷贝方案。 本篇文章会先介绍浅拷贝 `Object.assign` 的实现原理，然后带你手动实现一个浅拷贝，并在文末留下一道面试题，期待你的评论。 ## 浅拷贝 `Object.assign` 上篇文章介绍了其定义和使用，主要是将所有**可枚举属性**的值从一个或多个源对象复制到目标对象，同时返回目标对象。（来自 MDN） 语法如下所示： > `Object.assign(target, ...sources)` 其中 `target` 是目标对象，`sources` 是源对象，可以有多个，返回修改后的目标对象 `target`。 如果目标对象中的属性具有相同的键，则属性将被源对象中的属性覆盖。后来的源对象的属性将类似地覆盖早先的属性。 ### 示例1 我们知道浅拷贝就是拷贝第一层的**基本类型值**，以及第一层的**引用类型地址**。 ```js // 木易杨 // 第一步 let...
本期的主题是**调用堆栈**，本计划一共28期，**每期重点攻克一个面试重难点**，如果你还不了解本进阶计划，文末点击查看全部文章。 如果觉得本系列不错，欢迎点赞、评论、转发，您的支持就是我坚持的最大动力。 --- 执行上下文是当前 JavaScript 代码被解析和执行时所在环境的抽象概念。 #### 执行上下文的类型 执行上下文总共有三种类型 * **全局执行上下文**：只有一个，浏览器中的全局对象就是 window 对象，`this` 指向这个全局对象。 * **函数执行上下文**：存在无数个，只有在函数被调用的时候才会被创建，每次调用函数都会创建一个新的执行上下文。 * **Eval 函数执行上下文**： 指的是运行在 `eval` 函数中的代码，很少用而且不建议使用。 #### 执行栈 执行栈，也叫调用栈，具有 LIFO（后进先出）结构，用于存储在代码执行期间创建的所有执行上下文。 首次运行JS代码时，会创建一个**全局**执行上下文并Push到当前的执行栈中。每当发生函数调用，引擎都会为该函数创建一个**新的函数**执行上下文并Push到当前执行栈的栈顶。 根据执行栈LIFO规则，当栈顶函数运行完成后，其对应的**函数**执行上下文将会从执行栈中Pop出，上下文控制权将移到当前执行栈的**下一个**执行上下文。 ```js var...
### 一、赋值（Copy） 赋值是将某一数值或对象赋给某个变量的过程，分为下面 2 部分 - 基本数据类型：赋值，赋值之后两个变量互不影响 - 引用数据类型：赋**址**，两个变量具有相同的引用，指向同一个对象，相互之间有影响 对基本类型进行赋值操作，两个变量互不影响。 ```js // 木易杨 let a = "muyiy"; let b = a; console.log(b); // muyiy a = "change"; console.log(a); // change...
本期的主题是**作用域闭包**，本计划一共28期，**每期重点攻克一个面试重难点**，如果你还不了解本进阶计划，文末点击查看全部文章。 如果觉得本系列不错，欢迎点赞、评论、转发，您的支持就是我坚持的最大动力。 --- 红宝书(p178)上对于闭包的定义：`闭包是指有权访问另外一个函数作用域中的变量的函数` 关键在于下面两点： * 是一个函数 * 能访问另外一个函数作用域中的变量 对于闭包有下面三个特性： * 1、闭包可以访问当前函数以外的变量 ```js function getOuter(){ var date = '815'; function getDate(str){ console.log(str + date); //访问外部的date } return getDate('今天是：'); //"今天是：815" }...
本期的主题是**this全面解析**，本计划一共28期，**每期重点攻克一个面试重难点**，如果你还不了解本进阶计划，文末点击查看全部文章。 如果觉得本系列不错，欢迎点赞、评论、转发，您的支持就是我坚持的最大动力。 --- 上篇文章详细的分析了各种this的情况，看过之后对this的概念就很清晰了，没看过的去看看。 我们知道this绑定规则一共有5种情况： - 1、默认绑定（严格/非严格模式） - 2、隐式绑定 - 3、显式绑定 - 4、new绑定 - 5、箭头函数绑定 其实大部分情况下可以用一句话来概括，**this总是指向调用该函数的对象**。 但是对于箭头函数并不是这样，是根据外层（函数或者全局）作用域（**词法作用域**）来决定this。 对于箭头函数的this总结如下： 1. 箭头函数不绑定this，箭头函数中的this相当于普通变量。 2. 箭头函数的this寻值行为与普通变量相同，在作用域中逐级寻找。 3. 箭头函数的this无法通过bind，call，apply来**直接**修改（可以间接修改）。 4. 改变作用域中this的指向可以改变箭头函数的this。 5. eg. `function closure(){()=>{//code...
- [引言](#%E5%BC%95%E8%A8%80) - [构造函数](#%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0) - [什么是构造函数](#%E4%BB%80%E4%B9%88%E6%98%AF%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0) - [Symbol 是构造函数吗](#symbol-%E6%98%AF%E6%9E%84%E9%80%A0%E5%87%BD%E6%95%B0%E5%90%97) - [constructor 值只读吗](#constructor-%E5%80%BC%E5%8F%AA%E8%AF%BB%E5%90%97) - [模拟实现 new](#%E6%A8%A1%E6%8B%9F%E5%AE%9E%E7%8E%B0-new) - [原型](#%E5%8E%9F%E5%9E%8B) - [`prototype`](#prototype) - [`__proto__`](#__proto__) - [注意点](#%E6%B3%A8%E6%84%8F%E7%82%B9) - [优化实现 new](#%E4%BC%98%E5%8C%96%E5%AE%9E%E7%8E%B0-new) - [原型链](#%E5%8E%9F%E5%9E%8B%E9%93%BE) - [小结](#%E5%B0%8F%E7%BB%93)...
本期的主题是**调用堆栈**，本计划一共28期，**每期重点攻克一个面试重难点**，如果你还不了解本进阶计划，文末点击查看全部文章。 如果觉得本系列不错，欢迎点赞、评论、转发，您的支持就是我坚持的最大动力。 --- JS是单线程的语言，执行顺序肯定是顺序执行，但是JS 引擎并不是一行一行地分析和执行程序，而是一段一段地分析执行，会先进行编译阶段然后才是执行阶段。 翠花，上代码 例子一：**变量提升** ```js foo; // undefined var foo = function () { console.log('foo1'); } foo(); // foo1，foo赋值 var foo = function () { console.log('foo2'); }...
Vue进阶系列汇总如下，欢迎阅读，欢迎加群讨论（文末）。 [Vue 进阶系列（一）之响应式原理及实现](https://github.com/yygmind/blog/issues/6) [Vue 进阶系列（二）之插件原理及实现](https://github.com/yygmind/blog/issues/9) ### 什么是响应式Reactivity Reactivity表示一个状态改变之后，如何动态改变整个系统，在实际项目应用场景中即数据如何动态改变Dom。 ### 需求 现在有一个需求，有a和b两个变量，要求b一直是a的10倍，怎么做？ #### 简单尝试1： ```js let a = 3; let b = a * 10; console.log(b); // 30 ``` 乍一看好像满足要求，但此时b的值是固定的，不管怎么修改a，b并不会跟着一起改变。也就是说b并没有和a保持数据上的同步。只有在a变化之后重新定义b的值，b才会变化。 ```js...
`this`的绑定规则总共有下面5种。 - 1、默认绑定（严格/非严格模式） - 2、隐式绑定 - 3、显式绑定 - 4、new绑定 - 5、箭头函数绑定 #### 1 调用位置 调用位置就是函数在代码中**被调用的位置**（而不是声明的位置）。 查找方法： - 分析调用栈：调用位置就是当前正在执行的函数的**前一个调用**中 ```js function baz() { // 当前调用栈是：baz // 因此，当前调用位置是全局作用域 console.log( "baz" ); bar();...
## 引言 半年时间，几千人参与，精选大厂前端面试高频 100 题，这就是「[壹题](https://github.com/Advanced-Frontend/Daily-Interview-Question)」。 在 2019 年 1 月 21 日这天，「[壹题](https://github.com/Advanced-Frontend/Daily-Interview-Question)」项目正式开始，在这之后每个工作日都会出一道高频面试题，主要涵盖阿里、腾讯、头条、百度、网易等大公司和常见题型。得益于大家热情参与，现在每道题都有很多答案，提供的解题思路和答案也大大增长了我的见识，到现在已累积 100 道题目，『 8000+ 』Star 了，可以说你面试中遇到过的题目，在这里肯定能发现熟悉的身影。 后期计划除了持续更新「[壹题](https://github.com/Advanced-Frontend/Daily-Interview-Question)」之外，还将整理非常详细的答案解析，提供完整的思考链路，帮助大家更好的理解题目，以及题目背后的知识，「我们的目标不是背题，而是通过题目查漏补缺，温故知新」。 更多更全更详细的每日一题和答案解析，[戳这里查看](https://github.com/Advanced-Frontend/Daily-Interview-Question) ## 第 1 - 10 题 ### 第 1 题：（滴滴、饿了么）写 React...