Lyrics

< More and better />

baidu One

面试官小姐姐很好，就是自己有点紧张，而且基础只是忘得有些多

赶紧来总结一下

. 原型链

原型里面有两个比较重要的东西，对象所拥有的 __ proto __ 属性，函数对象所拥有的 prototype 属性，实例对象的__prpto__属性指向原型对象，也就是指向

函数的prototype 对象，实例对象和原型对象之间是一种关联关系，实例对象查找属性的时候会先自身的属性中进行查找，找不到才会从实例的原型对象中找。

实例对象 –> 原型对象 –> 原型对象 构成了原型链

. 事件冒泡(由内往外）和事件捕获 (由外往内）

事件冒泡是从内往外进行扩散，是从事件目标开始往上冒泡到页面的最上一级标签。

事件捕获是在最上一级标签开始往下查找，直到捕获到事件目标。

阻止事件冒泡 ： e.stopPropagation();
阻止默认事件 ：e.preventdefault();

css 选择器

ID 选择器 > 类选择器 = 属性选择器a[href="segmentfault.com"]{} > 伪类选择器 > 标签选择器 > = 伪元素选择器

css 样式的优先级 (忘了，而且我自己把内嵌和内联搞混了）

内联（在元素内部） 》 内嵌（style) 》 外联

ID 选择器 > 类选择器 = 属性选择器a[href=”segmentfault.com”]{} > 伪类选择器 > 标签选择器 > = 伪元素选择器

Bootstrap 实现原理，栅栏布局的实现原理；

我说的是利用浮动和宽度百分比实现，然后就提到下题了；

清除浮动的 方式：

实现办法：

  1. 是在浮动元素后面添加元素，然后设置clear 属性，达到清楚浮动目的

  2. 具体实现：使用伪元素在后面添加一个元素设置： clear 属性；

  3. 给父元素添加 overflow :hidden属性；
    原理是： 会触发BFC 布局，就是（内部元素不会影响到外部的元素）

    然后接着就问： 那怎样可以触发 BFC :

    overflow : hidden/auto;

    display:table-cell/ table -caption / inline-block;

    float :left/right;(除了none)

    position:absolute /fixed

H5 的API自己都了解那些：(自己突然有点蒙，这块没因为从来没太注意过API这个术语)

web存储机制:

1. sessionStorage :是存储于会话阶段的本地存储。页面关闭之后就会消失。存储在sessionStorage 中的数据可以跨越页面刷新而存在，但是对多页面应用有一点的限制。

//这里添加一个globalStorage和sessionStorage 实现的效果差不多，不过需要自己设置访问域（就是那些数据在那些域可以被访问到）使用 []表示

1
2
3
4
//保存数据
globalStorage['wrox.com'].name = 'Nicholas';
//获取数据
var name = globalStorage['wrox.com].name;



2. localStorage : 是持久化的本地存储，要获取同一个localStorage 必须来自同一个域名，使用同一种协议，在同一个端口上。然后使用setItem ，getItem,removeItem,等函数进行操作。

localStorage 和sessionStorage 都是通过key,value 来取值的。

es6 自己了解那些：

模板字符串 ，末班字符串可以包含一些变量和表达式，使用${}来包含变量和表达式

module ，export 和 import

然后小姐姐问我： import 有几种方式：

我说：2 种 ，一种是import {} 大括号的方式，这样的方式的话，是因为export 导出的话，必须加{}，而且必须保证export 导出的变量和import 导入的变量必须同名

如果害怕重名的话，可以进行重命名 ,使用as 进行重命名处理；

还有一种就是export default 导出的话，import 就可以不加大括号，而且变量名也可以不一致；

还有就是 class 类的一些构造方法，还有继承属性，

class 如果自己不定义构造函数，自己是默认有一个构造函数的，子类通过extends 实现对父类函数的构造函数的继承，使用super函数。默认是继承无参数的构造函数的继

承，但是如果父类的构造函数是有参数的话，就需要自己定义有参数的super，(我又提了一下，super 虽然是继承父类的构造函数，但是他的this 还是指向子类。）

因为会出错。。

NodeJS的API 自己都用了那些：哇塞，这个太多了，自己一时反应不上来啊。。。。还有姐姐问实现原理，自己不会。。。。

性能优化

css ：

  1. 不要使用import ,使用Link (原因:@import影响css文件的加载速度，
  2. 将css 样式表放在head中引入
  3. 注意合并样式表,但是分辨一些情况（大型项目样式表还是需要分开写这样会避免一些样式的覆盖问题，）
  4. 慎重使用float 和 position
  5. 利用css 的继承减少一些代码量（父元素设置某些属性，子元素就直接可以继承，就不需要再次设定，可以继承的css属性有 cursor:pointer,visibility:hidden;font-size/weight/family/style/;text-align:center;
  6. 应用缓存
  7. 压缩样式表（cssshrink) 主要是对空格和换行进行处理
  8. 按需加载：

JS ：

  1. 减少全局变量的使用(原因在一个函数作用域中如果引用全局变量他需要一直向外寻找，比较耗时间，所以一般性会在函数作用域中，制定一个局部变量来得到外部全局变量的引用，然后在内部函数作用域中使用这个局部变量）
  2. (在一个函数作用域中局部变量存在作用域的起始位置，所以访问速度相对跨作用域的变量的访问速度要快），变量所在的作用域越深，他访问的速度就越慢）

  3. 可以将对象成员和数组元素和跨作用访问的变量存储在局部变量中。

  4. 优化循环：

如果使用for in 函数，则会遍历数组的元素和对象的属性，所以这一点需要注意，就是不同的场景使用不同的循环函数；

  1. 将 js 进行合并（这个也是要分场合的，小项目的话，这样是一个方法，但是如果一个大型目就会引起变量污染，所以最好的使用一些打包工具，按需加载需要的js.

网站的性能优化：

js 原型是什么：

原型是其他对象的基础，原型对象是可以被实例对象所共享的，实例对象和原型对象直接存在一种关系，实例对象拥有一个 内部属性proto 属性绑定到他的原型；对与函数对象来说，就是绑定到函数的prototype 对象；

原型链

存在一个实例对象，他想要使用某个属性，他会在自己内部先进行查找，如果查找不到，则会去他的原型中进行查找。，然后原型查找原型，就这样一直到 Object.prototype = null ，就停止了查找。这样就形成了原型链；

事件冒泡和事件捕获

一般情况事件会有三个阶段：捕获，目标事件，冒泡

事件捕获： 是由外网内进行事件的捕获，知道找到目标事件；
事件冒泡：是 由目标事件往外进行出发，就是往上一级进行触发；

如何防止事件冒泡：
e.stopPropagation/ IE: e.cancleBubble = true ；
如何阻止默认事件：
e.preventDefault/IE : e.returnValur= false;

事件冒泡和默认事件解决

form 表单提交和Ajax提交区别：

form 提交会引起页面刷新，如果from 表单不写action 会发现，会从新打开一个空白页面，所以一般form 一般是先打开一个空白页面进行提交。

Ajax 是异步提交，不会引起页面的刷新，只是局部改变页面内容。一般不尅提交文件，因为浏览器认为这是不安全的，form 可以提交文件。

js中数组和字符串的方法理解：

js中call ,apply ,bind 的区别：

为什么要这样绑定this ，是因为this 指向的是调用函数的对象，这样的话就需要改变原先this的一个指向。才能将另一个对象的属性绑定；

```
var A = {
name:”zf”,
age:20,
say:function(Temp){
console.log(this.name+this.age+temp);
}
}

var B = {
name :”zcy”,
age: 22,
}

A.say(0);//this->A ，输出： zf200;

想要输出 zcy22*的话，必须是B调用函数 A的say 方法：所以要进行对this 的重新指向，
就需要使用 call/apply/bind

apply和call都是为了改变某个函数运行时的上下文而存在的（就是为了改变函数内部this的指向）；

方法：call ，apply 是对函数的直接调用，bind 方法返回的是一个函数，所以需要添加() 进行调用；

  1. A.say.call(B,);//这样this->B ， 表示 传入B.say(的参数)
  2. A.say.apply(B,[*]);//参数为数组形式
  3. A.sya.bind(B，)(); / A.sya.bind(B,[])();//bind 方法返回的是一个函数，需要使用（）,参数逐个列出或者以数组形式都可以；

相同点：用于改变函数内部this 的指向；this所指的方向都是绑定的第一个参数。

不同点：call ，apply 是对函数的直接调用，bind 方法返回的是一个函数，所以需要添加() 进行绑定；
call 方法传递给调用函数的参数是逐个列出的
apply 是需要一个数组的形式传入；

  1. call与apply都属于Function.prototype的一个方法，所以每个function实例都有call、apply属性