资讯专栏INFORMATION COLUMN

JS面试理论题

FullStackDeveloper / 1413人阅读

摘要:要去中查找创建对象的几种方法字面量通过构造函数原型构造函数实例原型链的原理运算符一个新对象被创建它继承自构造函数被执行。等同于,只能用在不传递任何参数的情况如果构造函数返回了一个对象,那么这个对象会取代整个出来的结果。

变量类型和计算 值类型&&引用类型

1.值类型

var a = 100
var b = a
a = 200
console.log(b)//100

2.引用类型(对象 数组 函数)

无限制扩展属性

var a = {age:20}
var b = a
b.age = 21
console.log(a.age)//21
typeof运算符
typeof undefined //undefined
typeof "abc"//string
typeof 123//number
typeof true//boolean

//划重点
typeof {}//object
typeof null//object
typeof console.log//function
强制类型转换

逻辑运算符

console.log(""||"abc")//"abc"
console.log(!window.abc)//true

//判断一个变量会被当做true还是false
var a = 100
console.log(!!a)//true
JS中的内置函数

Object
Array
Boolean
Number
String
Function
Date
RegExp
Error

原型和原型链

1.构造函数

//示例
function Foo(name,age){
    this.name = name;
    this.age = age;
    this.class = "class-1"
    //return this
}
var f = new Foo("zwt",21);//可以创建多个对象

2.构造函数--扩展

1.var a = {} 其实是 var a = new Object()的语法糖
2.var a = [] 其实是var a = new Array()的语法糖
3.function Foo(){...}其实是 var Foo = new Function(...)
4.使用instanceof判断一个函数是否是一个变量的构造函数
原型规则和示例
1.所有的引用类型(数组 对象 函数)都具有对象特性,既可自由扩展属性(除nul外)
2.所有的引用类型(数组 对象 函数)都有一个_proto_(隐式原型)属性,属性值是一个普通的对象
3.所有的函数,都有一个prototype(显示原型)属性,属性值也是一个普通的对象
4.所有引用类型(数组 对象 函数),_protp_属性都指向它的构造函数的‘prototype
5.当试图得到一个对象的某个属性时,如果这个对象本身没有这个属性,那么会去找它的_proto_(即它的构造函数的prototype)中寻找。
var obj = {};
    obj.a = 20;
    alert(obj.__proto__ === Object.prototype)//true
f.toString()//要去f._proto_._proto_中查找

创建对象的几种方法:

1.字面量
var o1 = {name:’o1’};
Var o11 = new Object({name:’o11})

2.通过构造函数
Var m = function(){this.name=‘o2’}
Var o2 = new m()

3.Object.create
Var P = {name:’o3’}
Var  o3=Object.create(P)

原型、构造函数、实例、原型链

instanceof的原理:

New运算符
1.一个新对象被创建 它继承自foo.prototype
2.构造函数foo被执行。执行的时候,相应的传参会被传入,同时上下文(this)会被指定为这个新的实例。new foo等同于new foo() ,只能用在不传递任何参数的情况
3.如果构造函数返回了一个‘对象’,那么这个对象会取代整个new出来的结果。如果构造函数没有返回对象,那么new出来的结果为步骤1创建的对象
原型链例子

闭包知识点

执行上下文


This:要在执行的时候才能确认值,定义的时候无法确认


DOM事件 DOM事件级别
Dom0 element.onclick = function(){}
Dom2 element.addEventListener(‘click’,function(){},false)冒泡/捕获
Dom3 element.addEventListener(‘keyup’,function(){},false)

Dom事件模型(冒泡 捕获)

Dom事件流

浏览器为页面做交互的过程 事件流—捕获—>目标阶段(目标元素)—>冒泡
描述dom事件捕获的具体流程(window—>document—>html(document.documentElement)—>body—>…—>目标元素)
Event对象的常见应用:
Event.preventDefault():阻止默认事件(如阻止a标签默认跳转的行为)
Event.stopPropagation():阻止冒泡行为(让子元素与父元素的响应分离)
Event.stopImmendiateProoagation():一个元素上绑定多个事件,按优先级可取消后面响应事件的执行
Event.currentTarget:事件委托 当前被点击的元素 当前被绑定的事件
Event.target:

自定义事件
var eve = new Event(‘custome’)
ev.addEventListener(‘custome’,function(){
    console.log(‘custome’)
});
ev.dispatchEvent(eve);//触发
HTTP协议类 HTTP协议的主要特点

简单快速(每个资源uri,固定;只要输入uri就能找到指定的资源) 灵活(在http协议中,头部分有数据类型,通过一个http协议,就可以完成不同数据类型的协议) 无连接(连接一次就会断开) 无状态(客户端、服务端分开;http建立连接;无法记录状态 不能区分两次连接)

HTTP报文的组成部分

请求报文(请求行[http方法、协议、版本 页面介质] 请求头[key vaule—>告诉服务端需要的内容] 空行[告诉服务端,下一个是请求体 不再是请求头] 请求体) 响应报文(状态行 响应头 空行 响应体)

HTTP方法

Get获取资源 post传输资源 put更新资源 delete删除资源 head获取报文

POST和GET的区别

Get在浏览器回退时是无害的,而post会再次提交请求
Get产生的url地址可以被收藏 而post不可以
Get请求会被浏览器主动缓存 而post不会,除非手动设置
Get请求只能进行rul编码,而post支持多种编码方式
Get请求在url中传送的参数是有长度限制的,而post没有限制
Get请求参数会被完整保留在浏览器历史记录中,而post中的参数不会被保留
对参数的数据类型,get只接受ascll字符,而post没有限制
Get比post更不安全 因为参数直接暴露在url上,所有不能用来传递敏感信息
get参数通过url传递,post放在request body中

HTTP状态码

1xx:指示信息-表示请求已接收,继续处理
2xx:成功-表示请求已经被成功接收
3xx:重定向-要完成请求必须进行更进一步的操作
4xx:客户端错误-请求有语法错误或请求无法实现
5xx:服务器错误-服务器未能实现合法的请求

200 0K:客户端请求成功
206:客户端发送了一个带有range头的get请求,服务器完成了它(比如video播放视频)
301:所有请求的页面已经转移至新的url 永久性重定向
302:所有请求的页面已经临时转移至新的url
304:客户端有缓冲的文档并发出了一个条件性的请求,服务器告诉客户没原来缓冲的文档还可以继续使用

400:客户端请求有语法错误,不能被服务器所理解
401:请求未经授权,这个状态代码必须和www-authenticate报头域一起使用
403:对被请求页面的访问被禁止
404:请求资源不存在
500:服务器发生不可预期的错误 原来缓冲的文档还可以继续使用
503:请求未完成,服务器临时过载或当机,一段时间可能恢复正常

持久连接

http协议采用‘请求-应答’模式,当使用普通模式,即非keep-alive(持久连接)模式时,每个请求、应答客户和服务器都要新建一个连接,完成之后立刻断开连接(http协议为无连接的协议)
当使用keep-alive模式(持久连接 连接重用)时,keep-alive功能使客户端到服务器端的连接持续有效,当出现对服务器的后续请求时,keep-alive功能避免了建立或者重新建立连接

管线化

在使用持久连接的情况下,某个连接上消息的传递类似于:(连接无中断)请求1->响应1->请求2->响应2->请求3->响应3
某个连接上的消息变成了类似这样:(管线化)
请求1->请求2->请求3->响应1->响应2->响应3

管线化机制通过持久连接完成,仅HTTP/1.1支持此技术
只有get和head请求可以进行管线化,而post则有所限制
除此创建连接时不应启动管线机制,因为对方(服务器)不一定支持http/1.1版本的协议
管线化不会影响响应到来的顺序,如上面的例子所示,响应返回的顺序并未改变
http/1.1要求服务器端支持管线化,但并不要求服务器端也对响应进行管线化处理,只是要求对管线化的请求不失败即可
由于上面提到的服务器端的问题,开启管线化很可能并不会带来大幅度的性能提升,而且很多服务器端和代理程序对管线化的支持并不好,因此现代浏览器如chrome和firefox默认并未开启管线化支持

事件

Ie低版本使用attachEvent绑定事件 和w3c标准不一样

获得 body 元素的节点名称:
document.body.nodeName;

通用的绑定事件函数
//selector存放选择器(使用代理时用)
    function bindEvent(elem,type,selector,fn) {
        if(fn == null){
            fn = selector;
            selector = null;
        }
        /*
        * element.matches(String selector);
        * 在SELECTORS API Level 2规范中,为DOM节点添加了一个方法,
        * 主要是用来判断当前DOM节点不否能完全匹配对应的CSS选择器规则;
        * 如果匹配成功,返回true,反之则返回false。
        * */
        elem.addEventListener(type,function (e) {
            var target;
            if(selector){
                target = e.target;
                if(target.matches(selector)){
                    fn.call(target,e)
                }
            }else{
                fn(e)
            }
        })
    }
    //使用代理
    var div1 = document.getElementById("div1");
    bindEvent(div1,"click","a",function (e) {
        console.log(this.innerHTML);
    })

    //不使用代理 [代码简洁 减少浏览器的内存占用]
    var a = document.getElementById("a1");
    bindEvent(div1,"click",function (e) {
        console.log(a.innerHTML);
    })
XMLHttpRequest
//IE兼容性问题:低版本使用ActiveXObject
    /*
    * 0:未初始化 还没调用send()方法
    * 1:载入 已调用send()方法,正在发送请求
    * 2:载入完成 send()方法执行完成,已经接受到全部响应内容
    * 3:交互 正在解析响应内容
    * 4:响应内容解析完成,可以在客户端调用了
    * */

    /*
    * status
    * 2xx:表示成功处理
    * 3xx:需要重定向 浏览器直接跳转
    * 4xx:客户端请求错误 如404
    * 5xx:服务端错误
    * */
  var xhr = new XMLHttpRequest()
    xhr.open("GET","api",false);
    xhr.onreadystatechange = function () {
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                alert(xhr.responseText)
            }
        }
    }
    xhr.send(null)
jsonp
/*跨域
    浏览器有同源策略,不允许ajax访问其他域的接口
    协议、域名、端口、有一个不同就算跨域
    三个可以跨域的标签:  
页面加载
 从输入url到得到html的详细过程:
 加载资源的形式 输入url(或跳转页面)加载html/加载html中的静态资源
 加载一个资源的过程 浏览器根据dns服务器得到域名的ip地址 向这个ip的机器发送htto请求 服务器收到、处理并返回http请求 浏览器得到返回内容
浏览器渲染页面的过程 根据html结构生成dom tree  根据css生成cssom(css代码结构化处理) 将dom和cssom整合形成renderTree 根据renderTree开始渲染和展示 遇到                
阅读需要支付1元查看
<