Get Started - 前言

But let me be clear: I don't think it's possible to ever fully know JS. That's not an achievement to be obtained, but a goal to strive after. You don't finish knowing everything about JS, you just keep learning more and more as you spend more time with the language. And the deeper you go, the more you revisit what you knew before, and you re-learn it from that more experienced perspective.

不要抱着“我可以完全了解JS”的心态来学习,这是一个不可实现的目标

All developers regularly struggle with some piece of code not working correctly, and 比较they can't figure out why. But far too often, JS developers will blame this on the language rather than admitting it's their own understanding that is falling short. These books serve as both the question and answer: why did it do this, and here's how to get it to do that instead.

不要把代码不工作归罪与语言本身有缺陷,是你自己不理解你使用的语言是如何(how)工作的

Don't binge these books; be patient and spread out your reading. Interleave reading with lots of practice on real code in your job or on projects you participate in. Wrestle with the opinions I've presented along the way, debate with others, and most of all, disagree with me! Run a study group or book club. Teach mini-workshops at your office. Write blog posts on what you've learned. Speak about these topics at local JS meetups.

不要把这书学死了,争论、记录心得、参加当地的聚会来分享自己的见解都是不错的选择

These books are meant to be a field-guide on your wanderings through JavaScript, from wherever you currently are with the language, to a place of deeper understanding. And the deeper you understand JS, the more questions you will ask and the more you will have to explore! That's what I find so exciting!

了解更多,探索更多

Get Started - Chapter 1: What Is JavaScript?

Further distancing the language from the Oracle-owned trademark, the official name of the language specified by TC39 and formalized by the ECMA standards body is ECMAScript. And indeed, since 2016, the official language name has also been suffixed by the revision year; as of this writing, that's ECMAScript 2019, or otherwise abbreviated ES2019.

自从2016开始,官方就使用"ES+年号"的方式来指代最新的ES版本,所以不要使用ES7或JS7这样的称呼,这只会使得人更加困惑,坚持使用"ES20XX"或者JS来称呼

"Java is to JavaScript as ham is to hamster." --Jeremy Keith, 2009

Java 和 JavaScript 的关系就像雷锋和雷峰塔

The TC39 committee is comprised of between 50 and about 100 different people from a broad section of web-invested companies, such as browser makers (Mozilla, Google, Apple) and device makers (Samsung, etc). All members of the committee are volunteers, though many of them are employees of these companies and so may receive compensation in part for their duties on the committee.

TC39 委员会的成员,有来自浏览器厂商的,也有来自设备厂商的,所有都是志愿者,并且可能会得到一笔津贴

In these cases, often TC39 will backtrack and simply choose to conform the specification to the reality of the web. For example, TC39 planned to add a contains(..) method for Arrays, but it was found that this name conflicted with old JS frameworks still in use on some sites, so they changed the name to a non-conflicting includes(..). The same happened with a comedic/tragic JS community crisis dubbed "smooshgate," where the planned flatten(..) method was eventually renamed flat(..).

一些趣闻,标准的制定并不是空中楼阁式的,会听取显示的声音

Developer Tools are... tools for developers. Their primary purpose is to make life easier for developers. They prioritize DX (Developer Experience). It is not a goal of such tools to accurately and purely reflect all nuances of strict-spec JS behavior. As such, there's many quirks that may act as "gotchas" if you're treating the console as a pure JS environment.

不要认为开发者工具反映了JS实际的运行方式,工具只是工具,是为了优化开发体验的,和JS实际的运行方式有区别

Paradigms are neither right nor wrong. They're orientations that guide and mold how programmers approach problems and solutions, how they structure and maintain their code.

编程的范式没有对错之分,JS 是一个多范式的语言,你可以在行的级别来选择不同的范式,而不用做一个一刀切的决定

backwards compatibility vs forwards compatibility

向后兼容和向前兼容

Code written in 1995—however primitive or limited it may have been!—should still work today. As TC39 members often proclaim, "we don't break the web!"

写在1995年的JS代码,今天仍可工作————向后兼容的例子

Being forwards-compatible means that including a new addition to the language in a program would not cause that program to break if it were run in an older JS engine. JS is not forwards-compatible, despite many wishing such, and even incorrectly believing the myth that it is.

向前兼容意味着,给语言增加了新的特性,其仍然可在较老的JS引擎上运行,JS显然不是向前兼容的语言,HTML和CSS由于指令式的特征,与JS相反,是向前兼容而不是向后兼容的语言,意识到JS是向后兼容的,可以让我们看到它带给Web的好处以及语言自身的限制

正式因为JS不是向前兼容的语言,才有了Babel这样的转译工具存在,不然我们只能写最老的浏览器上支持的写法了

Developers should focus on writing the clean, new syntax forms, and let the tools take care of producing a forwards-compatible version of that code that is suitable to deploy and run on the oldest-supported JS engine environments.

开发者应该专注于写干净的、新式语法的形式,让工具来转译,以使得代码可以运行在最古老的JS引擎上。

如果JS非向前兼容带来的gap不是语法上的,而是API层面的,例如老的JS引擎上缺少这个API,通常的做法就是加入polyfill (aka "shim").

The real reason it matters to have a clear picture on whether JS is interpreted or compiled relates to the nature of how errors are handled.

关于JS是解释型语言还是编译型语言的争论,不要停留在形式上(是否有二进制文件发布),而是要聚焦与错误处理

Get Started - Chapter 2: Surveying JS

It's very common to suggest that var should be avoided in favor of let (or const!), generally because of perceived confusion over how the scoping behavior of var has worked since the beginning of JS. I believe this to be overly restrictive advice and ultimately unhelpful. It's assuming you are unable to learn and use a feature properly in combination with other features. I believe you can and should learn any features available, and use them where appropriate!

任何feature都值得学习,关键看你怎么使用

If you stick to using const only with primitive values, you avoid any confusion of re-assignment (not allowed) vs. mutation (allowed)! That's the safest and best way to use const.

作者关于何时使用 const 的建议

Since the lying about such comparisons can be bothersome, it's best to avoid using === for them. For NaN comparisons, use the Number.isNaN(..) utility, which does not lie. For -0 comparison, use the Object.is(..) utility, which also does not lie. Object.is(..) can also be used for non-lying NaN checks, if you prefer. Humorously, you could think of Object.is(..) as the "quadruple-equals" ====, the really-really-strict comparison!

=== 从最严格的意义上来说,并不严格,例如比较两个 NaN 或者 -0 和 0

The == operator performs an equality comparison similarly to how the === performs it. In fact, both operators consider the type of the values being compared. And if the comparison is between the same value type, both == and === do exactly the same thing, no difference whatsoever.

与广为流传的 == 在比较时不考虑类型相反,== 和 === 在比较两个值的时候都会考虑类型,如果类型相同,== 和 === 做的其实一模一样

Get Started - Chapter 3: Digging to the Roots of JS

Closure is when a function remembers and continues to access variables from outside its scope, even when the function is executed in a different scope.

对闭包的精确定义,一个函数即使在不同的作用域中执行,仍可访问自身作用域外的变量

Scope is static and contains a fixed set of variables available at the moment and location you define a function, but a function's execution context is dynamic, entirely dependent on how it is called (regardless of where it is defined or even called from).

作用域(scope)和执行上下文(execution context)是不同的概念,作用域是静态的,在你定义函数的位置包含了一个固定的可访问变量的集合,但是一个函数的执行上下文是动态的,完全取决于函数式如何被调用的(和它是何处定义或从何处调用的无关)

One way to think about the execution context is that it's a tangible object whose properties are made available to a function while it executes. Compare that to scope, which can also be thought of as an object; except, the scope object is hidden inside the JS engine, it's always the same for that function, and its properties take the form of identifier variables available inside the function.

一个方式是把执行上下文设想成一个可感知的对象,它的属性是当函数执行的时候可以访问。对比作用域,作用域也可以被设想成对象,作用域对象隐藏于JS引擎中,对于函数来说总是一样的,并且它将属性以函数内可用的变量的形式暴露出来。

The benefit of this-aware functions—and their dynamic context—is the ability to more flexibly re-use a single function with data from different objects. A function that closes over a scope can never reference a different scope or set of variables. But a function that has dynamic this context awareness can be quite helpful for certain tasks.

动态的上下文的存在,使得单个函数可以使用来自不同的对象的数据(在执行某些特定任务的时候可能很有用),一个函数的作用域则不能动态指定

As you are getting started learning and knowing JS more closely, one of the most important skills you can practice and bolster is curiosity, and the art of asking "Why?" when you encounter something in the language.

待着好奇心,学会提问

You'll have to shift these things little by little, over time. Work on building consensus with your fellow developers on why it's important to re-visit and re-consider an approach. But do so with just one small topic at a time, and let before-and-after code comparisons do most of the talking. Bring everyone on the team together to discuss, and push for decisions that are based on analysis and evidence from the code rather than the inertia of "our senior devs have always done it this way."

保持批判性

There's no better way to learn code than to write it.

没有比写代码更好的学编程语言的方式了

If a function has a name, you the code author should include that name in the code, so that the reader does not have to infer that name from reading and mentally executing that function's source code. Even a trivial function body like x * 2 has to be read to infer a name like "double" or "multBy2"; that brief extra mental work is unnecessary when you could just take a second to name the function "double" or "multBy2" once, saving the reader that repeated mental work every time it's read in the future.

如果一个函数有名称,你作为代码的作者就应该在代码里包含,这样读者就不用从阅读和在脑海里执行函数来推测那个名称,即使是很小的函数体例如 x * 2 也需要被推测出姓名,例如 "bouble" 或者 "multBy2"; 这些额外的精神工作是不必要的,尤其是当你可以花费几秒钟的时间来给函数命名,给读者节约了许多未来的精神上的开销

All functions by default reference an empty object at a property named prototype. Despite the confusing naming, this is not the function's prototype (where the function is prototype linked to), but rather the prototype object to link to when other objects are created by calling the function with new.

所有的函数都默认地通过自己的 prototype 属性指向一个空对象,这个名字令人困惑,这不是函数自己的原型,而是当函数被当做构造函数调用时(new)创建出的对象的原型

This "prototypal class" pattern is now strongly discouraged, in favor of using ES6's class mechanism:

这种“原型类”的模式现在被强烈地不建议使用,使用ES6的class语法可以更清晰的表达面向类的模式

You Don't Know JS Yet Book 1 Notes的更多相关文章

  1. [De1CTF 2019]Giftbox 分析&&TPOP学习

    [De1CTF 2019]Giftbox 刚进来我以为是直接给了shell,恐怖如斯. 随便扔了个命令,之后就没然后了,hhh,截包发现可能存在sql注入. 然后我就不会了... what i lea ...

  2. Vue.js 和 MVVM 小细节

    MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...

  3. js学习笔记:操作iframe

    iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...

  4. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  5. JS调用Android、Ios原生控件

    在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...

  6. jquery和Js的区别和基础操作

    jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...

  7. 利用snowfall.jquery.js实现爱心满屏飞

    小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...

  8. node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理

    一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...

  9. JS正则表达式常用总结

    正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...

随机推荐

  1. Solution -「51nod 1514」美妙的序列

    \(\mathcal{Description}\)   Link.   称排列 \(\{p_n\}\) 美妙,当且仅当 \((\forall i\in[1,n))(\max_{j\in[1,i]}\{ ...

  2. Solution -「CF 1392H」ZS Shuffles Cards

    \(\mathcal{Description}\)   Link.   打乱的 \(n\) 张编号 \(1\sim n\) 的数字排和 \(m\) 张鬼牌.随机抽牌,若抽到数字,将数字加入集合 \(S ...

  3. DotNet Dictionary 实现简介

    一:前言 本来笔者对DotNet的Hashtable及Dictionary认识一直集中在使用上,一个直接用object 一个可以用泛型,以前也只大概看过Hashtable的实现.最近查MSDN时发现有 ...

  4. 如何结合phpstorm配置在docker中的xdebug

    作为一个资深的php开发者,我在之前的一篇文章里面也讲了如何搭建lnmp的docker镜像,这里不再赘述.在基于镜像运行容器中我也安装了xdebug,于是考虑用phpstorm来配置xdebug. 使 ...

  5. centos7挂载U盘,查看U盘文件

    .在根目录下创建挂载的目录:mkdir mnt/usb 2.查看U盘在系统中的命称:fdisk -l 3.使用mount命令挂载U盘:mount /dev/sdb1 mnt/usb,一半就是第一个 但 ...

  6. PON/产线测试解决方案

    第一章 方案背景与概述1.1 方案背景随着网络的高速发展与网络速率的不断提升,用户对网络产品的可靠性要求也越来 越高.网络产品的故障符合"浴盆曲线"规律,生产过程中的严格测试能够及 ...

  7. .Net Core之JWT授权

    一.什么是JWT 文章参考:https://www.leo96.com/article/detail/55 JSON Web令牌(JWT)是一个开放标准(RFC 7519),它定义 了一种紧凑且自包含 ...

  8. 生产环境想要对某个Pod排错、数据恢复、故障复盘有什么办法?

    生产环境想要对某个Pod排错.数据恢复.故障复盘有什么办法? k8s考点灵魂拷问9连击之5 考点之简单描述一下k8s副本集ReplicaSet有什么作用? 考点之为什么ReplicaSet将取代Rep ...

  9. 【基础知识】CPU 是如何工作的 |CPU 通过总线读取内存的工作方式

    一.简单cpu  是如何工作 方式讲解 CPU 的根本任务就是执行指令,对计算机来说最终都是一串由 0 和 1 组成的序列.CPU 从逻辑上可以划分成 3 个模块,分别是控制单元.运算单元和存储单元 ...

  10. 教程10--hexo搭建

    1.安装node.js 下载系统对应的node安装包一直下一步完成 2.安装git 参照git安装https://www.cnblogs.com/daxiang2008/p/10687616.html ...