Javascript 链式作用域详细介绍

 Javascript 链式作用域

其实对于Javascript链式作用域的描述，包括，JS权威指南，都有些太冗长了--但是很准确：JavaScript中的函数运行在他们被定义的作用域里，而不是他们被执行的作用域里。

这句话有点难懂，但程序的设计，基本都是为了简单，便于理解的。记住JS中经典的一句话是，一切皆对象。

说白了链式作用域，其实就是Javascript的一个特性：子函数中可以访问父函数的所有变量。当然也包括全局变量window（一般的函数定义function a(){}，其实都是window对象的子函数）。另外补充一下，函数定义有两种方式，其实略有差别：

var a=function(){}和function a(){}，

稍后再解释他们的区别。

所以，我们看Crockford的<<Javascript语言精粹>>中就提到，要在一个函数中定义变量，要养成良好的习惯，请直接在函数开头定义变量。JS中这点上有别于其它语言的要求----尽量推迟变量定义（使用前定义）。

我们看一下laruence提供的例子：

var name = 'laruence';
functionecho(){
   alert(name);
   var name = 'eve';
   alert(name);
   alert(age);
}

echo();

这个例子其实很有迷惑性（会让人错误的以为，输出结果是：laruence,eve,error；其实结果是：undefined,eve,error），关键就是因为echo()函数中定义的var name='eve'。但其实换个写法，这个例子就很清楚了：

var name = 'laruence';
function echo() {
   var name;
   alert(name);
   name = 'eve';
   alert(name);
   alert(age);
}

echo();

其实，上面的函数在JS引擎解析的时候，就会被解析成这样。如果你是初学者，其实这样理解就可以了。但如果你有别的程序的编程经验，例如java。就很容易被惯用思维给套住了，PS：本人就是给套住的一个。所以，还是按照Crockford的建议把，定义变量，请在函数顶部！！

还记得之前的问题吗？

var a=function(){}和function a(){}的区别。

它们的区别还变量的定义比较类似。一切皆对象。

他们两个在函数调用时，基本是等价的，但如果调用函数，在定义函数前就会有问题了。其实区别在于等号和function关键字。
var和function定义在预编译的时候被提前，var只是占位，具体赋值要等到JS引擎执行到这行。而function定义会在JS引擎预编译阶段就被直接放入到调用对象中。

还是要举例：

例子一：

alert( echo );//function echo(){return 1;};
function echo(){return 1;};
alert( a );//undefined
var a=function(){return 1;};

所以，函数的定义也可以引申出一句话，请将函数定义放在顶部（先定义后调用）！！

其实还是习惯的问题，JS中一些代码的优良习惯有别于其它语言。建议大家读一下<<Javascript语言精粹>>。在开始学习一门语言时，最好从欣赏优秀的代码开始。而JS中，大家都喜欢用一系列充满迷惑性的代码来加深自己的理解，这其实是一个误区。

另外说一点，this关键字，laruence的解释很简洁到位："谁调用，谁就是this"。英文版更详细一点：“In JavaScript this always refers to the “owner” of the function we're executing, or rather, to the object that a function is a method of. ”，中文解释：“在JavaScript中，this永远引用我们所执行函数的拥有者，更准确的说，this引用一个函数的方法对象”。

看看下面的例子，也是误导人的：

function a(){
 g_value="uk";
}
a();
alert(g_value);

其实，比较友好的写法应该是这样：

function a(){
 this.g_value="uk";
}
a();//a.apply(this);
alert(this.g_value);

关于this关键字，和别的语言也有区别。首先它并不是实例的引用，而是调用它的上下文。上面例子的a()，等价于a.apply(this);

call和apply的用法是一样的，区别就在参数传递上。一个是一个一个传参数的，一个是将参数作为类数组传递的（注意这个地方是类数组）。

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • javascript 操作cookies详解及实例

    javascript 操作cookies详解 这段操作cookies的方法我使用很久了,但是一直一来没遇到什么问题,今天在做一个在第一个页面保存了cookies,第二个页面获取或者第三个页面获取的功能中,发现了方法的局限性,比如,第一个页面路径为 http://xxxxx/cyb-car2016/h5OfficeWorker/index,第二个页面路径为 http://xxxxx/cyb-car2016/h5AlertController/index,其中除了域名是一样之外,还有一个命名空间不一

  • js实现楼层导航功能

    js实现楼层导航功能

    图如下所示: 1.点击跳转到相应区域: 页面scroll掉的距离 = 目标板块在文档中的垂直坐标 - 起始板块(目标位置)到视图顶部的距离: document.body.scrollTop = scrollLength; document.documentElement.scrollTop = scrollLength; 2.滚动滚动条时对应的导航链接被激活 每个板块的导航链接对应一个长度区间,当滚动条滚动调的长度落在该区间时,该导航条则被选中.区间范围为当前板块的scrollTop值(包含)~

  • 基于JS实现移动端向左滑动出现删除按钮功能

    基于JS实现移动端向左滑动出现删除按钮功能

    最近在做移动端项目时,需要实现一个列表页面的每一项item向左滑动时出现相应的删除按钮,本来想着直接使用zepto的touch.js插件,因为之前实现相同的功能时用过这个插件,当时还挺好用的,直接使用它的swipeLeft和swipeRight方法即可,可是今天又开始做这个功能时,却发现这两个方法在使用时毫无效果,一点反应都没有.上网查资料,又下载了最新版本的zepto和touch.js,都没有用,也不知为什么?所以就弃用了这个插件. 下面是我后来实现后的代码,其实就是用了原生js的touch事

  • javascript 网页进度条简单实例

    javascript 网页进度条简单实例 最近学习新的知识,遇到一个小功能网页进度条,发现一篇文章还是不错的,这里记录下,也许能帮助到大家, 实例代码: <!DOCTYPE html> <html> <head> <style> #box {float:left;width:100%;height:18px;border:1px solid;} #bar {float:left;width:100%;height:18px;border:0px;backgr

  • 微信小程序 引用其他js文件实现代码

    微信小程序如何引用其他js文件 1.我们先建立一个common.js文件,在common.js编写我们的程序, function myfunc() { console.log("myfunc...."); } module.exports.myfunc = myfunc; 这样暴露接口,这里不暴露是不能引用的, 在文件域js内 var common = require("../../common.js");去链接过来,光链接过来还不行! var app; var c

  • js实现带简单弹性运动的导航条

    js实现带简单弹性运动的导航条

    晚上跟着视频敲了下 弹性菜单的代码,先记下来 效果如下: 代码如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } .ul1{ width:450px; height:30px; margi

  • js实现简易垂直滚动条

    js实现简易垂直滚动条

    效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>垂直滚动条</title> <style type="text/css"> .con { width: 350px; height: 600px; border: 1px solid saddlebrown; position: relativ

  • js获取浏览器和屏幕的各种宽度高度

    一:网页可见区域宽高,不包括工具栏和滚动条(浏览器窗口可视区域大小) 1.对于IE9+.chrome.firefox.Opera.Safari: window.innerHeight浏览器窗口的内部高度: window.innerWidth浏览器窗口的内部宽度: 2.对于IE8.7.6.5: document.documentElement.clientHeight:表示HTML文档所在窗口的当前高度: document.documentElement.clientWidth:表示HTML文档所

  • Javascript 链式作用域详细介绍

     Javascript 链式作用域 其实对于Javascript链式作用域的描述,包括,JS权威指南,都有些太冗长了--但是很准确:JavaScript中的函数运行在他们被定义的作用域里,而不是他们被执行的作用域里. 这句话有点难懂,但程序的设计,基本都是为了简单,便于理解的.记住JS中经典的一句话是,一切皆对象. 说白了链式作用域,其实就是Javascript的一个特性:子函数中可以访问父函数的所有变量.当然也包括全局变量window(一般的函数定义function a(){},其实都是win

  • JavaScript可迭代对象详细介绍

    目录 1.迭代器 2.迭代器接口与可迭代对象 3.自定义可迭代对象 3.1.可迭代的Range对象 3.2.使用Generator函数作为迭代器接口 3.3.可迭代的List 3.3.可迭代的迭代器 4.可迭代对象的意义 5.使用可迭代对象 6.后记 1.迭代器 迭代器是借鉴C++等语言的概念,迭代器的原理就像指针一样,它指向数据集合中的某个元素,你可以获取它指向的元素,也可以移动它以获取其它元素.迭代器类似于数组中下标的拓展,各种数据结构,如链表(List).集合(Set).映射(Map)都有

  • vue视图响应式更新详细介绍

    目录 概述 思路 第一步统一封装更新函数 第二步监听并触发视图更新 引入Dep管家 实现下语法糖v-model 概述 前面两篇文章已经实现了对数据的变化的监听以及模板语法编译初始化,但是当数据变化时,视图还不能够跟随数据实时更新.本文就在之前的基础上介绍下视图响应式更新部分. 思路 统一封装更新函数 待数据发生改变时调用对应的更新函数 这里思考个问题: 在何时注册这个更新函数? 如何找到对应的更新函数? 第一步统一封装更新函数 基于上篇文章compile的部分,将数据初始化的部分统一封装起来.

  • JavaScript的function函数详细介绍

    JavaScript的function函数详细介绍

    通过函数来封装任意多条语句,而且可以在任何地方.任何时间调用执行. 而我们的JavaScript脚本语言比较特殊,相对于C语言,它的参数是不需要数据类型加持的.返回值return,我就不过多描述,他是和 C语言通的,如果没写他就会自动返回undefined function fun(x,y){ } //写成这样就可以声明一个函数 以我的理解他就是以对象的形式来传入参数,通过对象的各项属性值(引用类型的值),来作为我的实际参数, 例如我有以下做法: function fun(x, y) { //

  • JavaScript可视化与Echarts详细介绍

    JavaScript可视化与Echarts详细介绍

    目录 一.可视化介绍 二.可视化库介绍 三.Echarts Echarts引入和使用 了解基础配置 一.可视化介绍 可视化:将数据用图表展示出来,让数据更加直观.让数据特点更加突出 应用场景:营销数据.生产数据.用户数据 二.可视化库介绍 常见的数据可视化库: D3.js:目前 Web 端评价最高的 Javascript 可视化工具库(入手难) ECharts.js:百度出品的一个开源 Javascript 数据可视化库 Highcharts.js:国外的前端数据可视化库,非商用免费,被许多国外

  • JavaScript 链式结构序列化详解

    一.概述 在JavaScript中,链式模式代码,太多太多,如下: if_else: if(...){ //TODO }else if(...){ //TODO }else{ //TODO } switch: switch(name){ case ...:{ //TODO break; } case ...:{ //TODO break; } default:{ //TODO } } 疑问:诸如上述这些链式代码,倘若,我们想将其扁平化链式处理呢?如下: //fn1,f2,f3为处理函数 _if(

  • 使用JavaScript链式编程实现模拟Jquery函数

    代码很简单,主要是给大家提供个思路,也算是学习javascript这么长时间的一个小小的练手. 链式编程 是将多个操作(多行代码)通过点号"."链接在一起成为一句代码.链式代码通常要求操作有返回值,但对于很多操作大都是void型,什么也不返回,这样就很难链起来了,当然也有解决办法,可能不太优雅.链式编程的新思想在jQuery中已流行使用 复制代码 代码如下: <span>Hello,World!</span>  <script type="tex

  • javascript面向对象入门基础详细介绍

    什么是对象 简单点说,编程语言中的对象是对现实中事物的简化.例如,我们一个人就是一个对象,但是编程语言很难完全描述一个这样复杂的对象.所以我们必须做出简化,首先,将人简化成属性和行为的组合,然后仅仅保留对程序有意义的几个属性以及行为.例如,我们做一个统计某学校的人的身高的程序,那么我们在这个程序中就可以把人的行为省略掉,只保留行为,并且只保留身高这一个属性.这样,我们就得到了一个最简单的对象. JavaScript字符串对象 对象的属性 其实我们之前在HTML DOM中已经就是在使用对象了.例如

  • JavaScript中的ArrayBuffer详细介绍

    JavaScript中的ArrayBuffer详细介绍

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

  • javascript中的作用域scope介绍

    而在javascript中,变量的作用域是按函数来划分的--变量在某个函数范围内有效.比如: 复制代码 代码如下: var f = false; if(true) { var f = true; } //此时f位于if内,也就是块内,等价于还是全局范围内 alert(f) //所以,结果为true 再如下例: 复制代码 代码如下: var f = false; function test() { var f = true; //这是函数内定义的变量,只在函数内部有效,函数执行完毕后,该变量将被释

随机推荐