javaScript-详细解答-面向对象-及-面试相关问题

什么是面向对象？

一、 首先面向对象有三大特点：

什么是封装？

1. 封装：减少代码冗余，提高代码重复利用率

什么是继承？

2. 继承：减少内存消耗  重复使用的代码写一遍就行了(子类继承父类)

什么是多态？

3. 多态：多态主要针对继承，对父类方法重写，并且子类之间的这个方法表现不一样，这就叫多态，或者 父类定义一个方法没去实现，由子类去实现，并且表现不一样，这就叫多态。

4. 目的：生成一些具有功能的对象  一个叫属性一个叫方法

二、 重载和重写：

在js里面没有函数重载的，但是有函数重写

1. 函数重写：在js中，因为一旦变量名相同，后者会把前者覆盖掉

2. 函数重载：函数名相同，跟据参数类型来决定使用那个函数。

3. 重载：主要针对的函数的数据类型

对象

那么什么是对象？

对象：任何实体都是对象，拥有属性和方法两大特征。

什么是属性什么是方法呢？

属性：描述事物的特点。

方法：事物拥有的行为。

如何理解面向对象：

面向对象就是通过函数封装得到一个类，通过这个类实例出一个子对象，在函数封装的过程中，写在函数里面的属性是私有的 写在prototype里面的是可继承的公有属性，实例（对象）在操作自己自己属性的时候会看属性是私有的还是公有的，私有的就直接使用，公有的就通过原型链（__proto__）查找。

什么是原型链：

       Duixiang.shuxing的时候首先看这个属性是不是私有的 私有的就直接使用，如果私有的属性没有 就找公有的 公有的有就使用 没有就按照__proto__找他，的类上有没有 直到找到基类object 如果object没有就undefined了 这种查找机制叫原型链。

三、继承

继承分es5的七大继承和es6的继承

1. 在es5有七大继承

1. 拷贝

拷贝分为浅拷贝和深拷贝

浅拷贝：其实就是将一个对象的属性一个一个的复制到另一个对象中去主要针对第一层的属性。借助for  in

深拷贝：将属性值也一个一个的遍历赋值

2. 原型继承：

将父类的实例赋给子类的原型，这就是原型继承，将父类私有和公有都继承在子类原型上，成为子类的公有属性

B.prototype=new A()

3. call 继承：

将父类私有的继承为子类私有的

4. 冒充对象继承：

将父类私有和公有都继承为子类私有的

5. 混合继承：

私有继承为私有的，公有的和私有的再次继承为公有的，混合继承啊call和原型继承的结合，私有的被继承两次

6. 组合继承：

私有继承私有，公有继承为公有的

7. 中间类继承 --> 

使其他数据类型也可以使用其他内置对象的方法赋值为内置类的原型 主要运用于参数

Arguments不是一个数组，没有array的哪些自带的方法，现在我们想arguments有array的哪些方法，将arguments的原型指向array内置类的原型。

Es6的继承

Extends  继承

1. 子类继承父类 使用extends 关键字

2. 代码块里 需要使用 super 关键字

3. 子类继承父类

4. Super 既可以充当函数 也可以充当对象

1. 充当函数时，只能在子类的构造函数中使用，且必须放在第一行调用，指向父类的构造函数，只有super 调用之后，子类才可以使用 this关键字，指向子类的实例对象

2. 充当对象时，放在普通函数中，super 指向父类的原型prototype

3. 放在静态方法中 super 执行当前父类本身

四、数据类型

数据类型有两大数据类型：

基本数据类型和引用数据类型(复合数据类型)

基本数据类型分：number，string，null，undefined，boolean

引用数据类型：object，function，array

二者的区别：

基本数据类型就是简单的操作值

引用数据类型会开辟一个新的内存空间把内存空间的地址赋值给变量

不管是基本数据类型或引用数据类型都来源与基类object

二者的值分别保存在那？

基本数据类型的值保存在栈内存中的简单数据段，按值访问。

引用数据类型的值是指保存在堆内存中的对象

数据类型能干什么？

不同的数据类型有不同的意义和不同的使用方法，就像吃饭的时候用的勺子，碗，筷子等工具一样，每一样都有不同的用处，不同的地方使用不同的工具才能很好完成任务。

五、作用域

1. 首先什么是作用域？

是浏览器给js的生存环境也叫(栈内存)

2. 什么时候会有作用域的形成？

浏览器天生有一个全局叫window

函数执行时候会形成一个私有的

3. 作用域的分类？

Es5有两个

1. 分全局作用域

2. 私有作用域

Es6有

3. 没有块作用域(ES6有了)

4. 自己对作用域的简单理解？

*就是一块地盘 一个代码块所在的区域

*它是静态的(相对于上下文对象)，在编写代码时就确定了，js代码是从上到下执行

5. 作用域的作用是什么？

隔离变量，不同作用域下同名变量不会冲突

6. 作用域和堆内存的区别？

1. 作用域是函数执行的时候产生fn()

2. 函数执行的时候首先会开辟一个新的内存空间叫栈内存（环境或作用域）

3. 数据类型在赋值的时候会开辟一个新的内存空间叫堆内存（存放代码块的）

二者都会形成一个内存地址

7. 作用域链和原型链的区别？

原型链主要针对对象的属性来说的

作用域链主要针对变量来说的

8. 作用域与执行上下文的区别

1.区别1

*全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义的时候就已经确定了，

N+1 1是全局作用域，

而不是在函数调用时。

*全局执行上下文是在全局作用域确定之后，js代码马上执行之前创建

*函数执行上下文环境是在调函数时，函数体代码执行之前创建

2.区别2

*作用域是静态的，只是函数定义好了就存在，而且不会再变化

*上下文环境是动态的，调用函数时创建，函数调用结束时候上下文环境就会释放

3.联系

*上下文环境(对象)是从属于所在作用域

*全局上下文环境==》全局作用域

*函数(局部)上下文环境==》对应的函数使用域

9. 作用域链？

      函数内部的变量被使用时，首先会在自己的私有作用域下查找是否有这个变量，

有就直接使用，没有就会向他的上一级查找，父级就使用父级的，父级没有就会以此继续向

上查找直到window为止，window有就使用没有就is not defined。这种查找机制我们叫作用域链。

10. 变量提升和函数提升的区别？

变量提升和函数提升 都叫预解释。都是浏览器的。

11. 变量提升？

js执行前，浏览器会给一个全局作用域window

window分两个模块 一个存储模块 一个执行模块

存储模块 找到所有的var和function关键字给这些变量添加内存地址

执行模块 代码从上到下执行 遇到变量就回去存储模块查找 有和没有

有，就看你赋值没有 赋值了就是后面的值 没有赋值就是undefined

如果没找到结果就是xxx is not defined

Es6的块级作用域

1. 什么是块级作用域？

带{}的都是块级作用域，if(){} for(){} 对象{}，函数不是块级作用域，因为函数本身就是个私有作用域

块级作用域就是私有作用域

2. 块级作用域的小知识？

1.Var和function 没有块级作用域的这个概念。

2. let和const有块级这个作用域

3. 作用域是对于变量的

3. 块级作用域和对象的区别？

1. 这是个块级作用域

2. {} 如果想表示对象，不能放在行首，就是前面不能没东西，如果{} 前面没有东西 就是块级作用域。

3. 里面必须加一个() 因为如果不加就是个块级作用域，我们要把eval转成对象，对象前面不能没东西

六、闭包

Js有两大神兽 一是原型 二是闭包

1. 如何产生闭包？

当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(函数)时(变量值可以是function),

就产生了闭包。

2. 闭包到底是什么？

1. 使用chrome调试查看

2. 理解1：闭包是嵌套的内部函数(绝大部分人)

3. 理解2：包含被引用变量(函数)的对象（极少数人）

4. 注意：闭包存在于嵌套的内部函数中

3. 产生闭包的条件？

1. 函数嵌套

2. 内部函数引用了外部函数的数据（变量/函数）还要执行内部函数。

执行函数定义就会产生闭包(不用调用内部函数，但要调用外部函数)不调外部函数，内部函数就无法定义。

4. 产生闭包的有几个条件？

1有外部函数。

2.有内部函数。

3.内部函数引用外部函数体。

5. 怎么知道闭包创建几个？

就看外部函数执行几次。

6. 闭包的作用？

1. 使用函数内部变量在函数执行完后，依然存活在内存中(延长局部变量的生命周期)

2. 让函数外部可以操作(读写)到函数内部的数据(变量/函数)

7. 闭包的生命周期

闭包是个对象，对象是有产生和死亡的。

1. 什么时候产生？

1. 嵌套内部函数定义执行完时就产生了(不是在调用)

2. 执行完函数定义，创建好内部函数对象就产生

2. 什么时候死亡？

1. 包含闭包的函数对象成为垃圾对象就死亡了。之所以成为垃圾对象是因为引用它的变量不在引用它了。

Var fn = fn()

fn=null 这样闭包就死亡了

8. 闭包的作用？

1. 延长了外面局部变量的生命周期

2. 分情况可能是一点也可能是缺点

9. 闭包的缺点？(内存泄漏)

1. 函数执行完后，函数内的局部变量没有释放，占有内存时间会变长(这个边长如果你需要就是优点，如果不需要就变成缺点)

2. 容易造成内存泄漏

如果用完这个数组对象不用了就让f=null最大的数组对象就被释放了

如果不释放array这块占用了非常大的空间这就叫内存泄漏

3. 解决方法

1.能不用闭包就不用

2.及时释放

八、DomBom http

Dom

1.什么是dom对象？

1. DOM对象 dom的全称  document object model

2. Dom 主要研究html中的节点（标签）对节点进行操作，改变标签，改变标签属性，改变css样式，添加事件等。Dom研究是的对象是document

2.dom创建的优缺点？

优点:是一个独立的个体，不会影响到原有的元素

缺点:处理数据量过大会比较麻烦,会造成DOM回流。

3.什么是Dom回流？

页面渲染时，我们对html结构简单的增删查改时，浏览器会对所有的dom进行重新排列，这就是Dom回流，严重影响浏览器的性能。

4. DOM2级中标准浏览器和非标准浏览器的区别

①写法  标准：addEventlistener    非标准：attachEvent

②前者指向触发事件的元素  后者指向window

③前者不带on   后者带on

④attachEvent只用在ie8以下    addEventlistener只用在标准浏览器下

⑤attachEvent只有冒泡没有捕获   addEventlistener有冒泡也有捕获

5. DOM0级和DOM2级的区别

①DOM0级如果绑定多个相同的事件 后者会覆盖前者 dom2级不会

②DOM0级只适合普通事件 DOM2级还有指定的事件类型

如DOMContentLoaded(当html文档结构加载完成之后执行)这个事件就是jquery中的$(document).ready()

③事件取消DOM0级直接赋值null就ok了 DOM2级事件需要使用div.removeEventListener( )

6. Dom 有几种事件绑定写法？

1. dom0级  div.onclick=function（）{}

2. dom2级  addEventlistener('click',function(){},false)

Bom

1.  什么是bom？

浏览器对象模型，本质也是一个对象，而这个对象的大量方法都存在window下

http

1. http:是互联网上应用最广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP)，用于从www服务器传输超文本到本地浏览器的协议,

2. 作用:它可以是浏览器更加高效,使网络传输减少

3. https:是以安全为目标的http通道,简单就是http的安全版,即http下加入ssl安全层,https的安全基础是ssl。

4. ssl：是为网络通信提供安全即数据完整性的一种安全协议

5. https的作用:

1、建立一个信息安全通道，来保证数据传输的安全

2、确认网站的真实性

6. http和https的区别?

1、http是超文本传输协议,信息是明文传输,https具有安全性的ssl加密传输协议

2、http和https使用的是完全不同的连接方式,用的端口也不一样,前者是80,后者是443

3、http的连接很简单，是无状态的，https是由ssl+http协议构建的可进行加密的传输，身份验证的网络协议就是比http安全

什么是无状态？

        指协议对于事物处理没有记忆功能，直观的说每个请求都是独立的，与前面的请求和后面的请求没有直接联系

九：总结排序的算法，查找，排序，二分查找，冒泡排序

1. 冒泡排序

var arr=[45,26,15,54,36,8,4];

var num=null

for(var j=arr.length-1;j>=0;j--){

//for(var k=0;k

       //for(vari=0;i

       for(vari=0;i<=j;i++){

              if(arr[i]>arr[i+1]){

                     num=arr[i];

                     arr[i]=arr[i+1];

                     arr[i+1]=num

              }

       }

}

2.二分查找

先对数据排序，找出中间的那个数，拿中间的数和查找的数进行对比

//如果我想找67是否在我的这个数组中，该怎么找？？？

//二分查找是什么意思?

//把所有的索引除2,然后取争找到得到结果,比如是4,就截取第四个数,把后面抛弃

//然后继续加所有的索引然后除2，取争截取，一直找到或找不到那个数

    var arr=[2,12,23,34,45,56,67,84,90];

    var stindex=0;//从0开始,索引

    var endind=arr.length;//把arr数组的长度赋给endind，结束索引

    var findnum=prompt(); //输入框

    //第一次比较算出中间的

    var middel=Math.floor((stindex+endind)/2);

//什么时候剩下两个数字，

//这个while中间值,不能为第一个也不能为最后一个,说名没找到

    while(stindex!==middel&&endind!==middel){

        console.log(1)

//拿中间那个数给67比较如果大于

        if(arr[middel]>findnum){

            endind=middel;

        }else if(arr[middel]

            stindex=middel;

        }else if(arr[middel]==findnum){

            break;

        }

        middel=Math.floor((stindex+endind)/2)

    }

    if(arr[middel]==findnum){

        document.write("找到了");

    }else{

        document.write("没找到")

    }

//var sindex=0;//从0开始

//var

endindex=arr.length;//数组的长度 10

//var findnum=67;//判断一个这个数字有没有

////第一次比较，找到中间的那个

//var

middle=Math.floor((sindex+endindex)/2)

//

////while终止的条件1，当我中间数为初始值或者最后的索引值时候条件终止

////条件1中间数的索引0和1就终止 没有找到

////条件2找到了break

//while(sindex!==middle&&endindex!==middle){

//  if

(arr[middle]>findnum) { //比如当要找67如果找的中间那个数大于67，说明找到了，不大于说明还在前面

////就把找的后面的值抛弃，重新赋值从5开始在找

//      endindex=middle;

//  }else

if(arr[middle

//      sindex=middle;

//      

//  }else

if(arr[middle]==findnum){

//      break;

//  }

//  middle=Math.floor((sindex+endindex)/2);

//}

//if(arr[middle]==findnum){

//  document.write('找到了')

//}else{

//  document.write("没找到")

//}

//什么时候剩下两个数字 sindex开始值，当sindex开始值

//剩下两个数字就结束了分两种情况

//1.能找到,找到情况下 最低是有三个数字，高的有5个，9个等。。

//2.找不到，是两个值

十、性能优化

1.提升页面性能优化?

1.  多采用雪碧图

2.  阻止超链接 a 的默认行为

3.   减少Dom回流

4.   减少向服务器请求的次数

5. 适当使用缓存

6. 使用无cookie域名加载静态资源；

7. 让AJAX请求可缓存；

8. 减少网络请求，合并请求，包括JS、CSS，使用雪碧图CSS Sprite，内联小图片使用Base64

2. 服务器端

1. 把CSS放在Head中加载，这样可更早开始加载，避免闪屏；

2. 把JS放在Body末尾加载，因为JS脚本文件加载时会阻塞html和css渲染；

3. 不使用css表达式；

4. 用外联方式引用css和js，减少html体积

5. 压缩js和css，删除不必要的注释和空

6. 不要重复加载js

7. get方式发起ajax请求；

8. 延时加载-懒加载，关键资源优先加载；

9. 减少Dom节点；

10. 避免使用Iframe,必要时可采用load；

11. 尽量减少cookie体积，因为cookie请求时会被带上；

12. 减少Js中的Dom访问；

13. 充分使用JS事件机；

14. 使用常见的图片优化手段（pngcrush、jpegtran、pngquant）；

15. 尽量不在html中缩放图片；

16. 尽量不要把img的src置空；

17. 任何资源都要在25k以内。