JavaScript
文章平均质量分 78
yxiuzhu
A man finding job.
展开
-
从同源政策到跨域解决方法
一、同源政策同源政策的目的,是为了保证用户信息的安全,防止恶意的网站窃取数据。所谓同源指的是协议、域名、端口相同,否则就会产生跨域问题。二、跨域跨域问题主要分为三类(1) Cookie、LocalStorage 和 IndexDB 无法读取。(2) DOM 无法获得。(3) AJAX 请求不能发送。三、解决跨域的措施跨域解决方案Cookie、LocalStorage 和 IndexDB 无法读取。1、document.domain + iframe举例来说,A网页是http://w1.原创 2021-08-30 22:13:23 · 503 阅读 · 0 评论 -
JavaScript 之手写它们它们和它们
一、实现一个new操作符new 的原理是什么?通过 new的方式创建对象和通过字面量创建有什么区别?new原理在调用 new 的过程中会发生四件事情创建一个空对象,构造函数中的this指向这个空对象新对象被链接到原型执行构造函数方法,属性和方法被添加到this引用的对象中如果构造函数中没有返回新对象,那么返回this,即创建这个新对象,否则,返回构造函数中返回的对象根据上述描述,实现一个new//实现2function myNew(func, ...args) { const o原创 2021-08-13 10:12:40 · 363 阅读 · 0 评论 -
1、JS的数据类型
原始值类型存储在栈中的简单数据段,即他们的值直接存储在变量访问的位置。包括五种原始类型:undefined、null、boolean、number、string。引用值类型存储在堆中的对象,即存储在变量处的值是一个指针,只想存储对象的内存处。包括:object、array、function等区别原始变量及他们的值储存在栈中,当把一个原始变量传递给另一个原始变量时,是把一个栈房间的东西复制到另一个栈房间,且这两个原始变量互不影响。引用值是把引用变量的名称储存在栈中,但是把其实际对象储原创 2021-03-08 10:24:07 · 161 阅读 · 0 评论 -
2、类型转换
2.类型转换首先我们要知道,在 JS 中类型转换只有三种情况,分别是:转换为布尔值转换为数字转换为字符串转Boolean在条件判断时,除了 undefined,null, false, NaN, ‘’, 0, -0,其他所有值都转为 true,包括所有对象对象转原始类型对象在转换类型的时候,会调用内置的 [[ToPrimitive]] 函数,对于该函数来说,算法逻辑一般来说如下如果已经是原始类型了,那就不需要转换了调用 x.valueOf(),如果转换为基础类型,就返回转换原创 2021-03-09 10:30:29 · 142 阅读 · 0 评论 -
3、判断数据类型typeof、instanceof、constructor和Object.prototype.toString.call()
3.1 typeoftypeof 对于原始类型来说,除了 null 都可以显示正确的类型typeof缺点typeof 对于对象来说,除了函数都会显示 object,所以说 typeof 并不能准确判断变量到底是什么类型如果我们想判断一个对象的正确类型,这时候可以考虑使用 instanceof,因为内部机制是通过原型链来判断的3.2 instanceofinstanceof运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。简单来说就是 instanc原创 2021-03-09 10:40:16 · 803 阅读 · 3 评论 -
4、数组扁平化及去重、数组、字符串和Math的API汇总
MDN介绍修改器方法:会改变调用它们的对象自身的值。访问方法:不会改变调用它们的对象的值,只会返回一个新的数组或者返回一个其它的期望值。迭代方法:遍历数组元素原创 2021-03-07 21:09:14 · 262 阅读 · 0 评论 -
5、如何正确判断this的指向
this的指向this既不指向函数自身也不指向函数的词法作用域。this是在函数被调用时发生的绑定取决于函数在哪里被调用。this绑定有四条规则。• 默认绑定:this的默认绑定,指向全局对象。严格模式的this会绑定到undefinedfunction foo() { console.log(this.a)}var a = 2foo() //2• 隐式绑定:把函数调用中的this绑定到这个对象的上下文对象,this.a和obj.a一样function foo() { cons原创 2021-03-06 14:44:42 · 456 阅读 · 0 评论 -
6、call、apply、bind三者的用法及区别、手写
三者的用法及区别call、apply、bind都是改变this指向的方法1.1 callfn.call当前实例(函数fn)通过原型链的查找机制,找到function.prototype上的call方法,function call(){[native code]}fn.call()把找到的call方法执行当call方法执行的时候,内部处理了一些事情1.首先把要操作的函数中的this关键字变为call方法第一个传递的实参2.把call方法第二个及之后的实参获取到3.把要操作原创 2021-03-08 11:49:04 · 338 阅读 · 1 评论 -
7、new 的原理是什么?通过 new的方式创建对象和通过字面量创建有什么区别?
7.1 new原理在调用 new 的过程中会发生四件事情新生成了一个对象链接到原型绑定 this返回新对象根据上述描述,实现一个newfunction create() { //创建一个空对象 let obj = {} //获取构造函数 let Con = [].shift.call(arguments) //设置空对象的原型 obj.__proto__ = Con.prototype //绑定this并执行构造函数 let result = Con.a原创 2021-03-09 10:57:48 · 469 阅读 · 0 评论 -
9、类数组(arguments)与数组的区别与转换
9.1 定义数组是一个特殊对象,与常规对象的区别:当由新元素添加到列表中时,自动更新length属性设置length属性,可以截断数组从Array.protoype中继承了方法属性为'Array'类数组是一个拥有length属性,并且他属性为非负整数的普通对象,类数组不能直接调用数组方法。常见的类数组arguments对象DOM方法的返回结果,比如document.getElementsByClassName()9.2 区别本质:类数组是简单对象,它的原型关系与数组不同原创 2021-03-13 10:31:34 · 881 阅读 · 0 评论 -
10、闭包
10.1 闭包闭包的定义其实很简单:函数 A 内部有一个函数 B,函数 B 可以访问到函数 A 中的变量,那么函数 B 就是闭包function A() { let a = 1 window.B = function () { console.log(a) }}A()B() // 1闭包存在的意义就是让我们可以间接访问函数内部的变量10.2 典型问题循环中使用闭包解决 var 定义函数的问题// 输出5次6,一次1秒for (var i = 1; i &原创 2021-03-13 11:07:55 · 139 阅读 · 0 评论 -
11、原型链、原型继承和Class继承
11.1 原型原型链就是多个对象通过 __proto__ 的方式连接了起来。为什么 obj 可以访问到 valueOf 函数,就是因为 obj 通过原型链找到了 valueOf 函数Object是所有对象的爸爸,所有对象都可以通过 __proto__找到它Function是所有函数的爸爸,所有函数都可以通过 __proto__找到它函数的 prototype 是一个对象对象的__proto__属性指向原型,__proto__将对象和原型连接起来组成了原型链11.2 原型继承和Class原创 2021-03-13 14:21:35 · 938 阅读 · 0 评论 -
12、var、let 及 const 区别
12.1 var、let 及 const 区别在ES6之前,ES的作用域只有两种:全局作用域和函数作用域。全局作用域中的对象在代码中的任何地方都能访问,其生命周期伴随着页面的生命周期。函数作用域就是在函数内部定义的变量或者函数,并且定义的变量或者函数只能在函数内部被访问。函数执行结束之后,函数内部定义的变量会被销毁。变量提升所带来的问题变量容易在不被察觉的情况下被覆盖掉本应销毁的变量没有被销毁为了解决变量提升而带来的一系列问题,ES6引入了let和const关键字,从而原创 2021-03-13 14:49:15 · 168 阅读 · 0 评论 -
13、函数防抖和函数节流
13.1 函数防抖和函数节流优化高频率执行js代码的一种手段,js中的一些事件如浏览器的resize、scroll,鼠标的mousemove、mouseover,input输入框的keypress等事件在触发时,会不断地调用绑定在事件上的回调函数,极大地浪费资源,降低前端性能。为了优化体验,需要对这类事件进行调用次数的限制。13.2 函数防抖在事件被触发n秒后再执行回调,如果在这n秒内又被触发,则重新计时。function debounce(fn, delay) { var timer;原创 2021-03-15 10:18:00 · 122 阅读 · 0 评论 -
14、Object.create()、new Object()和{}的区别
14.1 三者的区别字面量和new关键字创建的对象是Object的实例,原型指向Object.prototype,继承内置对象ObjectObject.create(arg, pro)创建的对象的原型取决于arg,arg为null,新对象是空对象,没有原型,不继承任何对象;arg为指定对象,新对象的原型指向指定对象,继承指定对象14.2 Object.create()Object.create()方法创建一个新对象,使用现有的对象来提供新创建的对象的__proto__MDN-Object.原创 2021-03-15 11:25:57 · 227 阅读 · 0 评论 -
15、DOM常见的操作方式
DOM(文档对象模型)是针对HTML和XML文档的一个API(应用程序编程接口),描绘了一个层次化的节点树。原创 2021-03-15 11:52:46 · 2104 阅读 · 0 评论 -
16、Array.sort()方法和实现机制
每个浏览器中对排序方法的实现都不太一样Google的Chrome浏览器的JavaScript引擎是:V8——数组长度小于等于 10 的用插入排序InsertionSort,比10大的数组则使用快速排序 QuickSortMozilla的Firefox浏览器的JavaScript引擎是:SpiderMonkey——归并排序源码Safari浏览器的JavaScript引擎是:Nitro(JavaScriptCore )——桶排序和归并排序IE浏览器的JavaScript引擎是:Chakra——使用.原创 2021-03-15 16:18:26 · 707 阅读 · 0 评论 -
17、JavaScript的垃圾回收机制
17.1 什么是垃圾一般来说没有被引用的对象就是垃圾,就是要被清除。有个例外如果几个对象引用形成一个环,互相引用,但根访问不到它们,这几个对象也是垃圾,也要被清除。编写JavaScript程序时,垃圾收集器会按照固定的时间间隔周期性的执行垃圾回收。JavaScript中最常用的垃圾收集方式是标记清除,不太常见的垃圾收集策略是引用计数,无法解决循环引用的问题...原创 2021-03-15 17:39:44 · 352 阅读 · 1 评论 -
19、跨域、同源策略及跨域实现方式和原理
19.1 跨域涉及面试题:什么是跨域?为什么浏览器要使用同源策略?你有几种方式可以解决跨域问题?了解预检请求嘛?同源策略限制以下几种行为:1.) Cookie、LocalStorage 和 IndexDB 无法读取2.) DOM 和 Js对象无法获得3.) AJAX 请求不能发送因为浏览器出于安全考虑,有同源策略/SOP(Same origin policy)。也就是说,如果协议、域名或者端口有一个不同就是跨域,Ajax 请求会失败。那么是出于什么安全考虑才会引入这种机制呢? 其实主原创 2021-03-16 21:00:24 · 541 阅读 · 0 评论 -
20、Ajax的请求过程
20.1 Ajax是什么Ajax 是一种客户端向服务器请求数据的方式。不需要去刷新整个页面,对于改善用户的体验和程序的性能很有帮助。1. 简单封装的一个函数:(1)创建`XMLHttpRequest`对象, 也就是创建一个异步调用对象.(2)创建一个新的`HTTP`请求, 并指定该`HTTP`请求的方法、`URL`及验证信息.(3)设置响应`HTTP`请求状态变化的函数.(4)发送`HTTP`请求.(5)获取异步调用返回的数据.(6)使用JavaScript和DOM实现局部刷新.&l原创 2021-03-17 21:44:52 · 415 阅读 · 0 评论 -
21、前端存储(缓存)
21.1 存储涉及面试题:有几种方式可以实现存储功能,分别有什么优缺点?什么是 Service Worker?cookie,localStorage,sessionStorage,indexDB特性cookielocalStoragesessionStorageindexDB数据生命周期一般由服务器生成,可以设置过期时间除非被清空否则一直存在页面关闭就清理除非被清空否则一直存在数据存储大小4k5M5M无限是否与服务器通信每次都会携带在he原创 2021-03-17 22:04:53 · 165 阅读 · 0 评论 -
23、DOM事件代理:冒泡与捕获
涉及面试题:事件的触发过程是怎么样的?知道什么是事件代理嘛?23.1 事件触发三阶段window往事件触发处传播,遇到注册的捕获事件会触发传播到事件触发处时触发注册的事件从事件触发处往 window 传播,遇到注册的冒泡事件会触发事件触发一般来说会按照上面的顺序进行,但是也有特例,如果给一个 body 中的子节点同时注册冒泡和捕获事件,事件触发会按照注册的顺序执行// 以下会先打印冒泡然后是捕获node.addEventListener( 'click', event =&.原创 2021-03-18 14:52:09 · 97 阅读 · 0 评论 -
24、浏览器渲染原理(重要)
24.1 渲染过程1. 浏览器接收到 HTML 文件并转换为 DOM 树当我们打开一个网页时,浏览器都会去请求对应的 HTML 文件。虽然平时我们写代码时都会分为 JS、CSS、HTML 文件,也就是字符串,但是计算机硬件是不理解这些字符串的,所以在网络中传输的内容其实都是 0 和 1 这些字节数据。当浏览器接收到这些字节数据以后,它会将这些字节数据转换为字符串,也就是我们写的代码。字节数据 ==》 字符串当数据转换为字符串以后,浏览器会先将这些字符串通过词法分析转换为标记(token),这一原创 2021-03-18 15:39:25 · 170 阅读 · 0 评论 -
25、搞懂闭包、作用域、执行期上下文(VO、AO)、作用域链
25.1 作用域作用域即函数或变量的可见区域。通俗点说,作用域是根据名称查找变量的一套规则在ES6之前,ES的作用域只有两种:全局作用域和函数作用域。1. 全局作用域定义在最外层的变量或者函数,可以在任何地方访问到它们。2. 函数作用域用函数形式以function(){……}类似的代码包起来的(省略号……)区域var a = "coffe";//在全局作用域function func(){ var b="coffe";//在函数作用域内 console.log(a);}原创 2021-03-18 20:02:57 · 900 阅读 · 0 评论 -
26、addEventListener()和onClick()的区别
26.1 结论onclick事件在同一时间只能指向唯一对象addEventListener给一个事件注册多个listeneraddEventListener对任何DOM都是有效的,而onclick仅限于HTMLaddEventListener可以控制listener的触发阶段,(捕获/冒泡)。对于多个相同的事件处理器,不会重复触发,不需要手动使用removeEventListener清除IE9使用attachEvent和detachEvent26.3 实例addEventListener原创 2021-03-18 20:47:40 · 835 阅读 · 0 评论 -
27、BOM的属性对象方法
27.1 BOM的属性对象方法BOM(浏览器对象模型)的对象用于访问浏览器的功能,提供了当前窗口中加载的文档有关的信息,和一些导航功能。BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是windowBOM由一些列相关对象构成,并且每个对象提供 很多方法与属性BOM缺乏标准,javascript 语法的标准组织是ECMA,DOM的标准组织是W3CBOM 最初是Netscape 浏览器标准的一部分window对象 :表示浏览器窗口,是JS的顶层对象。location对象:浏览器当原创 2021-03-18 21:44:42 · 756 阅读 · 0 评论 -
28、Event Loop 事件循环
28.1 为什么要有异步任务因为JS是单线程的。所有任务需要排队,前一个任务结束,才会执行后一个任务。如果前一个任务耗时很长,后一个任务就不得不一直等着。由于程序运行时,可能会因为IO设备(输入输出设备)很慢(比如Ajax操作从网络读取数据)而发生程序运行较慢。为提高程序相应速度,于是,所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,原创 2021-04-14 21:35:29 · 171 阅读 · 0 评论 -
29、JavaScript中的arguments
todo参考文献JavaScript arguments 对象全面介绍原创 2021-03-18 21:52:23 · 63 阅读 · 0 评论 -
30、浏览器从输入URL到显示页面的步骤(涉及到计算机网络数据传输过程、浏览器解析渲染过程)
//todo原创 2021-03-18 21:51:15 · 192 阅读 · 0 评论 -
31、JS面向对象的基本特征
面向对象的基本特征(封装、继承、多态)31.1 封装:将数据及其和它相关的行为封装js如何实现函数私有共有1. 基于es6的新特性:Symbol类型实现私有变量,私有属性var Pclass = (function () { const a = Symbol('a'); const m = Symbol('m'); class Pclass { constructor() { this[a] = 'a这是私有变量'; this.b = '变量B-外部可原创 2021-04-16 22:32:24 · 109 阅读 · 0 评论 -
32、了解异步编程的解决方案
ES5的异步编程解决方案ES6之前,异步编程的解决方案主要有4种:回调函数事件监听发布/订阅Promise对象Promise对象是一个保存着某个未来才会结束的事件,通常是异步操作的结果基本用法var promise = new Promise(function(resolve, reject) => { if (/*异步操作成功*/) { resolve(value); } else { reject(error); }}promise.then原创 2021-04-22 15:16:47 · 198 阅读 · 0 评论