你不知道的JavaScript-上卷の读书笔记

本书主要从两个部分来进行阐述:作用域与闭包、this与对象原型。

一  作用域与闭包

1—  作用域

对JavaScript而言,大部分情况下编译发生在代码执行前的几微妙的时间内。在我们所讨论的作用域背后,JavaScript引擎为保证性能最佳做出了努力,如JIT,可以延迟编译或重编译。

引擎=>从头到尾负责整个JavaScript程序的编译及执行过程

编译器=>负责语法分析及代码生成等

作用域=>负责收集并维护由所有声明的标识符组成的一系列查询,并实施一套严格的规则,确定当前执行的代码对这些标识符的访问权限。

变量的赋值:首先编译器会在当前作用域中声明一个变量(如果之前没有声明过);然后在运行时引擎会在作用域中查找该变量,找到就对其进行赋值。

LHS:当变量出现在赋值操作的左侧时进行LHS查询。赋值操作的目标是谁(LHS)

RHS:当变量出现在赋值操作的右侧时进行RHS查询。谁是赋值操作的源头(RHS)

作用域是根据名称查找变量的一套规则,用于确定在何处以及如何查找变量。如果查找的目的是对变量进行赋值,则执行LHS查询;如果查找的目的是获取变量的值,则执行RHS查询。赋值操作会导致LHS查询。=操作符或调用函数时传入参数的操作都会导致关联作用域的赋值操作。当一个函数嵌套在另一个函数中时,就发生了作用域的嵌套。因此,当当前作用域中找不到某个变量时,引擎就会在其嵌套的外层作用域中继续查找,直到找到该变量或者到达最外层作用域为止。

不成功的RHS引用会导致抛出ReferenceError异常。不成功的LHS引用会导致自动隐式地创建一个全局变量(非严格模式下),该变量会使用LHS引用的目标作为标识符,或者抛出ReferenceError异常(严格模式下)。

2—  词法作用域

词法作用域:定义在词法阶段的作用域,即由你在写代码时将变量和函数作用域写在哪里决定,即函数或变量声明时所处的位置决定。

3—  函数作用域

函数作用域:属于这个函数的全部变量都可以在整个函数的范围内使用及复用。

可以把变量和函数包裹在一个函数的作用域中,然后用这个作用域来隐藏它们。这可以避免同名标识符间的冲突,也可以起到保护内部变量和函数的作用。

函数声明:function是声明中的第一个词;函数表达式不是以function开头。函数声明与函数表达式的主要区别在于它们的名称标识符将会绑定在何处。

匿名函数表达式:没有名称标识符。缺点:匿名函数在栈追踪中不会显示出有意义的函数名,使得调试困难;不利于自身调用;可读性不友好。Ps:始终给函数表达式命名为最佳实践。

立即执行函数:函数被包含在一对()括号内部,由此成了一个表达式,通过在末尾加上另外一个()可以立即执行该函数。

立即执行函数的两种书写方式:1. (function(){…})()  2. (function(){…}())

Ps:立即执行函数可以指定一个函数名,也可以传入参数。

Ps:任何声明在某个作用域内的变量,都将附属于这个作用域。

4—  提升

函数和变量声明从它们在代码中出现的位置被移动到了所在你作用域的最顶端,这个过程叫作提升。

函数声明与变量声明都会被提升,ps:函数声明先被提升,变量声明后被提升。

声明本身会被提升,而包括函数表达式的赋值在内的赋值操作并不会被提升。

5—  作用域闭包

闭包:函数在它本身的词法作用域之外执行的,或者,可以通过闭包发现当前词法作用域之外的变量。

    function foo(){
        var a=2;
        function bar(){
          console.log(a);
     }
       return bar;
  }
   var baz=foo();
   baz();

ps: 在定时器、时间监听器、ajax请求、跨窗口通信、Web Workers或者其他异步或同步任务中,只要使用了回调函数,实际上是在使用闭包。

 for(var i=1;i<=5;i++){

  setTimeout(function timer(){

   console.log(i);

},i*1000);

}

这段代码会在运行时以每秒一次的频率输出5次6.该循环终止的条件是i不再<=5,条件首次成立时i的值为6,因此最终循环结束时i值为6.尽管循环中的五个函数是在各自迭代中分别定义的,但它们都被封闭在一个共享的全局作用域中,实际上只有一个i。为了依次输出1到5,有以下几种方法:

(1)需要自己的变量,用来在每个迭代中存储i的值  

     for(var i=1;i<=5;i++){

  (function(j){

var j=I;

setTimeout(function timer(){

    console.log(j);

} ,j*1000);

})( );

}

(2)

for(var i=1;i<=5;i++){

 (function(j){

 setTimeout(function timer(){

  console.log(j);

},j*1000);

})(i);

}                    

Ps:在迭代中使用立即执行函数为每一个迭代生成一个新的作用域,使得延迟函数的回调可以将新的作用域封闭在每个迭代内部,每个迭代中都会含有一个具有正确值的变量供我们访问。

(3)

 for(var i=1;i<=5;i++){

   let j=i;

   setTimeout(function timer(){

   console.log(j);

},j*1000);

}

(4)

for(let i=1;i<=5;i++){

  setTimeout(function timer(){

  console.log(i);

},i*1000);

}

Ps:let声明,可以用来劫持块作用域,并且在这个块作用域中声明一个变量。本质上,将一个块转换成一个可以关闭的作用域。

Ps: for循环中调用setTimeout()函数,延迟函数的回调会在循环结束时才执行。

二  this与对象原型

1—  关于this

this是在运行时绑定的,它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有关系,只取决于函数的调用方式。

当一个函数被调用时,会创建一个活动记录,也称执行上下文,这个记录会包含函数在哪里被调用、调用的方式、传入的参数等。

this是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。

2—  this全面解析

调用位置就是函数在代码中被调用的位置。寻找调用位置就是寻找函数被调用的位置。最重要的是要分析调用栈。

function baz(){

//当前调用栈是baz

//当前调用位置是全局作用域

console.log(“baz”);

bar();   //bar的调用位置

}

function bar(){

 //当前调用栈是baz->bar

//当前调用位置在baz中

console.log(“bar”);

foo();  //foo的调用位置

}

function foo(){

 //当前调用栈是baz->bar->foo

//当前调用位置在bar中

console.log(“foo”);

}

baz();  //baz的调用位置

函数的执行过程中调用位置如何决定this的绑定对象,这里需要先找到调用位置,然后判断应用哪种绑定规则。

绑定规则:默认绑定、隐式绑定、显示绑定、new绑定

默认绑定:独立函数调用

function foo(){

  console.log(this.a);

}

var a=2;

foo();  //2

隐式绑定:需要考虑调用位置是否有上下文对象,或者,是否被某个对象拥有或包含。隐式绑定会把函数调用中的this绑定到这个上下文对象。在一个对象内部包含一个指向函数的属性,并通过这个属性间接引用函数,从而把this间接(隐式)绑定到这个对象上。

function foo(){

  console.log(this.a);

}

var obj={

  a: 2,                      

foo: foo

};

obj.foo();  //2

ps:对象属性引用链中只有上一层或者说最后一层在调用位置中起作用。

function foo(){

console.log(this.a);

}

var obj2={

a:42,

foo:foo

};

var obj1={

a:2,

obj2:obj2

};

Obj1.obj2.foo();  //42

显示绑定:可以使用call或apply方法为调用函数指定上下文,直接指定this的绑定对象。

function foo(){

  console.log(this.a);

}

var obj={

  a:2

};

foo.call(obj);  //2

new绑定:使用new来调用函数,或者说发生构造函数调用,会自动执行下面的操作=》(1)创建一个全新的对象 (2)这个对象会被执行[[Prototype]]连接 (3)这个心对象会绑定到函数调用的this (4)如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象。

function foo(a){

  this.a=a;

}

var bar=new foo(2);

console.log(bar.a);  //2

绑定的优先级比较:new绑定》显示绑定》隐式绑定》默认绑定

(1)       函数是否由new调用?是的话this绑定到新创建的对象。

var bar=new foo();

(2)       函数是否通过call或apply或硬绑定调用?是则this绑定到指定的对象。

var bar=foo.call(obj2);

(3)       函数是否在某个上下文中调用?是则this绑定到那个上下文。

var bar=obj1.foo();

(4)       以上都不是的话,则是默认绑定。

3—  对象

对象定义方式两种:声明形式、构造形式

声明形式:

var myObj={

      key:value

}

构造形式:

var myObj=new Object();

myObj.key=value;

二者区别:声明形式中可以添加多个键/值对,但在构造形式中需要逐个添加属性。

类型:string、number、boolean、null、undefined、object

内置对象:String、Number、Boolean、Object、Function、Array、Date、RegExp、Error

Ps: 这些内置函数可以当做构造函数使用,可以构造一个对应子类型的新对象。

Ps:必要时,JavaScript会自动把字符串字面量转换为String对象。

Ps:null与undefined没有对应构造形式,执行声明形式;Date只有构造形式,没有声明形式。

Ps:对于Object、Array、Function、RegExp而言,无论是声明形式还是构造形式,它们都是对象。

内容:对象的内容是由一些存储在特定命名位置的值组成的,我们称之为属性。存储在对象容器内部的是这些属性的名称,它们像指针一样指向这些值真正的存储位置。

属性值的访问方式:. 操作符  或者  [ ]操作符

其中,.a 被称为属性访问,[“a”]  被称为键访问。它们访问的是同一个位置,且返回相同的值。在对象中,属性名永远都是字符串。虽然在数组下标中使用的是数字,但在对象属性名中数字会被转换成字符串。

可计算属性名:在文字形式中使用[ ]包裹一个表达式来当作属性名。

var prefix=”foo”;

var myObj={

  [prefix + “bar”]: ”hello”,

  [prefix + “baz”]: “world”

};

myObj[“foobar”];  //hello

myObj[“foobaz”];  //world

数组:

      var arr=["foo","42","bar"];
            arr.baz="baz";
      console.log(arr.length); //3
      console.log(arr.baz);  //baz 

      var arr1=["foo",42,"bar"];
          arr1["3"]="baz";
      console.log(arr1.length);  //4
      console.log(arr1[3]);     //baz

ps:因为数组本身就是一个对象,你通过arr[‘name‘] 或者 arr.name添加的都是对象的成员 而不是给数组添加成员。数组只有通过arr[num] ,num为自然数,才能够添加或访问数组的成员

属性描述符:可以通过Object.defineProperty(..)来添加一个新属性或者修改一个已有属性,并对属性进行设置。

var myObj={};

Object.defineProperty(myObj,”a”,{

  value:2,

  writeable:true,

configurable:true,

enumerable:true

});

myObj.a;  //2

不变性:属性或者对象的不可改变性可通过多种方法实现。所有方法创建的都是浅不变性,即它们只会影响目标对象和它的直接属性。

(1)     对象常量,writable与configurable设置为false。不可修改、重定义或者删除

(2)     禁止扩展,Object.preventExtensions(myObj);

(3)     密封,Object.seal( ..)会创建一个密封的对象,该方法实际上是会在一个现有对象上调用Object.preventExtensions( ..)并把所有现有属性标记为configurable为false。密封之后不能添加新属性,也不能重新配置或删除任何现有属性,可修改属性值。

(4)     Obj.preventExtensions()(){})冻结,Object.freeze(..)会创建一个冻结对象,该方法实际上会在一个现有对象上调用Object.seal(..)并把所有数据访问属性标记为writable为false。禁止对对象本身及其任意直接属性的修改。

深度冻结方法:先在该对象上调用Object.freeze(..),然后遍历它引用的所有对象并在这些对象上调用Object.freeze(..)深度深度

[[GET]] 获取属性值   [[PUT]]设置属性值

引用对象的属性时会触发GET操作,设置对象属性时会触发PUT操作。

遍历:

for…in 循环可以用来遍历对象的可枚举属性列表,通过遍历下标来指向值。

forEach(…)遍历数组中的所有值并忽略回调函数的返回值

every(…)会一直运行直到回调函数返回false。

some(…)会一直运行直到回调函数返回true。

for…of 首先会向被访问对象请求一个迭代器对象,然后通过迭代器对象的next()方法来遍历所有的值。

var myarr=[1,2,3];

for(var v of myarr){

  console.log(v);

}
var myarr=[1,2,3];

var it=myarr[Symbol.iterator]();

it.next();                 // {value:1, done:false}

it.next();                 // {value:2, done:false}

it.next();       // {value:3, done:false}

it.next();      // {done:true}

ES6中使用Symbol.iterator来获取对象的@@iterator内部属性。@@iterator本身不是一个迭代器对象,而是一个返回迭代器对象的函数。value表示当前遍历值,done表示十分还有可以遍历的值。for…of循环每次调用的myObj迭代器对象的next()方法时,内部的指针都会向前移动并返回对象属性列表的下一个值。

4—  混合对象“类”

5—  原型

JavaScript对象有一个特殊的prototype内置属性,本质上是对其他对象的引用。

[[Prototype]]机制指对象中的一个内部链接引用另一个对象。其本质是对象之间的关联关系。如果在第一个对象上没有找到需要的属性或方法引用,引擎就会继续在[[Prototype]]关联的对象上进行查找,如果后者没有找到,则继续查找后者的[[Prototype]],直到找到或者到达Object.prototype。这一系列对象的链接被称为原型链。所有普通对象都有内置Object.prototype,指向原型链的顶端。

关联两个对象最常用的方式是使用new关键词进行函数调用。使用new调用函数时,会把新对象的.prototype属性关联到其他对象。带new的函数调用通常被称为构造函数调用。

原型,本质是一个对象,其他对象可以通过它实现属性继承。所有对象在默认情况下都有一个原型。多个实例共享一个通用原型。原型属性一旦定义,就可以被多个引用它的实例所继承。

Prototype是构造函数的一个属性,该属性指向一个对象,而这个对象将作为该构造函数所创建的所有实例的基引用,可以把对象的基引用想象成一个自动创建的隐藏属性,当访问对象的一个属性时,首先查找对象本身,找到则返回,若没有,则查找其基引用指向的对象的属性,这样一直沿着原型链向上查找,直到找到或者到达根。

原型链:由一些用来继承和共享属性的对象组成的对象链。让原型对象等于另一个构造函数的实例,这样原型对象将包含一个指向另一个原型的指针。相应地,另一个原型中也包含指向另一个构造函数的指针。假如另一个原型又是另一个构造函数的实例,层层递进,构成了实例与原型间的链条,即原型链。

简单来讲,每个对象和原型都有一个原型,对象的原型又指向对象的父,而父的原型又指向父的父,通过这种原型层层连接起来的关系称为原型链。一个对象的实例作为另一个对象的原型。

函数都有一个prototype属性,指向了这个函数的原型对象,这个对象包含这个函数创建的实例的共享属性和方法,即原型对象的属性和方法为所有实例所共享。这个原型对象有一个constructor属性,指向了该构造函数。每个通过该构造函数创建的对象都包含一个指向原型对象的内部指针_proto_

JavaScript对象由构造函数创建,每个对象都有一个constructor属性,表示该对象的构造函数。所有实例的原型引用的是构造函数的原型属性。

6—  行为委托

。。。。。。

我觉得我要被反反复复提到的“类”给绕晕了,不是说好javascript中没有类么?小呀小呀小菜鸟,你要跑快一点哟,不对,要飞起来哟,然后才能飞高。。。

时间: 2024-10-23 15:27:53

你不知道的JavaScript-上卷の读书笔记的相关文章

你不知道的javascript 上卷 读书笔记

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> </body> <script type="text/javascript"> { let j; for(j=0;j<10;j

《你不知道的JavaScript》读书笔记(二)词法作用域

JavaScript 采用的是 词法作用域 的工作模型. 定义 词法化:大部分标准语言编译器的第一个工作阶段叫词法化(单词化),这个过程会对源代码中的字符进行检查,如果是有状态的解析过程,还会赋予单词意义. 词法作用域:定义在 词法阶段 的作用域. 词法作用域由谁决定:由你在写代码时将 变量 和 块作用域 写在哪里来决定.因此大部分情况下,词法分析器处理代码时会保持作用于不变. [例] function foo(a){ var b = a * 2; function bar(c){ consol

《你不知道的JavaScript》读书笔记(一)作用域

名词 引擎:从头到尾负责整个 JavaScript 程序的 编译 及 执行 过程. 编译器:负责 语法分析 及 代码生成. 作用域:负责收集并维护由所有声明的标识符(变量)组成的一系列查询,并实施一套非常严格的规则,确定当前执行的代码对这些标识符的访问权限. LHS:赋值操作的左侧(理解为赋值操作的目标是谁,LHS 查询 试图找到变量的容器本身,并对其 赋值 ). RHS:赋值操作的右侧(理解为谁是赋值操作的源头,RHS 查询 就是 查找 某个变量的值). JavaScript 的编译 Java

《编写可维护的javascript》读书笔记(中)——编程实践

上篇读书笔记系列之:<编写可维护的javascript>读书笔记(上) 上篇说的是编程风格,记录的都是最重要的点,不讲废话,写的比较简洁,而本篇将加入一些实例,因为那样比较容易说明问题. 二.编程实践 1.UI松耦合 第一.将css从javascript中抽离(要改变dom样式数据,应该去操作dom的class名而非dom的style属性,后续要修改此样式只需到对应的css文件中修改而不用修改js文件): 第二.将javascript从HTML中抽离,比如下面的写法是不好的 <!-- 不

你不知道的javascript--上卷--读书笔记1

作用域是什么? 答:在<你不知道的javascript>书中提到,作用域就是根据名称查找变量的一套规则.古语有"无规矩不成方圆",但是没有方圆,规矩又给谁用?所以个人理解作用域就是"规矩"+"方圆".作用域是在创建的时候就确定的. 谁有作用域? 答:全局,函数. 为什么要有作用域? 答:前面已经说了,作用域是"规矩"+"方圆".作用域的最大用处就是隔离变量,不同作用域下同名变量不会有冲突.举个例

《编写可维护的javascript》读书笔记(上)

最近在读<编写可维护的javascript>这本书,为了加深记忆,简单做个笔记,同时也让没有读过的同学有一个大概的了解. 一.编程风格 程序是写给人读的,所以一个团队的编程风格要保持一致. 1.缩进:一种是利用制表符缩进,一种是使用空格符缩进,各有利弊,任选一种,保持一致即可.个人比较喜欢制表符缩进. 2.语句结尾需要加上分号,避免没必要的BUG. 3.命名:首先要语义化,使用驼峰式命名法,小驼峰即首字母小写,之后每个单词首字母大写:大驼峰即首字母大写,之后同小驼峰:变量名前缀应该是名词(my

JavaScript设计模式:读书笔记(未完)

该篇随我读书的进度持续更新阅读书目:<JavaScript设计模式> 2016/3/30 2016/3/31 2016/3/30: 模式是一种可复用的解决方案,可用于解决软件设计中遇到的常见问题./将解决问题的方法制作成模板,并且这些模板可应用于多种不同的情况.有效模式的附加要求:适合性,实用性,适用性. 模式的优点: 防止局部问题引起大问题,模式让我们的代码更有组织性 模式通常是通用的解决方式,不管我们开发哪种应用程序,都可以用模式优化我们代码的结构 模式确实可以让我们避免代码复用,使代码更

《高性能 JavaScript》读书笔记(一)

一. 加载和执行——优化JavaScript规则: 1. 将脚本放在底部:2. 减少页面中外链脚本文件的数量: 比如,下载单个100kb的文件将比下载4个25kb的文件更快.这个可以通过离线打包工具或者类似Yahoo!combo handler的实时在线服务来实现:3. HTML4为<script>标签定义了一个扩展属性:defer:  指明本元素所含的脚本不会修改DOM,因此代码能安全的延迟执行,例如: <script type="text/javascript"

《高性能Javascript》读书笔记-2

第二章 数据存取 字面量: 代表自身 不存特定位置   :字符串 数字 bool 对象 array 函数  正则表达 本地变量: var 数组: 存储在js数组对象内部,以数字做索引 对象成员 存储在js对象内部  以字符串做索引 JavaScript中有四种基本的数据存取位置: 直接量,变量,数组元素(以数字作为索引),对象成员(以字符床作为索引) 每一个js函数都表示一个对象, 是fun对象的一个实列 函数每一次执行对应的执行环境都是独一无二的,所以多次调用同一个函数就会导致创建多个执行环境

《高性能Javascript》读书笔记-1

第一章 加载和执行 当浏览器执行JavaScript代码时,不能同时做其他任何事情(单一进程),意味着<script>标签每次出现都霸道地让页面等带脚本的解析和执行(每个文件必须等到前一个文件下载并执行完成才会开始下载),所以头部的JS和CSS用来渲染页面,交互行为(几乎所有)的JS放在<body>底部: 在</body>关闭之前 将所以script标签放到页面底部,能确保脚本执行前页面完成渲染 减少外链脚本数量将会改善性能(合并JS) 任何网站都可以使用一个把制定文件