首页 > 专栏 > 前端 > 文章详情
js 延长作用域链-等闭包测试 发布于:2021-03-05 12:19:48   原创发表   查看:8  讨论:0
具体来说,就是当执行流进入下列任何一个语句时,作用域链就会得到加长:Fgt易塔云建站-模板下载,web开发资源,技术博客
    □:try-catch语句的catch块。会创建新的变量对象,是抛出的错误对象的声明。Fgt易塔云建站-模板下载,web开发资源,技术博客
    □:with语句。将指定的对象添加到作用域链中。
function buildUrl(){Fgt易塔云建站-模板下载,web开发资源,技术博客
    var qs = "&name=sss";Fgt易塔云建站-模板下载,web开发资源,技术博客
    with(location){Fgt易塔云建站-模板下载,web开发资源,技术博客
        var url = href + qsFgt易塔云建站-模板下载,web开发资源,技术博客
    }Fgt易塔云建站-模板下载,web开发资源,技术博客
    return url;Fgt易塔云建站-模板下载,web开发资源,技术博客
}Fgt易塔云建站-模板下载,web开发资源,技术博客
alert(buildUrl());
with语句会把location对象加载到当前函数的作用域中,而函数体内的href是location.href。qs是在函数体内查找,没找到继续往上找,在buildUrl()函数变量中找到了。如果在with函数中也定义了 qs ,那么就不用往外继续查找了。Fgt易塔云建站-模板下载,web开发资源,技术博客
由于with语句加载的是一个变量对象,那么我们换一下location。
var a = {Fgt易塔云建站-模板下载,web开发资源,技术博客
    href : "http://www.baidu.com/",Fgt易塔云建站-模板下载,web开发资源,技术博客
    // qs: "sfasdfasf"Fgt易塔云建站-模板下载,web开发资源,技术博客
}Fgt易塔云建站-模板下载,web开发资源,技术博客
var b = {Fgt易塔云建站-模板下载,web开发资源,技术博客
    qs: "?debug=true"Fgt易塔云建站-模板下载,web开发资源,技术博客
}Fgt易塔云建站-模板下载,web开发资源,技术博客
function buildUrl(){Fgt易塔云建站-模板下载,web开发资源,技术博客
    jw = "&name=sss";Fgt易塔云建站-模板下载,web开发资源,技术博客
    with(a,b){Fgt易塔云建站-模板下载,web开发资源,技术博客
        var url = a.href + b.qs + jw;Fgt易塔云建站-模板下载,web开发资源,技术博客
    }Fgt易塔云建站-模板下载,web开发资源,技术博客
    return url;Fgt易塔云建站-模板下载,web开发资源,技术博客
}Fgt易塔云建站-模板下载,web开发资源,技术博客
console.log(buildUrl());//https://www.baidu.com/?debug=true&name=sss
由于这道题说的是延长作用域链问题,使用a和b这两个对象,对buildUrl函数的作用域进行了延长。我没有测试a、b是函数的情况。等整理完闭包后再做测试。Fgt易塔云建站-模板下载,web开发资源,技术博客
Fgt易塔云建站-模板下载,web开发资源,技术博客
现在来测试一种方法:(在函数外访问函数内部不同变量)
function c(){Fgt易塔云建站-模板下载,web开发资源,技术博客
    var cURL1 = "http://www.taobao.com/";Fgt易塔云建站-模板下载,web开发资源,技术博客
    var cURL2 = "http://www.jd.com/";Fgt易塔云建站-模板下载,web开发资源,技术博客
    return cURL1 + "@" + cURL2;Fgt易塔云建站-模板下载,web开发资源,技术博客
}Fgt易塔云建站-模板下载,web开发资源,技术博客
var cc = c();Fgt易塔云建站-模板下载,web开发资源,技术博客
var arr = cc.split("@");//把带有返回值的函数,切割成数组,用数组的[]语法来获得不同参数值。Fgt易塔云建站-模板下载,web开发资源,技术博客
console.log(arr[0]);
Fgt易塔云建站-模板下载,web开发资源,技术博客
更改后的函数变为:Fgt易塔云建站-模板下载,web开发资源,技术博客
 
function buildUrl(){Fgt易塔云建站-模板下载,web开发资源,技术博客
    jw = "&name=sss";Fgt易塔云建站-模板下载,web开发资源,技术博客
    with(a,b,c){Fgt易塔云建站-模板下载,web开发资源,技术博客
        var cc = c();Fgt易塔云建站-模板下载,web开发资源,技术博客
        var arr = cc.split("@");Fgt易塔云建站-模板下载,web开发资源,技术博客
        var url = a.href + b.qs + arr[1];Fgt易塔云建站-模板下载,web开发资源,技术博客
    }Fgt易塔云建站-模板下载,web开发资源,技术博客
    return url;Fgt易塔云建站-模板下载,web开发资源,技术博客
}

评论

  • 匿名