null===undefined?

[]==’’ !![] !!’’

==会转换类型再比较，===直接比较、不是同一类型就是 false

js 基本数据类型

undefined,null,boolean,number,string

ES2015 新增 symbol

js 有几种类型的值

栈：原始数据类型（基本数据类型）

堆：引用数据类型（对象，数组，函数）

两种类型的区别：存储的位置不同

px

像素

em

参考物是父元素的 font-size（浏览器默认是 16px），如果自身定义了 font-size，就按自身的来算。

rem

相对于根元素（html）

%

• 对于普通元素：相对于父元素
• 对于 position: absolute 的元素：相对于已定位的父元素
• 对于 position: fixed 的元素：相对于 ViewPort（可视窗口）

vw & vh

css3 新元素，view width 和 view height（可视宽高）

浏览器宽度 1200px，1vw=1200px/100=12px

如何使 1rem=10px？在设置 HTML{font-size：62.5%；}即可

参考

最近复习的时候又遇到 this 指向的问题了，摘录一道经典例题，研究一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

var name = 'window';

var person1 = {
	name: 'person1',
	show1: function () {
		console.log(this.name);
	},
	show2: () => console.log(this.name),
	show3: function () {
		return function () {
			console.log(this.name);
		};
	},
	show4: function () {
		return () => console.log(this.name);
	},
};
var person2 = { name: 'person2' };

person1.show1();
person1.show1.call(person2);

person1.show2();
person1.show2.call(person2);

person1.show3()();
person1.show3().call(person2);
person1.show3.call(person2)();

person1.show4()();
person1.show4().call(person2);
person1.show4.call(person2)();

• person1.show1()
  很显然，this 指向 person1，输出 person1

• person1.show1.call(person2) 更改 this 指向到 person2，输出 person2

• person1.show2() show2 时箭头函数，箭头函数没有 this 值，它保存到是外部的 this 值，所以输出是 window

• person1.show2.call(person2) this 值都没了，传 person2 也没用，所以还是 window

• person1.show3()() show3 是多次调用函数，等价于

1
2

var temp = person1.show3();
temp();

这样执行环境就是全局了，输出 window

• person1.show3().call(person2) 等价于

1
2

var temp = person1.show3();
temp.call(person2);

输出 person2

• person1.show3.call(person2)()

1
2

var temp = person1.show3.call(person2);
temp();

执行环境还是全局，输出 window

• person1.show4()()

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

var person1 = {
	name: 'person1',
	show4: function () {
		var self = this;
		return function () {
			console.log(self.name);
		};
	},
};

var temp = person1.show4();
temp();

在 person1.show4(),执行时，self = this 指向就是 person1,之后再执行 temp()，时，self 是不会再改变了，所以输出的是 person1

• person1.show4().call(person2)

1
2

var temp = person1.show4();
temp.call(person2);

所以， 还是输出 person1

• person1.show4.call(person2)()

1
2

var temp = person1.show4.call(person2);
temp();

这次不一样了，self = this 指向的是 person2 所以输出的是 person2

函数调用指向全局 如果想改写的话，只需要用 var self = this 来保存当前的上下文即可

Flex 基本概念

flex：弹性布局

行内元素也可以用 flex，webkit 内核的要加上-webkit

注意，设为 Flex 布局以后，子元素自动成为 flex item，并且其 float、clear 和 vertical-align 属性将失效。

position

盒模型

IE 盒模型

标准盒模型

直接上代码：

我们在使用 Vue 的过程中，父子组件通信几乎是一个必会的知识点，本文就来说一下 Vue 中的父子组件通信

props/$emit

父向子：组件 A 通过 props 的方式向子组件 B 传递；

子向父：在子组件 B 中用$emit, 父组件 A 中 v-on 的方式实现

this.\$emit('methodInParentComponent','value');

例 1

由以下两段代码可以看出，new 关键字帮我们做了：

1. 创建 obj 对象
2. 把新建的 obj 对象的_ _ proto__指向构造函数 Common 的 prototype
3. 构造函数的作用域会指向实例本身（新对象），this 也指向新对象
4. 执行构造函数内部的代码，将属性添加给 person 中的 this 对象。
5. 不用手动 return，会自动返回新对象 阅读更多...

原型链属性

1

var obj = { name: 'obj' }

obj 有两个属性：一个是添加的 name 属性，一个是自带的_ _proto__属性，指向 window.Object.prototype。如下图所示。