javascript进阶

【背景】

工作是用VS,感觉太笨重,随便安装下就10G+,后来接触了JS,python这些只用几M的解释型语言,就很喜欢。

后来看过很多JS的教程,包括w3cschool的教程、JS权威指南、JS语言精粹......

写得不好,感觉没有说到点子上(仅代表个人感受)

最近看了《JavaScript启示录》英文版的。跟我们平常看的语法书思考角度不同,有一些【进阶】意义,所以就想把里面的一些东西摘出来,谈谈自己的理解。

 

【历史】

js是解释型语言,并且自出生起就是用于browser的,所以有很大局限性。

这个语言还没被放弃吧,因为2015年才提出了ECMAScript 6

还有微软也提出了兼容JS的新语言TypeScript

 

【正文】

1,构造器(Constructor)

javascript进阶_第1张图片 构造器

翻译:

(1)如果新建的函数(function)是构造器函数,并且打算用new来使用它,那函数命名的时候首字母最好大写:例如Person(),而不是person()。虽然这并不是必须的

(2)构造器函数里,有个奇怪的地方:函数内部对于this的使用。要记住,构造器函数只是个模具。当使用new来调用构造器函数时,它会新生成一个Object,然后构造器函数里的this就指代该Object。当然了,如果你使用该构造器函数却没有用new,那函数里的this就是指代该function的parent(js里的this大多数时候都是指:当前scope的parent。后面会再讲)

(3)想放弃构造器的使用、或者new的使用,也是可以的:你定义一个函数,在里面显示地申明一个Object,然后return它就可以了。

▲▲▲Personal

之前用js,心里一直没有构造器的想法;还有就是搞不懂为什么有时候用new有时候又不用(反正用new就是构造器了),算是一种思想吧(就是形式不重要,它后面的思想才重要);还有这个this也要记一下

 

2,字面量

javascript进阶_第2张图片 字面量的真正申明

翻译:

(js里面有2种变量类型:原始类型、复杂对象类型。像number/string/boolean这些就是原始的,然后function/array/object还有new出来的那些,就是复杂对象类型。虽然js里有这种说法:所有的变量都是object,)但是当变量是用字面量的形式申明,那它不会被当作是一个复杂的object,直到你申明的变量需要用到一些object的方法时。(这一句如果看不懂,就去查下字面量的意思。感觉这一段都不好翻译)比如:var charactersInFoo='foo'.length。这种时候,js就会在后台给这个字面量原始类型生成一个壳对象来包着原始值,用这个壳对象调用length属性,结束了再还原回原始类型。说这么多,只是想说明——js里的变量并不都是object,但它们可以表现得像object。

▲▲▲Personal

字面量是一种变量-variable,指,在申明变量时,用一些字符就代表被申明变量的类型

(应该是取 字如其人-见字如面 的意思,你只要看着这个变量,就知道它是什么类型的)

然后这一段就是说明了,字面量被申明后,它和object的区别与联系。

 

3,复杂变量类型的保存/复制

javascript进阶_第3张图片 复杂值是引用

翻译:

很重要的一点是:复杂值的保存与操作,是靠引用来实现的。(引用:你操作的只是一个地址,而不是真实的值。复杂值:function/array/object这3个是复杂对象)当你要复制复杂值时,这一点就很有用了。

 

 

▲▲▲Personal

在所有语言里,涉及到"引用"的部分,都是要注意的,因为你把一个值复制给另一个,你改了复制值,那原来的值也会跟着改变。(json形式变量复制时,可以先转成string,再转成json来赋值。可以避开引用)

 

4,复杂对象

javascript进阶_第4张图片 复杂对象

翻译:

复杂对象(complex object)也有别的写法:混合对象(composite objects)、或者引用类型(reference types)。如果这样说还不好理解,那js里面,除了原始值就是复杂值了。

 

 

▲▲▲Personal

这3个英文名词,很好地说明了它是个什么东西。

 

5,this

js里的this

翻译:

js里的this常常让人难以理解。记住:大部分时候,this被用在function里面,来指代包含该function的object(就是指代parent),下面几种是特殊情况:构造器里面的this;用了call()/apply()后的this。

▲▲▲Personal

js里面的this概念是比较重要的。它的使用场景有4种:(1)直接一个function里面用this,那this就指代window;(2)如果某object里面有属性是function,那function里面的this就指代该object;(3)构造器里的this,用new调用该构造器后,this指代新生成的object;(4)用call()/apply()调用函数时,括号里第一个参数就是this。

分别写代码试一试,就很好理解了。

 

6,调用function

javascript进阶_第5张图片 调用函数

翻译:

函数调用有下面4种方式:直接调用;对象属性调用;构造器调用;call/apply调用

 

 

 

▲▲▲Personal

原来没想到会有这么多种方式,所以也贴一下。

直接调用:在function名字后面加括号就可以了。

对象属性调用。对象.属性()。(在这本书里,它是区分function/method的,它的method是指对象里面某属性是function,那么它就是method)

 

7,作用域

javascript进阶_第6张图片 scope

翻译:

作用域,就是指执行代码的上下文/环境。JS里的作用域有3种类型:全局作用域、局部作用域(也叫函数作用域)、eval作用域。

 

▲▲▲Personal

js的作用域跟其它语言不太一样。它只有2个域(书里写了还有个eval,感觉这个没什么作用)——一个全局的,一个函数内的。

特别的,如果你在function内申明变量不用var的话,它是全局的。

还有,用{}括起来的一段代码,它不会独立成作用域。(其它语言会)

下面举了2个例子

function zz(){var kk=1;console.log(kk);(function (){var kk=2;console.log(kk)})();console.log(kk)}//1 2 1
function zz(){var kk=1;console.log(kk);if(1==1){var kk=2;console.log(kk)};console.log(kk)}//1 2 2


8,闭包的由来及定义

The scope chain is created before you invoke a function. Because of this, we can create
closures. For example, we can have a function return a nested function to the global
scope, yet our function can still access, via the scope chain, its parent function’s scope.Below, we define a parentFunction that returns an anonymous function, and we call
the returned function from the global scope. Because our anonymous function was
defined as being contained inside of parentFunction, it still has access to parentFunc
tion’s scope when it is invoked. This is called a closure

翻译:

作用域链在你调用函数前,就会被制造出来。根据这一点,我们可以构建闭包。

▲▲▲Personal

之前说了作用域,闭包的出现,就是让父级作用域可以调用子级作用域里的值

它说的,是作用域链的这个特性,让我们可以构建闭包。这个我就不太理解了。

还有,js里有原型链(prototype chain),作用域链(scope chain),头一个是用来实现继承的,后一个是方便变量调用,感觉原理差不多。是觉得这2个东西不太重要,所以我没有挑出来说。

//闭包的例子
var func=function(){var count=0;return function(){return count++;};}()
func()//0
func()//1
func()//2

 

----------------------------------------------------The End------------------------------------------------------

书是已经看完了,才150页。但过一段时间肯定又记不得了

你可能感兴趣的:(随笔,前端,JS,javascript)