《Javascript 语言精髓》读书心得

《Javascript 语言精髓》读书心得

看了《Javascript 语言精髓》一书，记录下一些要点，以供以后学习查阅。

对象

JavaScript简单类型有数字、字符串、布尔值、null、undefined，其他所有的值都是对象（数组、函数、正则表达式都是对象）。
数字、字符串、布尔值虽然拥有方法（包装对象），但并不是对象。

-对象字面量

var flight = {
    airline: "Oceanic",
    number: 815,
    departure: {
        IATAL: "SYD",
        time: "2004-09-22 14:55",
        city: "Sydney"
    },
    arrival: {
        IATA: "LAX",
        time: "2004-09-23 10:42",
        city: "Los Angeles"
    }
}

-引用

对象通过引用来传递，它们永远不会被拷贝。

var a = {
    name: 'a'
}
var b = a
b.name = 'b'
console.log(a.name)        // b

-枚举

这里要说一说枚举。
for in 可以遍历对象中所有的属性名，这时要特别留意，该枚举过程会列出所有的属性——包括函数和你可能不关心的原型中的属性，所以有必要过滤掉不要的值，最常用的过滤器是hasOwnProperty方法，以及使用typeof来排除函数。
而且在《高性能Javascript》一书中有提及，for in方法是所有循环中效率最低的方法。
使用for in的时候，属性名出现的顺序是不确定的，如果需要属性名以想要的顺序出现，最好的方法是完全避免使用for in语句，而是创建一个数组并在其中以正确的顺序包含属性名,再通过for遍历数组获取想要的属性的值：

var arr = [
"first-name",
"middle-name",
"last-name",
"profession"
]
for (var i=0;i<arr.length;i++){
    console.log(arr[i] + ":" + object[arr[i]]);
}

-减少全局变量污染

减少全局变量污染的一个方法是闭包，这里先不说
另一个方法是只创建一个唯一的全局变量：

var MYAPP = {}
MYAPP.stooge = {
    "name":"a",
    "age":"18"
};
MYAPP.flight = {
    "time":"2017",
    "city":"GZ"
};

函数

-调用

函数有四种调用方式

1.方法调用
当函数被保存为对象的一个属性时，称为一个方法
当一个方法被调用的时候，this被绑定到该对象。

2.函数调用
函数并非一个对象的属性时，它被当作一个函数来调用，
此模式调用函数时，this被绑定到全局对象；
这是语言设计上的一个错误，这导致方法的内部函数的this绑定了全局对象，不能共享方法对对象的访问权，
此时可以使用定义一个变量并给他赋值给this让内部函数访问：

var myObject = {
value :3
}
myObject.double = function() {
var that = this;
var helper = function () {
console.log(this.value)         // underfined
console.log(that.value)         // 3
}
helper();
}
myObject.double();
console.log(myObject.value)     // 3

ps:在ES6中可以用箭头函数解决该问题，箭头函数不会创建自己的this,它使用封闭执行上下文的this值。

3.构造器调用模式
如果在一个函数前面带上new来调用，那么背地里会创建一个链接到该函数的prototype成员的新对象，
同时，this会被绑定到新对象上；

4.Apply 调用模式
如果在一个函数前面带上new来调用，那么背地里会创建一个链接到该函数的prototype成员的新对象，
同时，this会被绑定到新对象上；
关于apply/call
分享一个之前看到有意思的例子：
猫吃鱼，狗吃肉，奥特曼打小怪兽。
有天狗想吃鱼了
猫.吃鱼.call(狗，鱼)
狗就吃到鱼了
猫成精了，想打怪兽
奥特曼.打小怪兽.call(猫，小怪兽)
就这样记住了。
二者的作用完全一样，只是接受参数的方式不太一样。例如，有一个函数 func1 定义如下：
var func1 = function(arg1, arg2) {};
就可以通过 func1.call(this, arg1, arg2);
或者 func1.apply(this, [arg1, arg2]); 来调用。

-递归

递归函数就是间接或者直接调用自身的一种函数，是一种强大的编程技术。
书上举了个经典的例子 汉诺塔游戏，我这里也举个输出数字的例子：

// 最快输出10000个任意字符
function repeatChar(char, num) {
    if (num === 1) {
        return char;
    } else {
        var temp = repeatChar(char, parseInt(num / 2));
        if (num % 2) {
            return temp + temp + char;
        } else {
            return temp + temp;
        }
    }
}

继承

-伪类

Javascript不直接让对象从其他对象继承，反而插入了一个多余的间接层，通过构造器的函数产生对象，
当一个函数对象被创建时，Function的构造器产生的函数对象会运行类似这样的代码：
this.prototype = {constructor: this}
新函数对象被赋予一个prototype属性，它的值是一个包含constructor属性且属性值为新函数的对象，这个prototype对象是存放继承特征的地方。
伪类的本意是想向对象靠拢，但使用构造器函数存在一个严重的危害：
调用构造器的时候如果忘了加new，会导致this绑定到全局对象上，破坏了全局变量环境。
所以所有的构造器函数都约定名称成首字母大写的形式，并且不以首字母大写的形式拼写任何其他东西。

数组

javascript本身对于数组与对象的区别是混乱的，typeof运算符报告数组的类型是’object’。
在js编程是一个常见的错误就是在数组与对象用乱了。数组与对象使用规则如下：
当属性名是小而连续的整数时，使用数组，否则使用对象。

毒瘤与糟粕

-全局变量

javascript依赖全局变量，在复杂的大程序中容易与独立运行的子程序因为重名的问题导致冲突，而且通常难以调试。
直接使用未声明的变量成为隐式的全局变量：
foo = value
这种方式本来是为了方便初学者，让变量在使用前无须声明，但是忘记声明变量成了一个非常普遍的错误，这导致那些忘记预先声明的变量成为了全部变量，这导致debug非常困难。

-作用域

javacript没有块级作用域，这导致在javascript中变量不应在第一次使用的时候声明，而是在每个函数的开头部分声明全部变量。

-自动插入分号

javascript有一个自动修复机制，他试图通过插入分号去修正有缺陷的程序，可是这也导致了严重的错误：

return
{
    status: true;
}

这看起来是返回一个包含status成员元素的对象，遗憾的是自动插入分号导致程序被误解了，变成了返回underfined，而且没有任何警告。
因此一种友好的代码风格是尽量把 { 放在上一行的尾部而不是下一行的头部。

-parseInt

parseInt是一个把字符串转换为整数的函数，但他会在遇到非数字时停止解析，而且没有任何警告。
但是，若改字符串第一个字符是0，那么该字符会基于八进制而不是十进制来求职，这个错误会导致程序解析日期和时间的时候出现问题。这时需要给parseInt加上一个基数作为参数，建议总是加上这个基数作为参数：

parentInt("16");        // 16
parentInt("16 tons");   // 16
parentInt("08");        // 0  八进制中 8和 9不是数字
parentInt("08",10);     // 8

-浮点数

0.1+0.2不等于0.3，这是javascript中经常被报告的一个bug，这是因为二进制的浮点数不能正确处理十进制的小数。
但浮点数处理证书运算是精确是，所以当需要处理精确小数的时候可以考虑在运算前把小数按比例转换为整数，运算后在转回小数。

==

Javascript有两组相等运算符： === 和 !== 以及 == 和 !=。
下面列出一些有趣的例子

'' == '0'               // false
0 == ''                 // true
0 == '0'                // true

false == 'false'        // false
fasle == '0'            // true

false == underfined     // false
false == null           // false
null == underfined      // true

这里建议始终使用=== 与 !== ，如果以上运算使用===运算符，结果都是返回false。