Hank's Blog

今天有个电话面试问到 Bootstrap 栅格布局的原理，当时没答出来，之后百度了下，发现这个问题我应该答出来的。
实现列组合方式非常简单，只涉及两个CSS两个特性：浮动与宽度百分比。

1
2
3

.col-md-1, .col-md-2,... .col-md-11, .col-md-12 {
    float: left;
 }

1
2
3
4
5
6
7
8
9
10
11
12
13

 .col-md-12 {
   width: 100%;
 }
 .col-md-11 {
   width: 91.66666667%;
 }
...
 .col-md-2 {
   width: 16.66666667%;
 }
 .col-md-1 {
   width: 8.33333333%;
 }

区别

换行(\n)就是光标下移一行但不移到这一行的开头，回车(\r)就是回到当前行的开头但不下移一行。按下 Enter 键后会执行 \n\r 。

来历

在计算机还没有出现之前，有一种叫做电传打字机的玩意，每秒钟可以打10个字符。但是它有一个问题，就是打完一行换行的时候，要用去0.2秒，正 好可以打两个字符。要是在这0.2秒里面，又有新的字符传过来，那么这个字符将丢失。
于是，研制人员想了个办法解决这个问题，就是在每行后面加两个表示结束的字符。一个叫做“回车”，告诉打字机把打印头定位在左边界；另一个叫做“换行”，告诉打字机把纸向下移一行。
后来，计算机发明了，这两个概念也就被般到了计算机上。那时，存储器很贵，一些科学家认为在每行结尾加两个字符太浪费了，加一个就可以。于是，就出现了分歧。
Unix/Mac系统里，每行结尾只有“<换行>”，即”\n”；Windows系统里面，每行结尾是“<换行><回车>”，即“\n\r”。一个直接后果是，Unix/Mac系统下的文件在 Windows里打开的话，所有文字会变成一行；而Windows里的文件在Unix/Mac下打开的话，在每行的结尾可能会多出一个^M符号。

相似性

变量分别被赋值为undefined和null，这两种写法几乎等价。
undefined和null在if语句中，都会被自动转为false，相等运算符甚至直接报告两者相等。

区别

null: 表示一个对象的值为空
undefined: 表示一个变量声明了但没有被赋值

伪类种类

伪元素种类

区别

• 伪类的效果是通过给要加特殊样式的元素，增加一个类来完成实现的；伪元素的效果是通过给要加特殊样式的内容加一个元素来实现的
• 伪类，首先是类的一种，作用域标签本身（状态）；伪元素，首先是元素，作用于内容本身

水平居中

定宽水平居中

给div设置一个宽度，然后添加margin:0 auto属性。

1
2
3
4

div{
    width:200px;
    margin:0 auto;
}

不定宽水平居中

设置 display:table ，这个样式会告知浏览器当前元素的宽度，采用最小的宽度，不是默认全宽。

1
2
3
4

div {
	display:table;
	margin:0 auto;
}

列表

无序列表

1
2
3
4

- 文本1
   * 二级文本
- 文本2
- 文本3

有序列表

1
2
3

1. 文本1
2. 文本2
3. 文本3

定义

闭包就是能够读取其他函数内部变量的函数。

作用/用途

• 可以读取函数内部的变量
• 在内存中维持一个变量

例子

通过闭包，我们可以在其他的执行上下文中，** 访问到函数的内部变量 **。

在 JS 中，主要有两种创建对象的方法, 分别是对象字面量以及调用构造函数

1
2
3
4
5
6
7

//对象字面量
var obj1 = {};

//调用构造函数
var obj2 = new Object(); // typeof Object === 'function'

obj1.__proto__ === Object.prototype // true

prototype 、constructor

** 每个函数 **默认会有一个prototype属性指向它的原型对象，
该原型对象会有一个constructor的属性，该属性包含一个指针，指向prototype属性所在函数，即

1

Object.prototype.constructor === Object

__proto__

每一个对象都有一个隐式的__proto__属性，指向它们的构造函数的原型，即

1

obj1.__proto__ === Object.prototype // true

1

obj1.__proto__.constructor === Object // true

prototype 和 __proto__ 的区别

prototype 是函数才有的属性，__proto__ 是对象和函数都有的属性（不是一个规范属性，只是部分浏览器实现了此属性，对应的标准属性是 [[Prototype]]）

Object 和 Function 的关系

Object是Function的实例对象, Function.prototype是Object的实例对象。Object本质是函数，Function本质是对象。

1
2

Object.__proto__ === Function.prototype;
Function.prototype.__proto__ === Object.prototype;

原型继承

利用 js 的原型，可以实现继承。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

function Box() {}
function Box2() {}
function Box3() {}

Box2.prototype = new Box();
Box3.prototype = new Box2();

var a = new Box2();
var b = new Box3();

a.__proto__ === Box2.prototype; // true
b.__proto__ === Box3.prototype; // true

// 原型链如下，到 null 终止
Box3.prototype.__proto__ === Box2.prototype; // true
Box2.prototype.__proto__ === Box.prototype; // true
Box.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true

除了Object的原型对象Object.prototype的__proto__指向null，其他内置函数对象的原型对象（例如：Array.prototype）和自定义构造函数的__proto__都指向Object.prototype, 因为原型对象本身是普通对象。

ES5 有了 Object.create()，让我们更便捷地使用原型继承，Object.getPrototypeOf、Object.setPrototypeOf 可以更自由地操控原型链。

1
2
3
4
5
6
7
8
9

function Box() {}
function Box2() {}
function Box3() {}

Box2.prototype = Object.create(Box.prototype)
Box3.prototype = Object.create(Box2.prototype)

console.log(Box3.prototype.__proto__ === Box2.prototype) // true
console.log(Box2.prototype.__proto__ === Box.prototype) // true

相同点

• apply 、call 、bind 三者都是用来改变函数的this对象的指向的；
• apply 、call 、bind 三者第一个参数都是this要指向的对象，也就是想指定的上下文；
• apply 、call 、bind 三者都可以利用后续参数传参；

apply 、call

在 javascript 中，call 和 apply 都是为了改变某个函数运行时的上下文（context）而存在的，换句话说，就是为了改变函数体内部 this 的指向。
对于 apply、call 二者而言，作用完全一样，只是接受参数的方式不太一样。

1
2
3

var func = function(arg1, arg2) {};
func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2]);