不知道的JavaScript

你不知道的JavaScript上卷笔记

前言

You don‘t know JavaScript是github上一个系列文章 
 
初看到这一标题的时候,感觉怎么老外也搞标题党,用这种冲突性比较强的题目吸引眼球,以致最初真没去看内容。直到出了中文版《你不知道的JavaScript》,一看评价大家都说好,买来一读,内容果然很好,很多地方,让我这个半路转行JavaScript的人豁然开朗。中文版现在出了上卷,中卷应该很快会推出,下卷就要等久一点了

作用域和闭包

作用域是什么

  1.现代JavaScript已经不再是解释执行的,而是编译执行的。但是与传统的编译语言不同,它不是提前编译,编译结果不能进行移植。编译过程中,同样会经过分词/词法分析,解析/语法分析,代码生成三个阶段。

  2.以var a = 2;语句为例,对这一程序语句对处理,需要经过引擎,编译器,作用域三者的配合。其中,引擎从头到尾负责整个javascript程序的编译和执行过程;编译器负责语法分析和代码生成;作用域负责收集并维护由所有声明的标识符组成的系列查询,并实施一套规则,确定当前执行的代码对这些标识符的访问权限。

  3.对于var a = 2;编译器首先查找作用域中是否已经有该名称的变量,然后引擎中执行编译器生成的代码时,会首先查找作用域。如果找到就执行赋值操作,否则就抛出异常

  4.引擎对变量的查找有两种:LHS查询RHS查询。当变量出现中赋值操作左侧时是LHS查询,出现中右侧是RHS查询

词法作用域

  1.词法作用域就是定义在词法阶段的作用域。词法作用域是由你在写代码时将变量和块作用域写在哪里决定的,词法处理器分析代码时会保持作用域不变

  1. function foo(a){
        var b = a * 2;
        function bar(c){
            console.log(a,b,c);
        }
        bar(b * 3);
    }
    foo(2);     

    这个例子有三级嵌套的作用域 

  2. 作用域查找会在找到第一个匹配的标识符时停止
  3. eval和with可以欺骗词法作用域,不推荐使用

函数作用域和块作用域

  1. JavaScript具有基于函数的作用域,属于这个函数的变量都可以在整个函数的范围内使用及复用
  2. (function fun(){})() 
    函数表达式和函数声明的区别是看function关键字出现在声明中的位置。如果function是声明中的第一个词,那么就是一个函数声明,否则就是一个函数表达式
  3. with,try/catch具有块作用域,方便好用的实现块级作用域的是es6带来的let关键字

提升

  1.如下示例  

a=2;
var a;
console.log(a); 

  上述代码输出的不是undefined,而是2。因为上述代码需要经过编译器的编译,编译过程中首先会进行变量声明,然后再由引擎进行变量赋值,所以,上述变量声明虽然写在第二行,但是声明过程是首先执行的

  1. console.log(a);
    var a = 2; 

    上述代码不是抛ReferenceError异常, 而是输出undefined

  2. 只有声明会被提升,赋值及其他运行逻辑会留在原地
  3. foo();
    function foo(){
        console.log(a);//undefined
        var a = 2;
    }

    foo();//不是ReferenceError,是TypeError var foo = function bar(){}; foo被提升并分配给所在作用域,所以foo()不会导致ReferenceError,但是foo没有被赋值,对undefined进行函数调用,所以抛出TypeError

作用域闭包

  1. 将内部函数传递到所在词法作用域以外,它都会持有对原始定义作用域的饮用,无论中何处执行这个函数都会使用闭包
  2. 本质上,无论何时何地,如果将函数当作第一级的值类型并到处传递,就会看到闭包在这些函数中的应用。在定时器,事件监听器,ajax请求,web workers或者其他任何异步任务中,只要使用了回调函数,实际上就是在使用闭包
  3. 模块的封装利用了闭包,将内部变量隐藏,并返还一个公共api的对象,这一返回的对象对模块的私有变量形成闭包访问。

动态作用域

  1.词法作用域是一套引擎如何寻找变量以及会在何处找到变量的规则。词法作用域最重要的特征是它的定义过程发生中代码的书写阶段

  2.动态作用域让作用域作为一个在运行时就被动态确定的形式,而不是在写代码时进行静态确定的形式。

function foo(){
    console.log(a);//2
}
function bar(){
    var a = 3;
    foo();
}
var a = 2;
bar(); 

词法作用域让foo()中的a通过RHS引用到了全局作用域中的a,所以输出2;动态作用域不关心函数和作用域如何声明以及在何处声明,只关心从何处调用。换言之,作用域链是基于调用栈的,而不是代码中的作用域嵌套。如果以动态作用域来看,上面代码中执行时会输出3

  3.JavaScript不具备动态作用域,但是this机制中某种程度上很像动态作用域,this关注函数如何调用。

this词法

  1. es6通过箭头函数,将this同词法作用域联系起来了。
  2. 之前如果会遇到this丢失,常见方法时使用本地变量替换this引用 

    var obj = {
        msg : ‘awesome‘,
        cool:function(){
            setTimeout(function timer(){
                console.log(this.msg);
                },100);
            }
        };
    var msg = ‘not awesome‘;
    obj.cool(); //not awesome 
    
    var obj = {
        msg : ‘awesome‘,
         cool:function(){
        var self = this; setTimeout(function timer(
            console.log(self.msg);
            },100);
        }
    };
    var msg = ‘not awesome‘;
    obj.cool(); //awesome 
    
    var obj = {
        msg : ‘awesome‘,
        cool:function(){ setTimeout(() => {
            console.log(this.msg);
            },100);
        }
    };
    var msg = ‘not awesome‘;
    obj.cool(); //awesome 
    
    var obj = {
        msg : ‘awesome‘,
        cool:function(){
            setTimeout(function timer() {
                console.log(this.msg); }.bind(this),100);
                }
        };
    var msg = ‘not awesome‘;
    obj.cool(); //awesome            

this和对象原型

this全面解析

  1. 默认绑定。

    function foo(){
        console.log(this.a);
    }
    var a = 2; foo();//2

    上述示例中,函数调用应用了默认绑定,this指向全局对象

  2. 隐式绑定。调用位置是否有上下文对象,或者说是否被某个对象拥有或者包含。 

    function foo(){
        console.log(this.a);
    }
    var obj={
        a:2,
         foo:foo
    };
    obj.foo();//2 

    foo()被调用时,落脚点指向obj对象。当函数引用有上下文对象时,隐式对象将函数调用中的this绑定到上下文对象。

  3. 显示绑定。使用apply,call或者bind显示绑定
  4. new绑定。
    • JavaScript中的构造函数只是一些使用new操作符时被调用的函数。它们并不会属于某个类,也不会实例化一个类。实际上,它们甚至不能说是一种特殊的函数类型,它们只是被new操作符调用的普通函数。
    • 使用new来调用函数,或者说发生构造函数调用,会自动执行下面操作:a)创建一个全新的对象 b)这个新对象会被执行[[原型]]连接 c)这个新对象会绑定到函数调用的this d)如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象
  5. 优先级。new绑定 > 显示绑定 > 隐式绑定 > 默认绑定

对象

  1. 属性描述符

    var obj = {};
    Object.defineProperty(
        obj,
        "a",
        {
            value:2,
            writable:true,
            configurable:true,
            enumerable:true
        }
    );
    obj.a;//2    

    • writable决定是否可以修改属性的值,writable为false时,对obj.a的修改会静默失败。
    • configurable表示属性是否可以配置,如果为false,再对obj调用defineProperty来修改设置,会抛出TypeError
    • enumerable表示属性是否会出现在对象枚举属性中,如果为false,就不会出现在for...in循环中
  2. 对象常量。结合使用writable:false和configurable:false可以创建一个真正的常量属性(不可修改,不可重定义,不可删除)
  3. 禁止扩展。如果想禁止对一个对象添加新属性并且保留已有属性,可以使用Object.preventExtensions()方法
  4. 密封。Object.seal()会创建一个密封的对象,这个方法实际上会在一个现有对象上调用Object.preventExtensions()方法,并且把所有属性标记为configurable:false
  5. 冻结。Object.freeze()会创建一个冻结对象,这个方法会在现有对象上调用Object.seal()方法,并把所有数据访问的属性标记为writable:false
  6. [[get]],[[put]]。
    • var obj = {
          this._a_ = 2;
          get a(){ return this._a_; },
          set a(val){ this._a_ = val * 2; }
      };
      Object.defineProperty(
          obj,
          "b",
          {
              get:function(){return this._a_ * 2},
              enumerable:true
          }
      )

原型

本节为觉得书中写的有点绕,不清晰。推荐阅读

  1. constructor, prototype, proto 详解
  2. JavaScript中proto与prototype的关系
  3. How does proto differ from constructor.prototype?
  4. 理解JavaScript面向对象的思路

行为委托

  1. [[prototype]]机制是对象中一个内部链接引用另一个对象 如果中第一个对象上没找到需要的属性或者方法引用,引擎就会继续在[[prototyoe]]关联的对象上进行查找。同理,如果后者中也没找到需要的引用,就会继续查找它的[[prototype]],以此类推,这一系列对象的链接称为原型链。换言之,这个机制就是对象之间的关联关系。
  2. [[prototype]]是一种不同于类的设计模式,它是一种委托行为的设计模式。
时间: 2024-10-29 22:22:34

不知道的JavaScript的相关文章

你所不知道的JavaScript数组

你所不知道的JavaScript数组 相信每一个 javascript 学习者,都会去了解 JS 的各种基本数据类型,数组就是数据的组合,这是一个很基本也十分简单的概念,他的内容没多少,学好它也不是件难事情.但是本文着重要介绍的并不是我们往常看到的 Array,而是 ArrayBuffer. 我写的很多东西都是因为要完成某些特定的功能而刻意总结的,可以算是备忘,本文也是如此!前段时间一直在研究 Web Audio API 以及语音通信相关的知识,内容侧重于音频流在 AudioContext 各个

一些你可能不知道的JavaScript知识(知道了之后可是大大有用的哦)

1.!!将一个值方便快速转化为布尔值 console.log( !!window===true ); 2.不声明第三个变量实现交换 var a=1,b=2; a=[b,b=a][0];//执行完这句代码之后 a的值为2 b的值为1了 3.&&和||的用法 (学会了立马感觉高大尚了吧) 用代码说话吧 var day=(new Date).getDay()===0; //传统if语句 if (day) { alert('Today is Sunday!'); }; //运用逻辑与代替if da

14 个你可能不知道的 JavaScript 调试技巧

了解你的工具可以极大的帮助你完成任务.尽管 JavaScript 的调试非常麻烦,但在掌握了技巧 (tricks) 的情况下,你依然可以用尽量少的的时间解决这些错误 (errors) 和问题 (bugs) . 我们会列出14个你可能不知道的调试技巧, 但是一旦知道了,你就会迫不及待的想在下次需要调试 JavaScript 代码的时候使用它们! 现在开始. 虽然许多技巧也可以用在别的检查工具上,但大部分的技巧是用在 Chrome Inspector 和 Firefox 上的. 1. 'debugg

你可能不知道的JavaScript代码片段和技巧(上)

JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda等等.JavaScript还是很多新手踏入编程世界的第一个语言.既可以用来显示浏览器中的简单提示框,也可以通过nodebot或nodruino来控制机器人.能够编写结构清晰.性能高效的JavaScript代码的开发人员,现如今已成了招聘市场最受追捧的人. 在这篇文章里,我将分享一些JavaScript的技巧.秘诀和最佳实践,除了少

你可能不知道的JavaScript代码片段和技巧(下)

JavaScript是一个绝冠全球的编程语言,可用于Web开发.移动应用开发(PhoneGap.Appcelerator).服务器端开发(Node.js和Wakanda等等.JavaScript还是很多新手踏入编程世界的第一个语言.既可以用来显示浏览器中的简单提示框,也可以通过nodebot或nodruino来控制机器人.能够编写结构清晰.性能高效的JavaScript代码的开发人员,现如今已成了招聘市场最受追捧的人. 在这篇文章里,我将分享一些JavaScript的技巧.秘诀和最佳实践,除了少

我所不知道的 javascript 函数

对字符串进行 Base64 加密: window.btoa(str) ---转码 window.atob(str) ---解码  

JavaScript你所不知道的困惑(2)

困惑一: var obj1 = new Object(); var obj2 = obj1; obj1.name = "阳光小强"; alert(obj2.name); //输出结果:阳光小强 JavaScript中的5个基本类型:Undefined.Null.Boolean.Number和String都是按值访问的,可以操作保存在变量中的实际的值,内存空间如下: var num1 = 5; var num2 = num1; 引用类型的值是保存在内存中的对象,JavaScript不允许

JavaScript你所不知道的困惑(1)

困惑一: 先看一个例子: function test(){ message = "hi"; } test(); alert(message); 会输出字符串"hi" 在函数内部使用var定义的变量是局部变量,省略var操作符的变量是全局变量. 困惑二: alert(undefined == null) 结果是"true" 我们知道在js中分为基本类型和引用类型,基本类型包括number.string.boolean.undefined.null.

JavaScript中你可能不知道的九件事

今天凑巧去W3School扫了一遍JavaScript教程,发现从中看到了不少自己以前没有注意过的细节. 我这些细节列在这里,分享给可能同样不知道的朋友: 1.使用 document.write() 仅仅向文档输出写内容.如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖: 实例 <!DOCTYPE html> <html> <body> <h1>My First Web Page</h1> <p>