- 博客(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
150
1
原创 四 原型和原型链
四 原型和原型链 在js中是使用构造函数来新建对象的，每个构造函数内部都有一个prototype属性，它的属性值是一个对象，包含了该构造函数的所有实例共享的属性和方法。当使用构造函数新建一个对象后，这个对象的原型__proto__指向构造函数的prototype属性对应的值，一般用Object.getPrototypeOf()方法获取对象的原型 当访问一个对象的属性时，如果这个对象内部不存在这个属性，就会去它的原型对象中找这个属性，这个原型对象又会有自己的原型，这样一直找下去，就是原型链。原型链的尽头一
2021-10-15 21:51:01
170
原创 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
129
原创 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
100
原创 三 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
115
原创 三 18 尾调用
es6 javascript 尾调用_现在学习也不晚-CSDN博客_js 尾调用这篇文章写的实在太好了尾调用指的是函数的最后一步调用另一个函数。代码执行是基于执行栈的，所以当在一个函数里调用另一个函数时，会保留当前的执行上下文，然后再新建另外一个执行上下文加入栈中。使用尾调用的话，因为已经是函数的最后一步，所以这时可以不必再保留当前的执行上下文，从而节省了内存，这就是尾调用优化。但是 ES6 的尾调用优化只在严格模式下开启，正常模式是无效的。函数调用会在内存形成一个 “ 调用记录 ” ，又
2021-10-15 11:29:32
40
原创 实现一个AJAX请求
AJAX是Asynchronous JavaScript and XML的缩写，指的是通过Javascript的异步通信，从服务器获取XML文档从中提取数据，再更新当前页面的对应部分，而不用刷新整个网页创建AJAX请求的步骤：创建一个XMLHttpRequest对象在这个对象上使用open方法创建一个HTTP请求,open方法所需要的参数是请求的方法，请求的地址，是否异步和用户的认证信息在发起请求前，可以为这个对象添加一些信息和监听函数。一个 XMLHttpRequest对象一共有5个状态，当它
2021-10-15 11:08:46
267
原创 三 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
242
原创 三 6 对json理解 延迟加载 类数组
json是一种基于文本的轻量级的数据交换格式，在项目开发中，使用json作为前后端数据交换的方式在前端通过将一个符合 JSON 格式的数据结构序列化为 JSON 字符串，然后将它传递到后端，后端通过 JSON 格式的字符串解析后生成对应的数据结构，以此来实现前后端数据的一个传递。JSON 和 js 中的对象不是一回事，JSON 中对象格式更加严格，比如说在 JSON 中属性值不能为函数，不能出现 NaN 这样的属性值等，因此大多数的 js 对象是不符合 JSON 对象的格式的。在 js 中提供.
2021-10-15 08:59:39
119
原创 三 4 js的内置对象
js的内置对象指的是在程序运行之前，在全局作用域里由js定义的一些全局值属性、函数、构造函数对象。一般经常用到的如全局变量值NaN、undefined，函数如parseInt()、parseFloat,以及用来实例化对象的构造函数如Date、Object等等，还有提供数学计算的单体内置对象如 Math 对象。js 中的内置对象主要指的是在程序执行前存在全局作用域里的由 js 定义的一些全局值属性、函数和用来实例化其他对象的构造函数对象。一般经常用到的如全局变量值 NaN、undefined，全局函数如.
2021-10-14 15:00:59
41
原创 三 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
44
原创 二 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
100
原创 二 8 解构
数组的解构const [a, b, c] = [1, 2, 3]a//1b//2c//3const [a,,c]=[1,2,3]a//1c//3对象的解构以属性名称为匹配条件const a={ name:'jennie' age:18}const {age,name}=a;age//18neme//jennie提取高度嵌套对象里的属性可以在解构出来的变量名右侧，通过冒号+{目标属性名}这种形式，进一步解构它，一直解构到拿到目标数据...
2021-10-14 10:58:00
40
原创 第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
50
原创 二、1 let const var
let和const都是ES6新加的区别 var let const 是否存在变量提升 是 否 否 是否有块级作用域 否 是 是 是否添加全局属性 是 否 否 是否存在暂时性死区 否 是 是 能否重复声明 能 否 否 是否必须设置初始值 否 否 是 能否改变指针指向 能 能 否 const：基本数据类型：值不可改引用数.
2021-10-13 20:24:35
62
原创 21 Object.assign和扩展运算符
Object.assign()let outObj={ inObj:{a:1,b:2}}let newObj=Object.assign({},outObj)newObj.inObj.a=2console.log(outObj.inObj.a)//2说明Object.assign()是浅拷贝扩展运算符let outObj={ inObj:{a:1,b:2}}let newObj={...outObj}newObj.inObj.a=2console.log.
2021-10-13 16:47:28
585
原创 18 Javascript如何进行隐式类型转换
JavaScript 中的隐式类型转换主要发生在+、-、*、/以及==、>、<这些运算符之间。而这些运算符只能操作基本类型值，所以在进行这些运算前的第一步就是将两边的值用ToPrimitive转换成基本类型，再进行操作。ToPrimitive方法是js中每个值隐含自带的方法，用来将值（无论是基本类型还是对象）转换为基本类型值。如果值为基本类型，直接返回值本身；如果值为对象，ToPrimitive(obj,type)如果对象是Date对象，type默认为string其他一...
2021-10-13 16:28:03
97
原创 16 Object.is() == ===区别
==：若两边类型不一样，进行强制类型转换后再比较===：若两边类型不一样，直接falseObject.is():和===差不多，处理了一些特殊情况，两个NaN相等了，+0和-0不相等javascript的包装类在 JavaScript 中，基本类型是没有属性和方法的，但是为了便于操作基本类型的值，在调用基本类型的属性或方法时 JavaScript 会在后台隐式地将基本类型的值转换为对象，如const a = "abc";a.length; // 3a.toUpperCase(..
2021-10-13 15:45:49
35
原创 13 其他值转数字、string
其他值转数字Undefined -> NaNNull -> 0Boolean true->1 false-> 0String 调用Number()函数进行转换，若包含非数字值返回NaN,空字符串返回0Symbol 类型的值不能转换为数字，会报错。对象（包括数组）会首先被转换为相应的基本类型值，如果返回的是非数字的基本类型值，则再遵循以上规则将其强制转换为数字。为了将值转换为相应的基本类型值，抽象操作 ToPrimitive 会首先（通过内部操...
2021-10-13 13:38:04
114
原创 11 操作符==的强制类型转换规则
1.判断两者类型是否相同，若相同直接比较大小2.类型不同的话，进行类型转换3.若一个是null，一个是undefined，返回true4.若一个是string，一个是number，把string转换成number1 == '1' ↓1 == 15.若一个是boolean，把boolean转换成0或1'1' == true...
2021-10-13 13:20:04
357
原创 9 typeof NaN
NaN是指 “执行数学运算不成功，这是失败后返回的结果”NaN 指 “not a number”,它是一个警戒值，有特殊用途的常规量typeof NaN //number注意：NaN 和自身不相等NaN !== NaN ---------------trueisNaN:判断传入的值是否为NaN,它接收参数后会尝试将这个参数转换为数值，任何不能被转换为数值的值都会返回true，也就是说它判断的NaN更宽泛Number.isNaN:首先判断是不是数字，再判断是否为Na...
2021-10-13 13:11:11
104
原创 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
36
原创 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
43
原创 53 前后端结合实现图片懒加载-静态资源托管
① 完成图片的静态资源托管② 编写后端的数据接口③ 前端掉后端接口展示数据④页面滚动判断懒加载时机⑤ 最后没有数据的处理靠没有听懂，占坑
2021-10-11 11:48:37
87
原创 51 浏览器缓存策略详解之强缓存
性能：从网站开始生成的那一刻，到代码开始运行，消耗浏览器及服务器资源时所需要的一切资源统称为性能强缓存Cache-Control- public 表示响应可以被客户端和代理服务器缓存- private 表示响应只可以被客户端缓存- max-age=30 缓存30秒后过期，需要重新请求- s-maxage=30 覆盖max-age,作用一样，只在代理服务器中生效- no-store 不缓存任何响应- no-cache 资源被缓存，但是立即失效，下次会发起请求验证资源是否过期
2021-10-11 11:22:55
71
原创 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
38
原创 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
58
原创 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
69
原创 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
176
原创 40 侦听器和计算属性的比较及不同应用场景（面试重点）
特点和区别vue的computed选项主要用于同步对数据的处理，而watch选项主要用于事件的派发，可异步这两者都能达到同样的效果，但是基于它们各自的特点，使用场景会有一些区分computed拥有缓存属性，只有当依赖的数据发生变化时，关联的数据才会变化，适用于计算或者格式化数据的场景watch监听数据，有关联但没有依赖，只要某个数据发生变化。就可以处理一些数据或者派发事件并同步/异步执行计算属性计算属性表现为同步处理数据金融领域的分期付款，P2P年化收益，带有计算性质的，都可以.
2021-10-10 16:18:30
156
原创 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
87
原创 35 瀑布流分析
定位后确定浏览器显示区域内，一行能放多少列图片盒子- 获取页面宽度- 获取图片盒子的宽度- 显示的列数 = 页面宽度 / 图片盒子宽度column = pageWidth / itemWidth------------------------显示美观 一般都会加一个空隙- 显示的列数 = 页面宽度 / （图片盒子宽度 + 间隙）- column = pageWidth / (itemWidth + gap)------------------------------.
2021-10-10 14:30:45
48
原创 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
36
原创 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
98
原创 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
26
原创 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
34
原创 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
34
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人