学习所得 | 前端道场

apply() 与 call() 用法浅析

apply() 与 call() 作为所有函数的方法，定义为：在指定this值与参数的情况下调用某个函数或方法。两者的区别是：call()方法接受的是若干个参数的列表，而apply()方法接受的是一个包含多个参数的数组。

这两个方法的关键点在于指定this与参数，所以我们以此为切入点，看看在实际的工作中有哪些用法。

使用`apply()`支持可变参数

所有的语言，有一些我们经常要做的事情，似乎都被语言的开发人员莫名其妙的忽略了，JavaScript 也不例外。比如查找数组中的最小值与最大值。在 JavaScript 中似乎没有这两种功能，但如果随意探索的话，可能会发现Math对象有两个名为min()与max()的方法。

一开始我们认为，这些方法可能就是我们想要的答案，但测试以后，我们发现第个方法都需要可变长度的参数列表，而不是数组。这根本不能满足我们的需求，也就是说，Math.max()的调用，需要像下面这样：

var largest= Math.max(1, 2);
var largest= Math.max(1, 2, 3);
var largest= Math.max(1, 2, 3, 4);

var largest= Math.max(1, 2);

var largest= Math.max(1, 2, 3);

var largest= Math.max(1, 2, 3, 4);

查看全文

JavaScript 中三种转换为数字类型的方式

JavaScript有三种将其它类型转换为数字类型的方式:parseInt()parseFloat()Number()。parseInt()与parseFloat()只能在 String 类型上调用。而Number()不仅限于 String 类型，比如Date类型上也可以使用。

`parseInt()`

在判断字符串是否是数字值前，parseInt()和parseFloat()都会仔细分析该字符串。

parseInt()方法首先查看位置 0 处的字符，判断它是否是个有效数字；如果不是，该方法将返回NaN，不再继续执行其他操作。但如果该字符是有效数字，该方法将查看位置 1 处的字符，进行同样的测试。这一过程将持续到发现非有效数字的字符为止，此时parseInt()将把该字符之前的字符串转换成数字。

例如，如果要把字符串 “12345red” 转换成整数，那么parseInt()将返回 12345，因为当它检查到字符 r 时，就会停止检测过程。

字符串中包含的数字字面量会被正确转换为数字，比如 “0xA” 会被正确转换为数字 10。不过，字符串 “22.5” 将被转换成 22，因为对于整数来说，小数点是无效字符。

查看全文

不同浏览器与不同字体，默认 line-height 的表现差异

今天在计算文字填充元素高度遇到一个有意思的东西，所以分享出来，首先有如下代码片段：

<style>
body {
  margin: 0;
  font-size: 12px;
}

ul {
  background: #ddd;
  margin: 15px;
  padding: 5px;
}

li {
  background: #aaa;
  margin: 20px;
  padding: 10px;
  list-style: none;
}
</style>
<ul>
  <li id="line_height">Lorem ipsum dolor sit amet, consectetur.</li>
</ul>

<style>

body {

margin: 0;

font-size: 12px;

}

ul {

background: #ddd;

margin: 15px;

padding: 5px;

}

li {

background: #aaa;

margin: 20px;

padding: 10px;

list-style: none;

}

</style>

<ul>

<li id="line_height">Lorem ipsum dolor sit amet, consectetur.</li>

</ul>

本以为li的高度会是 32px ,结果在 Firefox 中的高度却是 35px 。再仔细一看，原本以为 12px 的字体高度，结果却是 15px：

查看全文

MongoDB 副本集的单服务器实现

生产环境中的单服务器副本集意义不大，所以本文仅供学习使用。

多台服务器可以使用主机名区分不同的副本集成员，但单服务器只能使用端口号进行区分，本文将实现一包含三个 mongod 服务器的副本集。

说明：文中，我将使用 Cmder 命令行辅助工具，它集成了git bash 与大部分 linux 命令，并支持 Tab 补全，可以打开多个标签页面，会极大的方便我们的操作。

因涉及的参数较多，所以我建议使用配置文件的方式启动 mongod，并且每个 mongod 实例都需要不同的端口，数据库，与日志文件。假设我们的副本集名称是“rs0”，目录结构与其中的一个配置如下：

查看全文

JavaScript 中的存取器

在 ES5.1 中，定义了对象的两种存取器实现方式，对象直接量语法与Object.defineProperty()方法

直接量语法

定义存取器属性最简单的方法是使用对象直接量语法的一种扩展写法：

var object = {
    get property() {/**/},
    set property(value) {/**/}
};

var object = {

get property() {/**/},

set property(value) {/**/}

};

查看全文

JavaScript 的作用域链浅析

JavaScript 是基于词法作用域的语言：通过阅读包含变量定义在内的数行源代码就能知道变量的作用域。

一些类 C 的语言是使用块级作用域（block scope），花括号内的第一段代码都具有各自的作用域，而且变量在声明它们的代码之外是不可见的。

而 JavaScript 中没有块级作用域，取而代之地使用了函数作用域（function scope），即词法作用域：变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义。词法作用域意味着变量在声明之前甚至已经可用，JavaScript的这个特性被非正式地称为声明提前（hoisting），如下代码：

var scope = "global";
function fun() {
    console.log(scope); //undefined
    var scope = "local"; //初始化
    console.log(scope); //"local"
}

var scope = "global";

function fun() {

console.log(scope); //undefined

var scope = "local"; //初始化

console.log(scope); //"local"

}

继续阅读

Function.prototype.bind() 的妙用–修改 this 指向

除了 ES6中的箭头函数，ES5 中如何修正 setTimeout()，$.ajax 等等中的”this”指向不正确。

假设当前页面上有一个 ID 为"btn_demo"的按钮，我想点击之后三秒改变背景色，第一直觉可能会写出以下代码：

$("#btn_demo").on("click",function(){
    setTimeout(function(){
        this.style.backgroundColor="blue";
    },3000);
});

$("#btn_demo").on("click",function(){

setTimeout(function(){

this.style.backgroundColor="blue";

},3000);

});

查看全文

理解 JavaScript：不可变的原始值与可变的对象引用

JavaScript 中的原始值（undefained、null、布尔值、数字和字符串）与引用值（对象，数组，函数等）有着根本的区别。

存储方式

原始值: 存储在栈（stack）中的简单数据段，也就是说，它们的值直接存储在变量访问的位置。
引用值: 存储在堆（heap）中的对象，也就是说，存储在变量处的值是一个指针（point），指向存储对象的内存处。

为变量赋值时，JavaScript 的解释程序必须判断该值是原始类型，还是引用类型。要实现这一点，解析程序则需尝试判断该值是否为 JavaScript 的原始类型之一，即 Undefined、Null、Boolean、Number 和 String 型。由于这些原始类型占据的空间是固定的，所以可将他们存储在较小的内存区域——栈中。这样存储便于迅速查寻变量的值。

查看全文

学习 TypeScript：Classes

TypeScript 提前实现了 ES6 中经典的面向对象的类，官网教程：Classes

简单的例子

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}
var greeter: Greeter;
greeter = new Greeter("world");
alert(greeter.greet());

class Greeter {

greeting: string;

constructor(message: string) {

this.greeting = message;

}

greet() {

return "Hello, " + this.greeting;

}

var greeter: Greeter;

greeter = new Greeter("world");

alert(greeter.greet());

查看全文

使用apply()支持可变参数

parseInt()

直接量语法

存储方式

简单的例子

使用`apply()`支持可变参数

`parseInt()`