第七章：箭头函数
1.箭头符号，悠久的历史
以下写法是不是灰常眼熟啊，但你了解为啥要这样写吗？
这是为了兼容不支持JS的浏览器（现在应该跟恐龙一样绝迹了吧！）
不支持JS的浏览器：解析为两个不支持的标签<script>，</script>和一段HTML注释支持JS的浏览器：识别出JS代码，被解析为单行注释的开始
<script language="javascript">
<!--
console.log('Hello Daniel');
// -->
</script>
2.节省
懒人必备良品：
可省去function关键字
单语句可省去return关键字和大括号 {}
单参数可省去小括号 ()
最省情况代码示例：
[1, 2, 3].filter(num => num > 1);
非单参数代码示例：
[1, 2, 3].filter((num, idx) => idx > 1);
非单语句代码示例：
[1, 2, 3].filter(num => { console.log(num); return num > 1; });
3.注意事项
如果想简单返回对象，这个时候就不能偷懒，至少得加个小括号，不然会被解析为块代码。看下代码示例，第一和第二句都被当作块代码：
var result = [1, 2, 3].map(num => {}); // 这样相当于空代码，返回值为undefined
var result = [1, 2, 3].map(num => {key: num}); // 这样的返回值同上
var result = [1, 2, 3].map(num => ({key: num})); // 必须加个小括号
4.与function关键字声明的函数的区别
没有自己的this值。this值继承自外围作用域
没有arguments对象。这不是坏消息，因为我们有不定参数和默认值法宝
5.理解this
提到this，你确定你对它真的了解吗？反正我刚好可以趁这个机会更加深入地了解它一番（这篇文章值得一看）。
this都是在函数内才能用到，我们来列举下常见的几种场景：
- 场景一：调用对象的方法
var deep_thought = {
the_answer: 42,
ask_question: function () {
return this.the_answer;
}
};
var the_meaning = deep_thought.ask_question();
当 deep_thought.ask_question()执行时，Javascript为函数建立执行上下文（execution context），将this设为函数所属的对象引用（即deep_thought）
- 场景二：构造函数
function BigComputer(answer) {
this.the_answer = answer;
this.ask_question = function () {
return this.the_answer;
}
}
var deep_thought = new BigComputer(42);
var the_meaning = deep_thought.ask_question();
当用new关键字来创建构造函数的实例对象时，过程是这样的：先创建一个要返回的对象，然后将this指向它的引用，执行完函数代码后返回该对象。当执行deep_thought.ask_question()，函数里的this指向的是构造函数的实例对象
- 场景三：普通函数
function test_this() {
return this;
}
var i_wonder_what_this_is = test_this();
因为我们没明确指定函数调用的上下文，所以默认是全局对象，在浏览器端为window对象，在NodeJS为global对象
- 场景四：事件处理
这个还要看具体的写法：
写法一：this指向全局对象，这里即window对象
<script type="text/javascript">
function click_handler() {
alert(this); // alerts the window object
}
</script>
...
<button id='thebutton' onclick='click_handler()'>Click me!</button>
写法二：this指向DOM对象，因为触发事件的时候其实是DOM.onclick()
<script type="text/javascript">
function click_handler() {
alert(this); // alerts the button DOM node
}
function addhandler() {
document.getElementById('thebutton').onclick = click_handler;
}
window.onload = addhandler;
</script>
...
<button id='thebutton'>Click me!</button>
简单总结一下：
函数内的this指向的是函数的执行者（[执行者].fnName()），如果没指定执行者，则为全局对象
来个题目考考你呗，以下代码点击按钮会显示什么信息呢？
<script type="text/javascript">
function BigComputer(answer) {
this.the_answer = answer;
this.ask_question = function () {
alert(this.the_answer);
}
}
function addhandler() {
var deep_thought = new BigComputer(42);
var the_button = document.getElementById('thebutton');
the_button.onclick = deep_thought.ask_question;
}
window.onload = addhandler;
</script>
答案是：alert的内容是undefined，因为button DOM是没有the_answer这个属性滴。这是为什么呢？大声念一遍上边的总结
this除了以上的默认规则外，你也可以手动指定this指向的值，apply和call以及漂亮的bind就是用来干这事
上面的例子要alert出正确的值，改用bind手动指定this的值即可
function addhandler() {
var deep_thought = new BigComputer(42);
var the_button = document.getElementById('thebutton');
the_button.onclick = deep_thought.ask_question.bind(deep_thought);
}
好吧，没想到this讲了这么长的篇幅，我们马上进入第八篇吧。
第八章：Symbols
1.我是原始类型
Symbol为Javascript的第7种原始类型。
Hi，大家，我是老七，我的大哥们分别是Object，Boolean，String，Number，Null，Undefined
2.设计初衷
Symbol的设计初衷就是避免冲突，一般应用于属性键的命名上。
有没一头雾水，那例子伺候吧。
以下假设第三方库对象libA和libB都想对传入的对象进行属性值的修改，而属性的名称刚好相同，那么冲突就发生了
var libA = {
symbolIsShowKey: Symbol('isShow'),
stringIsShowKey: 'isShow',
fn: function (data) {
data[this.symbolIsShowKey] = true;
data[this.stringIsShowKey] = true;
}
};
var libB = {
symbolIsShowKey: Symbol('isShow'),
stringIsShowKey: 'isShow',
fn: function (data) {
if (data[this.symbolIsShowKey]) { // 没被其它库干扰掉
console.log('Symbol.isShow is true: do something');
}
if (data[this.stringIsShowKey]) { // 被其它库干扰到
console.log('String.isShow is true: do something');
}
}
};
var dataObj = {};
libA.fn(dataObj);
libB.fn(dataObj);
3.注意事项
symbol不能被自动转换成字符串，所以尝试将它与字符串拼接将报错，比如：
Symbol('daniel') +' some string' // 报错
Symbol('daniel').toString() + ' some string' // 显式转换则OK
4. 获取symbol的方式
- Symbol() 每次都返回新的唯一的symbol，无论描述是否一样
console.log(Symbol('daniel') == Symbol('daniel'));
- Symbol.for() 用于共享symbol，描述作为symbol注册表中的键，描述相同，则每次取出的symbol值是相同的
console.log(Symbol.for('daniel') === Symbol.for('daniel'));
- 使用标准定义的symbol。如
Symbol.match，Symbol.iterator等（还记得《读深入ES6记[一]》中我们如何让普通对象拥有for-of来遍历数据的特性吗）
这就是第七，八章的学习情况，接下来可继续看《读深入ES6记[五]》。
前面章节的学习情况请看：
《读深入ES6记[一]》
《读深入ES6记[二]》
《读深入ES6记[三]》
--EOF--
