Day55:js复习和扩展

一、复习

二、JS扩展

1、JS是作用域

作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理。

任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。

1. 全局作用域(Global Scope)

在代码中任何地方都能访问到的对象拥有全局作用域,一般来说一下几种情形拥有全局作用域:

(1)最外层函数和在最外层函数外面定义的变量拥有全局作用域。

var name="yuan";

    function foo(){
        var age=23;
        function inner(){
            console.log(age);
        }

        inner();
    }

    console.log(name);    // yuan
    //console.log(age);   // Uncaught ReferenceError: age is not defined
    foo();                // 23
    inner();              // Uncaught ReferenceError: inner is not defined

(2)所有末定义直接赋值的变量自动声明为拥有全局作用域,例如:

var name="yuan";

    function foo(){
        age=23;

        var sex="male"
    }
    foo();
    console.log(age);   //  23
    console.log(sex);   // sex is not defined

变量blog拥有全局作用域,而sex在函数外部无法访问到。

(3)所有window对象的属性拥有全局作用域

一般情况下,window对象的内置属性都都拥有全局作用域,例如window.alert()、window.location、window.top等等。

2. 局部作用域(Local Scope)

和全局作用域相反,局部作用域一般只在固定的代码片段内可访问到,最常见的例如函数内部,所有在一些地方也会看到有人把这种作用域成为函数作用域.

如示例1中的age与inner都只有局部作用域。(js中if、for没有自己的作用域)。

2、作用域链(Scope Chain)

在JavaScript中,函数也是对象,实际上,JavaScript里一切都是对象。函数对象和其它对象一样,拥有可以通过代码访问的属性和一系列仅供JavaScript引擎访问的内部属性。其中一个内部属性是[[Scope]],由ECMA-262标准第三版定义,该内部属性包含了函数被创建的作用域中对象的集合,这个集合被称为函数的作用域链,它决定了哪些数据能被函数访问。

示例演示:

//-----**********************例1*********************************

var s=12;
    function f(){
        console.log(s);
         var s=12;          // if s=12
        console.log(s)
    }
    f();

//-----**********************例2*********************************

var s=10;
function foo(){
  console.log(s);
  var s=5;
  console.log(s);
  function s(){console.log("ok")}// 函数的定于或声明是在词法分析时完成的,执行时已不再有任何操作

  console.log(s);
}

foo();

//-----***********************例3********************************

function bar(age) {

        console.log(age);
        var age = 99;
        var sex= ‘male‘;
        console.log(age);
        function age() {
            alert(123)
        };
        console.log(age);
        return 100;
}

result=bar(5);

//-----********************************************************

结果分析:

我相信大家一定会有想不到的结果,接下来我们就以最复杂的例3来分析整个过程。

当一个函数创建后,它的作用域链会被创建此函数的作用域中可访问的数据对象填充。在函数bar创建时,它的作用域链中会填入一个全局对象,该全局对象包含了所有全局变量,如下图所示:

解析到函数调用时,即bar(5),会生成一个active object的对象,该对象包含了函数的所有局部变量、命名参数、参数集合以及this,然后此对象会被推入作用域链的前端,当运行期上下文被销毁,活动对象也随之销毁。新的作用域链如下图所示:

过程解析:

function bar(age) {

        console.log(age);
        var age = 99;
        var sex="male";
        console.log(age);
        function age(){
            alert(123);
        } ;
        console.log(age);
        return 100;
}

result=bar(5);

一 词法分析过程(涉及参数,局部变量声明,函数声明表达式):
    1-1 、分析参数,有一个参数,形成一个 AO.age=undefine;
    1-2 、接收参数 AO.age=5;
    1-3 、分析变量声明,有一个 var age, 发现 AO 上面有一个 AO.age ,则不做任何处理
    1-4 、分析变量声明,有一个 var sex,形成一个 AO.sex=undefine;
    1-5 、分析函数声明,有一个 function age(){} 声明, 则把原有的 age 覆盖成 AO.age=function(){};
二 执行过程:
    2-1 、执行第一个 console.log(age) 时,当前的 AO.age 是一个函数,所以输出的一个函数
    2-2 、这句 var age=99; 是对不 AO.age 的属性赋值, AO.age=99 ,所以在第二个输出的age是 99;
    2-3 、同理第三个输出的是 99, 因为中间没有改变 age 值的语句了。

          注意:执行阶段:
                        function age(){
                            alert(123)
                        } ;

            不进行任何操作,将执行语句复制给age这部操作是在词法分析时,即运行前完成的。
时间: 2024-10-15 08:46:58

Day55:js复习和扩展的相关文章

js的prototype扩展的一个例子,模仿C#的StringBuilder功能,数组组合字符串,效率大于+拼凑

function StringBuilder() { this._strings_ = new Array;}StringBuilder.prototype.append = function (str) { this._strings_.push(str);};StringBuilder.prototype.toString = function () { return this._strings_.join("");}; js的prototype扩展的一个例子,模仿C#的Strin

(译+注解)node.js的C++扩展入门

声明:本文主要翻译自node.js addons官方文档.部分解释为作者自己添加. 编程环境: 1. 操作系统 Mac OS X 10.9.51. node.js v4.4.22. npm v3.9.2 本文将介绍node.js中编写C++扩展的入门知识. 1. 基本知识介绍 在node.js中,除了用js写代码以外,还可以使用C++编写扩展,这有点类似DLL,动态链接进js代码中.使用上也相当方便,只需用require包含,这和一般的js模块并没有什么区别.C++扩展为js和C++代码的通信提

js 对象常用扩展

//js string对象扩展 (function() { // 除去两边空白 String.prototype.trim = function() { return this.replace(/(^\s*)|(\s*$)/g, ""); }; //截取字符串了 String.prototype.cutStr = function(len) { var str = this; var str_length = 0; var str_len = 0; str_cut = new Stri

JS复习—函数(函数的形参和实参没整理,函数的方法待补充,函数化编程待扩展)

函数 一.函数的定义 只定义一次,但可以被执行或调用任意次.JavaScript中函数是参数化的:函数的定义包括一个称为形参的标示符列表,这些参数在函数体中像局部变量一样工作.如果函数挂在在一个对象上,作为对象的一个属性,就称它为对象的一个方法.当通过这个对象来调用函数时,该对象就是此次调用的上下文,也就是该函数的this的值.用于初始化一个新创建的对象的函数称为构造函数. 二.函数的三种定义方式 1.函数声明: 函数声明语句实际上声明了一个变量,并把一个函数对象复制给它. function s

【JS复习笔记】02 对象与函数

好吧,因为很重要的事情,几天没写笔记了. 关于对象: ||可以用来填充默认值,如:myApp.name || "无" &&可以用来避免错误,myApp.NameObj有某种情况不存在,那么可以用myApp.NameObj && myApp.NameObj.Name避免脚本错误 所有通过对象字面量创建的对象都连接到Object.prototype,当你创建某对象时也可以选择另一个对象作为它的原型,比如: if(typeof Object.beget!=='

js复习---string

对js的string的方法复习: 1.charCodeAt()  返回一个整数,代表指定位置字符串的unicode编码. strObj.charCodeAt(index) index 是处理字符的从零开始计数的编号.有效为0到1 的数字. 如果没有指定位置的字符串则返回nan. 2.fromCharCode() 方法从一些unicode字符串中返回一个字符串. String.fromCharCode([code1[,code2...]]) : 说明: code1,code2...是要转换为字符串

【JS复习笔记】05 正则表达式

好吧,正则表达式,我从来没记过.以前要用的时候都是网上Copy一下的. 这里还是扯一下吧,以后要是有要用到的正则表达式那么就收集到这个帖子里.(尽管我认为不会,因为我根本就不是一个专业的前端,我只是来划下水的\(^o^)/) 应用范围:正则表达式主要应用于对字符串中的信息实现查找,替换和提取操作. 可处理正则表达式的方法有6个: regexp.exec,regexp.test,string.match,string.replace,string.search和string.split 应用原因:

JS,JQuery的扩展方法

转 http://blog.csdn.net/tuwen/article/details/11464693 //JS的扩展方法: 1 定义类静态方法扩展 2 定义类对象方法扩展            var aClass = function(){} //1 定义这个类的静态方法            aClass.sayHello = function(){                alert('say hello');            } //2 定义这个类对象的对象方法   

用NAN简化Google V8 JS引擎的扩展

通过C++扩展Google V8 JS引擎的文章很多,Google V8 JS带的例子也容易明白.但是大部分文章都是Hello World型的,真正使用时发现处处是坑.扩展V8最经典的例子就是node了,如果要做实际项目,研究一下node本身和及其扩展模块大有裨益. 提到node的C++扩展就不得不提nan,nan是Native Abstractions for Node.js的简称,它让扩展V8变得很容易,特别是用类来扩展的时候. 类从ObjectWrap继承过来,如: class Locat