(转)http://www.qianduan.net/use-the-chrome-developer-tools-to-learn-javascript.html
本文作者是Peter Rybin,Chrome开发者工具团队成员.
本文中,我们将通过使用Chrome的开发者工具,来学习JavaScript中的两个重要概念”闭包”和”内部属性”.
闭包
首先要讲的是闭包(closure) – JavaScript中最有名的东西之一.一个闭包就是一个使用了外部变量的函数.查看下面的例子:
1
2
3
4
5
6
7
8
9
|
function A(a, b, c) {
var ar = [a, b, c];
return function B(i) {
return ar[i];
};
}
var b = A('Here', 'I', 'am');
console.log( b(1) );
|
函数声明之后的第一条语句调用了函数A,函数A创建了一个值为数组[a,b,c]的局部变量ar,返回了一个函数B
(存储在了变量b中
),然后运行结束.
第二条语句调用了函数B
(b
),返回并打印出了数组ar.这就意味着A中的数组ar在
A结束执行后仍然存在
.但是它存储在什么地方呢?当然,在b上
!但是究竟是存在b的哪里呢?某个属性中?不是的.
这是JavaScript语言的一个核心特性:一个函数可以持有外层作用域的变量,并且除了调用该函数以外没有任何其他方法可以访问到这些变量.
从现在开始,chrome的开发者工具可以让闭包中的外部变量现形.在监控表达式(Watch Expressions)面板中查看函数实例b,展开它的属性后,
应该会有一个称为<function scope>的
子节点.所有被绑定的闭包变量都能在这里看到,这些变量就是在函数调用时可能会被用到的变量.
内部属性
开发者工具还能显示出另外一个东西,叫做内部属性(internal property).
假设你的代码中有个变量s,而且还执行了下面这样的操作
:
1
|
s.substring(1, 4) // 返回'ell'
|
你觉得s肯定是个字符串值吗? 这可不一定
.它也有可能是个字符串包装对象.尝试下面的监控表达式:
1
2
|
"hello"
Object("hello")
|
第一个表达式是一个普通的字符串字面量,第二个是一个功能完整(full-featured)的对象.令人费解的是,这两个值几乎有完全相同的表现.但是第二个表达式才真正的拥有自己的属性,并且你也可以在它身上添加自定义的属性.展开它的所有属性你会看到,它不是一个完全常规的对象:它有一个内部属性[[PrimitiveValue]] ,被包装的字符串值就存储在这个属性里面.你不能在JavaScript代码中访问到这个内部属性,但是你能在开发者工具的中看到它.
还有哪些值拥有内部属性?那就是绑定函数(bound function).绑定函数也算是一种包装对象,只不过被包装的是个函数.尝试执行下面的两条语句:
1
2
|
function Sum(a, b) { return a + b; }
var inc = Sum.bind(null, 1); // 将形参a绑定为1,this绑定为null
|
如果你把Sum和
inc放在监控表达式面板中对比一下,你会看到
,它们都是函数,但inc是一个不透明(non-transparent )的函数
:你看不到它的函数体内容,也不能看到它定义时的作用域.
这就是绑定函数的工作原理.在开发者工具中,你会看到[[TargetFunction]], [[BoundArgs]]以及[[BoundThis]]这三个内部属性.它们都表明了inc是一个绑定函数
,以及一些更具体的信息:inc绑定的目标函数是Sum
,绑定了一个参数1,绑定的this值是n
ull
.
原文:https://gist.github.com/4158604
分享到:
相关推荐
用于说明使用 Chrome 开发人员工具进行基本 Javascript 调试的基本单页应用程序。 克隆回购 CD 进入“DevTools”目录 对于开发,运行grunt serve 当你准备好构建你的项目时,运行grunt build 玩得开心!
由于F12是前端开发人员的利器,所以我自己也在不断摸索中,查看一些博客和资料后,自己总结了一下来帮助自己理解和记忆,也希望能帮到有需要的小伙伴,嘿嘿!
这篇文章告诉你如何通过用Chrome开发者工具(ChromeDeveloperTools)找到这几行关键的代码。我们来看一个简单的“颜色排序器”应用,这个应用展示了一个由各种颜色构成的网格,你可以拖拽这些颜色进行混合。每一个点...
Vue开发者工具,Chrome插件。源码打包的版本v6.1.4。教程地址https://blog.csdn.net/hskjshs/article/details/124116775
Chrome DevTools自动保存 · Chrome DevTools可让您编辑CSS和JavaScript。 它甚至允许您保存它。 我认为,为每个文件选择要保存到的文件夹很烦人。 DevTools Autosave会在每次更改时为您保存文件!如何安装Chrome ...
解压压缩包,打开Chrome扩展程序的开发模式,加载解压文件选中解压的文件即可。
Marty Chrome 开发者工具开发快速入门运行make build-watch 安装打开 Chrome Apps & Extensions Developer Tool,点击 Extensions > Load unpacked,导航到克隆的 repo 打开 Chrome
在某些情况下我们需要检测当前用户是否打开了浏览器开发者工具,比如前端爬虫检测,如果检测到用户打开了控制台就认为是潜在的爬虫用户,再通过其它策略对其进行处理。本篇文章主要讲述几种前端JS检测开发者工具是否...
Chrome.DeveloperTools.AddTagIDs 一个 Chrome 扩展程序,它通过 Chrome 的开发者工具向被检查页面上的所有 HTML 标签添加唯一的 HTML 标签标识符
Sublime Text的深色方案,颜色基于Google Chrome开发者工具(深色主题) 安装 使用 打开Tools -> Command Palette... 搜索Package Control: Install Package ,然后单击Enter。 等待可用的程序包显示出来,然后搜索...
本课程由浅入深,从六部分讲解JavaScript开发入门基础知识,内容包Chrome开发者工具和JavaScript的基本语法以及标准库、DOM、浏览器环境以及扩展知识。每一部分内容都包含基本原理讲解和操作演示,最后附带练习题。...
适用于 SAP UI5 应用开发人员,我的专栏《一套适合 SAP UI5 开发人员循序渐进的学习教程》对这个工具有详细介绍。
闪亮的机器人 使用Chrome开发者编辑器
Chrome-Developer-Tool-Bar-Tips Chrome 开发者工具栏隐藏的技巧和窍门提示 1:漂亮的打印{}: Chrome 有一个漂亮的打印功能,它将采用缩小的 JavaScript 文件并格式化它的属性。 您需要做的就是单击底部工具栏上的...
在GitHub中启用代码折叠的Chrome扩展程序
哈希(Chrome扩展程序) Chrome网上应用店: 其他浏览器的独立版本: 此扩展用于计算加密哈希并执行常见转换。 这对程序员和系统管理员可能很有用。 它完全用JavaScript实现,所有计算都在客户端执行,因此很...
js检测用户是否打开调试工具(chrome) (function(){ var re=/x/; var i=0; console.log(re); re.toString=function(){ window.close(); return '第'+(++i)+'次打开控制台'; } })(); JavaScript检测是否开启了...
vue开发者工具 chrome扩展程序 解压即用
打开开发人员工具设置 :play_button: 实验 :play_button: [ :check_mark: ]允许自定义UI主题再次启用主题。 适用于Chrome Devtools的Gruvbox Dark主题 Gruvbox Dark是Chrome DevTools的复古凹槽配色方案。 这是Vim...