- 博客(60)
- 收藏
- 关注
RSS订阅原创 三 1 new操作符的实现原理
首先创建一个新的空对象 让对象的原型__proto__=构造函数的prototype属性 让函数的this指向这个对象，执行构造函数中的代码 判断函数返回值的类型。如果是值类型，返回新创建的对象；如果是引用类型，返回这个引用类型的对象 function objectFactory(){ //创建一个空对象 let newObject = null; //拿到那个构造函数 let constructor = Array.prototype.shift.call(arguments) if(typ.
2021-10-16 19:47:48
276
1
原创 四 原型和原型链
四 原型和原型链 在js中是使用构造函数来新建对象的，每个构造函数内部都有一个prototype属性，它的属性值是一个对象，包含了该构造函数的所有实例共享的属性和方法。当使用构造函数新建一个对象后，这个对象的原型__proto__指向构造函数的prototype属性对应的值，一般用Object.getPrototypeOf()方法获取对象的原型 当访问一个对象的属性时，如果这个对象内部不存在这个属性，就会去它的原型对象中找这个属性，这个原型对象又会有自己的原型，这样一直找下去，就是原型链。原型链的尽头一
2021-10-15 21:51:01
284
原创 ajax和axios的区别
$.ajax({ type:'get'//或者'post', url:接口地址, dataType:'json', data:{ 'username':'张三', 'password':'123456' }, success:function(response){ console.log(response)//获取返回的结果 } }) axios({ url:接口地址, type:'po.
2021-10-15 20:04:53
241
原创 AJAX手写函数以及调用
//ajax调用 $.ajax({ type:'get', url:'/getUsers', datatype:'json',//默认 data:{ 'a':1, 'b':2 }, success:function(response){ console.log(response); } }) //ajax函数 function ajax(json){ //浏览器的判断 if(window.XMLHttpRequest) var ajax=new XMLHttpRequest
2021-10-15 19:42:11
179
原创 三 25 for...in和for...of的区别
for…of 是ES6新增的遍历方式，允许遍历一个含有iterator接口的数据结构（数组、对象等）并且返回各项的值，和ES3中的for…in的区别如下: for…of 遍历获取的是对象的键值，for…in 获取的是对象的键名 for… in 会遍历对象的整个原型链，性能非常差不推荐使用，而 for … of 只遍历当前对象不会遍历原型链； 对于数组的遍历，for…in 会返回数组中所有可枚举的属性(包括原型链上可枚举的属性)，for…of 只返回数组的下标对应的属性值； for...in 循.
2021-10-15 17:27:34
185
原创 三 18 尾调用
es6 javascript 尾调用_现在学习也不晚-优快云博客_js 尾调用 这篇文章写的实在太好了 尾调用指的是函数的最后一步调用另一个函数。代码执行是基于执行栈的，所以当在一个函数里调用另一个函数时，会保留当前的执行上下文，然后再新建另外一个执行上下文加入栈中。使用尾调用的话，因为已经是函数的最后一步，所以这时可以不必再保留当前的执行上下文，从而节省了内存，这就是尾调用优化。但是 ES6 的尾调用优化只在严格模式下开启，正常模式是无效的。 函数调用会在内存形成一个 “ 调用记录 ” ，又
2021-10-15 11:29:32
93
原创 实现一个AJAX请求
AJAX是Asynchronous JavaScript and XML的缩写，指的是通过Javascript的异步通信，从服务器获取XML文档从中提取数据，再更新当前页面的对应部分，而不用刷新整个网页 创建AJAX请求的步骤： 创建一个XMLHttpRequest对象 在这个对象上使用open方法创建一个HTTP请求,open方法所需要的参数是请求的方法，请求的地址，是否异步和用户的认证信息 在发起请求前，可以为这个对象添加一些信息和监听函数。一个 XMLHttpRequest对象一共有5个状态，当它
2021-10-15 11:08:46
387
原创 三 11 7 原码 反码 补码
原码 就是一个数的二进制数。 例如：10的原码为0000 1010 -10的原码为1000 1010 反码 正数的反码和原码相同 负数的反码为除符号位，按位取反，即0变1，1变0 -10的原码：10001010 -10的反码：11110101 补码 正数的补码和原码相同 负数的补码是反码+1 -10的原码：1000 1010 -10的反码：1111 0101 -10的补码：1111 0110 取反运算符 当发现按位取反为负数时，就直接取其补码 如~6： 0000 ..
2021-10-15 09:19:57
360
原创 三 6 对json理解 延迟加载 类数组
json是一种基于文本的轻量级的数据交换格式，在项目开发中，使用json作为前后端数据交换的方式 在前端通过将一个符合 JSON 格式的数据结构序列化为 JSON 字符串，然后将它传递到后端，后端通过 JSON 格式的字符串解析后生成对应的数据结构，以此来实现前后端数据的一个传递。 JSON 和 js 中的对象不是一回事，JSON 中对象格式更加严格，比如说在 JSON 中属性值不能为函数，不能出现 NaN 这样的属性值等，因此大多数的 js 对象是不符合 JSON 对象的格式的。 在 js 中提供.
2021-10-15 08:59:39
221
原创 三 4 js的内置对象
js的内置对象指的是在程序运行之前，在全局作用域里由js定义的一些全局值属性、函数、构造函数对象。一般经常用到的如全局变量值NaN、undefined，函数如parseInt()、parseFloat,以及用来实例化对象的构造函数如Date、Object等等，还有提供数学计算的单体内置对象如 Math 对象。 js 中的内置对象主要指的是在程序执行前存在全局作用域里的由 js 定义的一些全局值属性、函数和用来实例化其他对象的构造函数对象。一般经常用到的如全局变量值 NaN、undefined，全局函数如.
2021-10-14 15:00:59
112
原创 三 2 map object weakMap
Map Object 意外的键 Map默认情况下不包含任何键，只包含显式插入的键 Object有一个原型，原型链上的键名有可能和自己在对象上设置的键名冲突 键的类型 Map的键可以是任意值 Object的键必须是String或Symbol 键的顺序 Map中的key是有序的，迭代的时候，Map对象以插入的顺序返回key Object的键无序 迭代 Map 是 iterable 的，所以可以直接被迭代 迭代Object需要以某种方式...
2021-10-14 12:55:30
93
原创 二 11 ES6新特性 模板语法
var name = 'css' var career = 'coder' var hobby = ['coding', 'writing'] var finalString = `my name is ${name}, I work as a ${career} I love ${hobby[0]} and ${hobby[1]}` 可以用${}直接嵌入变量，还有两个特别好的优势： ①在模板字符串中，空格、缩进、换行都会被保留 ②可以在${}里完成一些运算 存在性判断 inc..
2021-10-14 11:07:42
182
原创 二 8 解构
数组的解构 const [a, b, c] = [1, 2, 3] a//1 b//2 c//3 const [a,,c]=[1,2,3] a//1 c//3 对象的解构 以属性名称为匹配条件 const a={ name:'jennie' age:18 } const {age,name}=a; age//18 neme//jennie 提取高度嵌套对象里的属性 可以在解构出来的变量名右侧，通过冒号+{目标属性名}这种形式，进一步解构它，一直解构到拿到目标数据...
2021-10-14 10:58:00
98
原创 第2章 6 扩展运算符
1 对象扩展运算符 对象扩展运算符用于取出参数对象中的所有可遍历属性，拷贝到当前对象中 let bar={a:1,b:2} let baz={...bar}//{a:1,b:2} 如果用户自定义的属性，放在扩展运算符的后面，则扩展运算符内部的同名属性会被覆盖掉 let bar={a:1,b:2} let baz={...bar,...{a:3,b:4}}//{a:3,b:4} let bay={...bar,a:3,b:4}//{a:3,b:4} 利用上述特性就可以很方便的修改对象..
2021-10-13 23:20:35
131
原创 二、1 let const var
let和const都是ES6新加的 区别 var let const 是否存在变量提升 是 否 否 是否有块级作用域 否 是 是 是否添加全局属性 是 否 否 是否存在暂时性死区 否 是 是 能否重复声明 能 否 否 是否必须设置初始值 否 否 是 能否改变指针指向 能 能 否 const： 基本数据类型：值不可改 引用数.
2021-10-13 20:24:35
128
原创 21 Object.assign和扩展运算符
Object.assign() let outObj={ inObj:{a:1,b:2} } let newObj=Object.assign({},outObj) newObj.inObj.a=2 console.log(outObj.inObj.a)//2 说明Object.assign()是浅拷贝 扩展运算符 let outObj={ inObj:{a:1,b:2} } let newObj={...outObj} newObj.inObj.a=2 console.log.
2021-10-13 16:47:28
711
原创 18 Javascript如何进行隐式类型转换
JavaScript 中的隐式类型转换主要发生在+、-、*、/以及==、>、<这些运算符之间。而这些运算符只能操作基本类型值，所以在进行这些运算前的第一步就是将两边的值用ToPrimitive转换成基本类型，再进行操作。 ToPrimitive方法是js中每个值隐含自带的方法，用来将值（无论是基本类型还是对象）转换为基本类型值。如果值为基本类型，直接返回值本身；如果值为对象， ToPrimitive(obj,type) 如果对象是Date对象，type默认为string 其他一...
2021-10-13 16:28:03
172
原创 16 Object.is() == ===区别
==：若两边类型不一样，进行强制类型转换后再比较 ===：若两边类型不一样，直接false Object.is():和===差不多，处理了一些特殊情况，两个NaN相等了，+0和-0不相等 javascript的包装类 在 JavaScript 中，基本类型是没有属性和方法的，但是为了便于操作基本类型的值，在调用基本类型的属性或方法时 JavaScript 会在后台隐式地将基本类型的值转换为对象，如 const a = "abc"; a.length; // 3 a.toUpperCase(..
2021-10-13 15:45:49
85
原创 13 其他值转数字、string
其他值转数字 Undefined -> NaN Null -> 0 Boolean true->1 false-> 0 String 调用Number()函数进行转换，若包含非数字值返回NaN,空字符串返回0 Symbol 类型的值不能转换为数字，会报错。 对象（包括数组）会首先被转换为相应的基本类型值，如果返回的是非数字的基本类型值，则再遵循以上规则将其强制转换为数字。 为了将值转换为相应的基本类型值，抽象操作 ToPrimitive 会首先（通过内部操...
2021-10-13 13:38:04
189
原创 11 操作符==的强制类型转换规则
1.判断两者类型是否相同，若相同直接比较大小 2.类型不同的话，进行类型转换 3.若一个是null，一个是undefined，返回true 4.若一个是string，一个是number，把string转换成number 1 == '1' ↓ 1 == 1 5.若一个是boolean，把boolean转换成0或1 '1' == true ...
2021-10-13 13:20:04
483
原创 9 typeof NaN
NaN是指 “执行数学运算不成功，这是失败后返回的结果” NaN 指 “not a number”,它是一个警戒值，有特殊用途的常规量 typeof NaN //number 注意：NaN 和自身不相等 NaN !== NaN ---------------true isNaN:判断传入的值是否为NaN,它接收参数后会尝试将这个参数转换为数值，任何不能被转换为数值的值都会返回true，也就是说它判断的NaN更宽泛 Number.isNaN:首先判断是不是数字，再判断是否为Na...
2021-10-13 13:11:11
193
原创 7 0.1+0.2 ！= 0.3
0.1的二进制表示为0.000110011001100... 1100循环 0.2的二进制表示为0.00110011001100... 1100循环 js存储二进制小数一共有64位，第一位表示正负，0为正，1为负 接下来11为表示指数 最后52位表示小数 所以0.1和0.2最多保留有效数字为52+1=53位 加起来的0.3转换成十进制就是0.30000000000000004 解决的方法： 设置一个误差范围，成为“机器精度” ，在ES...
2021-10-13 13:01:04
83
原创 6 instanceof 操作符的实现原理
instanceof 操作符用来判断该对象的原型链中是否含有构造函数的prototype属性，或者说该对象的原型链中是否含有该类型的原型 function myInstanceof(left,right){ //获取对象的原型 let proto=Object.getPrototypeOf(left) //获取类型的原型，即构造函数的prototype属性 let prototype=right.prototype while(true){ if(
2021-10-13 12:42:42
95
原创 53 前后端结合实现图片懒加载-静态资源托管
① 完成图片的静态资源托管 ② 编写后端的数据接口 ③ 前端掉后端接口展示数据 ④页面滚动判断懒加载时机 ⑤ 最后没有数据的处理 靠没有听懂，占坑
2021-10-11 11:48:37
139
原创 51 浏览器缓存策略详解之强缓存
性能：从网站开始生成的那一刻，到代码开始运行，消耗浏览器及服务器资源时所需要的一切资源统称为性能 强缓存 Cache-Control - public 表示响应可以被客户端和代理服务器缓存 - private 表示响应只可以被客户端缓存 - max-age=30 缓存30秒后过期，需要重新请求 - s-maxage=30 覆盖max-age,作用一样，只在代理服务器中生效 - no-store 不缓存任何响应 - no-cache 资源被缓存，但是立即失效，下次会发起请求验证资源是否过期
2021-10-11 11:22:55
150
原创 48 断点源码分析 vue面试题
写完了一个directive指令进入vue源码查看 ASSET_TYPES.forEach(function (type)){ Vue[type]=function( id,//id="loading" definition //definition={update:f} ){ if(!definition){//因为我们有definition,所以不进入这个 return this.options[typ..
2021-10-11 10:53:36
78
原创 47 vue-directive进阶用法 vue面试题
vue-directive进阶实现loading <body> <div id="root"> <div v-loading="isloading">{{data}}</div> <button @click="update">更新</button> </div> <script> Vue.directive("loading",{ .
2021-10-11 09:21:09
98
原创 46 vue-directive基本用法 vue面试题
<script src="https://cdn.jsdeliver.net/npm/vue/dist/vue.js"></script> <body> <div id="root"> <input type="text" v-focus> </div> <script> //自定义指令v-focus Vue.directive('focus',{ .
2021-10-10 22:08:08
116
原创 42 手写vueplugins实现loading效果（vue面试题）
引入vue extend <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <body> <div id="root"> <Test :msg="message" /> </div> <script> //通过vue extend来注册一个组件,它是返回一个构造函数VueC.
2021-10-10 18:09:05
250
原创 40 侦听器和计算属性的比较及不同应用场景（面试重点）
特点和区别 vue的computed选项主要用于同步对数据的处理，而watch选项主要用于事件的派发，可异步 这两者都能达到同样的效果，但是基于它们各自的特点，使用场景会有一些区分 computed拥有缓存属性，只有当依赖的数据发生变化时，关联的数据才会变化，适用于计算或者格式化数据的场景 watch监听数据，有关联但没有依赖，只要某个数据发生变化。就可以处理一些数据或者派发事件并同步/异步执行 计算属性 计算属性表现为同步处理数据 金融领域的分期付款，P2P年化收益，带有计算性质的，都可以.
2021-10-10 16:18:30
235
原创 39 vue面试题 计算属性的应用
<body> <div id="app"> <p>{{message}}</p> <p>reverse {{reverseMessage}}</p> </div> <script> var vm=new Vue({ el:"#app", data:{ messa.
2021-10-10 15:29:46
170
原创 35 瀑布流分析
定位后确定浏览器显示区域内，一行能放多少列图片盒子 - 获取页面宽度 - 获取图片盒子的宽度 - 显示的列数 = 页面宽度 / 图片盒子宽度 column = pageWidth / itemWidth ------------------------ 显示美观 一般都会加一个空隙 - 显示的列数 = 页面宽度 / （图片盒子宽度 + 间隙） - column = pageWidth / (itemWidth + gap) ------------------------------ .
2021-10-10 14:30:45
119
原创 34 Array.some和Array.every
需求： 检测是否所有的水果都是红色 const fruits=[ {name:'apple',color:'red'}, {name:'banana',color:'yellow'} ] function test(){ const isAllRed=fruits.every(f => f.color=='red') console.log(isAllRed) } test()//false //检测是否有红色的水果 function test(){ ..
2021-10-10 13:07:27
75
原创 33 map的使用
var obj={ name:'zs' } var obj2={ name:'ls' } var obj3={ [obj1]:'11', [obj2]:'22' } console.log(obj3)//{[object Object]:'22'} 只输出第二项是因为：对象的key默认为字符串，当传入的不是字符串时，会隐式调用toString方法转换成字符串，因此[obj1]和[obj2]都被转换成了‘[object Object]’,后面覆盖前面 所以对于对象来..
2021-10-10 12:59:41
146
原创 32 对象的字面量替代switch方法
需求：基于颜色打印水果 function printFruits(color){ switch(color){ case 'red':return ['apple'] case 'yellow':return ['banana'] default:return [] } } console.log(printFruits(null))//[] console.log(printFruits('yellow'))//[banana] .
2021-10-10 12:27:03
71
原创 30 数组的方法
includes方法数组.includes(元素) function printAnimals(animal){ const animals=['dog','cat','fish'] if(animals.includes(animal)) console.log('this is a ${animal}') } printAnimals('dog')//this is a dog 提前退出/提前返回（非常实用） 需求： 如果没有动物，抛出...
2021-10-10 12:19:04
81
原创 29 寄生组合式继承
把原型链继承和构造函数继承结合起来 function Parent(name){ this.name=name } Parent.prototype.getName=function(){ return this.name } function Child(){ Parent.call(this) } Child.prototype=new Parent()
2021-10-10 07:56:28
77
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人