Hillyee-blog

HTML面试题 从浏览器地址栏输入url到页面渲染发生了什么？ 推荐文章：从输入URL开始建立前端知识体系 总体来说分为以下几个过程： 1. 输入网址并解析 输入URL后，浏览器会解析出协议、主机、端口、路径等信息，并构造一个HTTP请求。浏览器发送请求前，会先判断是否命中强缓存策略，如果命中，直接从缓存中获取资源，如果没有命中，浏览器会发送请求，判断是否命中协商缓存，如果命中，直接从缓存获取资源。否则，直接从服务器获取资源 DNS域名解析，在发起http请求之前，浏览器首先要去获得我们想访问网页的IP地址，浏览器会发送一个UDP的包给DNS域名解析服务器。 2. TCP/IP连接：三次握手 第一次握手，客户端给服务器发送一个SYN报文，并指明客户端的初始化序列号 ISN。此时客户端处于 SYN_SEND 状态 第二次握手，服务器收到 SYN 报文之后，会以自己的 SYN 报文作为应答，并且指定了自己的初始化序列号 ISN，同时会把客户端的 ISN + 1 作为 ACK 的值，表示自己已经收到了客户端的 SYN，此时服务器处于 SYN_REVD 的状态 第三次握手，客户端收到 S ...

Promise面试题 几道打印的基础题 题1 const promise = new Promise((resolve, reject) => { console.log(1) resolve("success") console.log(2)})promise.then(() => { console.log(3)})console.log(4) 1 2 4 3 题2 const promise1 = new Promise((resolve, reject) => { console.log(1) resolve("success")})const promise2 = promise1.then(() => { console.log(2)})console.log(3, promise1)console.log(4, promise2) 题3 const fn = () => (ne ...

手写Promise Promise规范 https://promisesaplus.com/ PromiseA+规范 A+规范只有then方法 Promise 类设计 class MyPromise {} function MyPromise() {} 两种方式，我选第一种 构造函数constructor设计 实现： 让executor函数执行起来 定义状态常量 定义resolve，reject回调，执行的时候改变状态 const STATUE_PENDING = 'pending'const STATUE_FULFILLED = 'fulfilled'const STATUS_REJECTED = 'rejected'class MyPromise { constructor(executor) { // 保存状态与值 this.status = STATUE_PENDING // 由于后面的then方法可能会用到这些参数值，需 ...

Promise详解 ES6 新增 Promise 介绍 Promise 是异步编程的一种解决方案： 从语法上讲，promise是一个对象，从它可以获取异步操作的消息； 从本意上讲，它是承诺，承诺它过一段时间会给你一个结果。 1.为什么需要有Promise？ promise主要解决的问题： 回调地狱，代码难以维护， 常常第一个的函数的输出是第二个函数的输入这种现象 promise可以支持多个并发的请求，获取并发请求中的数据 这个promise可以解决异步的问题，本身不能说promise是异步的 补充一下，什么是回调函数？ 就是我给你传一个函数，你反过来调用我 一般来说我们会碰到的回调嵌套都不会很多，一般就一到两级，但是某些情况下，回调嵌套很多时，代码就会非常繁琐，会给我们的编程带来很多的麻烦，这种情况俗称——回调地狱。 // 当参数a大于10且参数fn2是一个方法时 执行fn2function fn1(a, fn2) { if (a > 10 && typeof fn2 == 'function') { ...

包含类型判断、作用域、this指向、原型、事件循环等知识点 请问下面的代码输出结果是什么？ 第1题 let a = 1function b(a) { a = 2 console.log(a)}b(a)console.log(a) 答案：2 1 第2题 function a (b = c, c = 1) { console.log(b, c)}a() 报错：Cannot access ‘c’ before initialization 第3题 let a = b = 10;(function(){ let a = b = 20 })()console.log(a)console.log(b) 答案：10、20 第4题 var a = {n:1}var b = aa.x = a = {n:2}console.log(a.x)console.log(b.x) 答案：undefined、{n: 2} 第5题 var arr = [0, 1, 2]arr[10] = ...

TypeScript初识 JavaScript没有类型检测，这会让我们的代码不安全，TS可以很好的解决这个问题 TS简介 Typescript是拥有类型的JavaScript超集 JavaScript所拥有的特性，TS全部都支持，并且在语言层面上添加了类型约束，还加上一些语法的扩展 TS的编译环境 TS最终还是会被编译成JS代码运行，所以我们需要搭建对应的环境 在电脑上安装Typescript，这样就可以通过TypeScript的Compiler将其编译成JavaScript 全局安装：npm install typescript -g 查看版本：tsc --version TS的运行环境 运行的两个步骤： tsc xxx.ts 把ts文件编译成JS代码 在浏览器或Node环境下运行JS代码 如果每次都要做这两个步骤，那就太麻烦了 有什么简化的方式呢？ 第一种：通过webpack，配置本地的TS编译环境和开启一个本地服务，可以直接运行在浏览器上 第二种：通过ts-node库，为TS的运行提供执行环境 安装 ts-node：npm install ts-node -g ...

实现instanceof instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。 Object.getPrototypeOf() 方法返回指定对象的原型（内部[[Prototype]]属性的值） 要懂原型和原型链 function myInstanceof(target, origin) { // 基本数据类型直接返回false if (typeof target !== 'object' || target === null) return false // 拿到 target 的__proto__ let proto = Object.getPrototypeOf(target) // proto不为null就继续 while(proto) { // 找到相同的原型对象 if (proto == origin.prototype) return true // 继续沿着原型链找 proto = Object.getPrototypeOf(proto) ...

Proxy 监听对象的操作 如果我们希望监听一个对象中的属性被设置或获取的过程 在之前，我们可以通过 Object.defineProperty 的存储属性描述符（get set）来监听到 const obj = { name: 'xxx', age: 18}Object.keys(obj).forEach(key => { let value = obj[key] Object.defineProperty(obj, key, { get: function() { console.log(`监听到obj对象的${key}属性被访问了`); return value }, set: function(newValue) { console.log(`监听到obj对象的${key}属性被设置值`); value = newValue } })})ob ...

ES6 字面量的增强 属性（Property Shorthand）、方法（Method Shorthand）的简写，计算属性名（Computed Property Names） var name = 'fks'var age = 20var obj = { // 1. 属性的简写 // name: name name, age, // 2. 方法的简写 // foo: function() {}, foo() { console.log(this); }, // obj.foo() this是obj // 这是不一样的 // foo: () => {} // this是全局 // 3.计算属性名 [name + 123]: 'hahahah'}obj.foo()console.log(obj); // { name: 'fks', age: 20, foo: [Function: foo], f ...

ES6中类的使用 认识class定义类 按照构造函数的形式创建类，不仅仅和编写普通的函数过于相似，而且代码并不容易理解 在ES6(ECMAScript2015)新的标准中使用了class关键字来直接定义类 但是类的本质上只是构造函数，原型链的语法糖 最终还是会被 babel 工具转换为ES5的代码 定义类的方式 可以发现类和构造函数的特性是一致的 // 类的声明class Person {}// 类的表达式(不怎么用)var Student = class {}// 类的特性console.log(Person) // [class Person]console.log(Person.prototype);// {}console.log(Person.prototype.__proto__); // [Object: null prototype] {}console.log(Person.prototype.constructor); // [class Person]console.log(typ ...