前端漫记

The new keyword in JavaScript can be quite confusing when it is first encountered, as people tend to think that JavaScript is not an object-oriented programming language.

• What is it?
• What problems does it solve?
• When is it appropriate and when not?

​ 作用域（Scope ）是 JavaScript 语言的基础概念之一，可能是让我在编写复杂程序的时候煎熬最多的。记不清多少次迷失在追踪函数到函数之间传递控制时 this 关键字指向的问题中了，我发现自己经常以各种令人困惑的方式扭曲我的代码，试图对理解变量在哪些地方可以访问的问题上保留一点理智。

​ 这篇文章将会正面解决问题，概述作用域和上下文的定义，测试两种允许我们操作上下文的 JavaScript 方法，并深入探讨我遇到过的 90% 的问题的解决方案。

译自官方文档—— Configuring HTTPS servers

要配置 HTTPS 服务器，必须在 server 区的监听（listen）套接字上允许 ssl 参数，同时要声明服务器证书和私钥文件的位置：

1
2
3
4
5
6
7
8
9

server {
    listen              443 ssl;
    server_name         www.example.com;
    ssl_certificate     www.example.com.crt;
    ssl_certificate_key www.example.com.key;
    ssl_protocols       TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers         HIGH:!aNULL:!MD5;
    ...
}

​ 服务器证书是一个公开的实体。它会被发送给所有连接到服务器的客户端。私钥是一个安全实体，应该被保存在一个限制访问的文件中，但是要允许 Nginx 的主线程可读。私钥也可以保存在和证书同一个文件中：

ssl_certificate     www.example.com.cert;
ssl_certificate_key www.example.com.cert;

​ 这种情况下文件的访问权限也应当被限制。尽管证书和私钥被保存在同一个文件中，只有证书会被发送给客户端。

​ ssl_protocols 和 ssl_ciphers 指令可以用来限制只允许高版本和强加密的 SSL/TLS 的连接。Nginx 默认使用 “ssl_protocols TLSv1 TLSv1.1 TLSv1.2” 和 “ssl_ciphers HIGH:!aNULL:!MD5”，所以通常不需要特意配置它们。要知道这些指令的默认配置变过几次。

介绍 JavaScript 原型

JavaScript 引擎默认提供了 Object() 构造函数和一个可以被 Object.prototype 引用到的匿名对象。

1
2

console.log(Object);
console.log(Object.prototype);

Object.prototype 对象有许多内置属性，例如 toString() ，valueOf()等等。也有一个名为 constructor 的属性，它指向 Object() 构造函数。

1

console.log(Object.prototype.constructor === Object); // true

假设原型代表一个函数，方块代表一个对象。下面的图形就描绘出了 Object() 函数和 Object.prototype 对象之间的关系：

原文：Understanding JavaScript Objects

如果你写过 C++，Java 或者 C#，那你通常会定义类，类是对象的蓝图，然后从这个类创建一些跟这个类具有相同属性和方法的对象。

JavaScript 面向对象编程的方式有所不同。JavaScript 中没有其他面向对象编程语言中的类的概念（ES6中才开始定义了类）。

JavaScript 将对象定义为一组包含了初始值，对象与函数的属性的无序集合。换句话说，对象就是一组键值对（哈希），值就是数据或者函数。

简介

JavaScript是一种松散类型。这并不意味着它就没有数据类型，只是变量的值或者 JavaScript 对象属性不需要为其分配特定类型的值，也不必总是保持相同的类型。JavaScript 可以自由地将一种类型的值转为他们使用变量的上下文中需要的类型。

JavaScript 的松散类型以及轻松的类型转换仍然拯救不了程序员们需要思考他们正在处理的值的实际类型。一个浏览器脚本中非常常见的错误就是，读取一个表单空间的 value 属性，用户应该在其中输入一个数字，然后将该值与另一个数字相加。因为表单空间的 value 属性其实是字符串（尽管其包含的字符序列表示的是一串数字），如果尝试将这串字符串与另一个值相加，即使另一个值碰巧是一个数字，结果也会导致第二个值被类型转换成一个字符串，然后拼接到第一个字符串的末尾。

这个问题源于 + 操作符的数字相加和字符串拼接的双重性质。因此，这个操作符的实际作用取决于上下文，只有操作符两边的操作数都是数字时， + 操作符才用作数值相加。除此之外，它都会将操作数转换成字符型，然后执行字符串拼接。

JavaScript的两种类型

JavaScript中有两种数据：初始值和对象。对象以外的类型就是初始值类型，初始值类型不包含方法。

JS中共有6中初始值类型：Boolean，Number，String，Null，Undefined，Symbol

很久以来，JavaScript 的发展过程中都不存在兼容性问题。新特性不断添加，但是并没有改变旧的功能。

这样的好处就是永远不会破坏已有的代码。但是不好的一面是，任何由 JavaScript 作者带来的错误或者设计缺陷都将永远伴随这门语言。

直到 ECMAScript 5（ES5）出现，状况才有所改观。它新增了语言特性的同时也修改了一些旧的特性。为了让代码能够正常工作，多数改动都是默认关闭的。开发者需要用 use strict 指令显示地启用它们。

原文：Element size and scrolling

我们可以从很多 JavaScript 属性中得到关于元素宽度，高度和几何特性的信息。

当在 JavaScript 中移动或者定位元素时，我们需要这些信息来计算坐标。

翻译原文：Index as a key is an anti-pattern

经常见到程序员用 index 作为列表项的 key 值传给 React 来渲染列表：

1
2
3
4
5
6

{todos.map((todo, index) =>
  <Todo
    {...todo}
    key={index}
  />
)}

这看起来还比较优雅，的确也消除了警告。但是这里有什么危险？