优就业JS教程-理解JavaScript中的作用域和上下文
Java对于作用域(Scope)和上下文(Context)的实现是这门语言的一个非常独到的地方，部分归功于其独特的灵活性。函数可以接收不同的的上下文和作用域。这些概念为Java 中的很多强大的设计模式提供了坚实的基础。然而这也概念也非常容易给开发人员带来困惑。为此，本文将全面的剖析这些概念，并阐述不同的设计模式是如何利用它们的。
Statement
作者：景庄，Web开发者，主要关注Java、Node.js、React、Docker等。
上下文(Context)和作用域(Scope)
首先需要知道的是，上下文和作用域是两个完全不同的概念。多年来，我发现很多开发者会混淆这两个概念(包括我自己)，错误的将两个概念混淆了。平心而论，这些年来很多术语都被混乱的使用了。
函数的每次调用都有与之紧密相关的作用域和上下文。从根本上来说，作用域是基于函数的，而上下文是基于对象的。换句话说，作用域涉及到所被调用函数中的变量访问，并且不同的调用场景是不一样的。上下文始终是this关键字的值，它是拥有(控制)当前所执行代码的对象的引用。
变量作用域
一个变量可以被定义在局部或者全局作用域中，这建立了在运行时(runtime)期间变量的访问性的不同作用域范围。任何被定义的全局变量，意味着它需要在函数体的外部被声明，并且存活于整个运行时(runtime)，并且在任何作用域中都可以被访问到。在ES6之
前，局部变量只能存在于函数体中，并且函数的每次调用它们都拥有不同的作用域范围。局部变量只能在其被调用期的作用域范围内被赋值、检索、操纵。
需要注意，在ES6之前，Java不支持块级作用域，这意味着在if语句、switch语句、for循环、while循环中无法支持块级作用域。也就是说，ES6之前的Java并不能构建类似于Java中的那样的块级作用域(变量不能在语句块外被访问到)。但是，从ES6开始，你可以通过let关键字来定义变量，它修正了var关键字的缺点，能够让你像Java语言那样定义变量，并且支持块级作用域。看两个例子：
ES6之前，我们使用var关键字定义变量：
function func() {
if (true) {
var tmp = 123;
}
console.log(tmp); // 123
}
之所以能够访问，是因为var关键字声明的变量有一个变量提升的过程。而在ES6场景，推荐使用let关键字定义变量：
function func() {
if (true) {
let tmp = 123;
}
console.log(tmp); // ReferenceError: tmp is not defined
}
这种方式，能够避免很多错误。
什么是this上下文
上下文通常取决于函数是如何被调用的。当一个函数被作为对象中的一个方法被调用的时候，this被设置为调用该方法的对象上：
var obj = {
foo: function(){
alert(this === obj);
}
};
obj.foo(); // true
这个准则也适用于当调用函数时使用new操作符来创建对象的实例的情况下。在这种情况下，在函数的作用域内部this的值被设置为新创建的实例：
function foo(){
alert(this);
}
new foo() // foo
foo() // window
当调用一个为绑定函数时，this默认情况下是全局上下文，在浏览器中它指向window 对象。需要注意的是，ES5引入了严格模式的概念，如果启用了严格模式，此时上下文默认为undefined。
执行环境(execution context)
Java是一个单线程语言，意味着同一时间只能执行一个任务。当Java解释器初始化执行代码时，它首先默认进入全局执行环境(execution context)，从此刻开始，函数的每次调用都会创建一个新的执行环境。
这里会经常引起新手的困惑，这里提到了一个新的术语——执行环境(execution context)，它定义了变量或函数有权访问的其他数据，决定了它们各自的行为。它更偏向于作用域的作用，而不是我们前面讨论的上下文(Context)。请务必仔细的区分执行环境和上下文这两个概念(注：英文容易造成混淆)。说实话，这是个非常糟糕的命名约定，但是它是ECMA规范制定的，你还是遵守吧。
每个函数都有自己的执行环境。当执行流进入一个函数时，函数的环境就会被推入一个环境栈中(execution stack)。在函数执行完后，栈将其环境弹出，把控制权返回给之前的执行环境。ECMA程序中的执行流正是由这个便利的机制控制着。
执行环境可以分为创建和执行两个阶段。在创建阶段，解析器首先会创建一个变量对象(variable object，也称为活动对象activation object)，它由定义在执行环境中的变量、函数声明、和参数组成。在这个阶段，作用域链会被初始化，this的值也会被最终确定。在执行阶段，代码被解释执行。
每个执行环境都有一个与之关联的变量对象(variable object)，环境中定义的所有变量和函数都保存在这个对象中。需要知道，我们无法手动访问这个对象，只有解析器才能访问它。
作用域链(The Scope Chain)
当代码在一个环境中执行时，会创建变量对象的一个作用域链(scope chain)。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。作用域链包含了在环境栈中的每个执行环境对应的变量对象。通过作用域链，可以决定变量的访问和标识符的解
析。注意，全局执行环境的变量对象始终都是作用域链的最后一个对象。我们来看一个例子：
var color = "blue";
function changeColor(){
var anotherColor = "red";
function swapColors(){
var tempColor = anotherColor;
anotherColor = color;
color = tempColor;
// 这里可以访问color, anotherColor, 和tempColor
}
// 这里可以访问color 和anotherColor，但是不能访问tempColor
swapColors();
}
changeColor();
// 这里只能访问color
console.log("Color is now " + color);
上述代码一共包括三个执行环境：全局环境、changeColor()的局部环境、swapColors()的局部环境。上述程序的作用域链如下图所示：
从上图发现。内部环境可以通过作用域链访问所有的外部环境，但是外部环境不能访问内部环境中的任何变量和函数。这些环境之间的联系是线性的、有次序的。
对于标识符解析(变量名或函数名搜索)是沿着作用域链一级一级地搜索标识符的过程。搜索过程始终从作用域链的前端开始，然后逐级地向后(全局执行环境)回溯，直到找到标识符为止。
闭包
闭包是指有权访问另一函数作用域中的变量的函数。换句话说，在函数内定义一个嵌套的函数时，就构成了一个闭包，它允许嵌套函数访问外层函数的变量。通过返回嵌套函数，允许你维护对外部函数中局部变量、参数、和内函数声明的访问。这种封装允许你在外部作用域中隐藏和保护执行环境，并且暴露公共接口，进而通过公共接口执行进一步的操作。可以看个简单的例子：
function foo(){
var localVariable = 'private variable';
return function bar(){
return localVariable;
}
}
var getLocalVariable = foo();
getLocalVariable() // private variable
模块模式最流行的闭包类型之一，它允许你模拟公共的、私有的、和特权成员：
var Module = (function(){
var privateProperty = 'foo';
function privateMethod(args){
// do something
}
return {
publicProperty: '',
publicMethod: function(args){
// do something
},
privilegedMethod: function(args){
return privateMethod(args);
}
};
})();
模块类似于一个单例对象。由于在上面的代码中我们利用了(function() { ... })();的匿名函数形式，因此当编译器解析它的时候会立即执行。在闭包的执行上下文的外部唯一可以访问的对象是位于返回对象中的公共方法和属性。然而，因为执行上下文被保存的缘故，所
有的私有属性和方法将一直存在于应用的整个生命周期，这意味着我们只有通过公共方法才可以与它们交互。
另一种类型的闭包被称为立即执行的函数表达式(IIFE)。其实它很简单，只不过是一个在全局环境中自执行的匿名函数而已：
(function(window){
var foo, bar;
function private(){
// do something
}
window.Module = {
public: function(){
// do something
}
};
})(this);
对于保护全局命名空间免受变量污染而言，这种表达式非常有用，它通过构建函数作用域的形式将变量与全局命名空间隔离，并通过闭包的形式让它们存在于整个运行时(runtime)。在很多的应用和框架中，这种封装源代码的方式用处非常的流行，通常都是通过暴露一个单一的全局接口的方式与外部进行交互。
Call和Apply
这两个方法内建在所有的函数中(它们是Function对象的原型方法)，允许你在自定义上下文中执行函数。不同点在于，call函数需要参数列表，而apply函数需要你提供一个参数数组。如下：
var o = {};
function f(a, b) {
return a + b;
}
// 将函数f作为o的方法，实际上就是重新设置函数f的上下文
f.call(o, 1, 2); // 3
f.apply(o, [1, 2]); // 3
两个结果是相同的，函数f在对象o的上下文中被调用，并提供了两个相同的参数1和2。
在ES5中引入了Function.prototype.bind方法，用于控制函数的执行上下文，它会返回一个新的函数，并且这个新函数会被永久的绑定到bind方法的第一个参数所指定的对象上，无论该函数被如何使用。它通过闭包将函数引导到正确的上下文中。对于低版本浏览器，我们可以简单的对它进行实现如下(polyfill)：
if(!('bind' in Function.prototype)){
Function.prototype.bind = function(){
var fn = this,
context = arguments[0],
args = Array.prototype.slice.call(arguments, 1);
return function(){
return fn.apply(context, args.concat(arguments));
}
}
}
bind()方法通常被用在上下文丢失的场景下，例如面向对象和事件处理。之所以要这么做，是因为节点的addEventListener方法总是为事件处理器所绑定的节点的上下文中执行回调函数，这就是它应该表现的那样。但是，如果你想要使用高级的面向对象技术，或需要你的回调函数成为某个方法的实例，你将需要手动调整上下文。这就是bind方法所带来的便利之处：
function MyClass(){
this.element = document.('div');
this.element.addEventListener('click', this.onClick.bind(this), false);
}
MyClass.prototype.onClick = function(e){
// do something
};
回顾上面bind方法的源代码，你可能会注意到有两次调用涉及到了Array的slice方法：
Array.prototype.slice.call(arguments, 1);
[].slice.call(arguments);
我们知道，arguments对象并不是一个真正的数组，而是一个类数组对象，虽然具有length属性，并且值也能够被索引，但是它们不支持原生的数组方法，例如slice和push。
但是，由于它们具有和数组类似的行为，数组的方法能够被调用和劫持，因此我们可以通过类似于上面代码的方式达到这个目的，其核心是利用call方法。
这种调用其他对象方法的技术也可以被应用到面向对象中，我们可以在Java中模拟经典的继承方式：
MyClass.prototype.init = function(){
// call the superclass init method in the context of the "MyClass" instance
MySuperClass.prototype.init.apply(this, arguments);
}
也就是利用call或apply在子类(MyClass)的实例中调用超类(MySuperClass)的方法。
ES6中的箭头函数
ES6中的箭头函数可以作为Function.prototype.bind()的替代品。和普通函数不同，箭头函数没有它自己的this值，它的this值继承自外围作用域。
对于普通函数而言，它总会自动接收一个this值，this的指向取决于它调用的方式。我们来看一个例子：
var obj = {
// ...
addAll: function (pieces) {
var self = this;
_.each(pieces, function (piece) {
self.add(piece);
});
},
}
在上面的例子中，最直接的想法是直接使用this.add(piece)，但不幸的是，在Java中你不能这么做，因为each的回调函数并未从外层继承this值。在该回调函数中，this的值为window或undefined，因此，我们使用临时变量self来将外部的this值导入内部。我们还有两种方法解决这个问题：
使用ES5中的bind()方法
var obj = {
// ...
addAll: function (pieces) {
_.each(pieces, function (piece) {
this.add(piece);
}.bind(this));
},
// ...
}
使用ES6中的箭头函数
var obj = {
// ...
addAll: function (pieces) {
_.each(pieces, piece => this.add(piece));
},
}
在ES6版本中，addAll方法从它的调用者处获得了this值，内部函数是一个箭头函数，所以它集成了外部作用域的this值。
注意：对回调函数而言，在浏览器中，回调函数中的this为window或undefined(严格模式)，而在Node.js中，回调函数的this为global。实例代码如下：function hello(a, callback) {
callback(a);
}
hello('weiwei', function(a) {
console.log(this === global); // true
console.log(a); // weiwei
});
小结
在你学习高级的设计模式之前，理解这些概念非常的重要，因为作用域和上下文在现代Java中扮演着的最基本的角色。无论我们谈论的是闭包、面向对象、继承、或者是各种原生实现，上下文和作用域都在其中扮演着至关重要的角色。如果你的目标是精通Java语言，并且深入的理解它的各个组成，那么作用域和上下文便是你的起点。
参考资料
Understanding Scope and Context in Java
Java高级程序设计，section 4.2
Arrow functions vs. bind()
理解与使用Java中的回调函数
阅读理解专题训练三：标题的含义、作用 一、标题的含义 含义：表层含义+深层含义+中心 1、联系表层含义 标题的字面含义、文中记叙的内容 2、体会深层含义 修辞手法（比喻、拟人、象征、双关等），和文章内容相关的引申义，比喻义、象征义。 解题方法：1、把握标题的关键词语，联系全文内容，理解表层含义。2、抓住文章中的点题句，结合文章主旨，体会深层含义。 注：不是所有的标题都有表层和深层含义，要根据具体情况具体分析。 二、标题的作用 1、表明文章的写作对象； 2、概括文章的主要内容； 3、作为贯穿全文的线索； 4、揭示文章的主旨；表明文章的写作情感； 5、一语双关； 6、设置悬念、吸引读者的阅读兴趣； 7、生动形象、新颖含蓄、意味深长、耐人寻味，激发读者的阅读兴趣。 流泪的蓑衣 那件蓑衣，被我的父亲挂在老屋的土墙上。 土墙上有一截嵌入在泥里的木头，有些腐朽了，蓑衣就被挂在了土墙的木头上。蓑衣轻轻靠在土墙上，当夜晚的风吹穿过窗户，吹进老屋，蓑衣也就开始飘荡。而很长的时间里，在土墙的角落，蓑衣始终显得有些无趣和落寞。 已经很久了，蓑衣一直挂在那里，落满了灰尘与时光的碎片。它，好像被父亲遗忘了，被无情地挂在了土墙上。于是，蓑衣开始在一个下雨的夜里流泪了，它开始回忆起自己辉煌而又辛苦的一生。 它想，那应该是在很久远年代的一个雨天，有一个放牧的男子，荷蓑荷笠地走进了江南的细雨，或许是要去见一个想往已久的女子。而在唐朝风雨里，有一个诗人吟唱着这样的词句：“青箬笠，绿蓑衣，斜风细雨不须归。”蓑衣想到自己的前生，心里一阵喜悦。但它更愿意回忆的是和我父亲相依为命的苦涩的日子。 那时候，父亲在农村，在春三月的细雨里，父亲牵着牛，戴着斗笠，披着蓑衣行走在田埂上。或者，父亲在冬水田里，赶着牛犁田。或者，在稻田里插秧，蓑衣紧紧地贴着父亲的脊背。蓑衣被冷漠了一个冬天，终于感受到了来自我父亲的温暖。于是感动的泪水顺着蓑衣流了下来，滴落在冬水田里。 多少个这样的雨天，蓑衣紧贴着我父亲的脊背，行走在田间地头。可以说，在农村，看见了蓑衣，就好像看见了辛苦劳作的父亲。蓑衣被雨水冲刷，棕榈的颜色渐渐的褪却，它是农忙时劳动的功臣。农忙之后，蓑衣，又被父亲挂在了老屋的土墙上。 蓑衣想着这些昔日的事情，想着那些苦涩的日子，蓑衣躲在老屋的角落哭了。顺着土墙，有蓑衣哭泣的泪痕。但是，它万万没想到的是，我的父亲把它永远的挂在了乡下老屋的土墙上。 生活在乡下的父亲，终于被说服到城里和我们一起生活。父亲是在一个雨天离开乡村的，离开的时候，蓑衣高兴极了，以为父亲会和往日一样披上它，穿梭在细雨之中。但它失望了，它一直躲在那个角落，默默地等待我的父亲。 一转眼，父亲到城里已经生活了六年。那年回到乡下修缮老屋，才又看到父亲的蓑衣，像一件精致的蝴蝶标本，挂在土墙上，落满了厚厚的灰尘。这让我想起父亲披着蓑衣，在田间地头里辛勤劳作的日子。让我想起，父亲披着蓑衣，赶着牛从乡村的土路上回家的日子。让我想起，饭熟之后，在山坡上呼喊父亲，寻找那披着蓑衣的身影的日子。 但是，那件蓑衣，已经被父亲永远挂在了老屋的土墙上。但我相信，在每一个雨天，父亲都会想起那挂在土墙上默默流泪的蓑衣。 1、品味第三段中画线的句子，结合下文看看蓑衣的“辉煌”主要表现在哪些方面？ 2、蓑衣的泪水里蕴含着哪些复杂的情感？试简要分析。（4分） 3、根据文章内容概括回答。（6分） ①父亲是一个怎样的人？ ②第三段中“它，好像被父亲遗忘了，”父亲是否忘记了蓑衣？ 4、文章以“流泪的蓑衣”为题有什么好处？（可从构思、表达效果等方面赏析）读下面几行诗，按要求写作。 我以为自己能读懂春天/原来，我只知道春天过了是夏天 我以为自己能读懂青春/原来，我只把青春当成了一段时间 我以为自己懂得了母爱/原来，我把母爱当成了早餐 我以为自己懂得了友情/原来，我把朋友当成了玩伴 …… 请以“原来我没懂”为题写一篇文章。 要求：①文体自选；②不少于600字（写成诗歌不少于16行）； ③不得抄袭本卷中的材料；④文中不得出现真实的地名、校名、人名。要求：【优秀范文】 原来我没懂600字作文_1 她，终日静坐着，不曾与他人说话。于是，我一直认为——她的绽放只在于她自己的世界中。 她是一个智障女孩，拖着长长的马尾辫，抿着嘴，带着一张蜡黄的脸坐于学习班的角落里。一坐，就是一天。无人与她讲话，不知是不愿讲还是怎么的。她也不 1
Javascript鼠标事件大全 一般事件 事件浏览器支持描述 onClick IE3|N2|O3 鼠标点击事件，多用在某个对象控制的范围内的鼠标点击 onDblClick IE4|N4|O 鼠标双击事件onMouseDown IE4|N4|O 鼠标上的按钮被按下了onMouseUp IE4|N4|O 鼠标按下后，松开时激发的事件 onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件 onMouseMove IE4|N4|O 鼠标移动时触发的事件 onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件 onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象] 页面相关事件 事件浏览器支持描述 onAbort IE4|N3|O 图片在下载时被用户中断 onBeforeUnload IE4|N|O 当前页面的内容将要被改变时触发的事件 onError IE4|N3|O 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误 onLoad IE3|N2|O3 页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成 onMove IE|N4|O 浏览器的窗口被移动时触发的事件onResize IE4|N4|O 当浏览器的窗口大小被改变时触发
标题的含义与作用 【题型示例】 （1）文章为什么以XXX 为题？ （2）谈谈你对题目的理解。 （3）试分析题目的作用/好处、妙处。 （4）这个题目有什么含义？ （5）给文章拟（换）题目。 【课文例举】 含义类： 林海音的《爸爸的花儿落了》这篇文章的标题有什么含义呢？ 表层含义：夹竹桃花凋谢 深层含义：父亲的去世，我也要长大。 小说《变色龙》的标题有什么含义呢？ 含义：是比喻的说法，喻指像变色龙一样的奥楚蔑洛夫，含有强烈的讽刺意味。 作用类： 《藤野先生》 表明___________ 《芦花荡》 事件___________ 《十六年前的回忆》 暗示___________ 《智取生辰纲》 概述___________ 《音乐巨人贝多芬》 吐露___________ 《羚羊木雕》 贯穿___________（小说：推动情节发展） 《喂——出来》 设置___________ 总结：含义：表层含义：具体可感的事物：表面上是指…… 深层含义：抽象有内涵的精神或寄托情感：实际上指…… 作用：①线索 ②设置悬念 ③点明中心，写出……突出……表达…… 内容 内容 结构
[例文一] 长在岩石下面的小花 ①初二那年，我从家中那台十四英寸的黑白电视机中，看到了一幢幢高耸的大楼直插云霄，一座座盘旋的立交桥雄伟壮观，一辆接一辆的小汽车井然有序的穿梭不停，大街上的霓虹灯闪着诱人的光彩，商场里琳琅满目的商品让人眼花缭乱。 ②我目瞪口呆，原来城市是这样的美好啊! ③年少的我由此陷入了深深的忧伤， ④第二天，我质问父亲：“你怎么不是城里人呢?”我想，父亲如果是城里人该有多好，那我也就是城里人了。 ⑤暑假，几名城里的大学生到我们这座大山里写生，他们背着画夹，戴着大阳帽， 洋气十足。其中有一个叫黄春草的女孩儿，就借住在我家。 ⑥有一天早上，为了画日出，天刚蒙蒙亮她就起床了。我缠着要看她画画，就和她一起去了。我们一起登上了山顶，大阳升起来了，红彤彤的，将云彩映照得格外艳丽。黄春草支起画夹，神情专注地画着。等她画完画，我们就坐在一块石头上聊天。我说：“我真羡慕你，生活在大城市里，享受着富足的生活和良好的教育，像我这样活着实在没有一点儿意思。”可她却说：“不要把别人的生活想得太美好，小小年纪不要如此多愁善感。我给你讲一个故事吧。” ⑦于是她讲道：“在一座大山深处，有一个小女孩儿，十岁那年，母亲病逝；十二岁那年，父亲抬木头时被砸伤，从此干不了体力活儿。她每天背着个破布包，跑步去六公里外的学校上学。放学后，她还得割猪草，像男人一样在腰上缠根绳子，下到悬崖下面挖药材，挣点找补贴家用和交学杂费。后来她考上了大学，她一共贷了八千多元的助学贷款……” ⑧我想不到这个世界上还有比我更不幸的人，我以为她在给我编故事，黄春草却说这个女孩儿就是她。 ⑨我惊讶地看着黄春草，她的脸上非常平静。我想，比起黄春草，我幸运得多了，最起码，我还有爱我的爸爸和妈妈。 ⑩黄春苹的手指向远处，顺着她手指的方向，我惊讶地发现，一朵不知名的小花竟然生长在一块伸出的岩石下面。那块岩石像伸出的房檐一样，严严实实地遮挡住了阳光，但是小花竟然绽放了。她说：“阳光虽然没能直接照射到小花身上，但小花心里已感受到了阳光的存在，哪怕是一点点余光。” ⑾是呀，我们不能选择自己出生的时间和地点，但我们可以选择顽强，在艰苦的环境中一样能够茁壮成长，就像那朵长在岩石下面的小花。
主要分四个部分 第一部分：浏览器的按键事件 第二部分：兼容浏览器 第三部分：代码实现和优化 第四部分：总结 第一部分：浏览器的按键事件 用js实现键盘记录，要关注浏览器的三种按键事件类型，即keydown，keypress和keyup，它们分别对应onkeydown、onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件，依次是keydown，keypress，然后是按键释放时候的keyup。 在这3种事件类型中，keydown和keyup比较底层，而keypress比较高级。这里所谓的高级是指，当用户按下shift + 1时，keypress是对这个按键事件进行解析后返回一个可打印的“!”字符，而keydown和keyup只是记录了shift + 1这个事件。[1] 但是keypress只能针对一些可以打印出来的字符有效，而对于功能按键，如F1-F12、Backspace、Enter、Escape、PageUP、PageDown和箭头方向等，就不会产生keypress事件，但是可以产生keydown和keyup事件。然而在FireFox中，功能按键是可以产生keypress 事件的。 传递给keydown、keypress和keyup事件句柄的事件对象有一些通用的属性。如果Alt、Ctrl 或Shift和一个按键一起按下，这通过事件的altKey、ctrlKey和shiftKey属性表示，这些属性在FireFox和IE中是通用的。 第二部分：兼容浏览器 凡是涉及浏览器的js，就都要考虑浏览器兼容的问题。 目前常用的浏览器主要有基于IE和基于Mozilla两大类。Maxthon是基于IE内核的，而FireFox和Opera是基于Mozilla内核的。 2.1 事件的初始化 首先需要了解的是如何初始化该事件，基本语句如下： function keyDown(){} document.onkeydown = keyDown; 当浏览器读到这个语句时，无论按下键盘上的哪个键，都将呼叫KeyDown()函数。 2.2 FireFox和Opera的实现方法 FireFox和Opera等程序实现要比IE麻烦，所以这里先描述一下。 keyDown()函数有一个隐藏的变量--一般的，我们使用字母“e”来表示这个变量。 function keyDown(e) 变量e表示发生击键事件，寻找是哪个键被按下，要使用which这个属性： e.which
我的记录（JavaScript事件）JavaScript 事件冒泡简介及应用实例 一、什么是事件冒泡 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序，如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活），或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）。 打个比方说：你在地方法院要上诉一件案子，如果地方没有处理此类案件的法院，地方相关部门会帮你继续往上级法院上诉，比如从市级到省级，直至到中央法院，最终使你的案件得以处理。 二、事件冒泡有什么作用 （1）事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件。 【集中处理例子】
(1)FireFox、Opera、Chrome 事件对应的函数有一个隐藏的变量e，表示发生事件。 e有一个属性e.which指示哪个键被按下，给出该键的索引值（按键码）。 静态函数String.fromCharCode()可以把索引值（按键码）转化成该键对应的的字符。eg： [html]view plaincopyprint? 1. 2. FireFox、Opera、Chrome中输入：a 输出：按键码：97 字符：a (2)IE IE不需要e变量，window.event表示发生事件。 window.event有一个属性window.event.keyCode指示哪个键被按下，给出该键的索引值（按键码）。 静态函数String.fromCharCode()可以把索引值（按键码）转化成该键对应的的字符。eg： [html]view plaincopyprint?
浅谈 JavaScript 的运行机理
——hechangmin@https://www.doczj.com/doc/eb12038215.html, 2010.10
这个话题看似简单，其实笔者是几次三番的下笔，又几次三番的放弃。因为这个内容， 对于很多 JavaScript 的开发人员来讲都是一知半解的，当然笔者也在其中，今天之所以出来 献丑了，首先是有了更深的认识，其次微博上有人说“献丑是进步”，如果献丑那必定是有同 道之人能指出纰漏，那对于笔者本人来讲何尝不是进步呢？深表赞同！ 今天会以几个小小的实例来解读这个课题。希望能与大家共勉。 首先得先了解 JavaScript 执行起来的流程，笔者先简单画了一个 javascript 的执行流程图：
重点解释的有三步：词法分析、预解析、执行。 script 代码段：用 script 标签分隔的 js 代码或引入的 js 文件。
(1). 预解析 我们先从几个常见的 javascript 小题目入手，请大家先看看下面的范例输出什么？ 对于 javascript 的从业者可以试着运行下。看看你的答案和实际输出一致吗？别小看这样两 行脚本，这样的题目被当作 JavaScript 的笔试或者面试题目是常有的事情。 实际输出结果为：“undefined”, 这种现象被称成“预解析”：JavaScript 脚本引擎优先解析 var 变量和 function 定义。在预解析 完成后，才会执行代码。 由于变量 i 是被 var 声明的，而被优先解析。所以可以理解为在 alert(i) 执行时候，程序前 面已经有 var i; 所以上面代码等效解释为： 注意：预解析不会报错，因为他只解析正确的声明。 (2). 解释（主要指词法分析，生成语法树的过程） 请注意，这里‘解释’的定义是笔者自己方便理解自己定义的，而这个‘解释’并不在预解 析之后。 我们知道 JavaScript 是脚本语言，脚本语言是相对于高级编译型语言而言他是解释性的。解 释性语言没有编译成二进制代码，但是要进入到运行阶段，都应该是会经过词法分析、语法 分析生成语法树、语义检查过程，笔者把这个环节叫做“解释”，如果读者有更科学的名字记 得告诉我。 解释性语言在生成语法树后，就可以执行了。（这个跟脚本引擎编译器有关）
ECMAScript recognises two categories of object, "Native Object" and "Host Object" with a sub-category of native objects called "Built-in Object" (ECMA 262 3rd Ed Section 4.3). Native objects belong to the language and host objects are provided by the environment, and may be, for example, document objects, DOM nodes and the like. Native objects are loose and dynamic bags of named properties (some implementations are not that dynamic when it comes to the built in object sub-category, though usually that doesn't matter). The defined named properties of an object will hold a value, which may be a reference to another Object (functions are also Objects in this sense) or a primitive value: String, Number, Boolean, Null or Undefined. The Undefined primitive type is a bit odd in that it is possible to assign a value of Undefined to a property of an object but doing so does not remove that property from the object; it remains a defined named property, it just holds the value undefined. The following is a simplified description of how property values are read and set on objects with the internal details brushed over to the greatest extent possible. Assignment of Values Named properties of objects can be created, or values set on existing named properties, by assigning a value to that named property. So given:- var objectRef = new Object(); //create a generic javascript object. A property with the name "testNumber" can be created as:- objectRef.testNumber = 5; /* - or:- */ objectRef["testNumber"] = 5; The object had no "testNumber" property prior to the assignment but one is created when the assignment is made. Any subsequent assignment does not need to create the property, it just re-sets its value:- objectRef.testNumber = 8; /* - or:- */ objectRef["testNumber"] = 8; Javascript objects have prototypes that can themselves be objects, as will be described shortly, and that prototype may have named properties. But this has no role in assignment. If a value is assigned and the actual object does not have a property with the corresponding name a property of that name is created and the value is assigned to it. If it has the property then its value is re-set. Reading of Values It is in reading values from object properties that prototypes come into play. If an object has a property with the property name used in the property accessor then the value of that property is returned:- /* Assign a value to a named property. If the object does not have a property with the corresponding name prior to the assignment it will have one after it:- */ objectRef.testNumber = 8; /* Read the value back from the property:- */ var val = objectRef.testNumber; /* and - val - now holds the value 8 that was just assigned to the named property of the object. */
A 事件流（event flow ） 事件模型分为两种：冒泡型事件、捕获型事件。 冒泡型（dubbed bubbling ）事件：指事件按照从最精确的对象到最不精确的对象的顺序逐一触发。 捕获型（event capturing ）事件：它与冒泡型事件相反，指事件按照从最不精确的对象到最精确的对象的顺序逐一触发。 捕获型事件也被称作自顶向下（DOM层次）的事件模型。 由于IE 浏览器不支持捕获型事件，因此并没有被广泛应用。 B 事件监听 i > 通用监听方法 示例一：
给浏览器添加监听方法，分为两种：IE 中的监听方法、标准DOM 的监听方法。 ii > IE 中的监听方法 在IE 浏览器中，每个元素都有两个方法来处理事件的监听。分别是：attachEvent( )和detachEvent( )。 附加事件方法：[object].atta chEvent(“事件名”，方法名); 分离事件方法：[object].detachEvent(“事件名”，方法名); 如：o_p.detachEvent(“onclick”,click_A); 示例：
●使用这种方式可以为同一元素添加多个监听函数； ●在IE 浏览器中，函数的执行顺序与函数的添加顺序相反； ●在IE 浏览器中，虽然函数有先后执行顺序，但都会同时调用； iii > 标准DOM 的监听方法 在使用标准DOM 的浏览器中，每个元素也有两个方法来处理事件的监听。分别是：addEventListener( )和removeEventListener( )。
添加事件监听方法：[object].addEventListener(“事件名”，方法名，事件模型); 移除事件监听方法：[object].removeEventListener(“事件名”，方法名，事件模型); 注意： 这里的“事件名”不能带on ，如：click（如果是onclick 则错误！） “事件模型”为boolean 类型，通常设置为false ，即“冒泡型”事件。（如果是true 则为“捕获型”事件） 示例：
标题的含义及作用 【考点透视】 标题是文章的眼睛。一般情况下，标题是文章内容、作品风格、写作意图的直接或间接的表现，不少文章的标题与中心意思、作者情感有密切的联系。综观中考阅读试题，关于文章标题的考题出现的频率较高，因此，有必要来探究此类题的设题类型和答题技巧。 【设题类型】 从历年的中考试题来看，此类题目的主要题型有三个：1、标题的含义是什么。2、标题的作用是什么。3、评价标题的好处。 【解题指导】 一、分析标题的含义 标题含义一般从表层含义和深层含义两个方面来分析。表层含义即标题的字面意义，深层含义即引申义、比喻义、象征义。 如人教版七年级课文《爸爸的花儿落了》一文，标题的表层含义是夹竹桃凋谢，深层含义是父亲的去世。 标题如果是比喻句的，文中往往不是围绕标题的字面含义来展开叙述，那么我们就应该联系文章的具体内容，弄清比喻义，这样我们就可以领悟出标题的深刻含义。比如"变色龙"的字面意义是一种善于变色的蜥蜴，而契诃夫的《变色龙》中的"变色龙"是比喻像变色龙一样的奥楚蔑洛夫。 二、分析标题的作用 要了解标题的作用有那些，我们不妨来看看几篇课文。《藤野先
生》--表明写作对象，《智取生辰纲》--关联主要情节，《羚羊木雕》--贯穿全文的线索，《心声》--透露情感主旨。此外还有含蓄寓意，引起读者兴趣，制造悬念。 如2008年江苏南京卷的《田野上的白发》中的"白发"：（1）"白发"是全文的叙事线索；（2）"白发"是母亲的形象特征（表明写作对象）；（3）敲盆赶鼠、跪着插秧时的"白发"，突出母亲的辛劳（关联主要情节）；（4）表达出作者对母亲的心疼、对母亲的爱和对母亲怀念（透露情感主旨）。 另外，设题类型中的"标题好不好？能不能换另外一个"这类考题实际上也是在考查标题的作用。但是要按照要求来答： 第一步，表明观点（如：不可）； 第二步，说出理由（围绕标题的作用）； 第三步，说出改后的标题的不足。 如2008年浙江绍兴卷《一只土碗》的第8题，参考答案：不可。理由是：（1）"一只土碗"作为小说线索，情节围绕它展开；（2）以"一只土碗"为标题，寓意含蓄，可以引起读者兴趣；（3）以"转变"为标题，过于直白，不够含蓄。 总之，标题是文章的眼睛和标志，它常常透露出作者的观点或感情倾向，暗示文章的主旨，串联文章的结构，起到揭示主旨和贯穿全文的线索作用。 【概念阐释】 题目含义理解题能快捷、准确地考查出学生领悟作品内涵、初步
《作用域与闭包：this，var，(function () {})》目标 无具体目标 知识点 1.理解js 中var 的作用域 2.了解闭包的概念 3.理解this 的指向 课程内容 *es6中新增了let 关键词，与块级作用域，相关知识参 考：https://www.doczj.com/doc/eb12038215.html,/#docs/let * var 作用域 先来看个简单的例子： var parent=function () { var name ="parent_name"; var age =13; var child=function () { var name ="child_name"; var childAge =0.3;
// => child_name 13 0.3 console.log(name, age, childAge); }; child(); // will throw Error // ReferenceError: childAge is not defined console.log(name, age, childAge); }; parent(); 直觉地，内部函数可以访问外部函数的变量，外部不能访问内部函数的变量。上面的例子中内部函数child 可以访问变量age，而外部函数parent 不可以访问child 中的变量childAge，因此会抛出没有定义变量的异常。 有个重要的事，如果忘记var，那么变量就被声明为全局变量了。 function foo() { value ="hello"; }foo();console.log(value); // 输出hello console.log(global.value) // 输出hello 这个例子可以很正常的输出hello，是因为value变量在定义时，没有使 用var关键词，所以被定义成了全局变量。在Node 中，全局变量会被定义在global对象下；在浏览器中，全局变量会被定义在window对象下。
Company name WEB 前端开发技术 HTML JavaScript CSS WEB 前端开发技术 第11章JavaScript 事件分析 计算机科学与技术系
Web前端开发技术主要内容 计算机科学与技术系 ?掌握事件、事件类型的概念 ?掌握事件处理的机制 ?掌握事件名称与句柄的关系 ?学会编写各类的事件响应程序
计算机科学与技术系 Web前端开发技术11.1 事件编程 事件编程:让用户不仅能够浏览页面中的内容，而且还可以和页面元素进行交互。 事件-事件是可以被JavaScript侦测到的行为(ACTION)。 事件源Window Form Mouse key 事件 单击事件 双击事件 事件句柄 Onclick ondblclick 编写事件 处理代码
Web 前端开发技术事件驱动案例导入 计算机科学与技术系
计算机科学与技术系 Web 前端开发技术 11.1 事件编程（续） 1.网页访问中常见的事件 鼠标单击：例如单击button 、选中checkbo x 和radio 等元素；鼠标进入、悬浮或退出页面的某个热点：例如鼠标停在一个图片上方或者进入table 的范围； 键盘按键：当按下按键或释放按键时；页面或图像载入：例如页面body 被加载时；在表单中选取输入框或改变输入框中文本的内容：例如选中或修改了文本框中的内容；确认表单：例如当准备提交表单的内容。 事件类型：1.鼠标事件2.键盘事件3.浏览器事件
1、javascript 是一种基于对象，和事件驱动的并具有安全性的脚本语言； 基于对象，动态语言，无需编译，直接解释执行； 2、可以放在的地方； A、
中，一对之间； B、单独文件中 C、将脚本程序代码作为属性值、javascript 3、保留字以及关键字； 4、javascript基本语法： 4.1 标识：大小写字母，数字，下划线，和美元符号：不能以数字开头； 4.2 javascript严格区分大小写 4.3 每条语句必须以分号结束；（不写，一般没事，但是可能会引起不必要的歧义） 4.4 多行注释 /* */ 单行注释：//4.5 5、数据类型:(数字，boolean，String字符串；日期什么的是对象了) 特殊值：NaN，Infinity，函数isNaN（）；isFinite（）； Boolean，取值只能是true，和false 全是小写 逻辑运算符
var a=100; var b=0; var c=a||b; alert(c);//返回值是100：就是当两边返回值都是false时，返回第一个或最后一个不为false的值； 6、什么值在javascript中是false？ 逻辑运算中，0，“”，false，null，undefined，NaN均表示false 6.1想要赋个默认值：怎么办？ function test(e){ e=e||new object(); if(https://www.doczj.com/doc/eb12038215.html,!='ang'){ alert(e);}} test(3); 看这里： Var sth=test;//相当于将函数赋给一个变量，这个变量之后可以传参运行了；Alert(sth(100)); 7、javascript中的系统函数： 7.1 编码解码：alert(encodeURI('sht中午啊'));处理中文情况；decodeURI，对编码的进行解码； 7.2、数值转换； parseInt(‘’);//将其他类型转换成数字；原理：从第一个字符开始，如果第一个可以转换就继续向下走，直到不能转，省略后面，如何第一个都不行，就直接返回NaN格式；
获取事件对象的全家 事件对象的获取很简单，很久前我们就知道IE中事件对象是作为全局对象( window.event )存在的，Firefox中则是做为句柄( handler )的第一个参数传入内的。所以一行代码就可以搞定 view sourceprint? 1var evt = window.event || arguments[0]; 下面分三种添加事件的方式讨论，你也许会看到以前没有看到过的获取方式。 1，第一种添加事件的方式，直接在html的属性中写JS代码 view sourceprint? 1