https://github.com/lydiahallie/javascript-questions

https://github.com/lydiahallie/javascript-questions/blob/master/README-zh_CN.md

let

111：let的作用区块

What’s the output?

1
2
3
4
5
6
7
8
9
10

let name = 'Lydia'

function getName() {
  console.log(name)
  let name = 'Sarah'
}

getName()

// ReferenceError

Each function has its own execution context (or scope). The getName function first looks within its own context (scope) to see if it contains the variable name we’re trying to access. In this case, the getName function contains its own name variable: we declare the variable name with the let keyword, and with the value of 'Sarah'.

Variables with the let keyword (and const) are hoisted, but unlike var, don’t get initialized. They are not accessible before the line we declare (initialize) them. This is called the “temporal dead zone”. When we try to access the variables before they are declared, JavaScript throws a ReferenceError.

If we wouldn’t have declared the name variable within the getName function, the javascript engine would’ve looked down the scope chain. The outer scope has a variable called name with the value of Lydia. In that case, it would’ve logged Lydia.

yield

112：yield的相关性质，待学习

What’s the output?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

function* generatorOne() {
  yield ['a', 'b', 'c'];
}

function* generatorTwo() {
  yield* ['a', 'b', 'c'];
}

const one = generatorOne()
const two = generatorTwo()

console.log(one.next().value)
console.log(two.next().value)

// ['a', 'b', 'c'] and a

With the yield keyword, we yield values in a generator function. With the yield* keyword, we can yield values from another generator function, or iterable object (for example an array).

In generatorOne, we yield the entire array ['a', 'b', 'c'] using the yield keyword. The value of value property on the object returned by the next method on one (one.next().value) is equal to the entire array ['a', 'b', 'c'].

1
2

console.log(one.next().value) // ['a', 'b', 'c']
console.log(one.next().value) // undefined

In generatorTwo, we use the yield* keyword. This means that the first yielded value of two, is equal to the first yielded value in the iterator. The iterator is the array ['a', 'b', 'c']. The first yielded value is a, so the first time we call two.next().value, a is returned.

1
2
3
4

console.log(two.next().value) // 'a'
console.log(two.next().value) // 'b'
console.log(two.next().value) // 'c'
console.log(two.next().value) // undefined

operator

113：中的立即执行函数

What’s the output?

1
2
3

console.log(`${(x => x)('I love')} to program`)

// I love to program

Expressions within template literals are evaluated first. This means that the string will contain the returned value of the expression, the immediately invoked function (x => x)('I love') in this case. We pass the value 'I love' as an argument to the x => x arrow function. x is equal to 'I love', which gets returned. This results in I love to program.

objects to null setInterval

114：垃圾回收机制，和setInterval的性质

What will happen?

1
2
3
4
5
6
7
8
9

let config = {
  alert: setInterval(() => {
    console.log('Alert!')
  }, 1000)
}

config = null

// The setInterval callback will still be called every second

Normally when we set objects equal to null, those objects get garbage collected as there is no reference anymore to that object. However, since the callback function within setInterval is an arrow function (thus bound to the config object), the callback function still holds a reference to the config object. As long as there is a reference, the object won’t get garbage collected. Since it’s not garbage collected, the setInterval callback function will still get invoked every 1000ms (1s).

Map

115：Map中key的特性

Which method(s) will return the value 'Hello world!'?

1
2
3
4
5
6
7
8
9
10
11
12
13

const myMap = new Map()
const myFunc = () => 'greeting'

myMap.set(myFunc, 'Hello world!')

//1
myMap.get('greeting')
//2
myMap.get(myFunc)
//3
myMap.get(() => 'greeting')

// 2

When adding a key/value pair using the set method, the key will be the value of the first argument passed to the setfunction, and the value will be the second argument passed to the set function. The key is the function () => 'greeting'in this case, and the value 'Hello world'. myMap is now { () => 'greeting' => 'Hello world!' }.

1 is wrong, since the key is not 'greeting' but () => 'greeting'. 3 is wrong, since we’re creating a new function by passing it as a parameter to the get method. Object interact by reference. Functions are objects, which is why two functions are never strictly equal, even if they are identical: they have a reference to a different spot in memory.

reference

116：默认参数和引用，这里可以给person添加一个 food:[1,2,3]

What’s the output?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

const person = {
  name: "Lydia",
  age: 21
}

const changeAge = (x = { ...person }) => x.age += 1
const changeAgeAndName = (x = { ...person }) => {
  x.age += 1
  x.name = "Sarah"
}

changeAge(person)
changeAgeAndName()

console.log(person)

// {name: "Lydia", age: 22}

Both the changeAge and changeAgeAndName functions have a default parameter, namely a newly created object { ...person }. This object has copies of all the key/values in the person object.

First, we invoke the changeAge function and pass the person object as its argument. This function increases the value of the age property by 1. person is now { name: "Lydia", age: 22 }.

Then, we invoke the changeAgeAndName function, however we don’t pass a parameter. Instead, the value of x is equal to a new object: { ...person }. Since it’s a new object, it doesn’t affect the values of the properties on the person object. person is still equal to { name: "Lydia", age: 22 }.

setter

121.setter的返回值

What’s the output?

1
2
3
4
5
6
7
8
9
10

const config = {
  languages: [],
  set language(lang) {
    return this.languages.push(lang);
  }
};

console.log(config.language);

// undefined

The language method is a setter. Setters don’t hold an actual value, their purpose is to modify properties. When calling a setter method, undefined gets returned.

async await

124.async 和 await 相关

What’s the output?

1
2
3
4
5
6
7
8
9
10
11
12
13
14

async function* range(start, end) {
  for (let i = start; i <= end; i++) {
    yield Promise.resolve(i);
  }
}

(async () => {
  const gen = range(1, 3);
  for await (const item of gen) {
    console.log(item);
  }
})();

// 1 2 3

The generator function range returns an async object with promises for each item in the range we pass: Promise{1}, Promise{2}, Promise{3}. We set the variable gen equal to the async object, after which we loop over it using a for await ... of loop. We set the variable item equal to the returned Promise values: first Promise{1}, then Promise{2}, then Promise{3}. Since we’re awaiting the value of item, the resolved promsie, the resolved values of the promises get returned: 1, 2, then 3.

reference

127.reference destructuring 相关

What’s the output?

1
2
3
4
5
6

const spookyItems = ["👻", "🎃", "🕸"];
({ item: spookyItems[3] } = { item: "💀" });

console.log(spookyItems);

// ["👻", "🎃", "🕸", "💀"]

By destructuring objects, we can unpack values from the right-hand object, and assign the unpacked value to the value of the same property name on the left-hand object. In this case, we’re assigning the value “💀” to spookyItems[3]. This means that we’re modifying the spookyItems array, we’re adding the “💀” to it. When logging spookyItems, ["👻", "🎃", "🕸", "💀"] gets logged.

const

129.const 的暂时性死区

What’s the output?

1
2
3
4
5
6
7
8
9
10

const randomValue = 21;

function getInfo() {
  console.log(typeof randomValue);
  const randomValue = "Lydia Hallie";
}

getInfo();

// ReferenceError

Variables declared with the const keyword are not referencable before their initialization: this is called the temporal dead zone. In the getInfo function, the variable randomValue is scoped in the functional scope of getInfo. On the line where we want to log the value of typeof randomValue, the variable randomValue isn’t initialized yet: a ReferenceError gets thrown! The engine didn’t go down the scope chain since we declared the variable randomValue in the getInfo function.

async await

130.async await 加上 try catch finally

What’s the output?

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const myPromise = Promise.resolve("Woah some cool data");

(async () => {
  try {
    console.log(await myPromise);
  } catch {
    throw new Error(`Oops didn't work`);
  } finally {
    console.log("Oh finally!");
  }
})();

// Woah some cool data 
// Oh finally!

In the try block, we’re logging the awaited value of the myPromise variable: "Woah some cool data". Since no errors were thrown in the try block, the code in the catch block doesn’t run. The code in the finally block always runs, "Oh finally!" gets logged.

call stack

133.考察的是代码的执行顺序

What’s the output?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

const myPromise = Promise.resolve(Promise.resolve("Promise!"));

function funcOne() {
  myPromise.then(res => res).then(res => console.log(res));
  setTimeout(() => console.log("Timeout!", 0));
  console.log("Last line!");
}

async function funcTwo() {
  const res = await myPromise;
  console.log(await res);
  setTimeout(() => console.log("Timeout!", 0));
  console.log("Last line!");
}

funcOne();
funcTwo();

// Last line! Promise! Promise! Last line! Timeout! Timeout!

First, we invoke funcOne. On the first line of funcOne, we call the myPromise promise, which is an asynchronous operation. While the engine is busy completing the promise, it keeps on running the function funcOne. The next line is the asynchronous setTimeout function, from which the callback is sent to the Web API. (see my article on the event loop here.)

Both the promise and the timeout are asynchronous operations, the function keeps on running while it’s busy completing the promise and handling the setTimeout callback. This means that Last line! gets logged first, since this is not an asynchonous operation. This is the last line of funcOne, the promise resolved, and Promise! gets logged. However, since we’re invoking funcTwo(), the call stack isn’t empty, and the callback of the setTimeout function cannot get added to the callstack yet.

In funcTwo we’re, first awaiting the myPromise promise. With the await keyword, we pause the execution of the function until the promise has resolved (or rejected). Then, we log the awaited value of res (since the promise itself returns a promise). This logs Promise!.

The next line is the asynchronous setTimeout function, from which the callback is sent to the Web API.

We get to the last line of funcTwo, which logs Last line! to the console. Now, since funcTwo popped off the call stack, the call stack is empty. The callbacks waiting in the queue (() => console.log("Timeout!") from funcOne, and () => console.log("Timeout!") from funcTwo) get added to the call stack one by one. The first callback logs Timeout!, and gets popped off the stack. Then, the second callback logs Timeout!, and gets popped off the stack. This logs Last line! Promise! Promise! Last line! Timeout! Timeout!

export default

134.考察 export default 和 import * as

How can we invoke sum in index.js from sum.js?

1
2
3
4
5
6
7
8
9

// sum.js
export default function sum(x) {
  return x + x;
}

// index.js
import * as sum from "./sum";

// sum.default(4)

For the sum example, it means that the imported value sum looks like this:

1

{ default: function sum(x) { return x + x } }

We can invoke this function, by calling sum.default

class

139.考察 class 中的变量

What’s the output?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

class Counter {
  #number = 10

  increment() {
    this.#number++
  }

  getNum() {
    return this.#number
  }
}

const counter = new Counter()
counter.increment()

console.log(counter.#number)

// SyntaxError

In ES2020, we can add private variables in classes by using the #. We cannot access these variables outside of the class. When we try to log counter.#number, a SyntaxError gets thrown: we cannot acccess it outside the Counter class!

yield

140.考察 yield

✨ SOMETHING IS MISSING HERE ✨ 这里应该填什么

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

const teams = [
  {
    name: "Team 1",
    members: ["Paul", "Lisa"]
  },
  {
    name: "Team 2",
    members: ["Laura", "Tim"]
  }
];

function* getMembers(members) {
  for (let i = 0; i < members.length; i++) {
    yield members[i];
  }
}

function* getTeams(teams) {
  for (let i = 0; i < teams.length; i++) {
    // ✨ SOMETHING IS MISSING HERE ✨
    yield* getMembers(teams[i].members)
  }
}

const obj = getTeams(teams);
console.log(obj.next()) // { value: "Paul", done: false }
console.log(obj.next()) // { value: "Lisa", done: false }

In order to iterate over the members in each element in the teams array, we need to pass teams[i].members to the getMembers generator function. The generator function returns a generator object. In order to iterate over each element in this generator object, we need to use yield*.

If we would’ve written yield, return yield, or return, the entire generator function would’ve gotten returned the first time we called the next method.

博主更新到了 144 题。

为什么书呆子不受欢迎

孩子们欺负书呆子的另一个原因是为了让自己感到好受一些。当你踩水的时候，你把水踩下去，你的身体就会被托起来。同样，在任何社会等级制度中，那些对自己没自信的人就会通过虐待他们眼中的下等人来突显自己的身份。我已经意识到，正是因为这个原因，在美国社会中底层白人是对待黑人最残酷的群体。

难怪聪明的小孩读中学时往往是不快乐的。他们有其他的兴趣，没有多余的精力用来使自己更受欢迎。你在其他地方有所得，就会在这个地方有所失。

在抽象意义上，成年人知道孩子的行为有时是极端残酷的，这正如我们在抽象意义上知道贫穷国家的人民生活极端艰难。但是，像所有人一样，成年人不喜欢揪住不放这种令人不快的事实。你不去埋头探寻，就不会发现具体的证据，就会永远以为这件事是抽象的。

真实世界的特点是，它极其庞大。如果总体足够大，即使是人数最少的少数派，只要聚集在一起，也能产生可观的力量。在真实世界中，书呆子在某些地方聚集起来，形成自己的社区，智力因素成为那里最被看重的东西。有时，这种因素甚至会以相反的形式表现出来，特别是在大学的数理学系，书呆子甚至会夸大笨拙，以显示自己的聪明。

公立学校肯定也有很优秀的老师。我读四年级时遇到的Mihalko老师就是一个精力充沛、充满想象力的老师。他使得那个学年如此令人难忘，以至于三十年后，他的学生依然在谈论这段往事。但是，像他这样的老师只是个别现象，无法改变整个体系。

我对许多美好的字眼都嗤之以鼻，比如“人格”、“正直”，因为成年人贬低了这些词。在他们嘴里，这些词似乎都是同一个意思——“听话”。一些孩子因为具备所谓的“人格”和“正直”，而受到夸奖，可是他们不是呆得像一头大笨牛，就是轻浮得像一个不动脑筋的吹牛者。如果“人格”和“正直”就是这种样子，我宁愿不要它们。

校园生活的真正问题是空虚。除非成年人意识到这一点，否则无法解决这个问题。可能意识到这个问题的成年人，是那些读书时就是书呆子的人。

对于书呆子来说，意识到学校并非全部的人生，也是很重要的事情。学校是一个很奇怪的、人为设计出来的体系，一半像是无菌室，一半像是野蛮洪荒之地。它就像人生一样，里面无所不包，但又不是事物的真实样子。它只是一个暂时的过程，只要你向前看，你就能超越它，哪怕现在你还是身处其中。

黑客与画家

黑客与画家的共同之处，在于他们都是创作者。与作曲家、建筑师、作家一样，黑客和画家都是试图创作出优秀的作品。

要是黑客写论文，最好的情况下，写出来的也只是一些补充性的描述，不会具有太大的实际价值。黑客先开发了一个很酷的软件，然后就写一篇论文，介绍这个软件。论文变成了软件成果的展示。这种结合是错误的，常常会产生问题。为了配合论文研究性的主题，你很容易就把工作重点从开发优美的软件转移到开发一些丑陋的东西。优美的软件并不总是论文的合适题材。

那么，为什么大学和实验室还把论文数量作为考核黑客工作的指标呢？这种事情其实在日常生活中普遍存在，比如，我们使用简单的标准化测试考核学生的“学术能力倾向”（scholastic aptitude），再比如，我们使用代码的行数考核程序员的工作效率。这样的考核容易实施，而容易实施的考核总是首先被采用。

你把整个程序想清楚的时间点，应该是在编写代码的同时，而不是在编写代码之前，这与作家、画家和建筑师的做法完全一样。

但是，我认识的黑客，没有一个人喜欢用静态类型语言编程。我们需要的是一种可以随意涂抹、擦擦改改的语言，我们不想正襟危坐，把一个盛满各种变量类型的茶杯，小心翼翼放在自己的膝盖上，为了与一丝不苟的编译器大婶交谈，努力地挑选词语，确保变量类型匹配，好让自己显得礼貌又周到。

大多数黑客不是通过大学课程学会编程的，他们从实践中学习，13岁时就自己动手写程序了。即使上了大学，黑客学习编程依然主要通过自己写程序。

同样地，黑客可以通过观看优秀的程序学会编程，不是看它们的执行结果，而是看它们的源代码。开源运动最鲜为人知的优点之一，就是使得学习编程变得更容易了。

一种好的编程语言，应该像油画颜料一样，能够使得我们很从容地改变想法。动态类型语言在这一点上就是赢家，因为你不必提前就设置好各种变量的数据类型。不过我认为，编程语言灵活性的关键还不在这里，而在于这种语言应该非常抽象。最容易修改的语言就是简短的语言。

正确的合作方法是将项目分割成严格定义的模块，每一个模块由一个人明确负责。模块与模块之间的接口经过精心设计，如果可能的话，最好把文档说明写得像编程语言规范那样清晰。

判断一个人是否具备“换位思考”的能力有一个好方法，那就是看他怎样向没有技术背景的人解释技术问题。我们大概都认识这样一些人，他们在其他方面非常聪明，但是把问题解释清楚的能力却惊人低下。

在某些地方，自行其道、完全不替读者着想，被看成是高水平、高智商的表现，甚至都发展成了一种风尚。但是，我不觉得“换位思考”与智商之间存在任何联系。在数学和自然科学领域，你不用学习怎么向别人表达自己，也能取得很好的成就。而那些领域的人普遍很聪明，所以人们很自然地就把“聪明”与“不懂得换位思考”联系了起来。但是，世界上还有许许多多很笨的人，也同样不懂得“换位思考”。

所以，虽然我必须承认，眼下看来艺术家比黑客更酷，但是我们不应忘记，古时候绘画蓬勃发展的那些黄金年代，画家也不是像今天这样酷的。

不能说的话

触怒他人的言论是那些可能会有人相信的言论。我猜想，最令人暴跳如雷的言论，就是被认为说出了真相的言论。

智力越高的人，越愿意去思考那些惊世骇俗的思想观点。这不仅仅因为聪明人本身很积极地寻找传统观念的漏洞，还因为传统观念对他们的束缚力很小，很容易摆脱。从他们的衣着上你就可以看出这一点：不受传统观念束缚的人，往往也不会穿流行的衣服。

训练自己去想那些不能想的事情，你获得的好处会超过所得到的想法本身。

如果你能“远远地”跳出传统思维，提出让别人一听就脑袋轰一声炸开的惊人观点，那么你就在“小小地”跳出传统思维方面不会有任何困难。要知道，人们把后面的这种情况称为“创新”。

与笨蛋辩论，你也会变成笨蛋。这时你要明白，自由思考比畅所欲言更重要。如果你感到一定要跟那些人辩个明白，绝不咽下这口气，一定要把话说清楚，结果很可能是从此你再也无法自由理性地思考了。我认为这样做不可取，更好的方法是在思想和言论之间划一条明确的界线。在心里无所不想，但是不一定要说出来。我就鼓励自己在心里默默思考那些最无法无天的想法。你的思想是一个地下组织，绝不要把那里发生的事情一股脑说给外人听。

狂热分子试图引诱你说出真心话，但是你可以不回答。如果他们不放手，一定要你回答“到底是赞成还是反对我们”，你不妨以不变应万变：“我既不反对也不赞成。”不过，更好的回答是“我还没想好”。

具体来说，一种方法就是逐步把辩论提升到一个抽象的层次。假定总的来说，你反对言论审查制度。公开质疑的时候，你一定要小心，不要提到具体的被审查的电影或者书籍。否则，对手就会一把抓住那部电影或那本书籍，声称你支持的其实不是言论自由，而是那些被审查的内容。

阿瑟·米勒的隐喻太贴切了，直到今天，“非美委员会”的行为还经常被描述为“搜捕女巫”（witch-hunt）。

所有反击方法之中，最好的一种可能就是幽默。狂热分子都有一个共同点：缺乏幽默感。他们无法平静地对待笑话。在幽默王国中，他们闷闷不乐，就像满身笨重盔甲的骑士走进了溜冰场，无所适从。

不管问谁，人们都会说同样的话：“我们心态很开放，愿意接受新思想。”但是实际上，人们脑子里有一根界线，早就认准了什么是对的，什么是错的。换言之，在他们看来，所有观点都是可以讨论的，除了那些错的观点。

各种各样的标签可能是外部线索的最大来源，帮助你发现这个时代流行的是什么。如果一个命题是错的，这就是它所能得到的最坏评价，足够批判它了，根本不用再加上任何其他标签。但是，如果一个命题不是错的，却被加上各种标签，进行压制和批判，那就有问题。因为只要不是错的观点，就不应该被压制讨论。所以每当你看到有些话被攻击为出自××分子或××主义，这就是一个明确的信号，表明背后有问题。

小时候，每个人都会鼓励你不断成长，变成一个心智成熟、不再耍小孩子脾气的人。但是，很少有人鼓励你继续成长，变成一个怀疑和抵制社会错误潮流的人。

如果自己就是潮水的一部分，怎么能看见潮流的方向呢？你只能永远保持质疑。问自己，什么话是我不能说的？为什么？

良好的坏习惯

总体来看，黑客是不服从管教的，这往往会激怒管理当局。但是，不服从管教，其实是黑客之所以成为优秀程序员的原因之一。当公司的CEO装模作样发表演说时，他们可能会嘲笑他；当某人声称某个问题无解时，他们可能也会嘲笑他。如果硬要他们服从管教，他们也就无法成为优秀程序员了。

在计算机工业的历史上，新技术往往是由外部人员开发的，而且所占的比例可能要高于内部人员。

黑客是不服从管教的，这就是他们的本性。这也是美国人的本性。硅谷出现在美国，而不是出现在法国、德国、英国、日本，这绝非偶然。后面那些国家的人们总是按部就班地行事。

如果读美国开国元勋的自述，你会发现他们听起来很像黑客。“反抗政府的精神，”杰弗逊写道，“在某些场合是如此珍贵，我希望它永远保持活跃。”你能想象今天的美国总统也这么说吗？这些开国元勋就像直率的老祖母，用自己的言辞让他们的那些不自信的继承者感到了惭愧。他们提醒我们不要忘记自己从何而来，提醒我们，正是那些不服从管教的人们，才是美国财富与力量的源泉。

另一条路

向一个项目增加人手，往往会拖慢项目进程。随着参与人数的增加，人与人之间需要的沟通呈现指数式增长。人数越来越多，开会讨论各个部分如何协同工作所需的时间越来越长，无法预见的互相影响越多越大，产生的bug也越来越多。

如果你梦想写完代码，向服务器递交（check in），然后就可以回家，一天工作结束，这在互联网软件身上肯定没有实现的可能。互联网软件是活的，每时每刻都在你的服务器上运行。一个严重的bug影响的可能不是一个用户，而是所有用户。如果某个bug破坏了硬盘上的数据，更是必须马上修复，诸如此类。我们的心得是，第一年之后就不必每分钟都盯着服务器了，但是对新变动的部分一定要密切关注。不要在半夜里发布代码，然后回家睡觉。

一定数量的盗版对软件公司是有好处的。不管你的软件定价多少，有些用户永远都不会购买。如果这样的用户使用盗版，你并没有任何损失。事实上，你反而赚到了，因为你的软件现在多了一个用户，市场影响力就更大了一些，而这个用户可能毕业以后就会出钱购买你的软件。

关注贫富分化

技术无法使其变得更便宜的唯一东西，就是品牌。这正是为什么我们现在越来越多地听到品牌的原因。

如今，确实有很多人非常有钱，完全不必再去工作，他们之所以还在工作，不是因为感到社会压力，而是因为无所事事使人感到孤独和消沉。

即使是最先进的高科技公司，也有至少90％的工作没有乐趣、令人生厌。

如果我可以做选择，到底是生活在一个整体上非常富裕但是我个人相对贫穷的社会，还是生活在一个我个人相对非常富裕但是整体上非常贫穷的社会呢？我会选择第一个选项。如果我有小孩的话，可能哪一个选项更好还值得争论。但是，总的来说，你要避免的是绝对贫穷，而不是相对贫穷。如果必须在这两种社会之间做选择，根据目前的证据，我选择个人相对贫穷、但是整体上更富裕的社会。

设计者的品味

喜欢一件东西，却不知道为什么自己喜欢它，原因可能是这件东西是美的，但也可能因为他们的母亲也拥有同样的东西，或者杂志上某个明星使用它，或者仅仅因为它的价格很昂贵。人类的思想就是没有经过整理的无数杂念的混合。

好设计是简单的设计。

开源软件因为公开承认自己会有bug，反而使得代码的bug比较少。

优秀作品的秘诀就是：非常严格的品味，再加上实现这种品味的能力。

编程语言解析

一个操作所需的代码越多，就越难避免bug，也越难发现它们。

编译器不是高级语言唯一的实现方法，另一种方法是使用解释器，它的作用是实时地将代码解释为相应的机器语言，然后一行行运行。相比之下，编译器则是先将整个程序全部翻译成机器语言，然后再运行。

开放源码的优势还不仅局限于可以自己动手解决bug。这里的关键是所有人都可以参与。所以，开源软件就像一篇经受同行评议的论文。

如果你长期使用某种语言，你就会慢慢按照这种语言的思维模式进行思考。所以，后来当你遇到其他任何一种有重大差异的语言，即使那种语言本身并没有任何不对的地方，你也会觉得它极其难用。缺乏经验的程序员对于各种语言优缺点的判断经常被这种心态误导。

一些黑客只喜欢自己用的语言，反感其他所有的语言。另一些黑客则说所有的语言都一样。事实介于这两个极端之间。语言之间确实有差别，但是很难确定地说哪一种语言是最好的。这个领域依然还在快速发展。

一百年后的编程语言

效率低下的软件并不等于很烂的软件。一种让程序员做无用功的语言才真正称得上很烂。浪费程序员的时间而不是浪费机器的时间才是真正的无效率。

学习开车的时候，一个需要记住的原则就是要把车开直，不是通过将车身对齐画在地上的分隔线，而是通过瞄准远处的某个点。即使你的目标只在几米开外，这样做也是正确的。

梦寐以求的编程语言

简洁性是静态类型语言的力所不及之处。不考虑其他因素时，没人愿意在程序的头部写上一大堆的声明语句。只要计算机可以自己推断出来的事情，都应该让计算机自己去推断。举例来说，hello-world 本应该是一个很简单的程序，但是在Java语言中却要写上一大堆东西，这本身就差不多可以说明Java语言设计得有问题了。

我认为，未来50年中，编程语言的进步很大一部分与函数库有关。未来的函数库将像语言内核一样精心设计。优秀函数库的重要性将超过语言本身。某种语言到底是静态类型还是动态类型、是面向对象还是函数式编程，这些都不如函数库重要。

一种编程语言要想变得流行，最后一关就是要经受住时间的考验。没人想用一种会被淘汰的语言编程，这方面已经有很多前车之鉴了。所以，大多数黑客往往会等上几年，看看某一种新语言的势头，然后才真正考虑使用它。

我有一个朋友，他的客户第一次提出某种需求时，他很少理会。因为他知道人们有时候会想要自己并不真正需要的东西。为了避免浪费时间，只有当客户第三次或第四次提出同样的需求时，他才认真对待。这个时候客户可能已经很不高兴了，但是这至少保证他们提出的需求应该就是他们真正需要的东西。

你只需要不停地重复同一句话，最终人们将会开始倾听。人们真正注意到你的时候，不是第一眼看到你站在那里，而是发现过了这么久你居然还在那里。

为了写出优秀软件，你必须同时具备两种互相冲突的信念。一方面，你要像初生牛犊一样，对自己的能力信心万丈；另一方面，你又要像历经沧桑的老人一样，对自己的能力抱着怀疑态度。在你的大脑中，有一个声音说“千难万险只等闲”，还有一个声音却说“早岁哪知世事艰”。这里的难点在于你要意识到，实际上这两种信念并不矛盾。你的乐观主义和怀疑倾向分别针对两个不同的对象。你必须对解决难题的可能性保持乐观，同时对当前解法的合理性保持怀疑。

设计与研究

任何时候，代码都必须能够运行。如果你正在写的代码一个小时之后就可以看到运行结果，这好比让你看到不远处就是唾手可得的奖励，你因此会受到激励和鼓舞。

配置 alias

在 vue 中有时经常会因为引入文件的相对路径过长，这时可以在 vue.config.js 中配置一下别名。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

const path = require('path')

function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack(config) {
    config.resolve.alias
      .set('components', resolve('src/components'))
      .set('common', resolve('src/common'))
      .set('api', resolve('src/api'))
  }
}

上面的代码配置了 src 目录下的 components、common 和 api 这三个文件夹。

在 css 中引入

这里注意前面要加一个 ~

1
2

@import "~common/stylus/mixin"
@import "~common/stylus/variable"

在 JavaScript 中引入

1

import SupportIco from 'components/support-ico/support-ico'

1
2

// api 目录下有 index.js
import { getSeller } from 'api'

源码参考

在 /node_modules/@vue/cli-service/lib/config/base.js 中找到了下面的代码，也解释了 @ 是 src 目录的别名

1
2
3
4
5
6
7
8
9
10
11

api.chainWebpack(webpackConfig => {
  webpackConfig.resolve
    .alias
      .set('@', api.resolve('src'))
      .set(
        'vue$',
        options.runtimeCompiler
          ? 'vue/dist/vue.esm.js'
          : 'vue/dist/vue.runtime.esm.js'
      )
}