多数人不知道的js细节

398 阅读8分钟

持续跟新中...

for in 和 Object.keys 的区别

Object.keys 不会走原型链,for in会

new的实现原理

function newFun(Fn, ...args) {
let obj = Object.create(Fn.prototype)
let result = Fn.apply(obj, args)
return result instanceof Object ? result : obj
}

async的实现原理

const spawn = (genFn)=>{
   const gen = genFn()
   return new Promise((resolve,reject)=>{
       const step = (nextF)=>{
          let next
          try{
             next = nextF()
          }catch(e){
             reject(e)
          }
           if(next.done){
             resolve(next.value)
          }
          Promise.resolve(next.value).then(
             (e)=>{ step( ()=>gen.next(e) ) },
             (e)=>{ step( ()=>gen.throw(e) ) }
          )
       }
       step(()=>gen.next(undefined))
    })
}

 

const asycnFn = ()=>{
   return spawn(function*(){
       …
   })
}

get和post的区别

1、参数位置,get请求一般是在url中携带参数,post是在请求的body携带参数,不过这只是一种约定,而不是http的规范,其实get也可以放body,post也可以放url。

2、参数长度,http并未对url长度做限制,但是浏览器和服务器会,浏览器一般会限制url长度在2-8k之间,服务器为了防止恶意攻击(故意发送一个很大的url消耗资源)也会限制url长度。

3、数据包,get请求会把header和data一起发给服务器,响应200。post一般会先发送header给服务器,等服务器响应100continue,之后将data发送给服务器,响应200,但有些浏览器post只发送一次比如火狐。

4、安全性,post请求相对会比get请求安全一些,但是其实http都是明文传输的,对于非小白的人来说,是可以在网络节点上抓包,就能获取完整的数据报文,那post和get就都是不安全的,需要https加密才行。

5、缓存,get一般用于做数据查询,可以不用每次都和数据库连接,有些时候可以直接从缓存获取数据,post一般是做修改和删除操作,每次操作都涉及到数据库交互,所以不能从缓存获取数据。

垃圾回收机制

介绍: js在创建字符串、对象和数组的时候,解析器都要分配内存来存储那个实体,这样动态分配内存,最终都要有一套机制去释放内存,否则系统就会因为内存被过度消耗而崩溃。

策略: 垃圾回收机制主要有两种标记策略:

1、 标记清理:分为标记和清理两个阶段。标记阶段的时候,垃圾回收机制在运行的时候,会先假设内存中所有变量都是垃圾,全都标记上标志0,之后从根节点开始遍历,把所有上下文中的变量和被上下文中的变量中引用到的变量的标记反转为1,剩下标志0的变量都是垃圾变量。清理阶段的时候,做内存清理工作会销毁带标记0的所有值并回收它们的内存。然后等待下一轮回收。

2、 引用计数:当声明一个变量且将一个引用类型的值赋值给它时,这个引用类型的值被标记引用数为1,如果同一个值被另一个变量引用,则引用数加1,如果变量的值被覆盖为别的值,则引用数减1,直到引用数为0,就会被回收。

Array.prototype.slice.call 的作用

1、作用:将具有length属性的对象(key值为数字)转成数组,如下:

var obj = {0:'hello',1:'world',length:2};
console.log(Array.prototype.slice.call(obj,0)); //["hello", "world"]

2、对于没有length的对象,如下:

var obj = {0:'hello',1:'world'};//没有length属性
console.log(Array.prototype.slice.call(obj,0));//[]

3、[]是Array的实例,所以可以直接使用[].slice()方法。

xhr的基本使用

get请求

var xhr = new XMLHttpRequest() // 创建xhr对象
xhr.open('GET','http://www.xxx.com:8080/api?id=1&name=xiaoming')// 建立连接
xhr.send()// 发送请求
xhr.onreadystatechange = function(){ //监听请求状态
    if(xhr.readyState === 4 && xhr.status === 200){
        console.log('请求成功')
    }
}

post请求

var xhr = new XMLHttpRequest() // 创建xhr对象
xhr.open('POST','http://www.xxx.com:8080/api')// 建立连接
xhr.send('id=1&name=xiaoming')// 发送请求
xhr.onreadystatechange = function(){ //监听请求状态
    if(xhr.readyState === 4 && xhr.status === 200){
        console.log('请求成功')
    }
}

Object.create()

const a = Object.create(fn.prototype)

等于

const Fn = function(){}
Fn.prototype = fn.prototype
const a = new Fn()

bind的实现原理

const mybind = function(fn,obj,...args){
    const bound=function(...newArgs){
        const arg= args.concat(newArgs);
        return fn.apply(obj,arg);
    }
    bound.prototype= Object.create(fn.prototype)
    return bound;
}

JS 的全排列

function fullpermutate(str) {
 var result = [];
 if (str.length > 1) {
   for (var m = 0; m < str.length; m++) {
     var left = str[m];
     var rest = str.slice(0, m) + str.slice(m + 1, str.length);
     var preResult = fullpermutate(rest);
     for (var i = 0; i < preResult.length; i++) {
       var tmp = left + preResult[i]
       result.push(tmp);
     }
   }
 } else if (str.length == 1) {
    result.push(str);
 }
 return result;
}

js实现对象和数组的深度克隆

function deepClone(obj){
    var newObj= obj instanceof Array?[]:{};
    for(var i in obj){
        newObj[i]=typeof obj[i]=='object'? deepClone( obj[i] ): obj[i];
    }
    return newObj;
}

创建对象(4种方式)

1、工厂模式

实现:

function fn(a,b){
    let obj = new Object()
    obj.a=a
    obj.b=b
    return obj
}

const test = fn(1,2)

优点:解决了创建多个类似对象的问题

缺点:没解决对象标识问题(即新建对象是什么类型)

2、构造函数模式

实现:

function Fn(a,b){
    this.a=a
    this.b=b
    this.c=function(){
          console.log(this.a)
    }
}

const test1 = new Fn(1,2)
const test2 = new Fn(1,2)
console.log(test1.c === test2.c)// false

优点:new隐式创建对象,写法简洁

缺点:构造函数定义的方法会在每个实例上都要创建一遍(除非该方法声明提到全局)

3、原型模式

实现:

function Fn(a,b){
    Fn.prototype.a=a
    Fn.prototype.b=b
    Fn.prototype.c=function(){
          console.log(a)
    }
}

const test = new Fn(1,2)

优点:构造函数中定义的属性和方法都可以被对象实例共享

缺点:原型上的属性值如果是引用值,该值会在创建后的实例之间被污染,如下

function Fn(){
    Fn.prototype.a=[1,2]
}

const test1 = new Fn()
const test2 = new Fn()
test1.a.push(3)
console.log(test1.a, test2.a)// [1,2,3] [1,2,3] 
const test3 = new Fn()// 原型上属性会重新赋值
console.log(test1.a, test2.a,test3.a)// [1,2] [1,2] [1,2] 

4、Object.create()

实现:

const obj = { a:1 , b:2 }

const test = Object.create(obj)
console.log(test.a)// 1

优点:通过一个对象构造另一个对象

缺点:构造过程是浅克隆,共享的引用值依旧存在被污染问题

继承(6种方式)

1、原型继承

实现:

function Super(){ this.a=1 }
Super.prototype.say = function(){ console.log(‘hhh’) }
function Sub(){}


const test = new Sub()
console.log( test.say() )// hhh

优点:通过原型继承多个引用类型的属性和方法

缺点:Sub原型变成了Super的实例,如果Super的实例某个属性是引用值,该引用值就会被应用到所有Sub创建的实例中去,会有污染问题。如下

function Super(){ this.a=[1,2] }
function Sub(){}
Sub.prototype = new Super()

const test1 = new Sub()
test1.a.push(3)
console.log(test1.a)// [1,2,3]
const test2 = new Sub()
console.log(test2.a)// [1,2,3]

2、盗用构造函数

实现:构造函数模式+call

function Super = function(){ this.a = 1 }
function Sub = function(){
       Super.call(this)
       this.b = 2
}

const test = new Sub()

优点:每个实例都会有自己的a属性,哪怕是引用值也不会被污染

缺点:Super构造函数中的方法在每个实例上都要创建一遍(除非该方法声明提到全局);Sub的实例无法访问Super原型上的方法

3、组合继承

实现:原型继承+盗用构造函数继承

function Super(){ this.a=[1,2] }
Super.prototype.say = function(){ console.log(‘hhh’) }
function Sub(){
    Super.call(this)
    this b=2
}
Sub.prototype = new Super()
 
const test1 = new Sub()
console.log( test1.say() )// hhh
test1.a.push(3)
console.log(test1.a)// [1,2,3]
const test2 = new Sub()
console.log(test2.a)// [1,2]

优点:集合了【原型继承】和【盗用构造函数继承】的优点

缺点:存在效率问题,Super始终会被调用两次

4、原型式继承

实现:

es5之前

const obj = { a:1 }
function createObj(o){
    const Fn(){}
    Fn.prototype = o
    return new Fn()
}

const test = createObj(obj)

es5之后

const obj = { a:1 }

const test = Object.create(obj)

优点:对一个对象进行浅克隆创建另一个对象,同时继承该对象的原型属性

缺点:由于是浅克隆,所以实例共享的对象属性如果是引用值,会受污染。如下

const obj = { a:[1,2], b:2 }
const test1 = Object.create(obj)
const test2 = Object.create(obj)

test1.a.push(3)
test1.b=3
console.log(test1.a, test2.a)// [1,2,3]  [1,2,3]
console.log(test1.b, test2.b)// 3 2

5、寄生式继承

实现:构造函数模式+工厂模式

function createObj(o){
    let clone = Object.create(o)
    clone.say=function(){
        console.log(‘hhh’)
    }
    return clone
}

const obj = { a:1 }
const test = createObj(obj)

优点:根据一个对象浅克隆创建另一个对象,并增强对象

缺点:同【盗用构造函数继承】方法在每个实例上都要创建一遍

注意:Object.create不是必须的,返回任何新对象都可以

6、寄生式组合继承

实现:盗用构造函数继承 + 原型式继承

function Super(){ this.a=[1,2] }
Super.prototype.say = function(){ console.log(‘hhh’) }
function Sub(){
    Super.call(this)
    this b=2
}

Sub.prototype = Object.create(Super.prototype)
Sub.prototype.constructor = Sub

const test = new Sub()

优点:集合了【原型式继承】和【盗用构造函数继承】的优点,效率比【组合继承】更高。

Ajax的了解

所谓异步,在这里简单地解释就是:向服务器发送请求的时候,我们不必等待结果,而是可以同时做其他的事情,等到有了结果它自己会根据设定进行后续操作,与此同时,页面是不会发生整页刷新的,提高了用户体验。Ajax是无需刷新页面就能够从服务器取得数据的一种方法。Ajax技术的核心是XMLHttpRequest对象(XHR对象)

更核心一点:XHR对象是对于线代浏览器的,然而对于IE8一下的浏览器要用ActiveXObject

关于XHR对象的属性,除了常用的ResponseXML、responseText和status、statusText;还有readyState属性,该属性表示请求、响应过程的当前活动阶段。

0:未初始化;尚未调用Open()方法;

1:启动;调用了Open()方法,但尚未调用send()方法;

2:发送;已经调用了send()方法,但还没得到响应

3:接收;已经接收到部分响应数据

4:完成;已经接收到全部响应数据,而且可以在客户端使用。