关于前端面试的一些基础问题的总结(三)

239 阅读10分钟

关于原型链的问题:

1创建对象的几种方法:

原型链:当前实例调用某个方法时,会先在自身的范围下寻找,如果自己有,那么就用自己的如果没有就通过__proto__去他的构造函数的原型上去查找,如果还没有,再通过原型对象的

__proto__继续响上级原型对象查找,直到到Object上,在这个查找的过程中形成的链式结构就是原型链

关于instanceof:

      它是用来判断一个类的原型对象是否在当前对象的原型链上

      如:a.instanceof(Array):即Array类的原型对象是否在a对象的原型链上

关于new运算符:

之前new出来的结果跟原型建立的关系也会别覆盖,最终的那个对象是无法调用构造函数原型上的方法

new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象的实例。

假设Test是一个构造函数,通常在创建对象的实例时,要使用new,eg:test = new Test(), 那么在调用new的时候,发生了什么呢?

步骤如下:

1.一个继承自Test.prototype的新对象被创建。可以理解为:// 创建一个空对象,继承构造函数的prototype(继承公共方法)let temp = {};temp.__proto__ = Test.prototype

2.使用指定的参数调用构造函数Test,并将this绑定到新创建的对象。new Test等同于new Test(),也就是没有指定参数列表,Test不带任何参数调用的情况。可以理解为:

// 绑定this到新创建的对象,执行构造函数(创建实例的成员变量)

Test.call(temp)

3.由构造函数返回的对象就是new表达式的结果。如果构造函数没有显式返回一个对象,则使用步骤1创建的对象。(一般情况下,构造函数不返回值,但是用户可以选择主动返回对象,来覆盖正常的对象创建步骤)

//默认情况下,返回最初创建的对象,也可以主动返回对象进行覆盖

test = temp

如果主动返回的不是对象,则会被无视,还是使用最初创建的对象

          function Test() {

             return 'test-string'

         }

console.log(new Test()) // Test {} 返回的是空对象,为Test的实例

注意:

       1.箭头函数不能作为构造函数,因为箭头函数没有自己的this,所以不可以使用new

,会报错!

        2.**如果构造函数在调用时,**没有加new操作符,执行过程中this会为window/undefined

,无法正常生成实例。

手动实现一个new

继承的问题?

       let a = Object.create(p)

        a. __proto__ === p值为true

关于面向对象的问题:

类的声明:通过function,或者class定义类

实例化:通过new去运行这个类来创建对象,这个过程就是实例化

关于继承的问题:

1借助构造函数和call实现继承改变this指向

缺点:只是继承了函数内的属性,函数的原型上的属性没有办法实现继承

2借助原型链实现继承一个类的原型指向另外一个类的实例

缺点:原型对象中的属性是共用的,当实例a,b同时获取原型上的一个属性,如果a修改了这个属性,那么b在获取时是拿到的a修改过的

3组合方式实现继承

让一个类的原型指向另一个类的原型,同时在当前类的内部去执行另外的那个类去继承它内部的属性让子类的原型指向父类的原型,目的是不用再执行一次父类创建实例的函数

缺点:因为子类的原型直接被赋予了父类的原型,此时子类的原型被改写,那么子类原型上的

constructor就会指向父类,这时你是没有办法判断当前实例是由那个类new出来的(instanceof,constructor都不能准确的判断)

4通过object.create()方法实现的组合继承这时再给子类的原型对象上的constructor值做修改,就可以解决上述问题

通信类:

1什么是同源策略及限制

源:协议 域名 端口号(默认80)

有一个不同,就跨域了不是同一个源,你就没有权限去操作另一个源的数据

2几种通信方式:

Ajax只适用于同源的通信

WebSocket不受同源策略的限制

Cors:支持同源通信也支持跨域通信

如何创建一个ajax:

红色线处为兼容的问题

3跨域通信:

hash:即#后面的部分,内容变化的时候是不会触发页面的刷新?后面的部分是改变是会触发页面的更新

Cors可以理解为支持跨域通信的ajax,就是当浏览器检测到你使用ajax通信的时候,会在你的请求头加一个origin来允许跨域通信

postMessage是h5新出的特性

1jsonp实现跨域通信实际上是通过script标签的异步加载来实现的,跟后端约定好回调函数的名称,然后通过在全局下执行获取数据

2hash实现跨域先说一下iframe有很多网页看上去是一个网页,但实际上它其中可能镶嵌有其它网页,标签就可以把其它网页无缝地嵌入在一个页面中。主要用于那些多个网页的共有部分,如导航栏、广告栏等。 标签常用属性介绍:              height可以设置框架显示的高度

        width可以设置框架显示的宽度

        name可以定义框架的名称

        frameborder用来定义是否需要显示边框,取值为1表示需要边框

        scrolling用来设置框架是否需要滚动条,取值可以是yes,no,auto

        src用于设置框架的地址,可以是页面地址,也可以是图片地址,即指定一个

url地址

        align用于设置元素对齐方式,取值可以是left,right,top,middle,bottom

跨域:

通过获取b页面,并将b页面的hash值在a页面做出修改,此时在b页面通过监听hash值得变化,就可以将值传递给b页面了(前提是,你得通过iframe标签将b页面嵌入a页面当中,就是指定本页面的url给a页面中的iframe标签的src属性)

3postMessage实现跨域

使用这个方法跨域的时候,实际上你也得把需要接收数据的那个页面通过iframe标签嵌入到当前页面下,这样你才能拿到要接收数据的那个页面的对象

事件对象.postMessage(数据,接收方地址)

发送方页面代码

没显示出来的部分是接收方的地址

接收方代码:

没显示出来的部分也要加上对方的源,这时可以通过e.origin来拿到

4通过websocket实现

先创建实例对象,然后进行一系列的操作

5通过cors实现跨域

通过配置第二个参数内的东西来实现跨域,这里说白了是要后台配合来实现跨域的,单单靠前端是没办法实现

浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。只要同时满足以下两大条件,就属于简单请求。

(1) 请求方法是以下三种方法之一:

                    · HEAD

                    · GET

                    · POST

(2)HTTP的头信息不超出以下几种字段:

                     · Accept

                      · Accept-Language

                      · Content-Language

                      · Last-Event-ID

                      · Content-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

浏览器认为简单请求是安全的,是被用户允许的,所以不用进行预请求通过fetch

就可以直接请求

2.非简单请求

     非简单请求会发出一次预检测请求(为了查看当前请求的路径或者方法是否被允许),返回码是204,预检测通过才会真正发出请求,这才返回200。这里通过前端发请求的时候增加一个额外的headers来触发非简单请求。

但总结下来就是cors的跨域是需要后台来配合的

Cros为什么可以实现跨域:如果浏览器认为当前的这个ajax请求发生了跨域,那么浏览器会拦截当前的这次请求,这时会在http的请求头中加一个origin

安全类:Scrf Xss

      关于csrf

1基本概念:

2攻击原理:

用户登录A网站并且在用户处存储了cookie信息,在访问b网站的时候,b网站返回过来一个引诱点击(里面携带一些不友好的操作),此时通过这个点击链接去访问a网站,因为本地是有a的cookie信息,此时会被携带上,就造成了对a网站的攻击(cookie的存储以及过期时间)

可攻击的两个点:1网站存在可攻击的漏洞 2用户在那个注册网站确实登录过

3应该怎么防御:

Token验证:通过加token验证的方式实现防御,在你访问这个网站的时候服务器会给你返回一个token,那么在每次访问这个网站的时候,都得携带上这个token去验证(cookie,token双重验证)

Referer验证:指的是页面来源,判断当前得请求是不是我这个站点下的页面的请求,如果是执行它记录了该HTTP请求的来源地址。在通常情况下,访问一个安全受限页面的请求必须来自于同一个网站。

隐藏令牌:它的用法跟token类似,只不过它是隐藏在header中,不会放在链接上,这样做比较隐蔽

xss攻击:

去网站查看

跟csrf的区别在于:xss它不需要你做任何的登录认证,核心原理就是向你的页面注入脚本并运行,在脚本中做他想做的事情.

Csrf:利用你本身的漏洞去帮你自动执行那些接口,而且依赖于用户必须得登录网站获取信息

防御手段:就是让你的这个脚本没办法执行

关于算法类:

关于排序:

再加上一个冒泡

----------这一篇的就到这,改天在来--------------------------