to-be-a-happy-adult

Proxy详解。 1. Proxy现在有一个问题：我们如何监听对象的操作？ Object.defineProperty() 之前我们会通过Object.defineProperty()来进行监听， Object.defineProperty(obj, "name", { get() { return obj.name }, set(value) { obj.name = value }}) Vue2实现响应式原理的核心就是通过Object.defineProperty()来实现的； 但是Object.defineProperty()设计之初并不是为了监听某个属性； 我们在定义某个属性时，初衷是定义某个普通属性，但是我们后面强行把它变成了数据属性描述符； 而且Object.defineProperty()无法监听到新增属性和删除属性等操作 Proxy new Proxy(target, handler) target: 目标对象 handler:...

let / const 注意事项 重复声明 var 可重复声明 let / const 不可重复声明 var message = 'hello world'var message = 'hello world!' // 不报错let address = 'beijing'let address = 'shanghai' // 报错const age = 18const age = 19 // 报错 作用域提升 console.log(message) // undefinedvar message = 'hello world'console.log(address) // 报错let address = 'beijing'console.log(age) // 报错const age =...

手撕apply/call/bind apply() Function.prototype.myApply = function (context) { // 判断调用对象是否是函数 if (typeof this !== 'function') { throw new TypeError('type error'); } // 判断this要绑定的对象是否为空 context = context || window context.fn = this let result = null, args = [...arguments].slice(1) context.fn(...args) delete context.fn return result}// 测试 call() Function.prototype.myCall = function (context) { // 判断调用对象是否是函数 if (typeof...

认识一下原型和原型链。 1. 认识原型原型是什么？怎样获取？ 1.1 ES5 – 对象的原型每个对象身上都有一个[[prototype]]内置属性，这个特殊的对象可以指向另外一个对象。 当我们通过引用对象的key来获取value时，就会触发[[Get]]操作； 这个操作首先会在对象本身进行寻找，如果有的话就使用它； 没有的话就在对象的[[prototype]]属性指向的对象中寻找，如果还没有的话就继续找对象[[prototype]]属性指向的对象的[[prototype]]属性指向的对象中寻找，直到找到或者找不到为止。 获取对象原型的方法 __proto__属性 obj.proto这种方式存在浏览器的兼容性问题，所以不建议使用； getPrototypeOf() Object.getPrototypeOf(obj)同样的，设置原型可使用setPrototypeOf(对象，对象要指向的原型)方法； const obj = { name:...

了解一下js函数和对象的相关增强知识。 1. javascript函数增强1.1 函数基本概念掌握1.1.1 函数对象的属性现定义一个函数： function foo(a, b){ } 自定义属性 foo.title = "foo title"console.log(foo.title) // foo title 默认属性 name console.log(foo.name) // foo length (指的是函数参数的个数,但不包括有默认值的参数和可变参数)console.log(foo.length) // 2 1.1.2 函数的arguments 三种获取方式 function foo1(a, b, c) { // 获取arguments // 1. arguments是一个伪数组对象，可通过[]字面量继续进行获取 console.log(arguments[0]); // 2.for循环遍历 for (let i = 0; i < arguments.length;...

了解一下Nginx的安装与配置，以及常见的Nginx常用命令 1. 安装与配置 阿里云申请免费云服务器，为Nginx练习使用 连接远程服务器 首先重置root密码 若是使用vscode 可安装 remote ssh插件 （用来连接远程服务器） 连接到远程 下载Nginx cd /usr/local wget https://nginx.org/download/Nginx-1.28.0.tar.gz (若下载不成功可通过命令 su 切换到root用户) - tar -zxvf Nginx-1.28.0.tar.gz - cd ./Nginx-1.28.0 初始配置及编译安装 初始配置 ./configure 编译源码 安装 make && make install 2. Nginx常见命令user admin; # 规定启动Nginx的用户worker_processes 1; # Nginx 启动一个工作进程，适用于轻量部署或开发环境。events { ...

javascript 内存管理 认识内存管理 不管什么样的编程语言，在代码执行过程中都需要进行内存分配，不同的是有些编程语言需要我们自己手动进行内存配置，有些则会自动帮我们进行内存分配。 不管什么样的内存分配机制，内存的分配都会进入如下周期： 申请分配内存 使用分配的内存 不需要使用时释放内存 不同的语言会对第一步和第三步进行不同的处理： 手动管理内存：比如C、C++，包括早期的OC，都是需要手动的进行内存的申请和释放（malloc和free函数）； 自动管理内存：比如java、javascript、Python、Swift、Dart等，这些语言都有帮我们自动进行内存管理。 也就是说，我们所使用的javascript会自动的对原始值、对象、函数等进行内存管理，我们并不需要进行多余的操作。 垃圾回收机制闭包的概念理解闭包的形成过程闭包的内存泄漏

...

从输入路径开始，浏览器是怎样一步步渲染出页面的呢？ 网页的解析过程输入地址 —> DNS解析 —> 服务器响应 —> 浏览器响应一个网页URL从输入到浏览器中，到显示经历怎样的过程呢？ 浏览器内核常见的浏览器内核：我们常说的浏览器内核指的是浏览器的排版引擎，也称之为页面渲染引擎或样板引擎。 浏览器渲染流程详细内容可看我的另一篇博客：浏览器渲染原理 解析html因为默认情况下服务器会给浏览器返回index..html文件，所以解析HTML是所有步骤的开始：解析HTML，会构建DOM Tree: 生成css规则浏览器在解析html时遇到 css 的<link>时会开启另外一个线程对css文件进行下载，这也就不会影响到dom tree的生成；下载完css文件后就会对其进行解析，生成对应的cssom树。 构建render tree当有了DOM Tree和CSSOM Tree两部分之后，就可以结合来生成Render Tree了。 注意❗️ link元素不会阻塞DOM Tree的构建，但是会阻塞Render Tree的构建，因为构建Render...

this 到底指向谁? 箭头函数中的this还能使用吗? 如果能使用又要怎么使用呢? 与普通函数的this指向一致吗? this到底指向谁？首先，定义一个函数： 三种不同的调用方式，this的指向也会不同！ 直接调用 foo() // window{} 通过对象调用 var obj = { name: 'name' }obj.foo = fooobj.foo(); // Object{} (obj这个对象) call/apply/bind foo.apply(“abc”) // String {‘abc’} 结论： 函数在调用时，js会默认给this绑定一个值； this的绑定跟它**定义的位置（编写的位置）**没有关系； this的绑定与调用方式以及调用的位置有关； this是在运行时被绑定的。 this的绑定规则默认绑定 普通函数被独立调用 foo() //...