关于javascript:JS-学习笔记

原型

构造函数的属性 prototype 指向原型 / 原型对象；原型的 constructor 属性指向构造函数；通过构造函数创建对象，对象的 _proto_ 属性指向原型，因而对象能够用 _proto_ 拜访原型，也能够用 constructor 拜访构造函数。

对象申明是表达式还是语句？

对象采纳大括号示意，这导致了一个问题：如果行首是一个大括号，它到底是表达式还是语句？

{foo: 123}

JavaScript 引擎读到下面这行代码，会发现可能有两种含意。第一种可能是，这是一个 表达式 ，示意一个蕴含 foo 属性的对象；第二种可能是，这是一个 语句，示意一个代码区块，外面有一个标签 foo，指向表达式 123。

为了防止这种歧义，JavaScript 引擎的做法是，如果遇到这种状况，无奈确定是对象还是代码块，一律解释为代码块。

{console.log(123) } // 123

下面的语句是一个代码块，而且只有解释为代码块，能力执行。

如果要解释为对象，最好在大括号前加上圆括号。因为圆括号的外面，只能是表达式，所以确保大括号只能解释为对象。

({foo: 123}) // 正确
({console.log(123) }) // 报错

这种差别在 eval 语句（作用是对字符串求值）中反映得最显著。

eval('{foo: 123}') // 123
eval('({foo: 123})') // {foo: 123}

下面代码中，如果没有圆括号，eval将其了解为一个代码块；加上圆括号当前，就了解成一个对象。

申明函数

var print = function(s) {console.log(s);
};

这是采纳变量赋值的写法来申明函数，这种写法将一个匿名函数赋值给变量。这时，这个匿名函数又称函数表达式（Function Expression），因为赋值语句的等号右侧只能放表达式。

采纳函数表达式申明函数时，function 命令前面不带有函数名。如果加上函数名，该函数名只在函数体外部无效，在函数体内部有效。

var print = function x(){console.log(typeof x);
};

x
// ReferenceError: x is not defined

print()
// function

下面代码在函数表达式中，退出了函数名 x。这个 x 只在函数体外部可用，指代函数表达式自身，其余中央都不可用。这种写法的用途有两个，一是能够在函数体外部调用本身，二是不便除错（除错工具显示函数调用栈时，将显示函数名，而不再显示这里是一个匿名函数）。因而，上面的模式申明函数也十分常见。

var f = function f() {};

函数是一等公民

JavaScript 语言将函数看作一种值，与其它值（数值、字符串、布尔值等等）位置雷同。但凡能够应用值的中央，就能应用函数。比方，能够把函数赋值给变量和对象的属性，也能够当作参数传入其余函数，或者作为函数的后果返回。函数只是一个能够执行的值，此外并无非凡之处。

因为函数与其余数据类型位置平等，所以在 JavaScript 语言中又称函数为第一等公民。

闭包

闭包（closure）是 JavaScript 语言的一个难点，也是它的特色，很多高级利用都要依附闭包实现。

因为在 JavaScript 语言中，只有函数外部的子函数能力读取外部变量，因而能够把闭包简略了解成“定义在一个函数外部的函数”。闭包最大的特点，就是它能够“记住”诞生的环境。在实质上，闭包就是将函数外部和函数内部连接起来的一座桥梁。

闭包的最大用途有两个，一个是能够读取函数外部的变量，另一个就是让这些变量始终保持在内存中，即闭包能够使得它诞生环境始终存在。请看上面的例子，闭包使得外部变量记住上一次调用时的运算后果。

function createIncrementor(start) {return function () {return start++;};
}

var inc = createIncrementor(5);

inc() // 5
inc() // 6
inc() // 7

下面代码中，start是函数 createIncrementor 的外部变量。通过闭包，start的状态被保留了，每一次调用都是在上一次调用的根底上进行计算。从中能够看到，闭包 inc 使得函数 createIncrementor 的外部环境，始终存在。所以，闭包能够看作是函数外部作用域的一个接口。

为什么会这样呢？起因就在于 inc 始终在内存中，而 inc 的存在依赖于createIncrementor，因而也始终在内存中，不会在调用完结后，被垃圾回收机制回收。

闭包的另一个用途，是封装对象的公有属性和公有办法。

function Person(name) {
  var _age;
  function setAge(n) {_age = n;}
  function getAge() {return _age;}

  return {
    name: name,
    getAge: getAge,
    setAge: setAge
  };
}

var p1 = Person('张三');
p1.setAge(25);
p1.getAge() // 25

下面代码中，函数 Person 的外部变量 _age，通过闭包getAge 和setAge，变成了返回对象 p1 的公有变量。

留神，外层函数每次运行，都会生成一个新的闭包，而这个闭包又会保留外层函数的外部变量，所以内存耗费很大。因而不能滥用闭包，否则会造成网页的性能问题。

立刻调用的函数表达式（IIFE）

在 JavaScript 中，圆括号 () 是一种运算符，跟在函数名之后，示意调用该函数。比方，print()就示意调用 print 函数。

有时，咱们须要在定义函数之后，立刻调用该函数。这时，你不能在函数的定义之后加上圆括号，这会产生语法错误。

function(){ /* code */}();
// SyntaxError: Unexpected token (

产生这个谬误的起因是，function这个关键字即能够当作语句，也能够当作表达式。

// 语句
function f() {}

// 表达式
var f = function f() {}

为了防止解析上的歧义，JavaScript 引擎规定，如果 function 关键字呈现在行首，一律解释成语句。因而，JavaScript 引擎看到行首是 function 关键字之后，认为这一段都是函数的定义，不应该以圆括号结尾，所以就报错了。

解决办法就是不要让 function 呈现在行首，让引擎将其了解成一个表达式。最简略的解决，就是将其放在一个圆括号外面。

(function(){/* code */}());
// 或者
(function(){/* code */})();

下面两种写法都是以圆括号结尾，引擎就会认为前面跟的是一个示意式，而不是函数定义语句，所以就防止了谬误。这就叫做“立刻调用的函数表达式”（Immediately-Invoked Function Expression），简称 IIFE。

留神，下面两种写法最初的分号都是必须的。如果省略分号，遇到连着两个 IIFE，可能就会报错。

// 报错
(function(){/* code */}())
(function(){/* code */}())

下面代码的两行之间没有分号，JavaScript 会将它们连在一起解释，将第二行解释为第一行的参数。

推而广之，任何让解释器以表达式来处理函数定义的办法，都能产生同样的成果，比方上面三种写法。

var i = function(){ return 10;}();
true && function(){ /* code */}();
0, function(){ /* code */}();

甚至像上面这样写，也是能够的。

!function () { /* code */}();
~function () { /* code */}();
-function () { /* code */}();
+function () { /* code */}();

通常状况下，只对匿名函数应用这种“立刻执行的函数表达式”。它的目标有两个：一是不用为函数命名，防止了净化全局变量；二是 IIFE 外部造成了一个独自的作用域，能够封装一些内部无奈读取的公有变量。

类数组对象

数组的 slice 办法能够将“相似数组的对象”变成真正的数组。

var arr = Array.prototype.slice.call(arrayLike);

除了转为真正的数组，“相似数组的对象”还有一个方法能够应用数组的办法，就是通过 call() 把数组的办法放到对象下面。

function print(value, index) {console.log(index + ':' + value);
}

Array.prototype.forEach.call(arrayLike, print);

下面代码中，arrayLike代表一个相似数组的对象，原本是不能够应用数组的 forEach() 办法的，然而通过 call()，能够把forEach() 嫁接到 arrayLike 下面调用。

上面的例子就是通过这种办法，在 arguments 对象下面调用 forEach 办法。

// forEach 办法
function logArgs() {Array.prototype.forEach.call(arguments, function (elem, i) {console.log(i + '.' + elem);
  });
}

// 等同于 for 循环
function logArgs() {for (var i = 0; i < arguments.length; i++) {console.log(i + '.' + arguments[i]);
  }
}

字符串也是相似数组的对象，所以也能够用 Array.prototype.forEach.call 遍历。

Array.prototype.forEach.call('abc', function (chr) {console.log(chr);
});
// a
// b
// c

留神，这种办法比间接应用数组原生的 forEach 要慢，所以最好还是先将“相似数组的对象”转为真正的数组，而后再间接调用数组的 forEach 办法。

强制类型转换

Number()

应用 Number 函数，能够将任意类型的值转化成数值。

上面分成两种状况探讨，一种是参数是原始类型的值，另一种是参数是对象。

（1）原始类型值

原始类型值的转换规则如下。

// 数值：转换后还是原来的值
Number(324) // 324

// 字符串：如果能够被解析为数值，则转换为相应的数值
Number('324') // 324

// 字符串：如果不能够被解析为数值，返回 NaN
Number('324abc') // NaN

// 空字符串转为 0
Number('') // 0

// 布尔值：true 转成 1，false 转成 0
Number(true) // 1
Number(false) // 0

// undefined：转成 NaN
Number(undefined) // NaN

// null：转成 0
Number(null) // 0

Number函数将字符串转为数值，要比 parseInt 函数严格很多。基本上，只有有一个字符无奈转成数值，整个字符串就会被转为NaN。

parseInt('42 cats') // 42
Number('42 cats') // NaN

下面代码中，parseInt一一解析字符，而 Number 函数整体转换字符串的类型。

另外，parseInt和 Number 函数都会主动过滤一个字符串前导和后缀的空格。

parseInt('\t\v\r12.34\n') // 12
Number('\t\v\r12.34\n') // 12.34

（2）对象

简略的规定是，Number办法的参数是对象时，将返回NaN，除非是蕴含单个数值的数组。

Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
Number([5]) // 5

之所以会这样，是因为 Number 背地的转换规则比较复杂。

1. 调用对象本身的 valueOf 办法。如果返回原始类型的值，则间接对该值应用 Number 函数，不再进行后续步骤。
2. 如果 valueOf 办法返回的还是对象，则改为调用对象本身的 toString 办法。如果 toString 办法返回原始类型的值，则对该值应用 Number 函数，不再进行后续步骤。
3. 第三步，如果 toString 办法返回的是对象，就报错。

String()

String函数能够将任意类型的值转化成字符串，转换规则如下。

（1）原始类型值

• 数值：转为相应的字符串。
• 字符串：转换后还是原来的值。
• 布尔值 ：true 转为字符串 "true"，false 转为字符串"false"。
• undefined：转为字符串"undefined"。
• null：转为字符串"null"。

String(123) // "123"
String('abc') // "abc"
String(true) // "true"
String(undefined) // "undefined"
String(null) // "null"

（2）对象

String办法的参数如果是对象，返回一个类型字符串；如果是数组，返回该数组的字符串模式。

String({a: 1}) // "[object Object]"
String([1, 2, 3]) // "1,2,3"

String办法背地的转换规则，与 Number 办法基本相同，只是调换了 valueOf 办法和 toString 办法的执行程序。

1. 先调用对象本身的 toString 办法。如果返回原始类型的值，则对该值应用 String 函数，不再进行以下步骤。
2. 如果 toString 办法返回的是对象，再调用原对象的 valueOf 办法。如果 valueOf 办法返回原始类型的值，则对该值应用 String 函数，不再进行以下步骤。
3. 如果 valueOf 办法返回的是对象，就报错。

Bolean()

Boolean()函数能够将任意类型的值转为布尔值。

它的转换规则绝对简略：除了以下五个值的转换后果为false，其余的值全副为true。

• undefined
• null
• 0（蕴含 -0 和+0）
• NaN
• ''（空字符串）

new 命令的原理

应用 new 命令时，它前面的函数顺次执行上面的步骤。

1. 创立一个空对象，作为将要返回的对象实例。
2. 将这个空对象的原型，指向构造函数的 prototype 属性。
3. 将这个空对象赋值给函数外部的 this 关键字。
4. 开始执行构造函数外部的代码。

也就是说，构造函数外部，this指的是一个新生成的空对象，所有针对 this 的操作，都会产生在这个空对象上。构造函数之所以叫“构造函数”，就是说这个函数的目标，就是操作一个空对象（即 this 对象），将其“结构”为须要的样子。

如果构造函数外部有 return 语句，而且 return 前面跟着一个对象，new命令会返回 return 语句指定的对象；否则，就会不论 return 语句，返回 this 对象。

var Vehicle = function () {
  this.price = 1000;
  return 1000;
};

(new Vehicle()) === 1000
// false

下面代码中，构造函数 Vehicle 的return语句返回一个数值。这时，new命令就会疏忽这个 return 语句，返回“结构”后的 this 对象。

然而，如果 return 语句返回的是一个跟 this 无关的新对象，new命令会返回这个新对象，而不是 this 对象。这一点须要特地引起留神。

var Vehicle = function (){
  this.price = 1000;
  return {price: 2000};
};

(new Vehicle()).price
// 2000

下面代码中，构造函数 Vehicle 的return语句，返回的是一个新对象。new命令会返回这个对象，而不是 this 对象。

另一方面，如果对一般函数（外部没有 this 关键字的函数）应用 new 命令，则会返回一个空对象。

function getMessage() {return 'this is a message';}

var msg = new getMessage();

msg // {}
typeof msg // "object"

下面代码中，getMessage是一个一般函数，返回一个字符串。对它应用 new 命令，会失去一个空对象。这是因为 new 命令总是返回一个对象，要么是实例对象，要么是 return 语句指定的对象。本例中，return语句返回的是字符串，所以 new 命令就疏忽了该语句。

new命令简化的外部流程，能够用上面的代码示意。

function _new(/* 构造函数 */ constructor, /* 结构函数参数 */ params) {
  // 将 arguments 对象转为数组
  var args = [].slice.call(arguments);
  // 取出构造函数
  var constructor = args.shift();
  // 创立一个空对象，继承构造函数的 prototype 属性
  var context = Object.create(constructor.prototype);
  // 执行构造函数
  var result = constructor.apply(context, args);
  // 如果返回后果是对象，就间接返回，否则返回 context 对象
  return (typeof result === 'object' && result != null) ? result : context;
}

// 实例
var actor = _new(Person, '张三', 28);