函数的作用域与this指向是js中很重要的一部分,理清这点东西需要个逻辑,看看我的逻辑怎么样...

下面是个提纲,可以直接挑你感兴趣的条目阅读。

  • 函数的定义方式:直接定义(window下,内部定义),对象的方法,对象原型的方法;
  • 函数的调用方式:直接调用,call/apply,with
  • 对于直接定义的函数和对象的方法,作用域默认状态下是它的定义处的作用域链。
  • 对于直接定义的函数,this指向window。
  • 对于对象的方法,this指向实例化对象(对应于实例化对象默认返回this的情况)。
  • 用call/apply改变方法的this指向
  • 在函数或方法的定义时可以通过with改变其作用域链。

下面分开来具体说说:

函数的定义,如提纲中提到的可以分为两种:直接定义(window下,内部定义),对象的方法(或对象原型的方法)。从下面的示例代码中可以看到函数fn1与fn2以及对象的方法doFunction在函数使用name时name的值来自相应的域。

在使用name的值时将“name”用“this.name”来代替会出现什么情况呢,看下例:

从结果来看可以验证提纲中的第4和5条,也可以看到this和作用域是两套分离的链,遵循个自的变量查询逻辑,具体的查询逻辑在下面的性能分析中会提到,如果是新手建议先看一下“js的作用域链”方面的基础知识。

关于函数的调用方法,我用下面的方示例说明提纲中的第2、6条:

调用时call和apply的使用是为了改变被调用函数的this指向。with的使用是为了改变被调用函数中变量的查询域。我们把上例中的call和name前的this去掉再加上with来演示with的作用。

看到with的使用并不方便,需要在被调用函数中添加with,有人可能想能不能向下面那样调用来整体改变变量作用域而不去改变被调用函数呢?

with (myScope) {
fn1();
fn2();
var obj = new MyObj();
obj.doFunction();
}

很遗憾,不可以!所以在一些成熟的框架中随处可见call和apply的使用,却很少用到with,在用JSHint检测js语法的时候with处都标了小红点,在一些js编码指导中也建议尽量少用with,因为with改变了变量的默认查询链,所以会给后期的维护人员一些困惑,还有性能方面的一些考虑,请慎用with。

此文先到此为止,关于更深入的探索,与一些性能方面的注意事项请看我的另一篇博文:函数的作用域与this指向 --- 性能篇

js函数的作用域与this指向的更多相关文章

  1. 函数的作用域与this指向 --- 性能篇

    紧接上一篇博文:js函数的作用域与this指向 先来说说this的作用于链,this后的属性或者方法在使用时是先从本实例中查找,如果找到就先返回,如果没找到就接着向上从原型链中查找,如果有多重继承关系 ...

  2. js函数与作用域,了解函数基本概念

    通过js基础语法了解到js的值包含数字,字符串和布尔值;js运算符分为算数,赋值,比较和逻辑运算符;js的流程控制包含条件判断if,switch选择;循环for while:下面js的函数及作用域,学 ...

  3. 深入理解JS函数中this指针的指向

    函数在执行时,会在函数体内部自动生成一个this指针.谁直接调用产生这个this指针的函数,this就指向谁. 怎么理解指向呢,我认为指向就是等于.例如直接在js中输入下面的等式: console.l ...

  4. JS核心系列:浅谈函数的作用域

    一.作用域(scope) 所谓作用域就是:变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的. function scope(){ var foo = "global&quo ...

  5. js对象系列【二】深入理解js函数,详解作用域与作用域链。

    这次说一下对象具体的一个实例:函数,以及其对应的作用域与作用域链.简单的东西大家查下API就行了,这里我更多的是分享自己的理解与技巧.对于作用域和作用域链,相信绝大多数朋友看了我的分享都能基本理解,少 ...

  6. js总结(二):函数、作用域和this

    function Container( properties ) { var objthis = this; for ( var i in properties ) { (function(){ // ...

  7. 【js】 vue 2.5.1 源码学习(六) initProxy initLifeCycle 渲染函数的作用域代理

    大体思路 (五) 1. initProxy 渲染函数的作用域代理 ==> es6 如果支持proxy (hasProxy) 就用proxy 不支持就用 defineProperty() prox ...

  8. 在iframe里调用parent.func()引出的js函数运行在它们被定义的作用域里,而不是它们被执行的作用域里

    有个document里定义了一个函数func(),同时在document里嵌入了一个iframe,在这个iframe里调用父窗口的方法:parent.func(),本来我以为这个函数的运行环境是在这个 ...

  9. JS 函数作用域及变量提升那些事!

    虽然看了多次js函数作用域及变量提升的理论知识,但小编也是一知半解~ 这几天做了几道js小题,对这部分进行了从新的理解,还是有所收获的~ 主要参考书籍: <你不知道的JavaScript(上卷) ...

随机推荐

  1. 2016-2017 ACM-ICPC, NEERC, Southern Subregional Contest J. Bottles

    J. Bottles time limit per test 2 seconds memory limit per test 512 megabytes input standard input ou ...

  2. DOM 遍历-同胞

    在 DOM 树中水平遍历 有许多有用的方法让我们在 DOM 树进行水平遍历: siblings() next() nextAll() nextUntil() prev() prevAll() prev ...

  3. NHibernate查询示例合集

    基本查询   复杂查询示例 /// <summary> /// 获取自定义表单数据中属于部门的部分 /// </summary> /// <param name=&quo ...

  4. Input类型是checkbox时checked属性获取

    记录一下checkbox 的 checked 属性的获取办法,以备忘记: 假如你的一个HTML页中有这么一段代码: <input name="chbRem" id=" ...

  5. PyCharm汉化、破解教程

    汉化 1.将 C:\Program Files (x86)\JetBrains\PyCharm 2017\lib(路径是你的安装路径)目录下的resources_en.jar文件复制出来之后删除,以备 ...

  6. 删除“自豪的采用wordpress”

    网上的都是老一套了,方法不对. 听我的~ 先进入wordpress的安装目录,比如我的是:cd /www/wwwroot/www.yangnan.tk然后再进入,我的主题是twentyseventee ...

  7. 清理win10过期补丁的命令

    作用是删除已经被新版本取代的旧系统文件 DISM.exe /Online /Cleanup-Image /StartComponentCleanup /ResetBase 注1: 执行后, 补丁就无法 ...

  8. Markdown简易语法说明

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  9. SQL Server多表同时查询

    今天在练sql server发现多条语句同时使用可以多表同时查询,具体操作如下: 代码示例: USE teachingGOSELECT *FROM dbo.teach_classORDER BY cl ...

  10. maven学习之二

    三 profile介绍 可以有多个地方定义profile.定义的地方不同,它的作用范围也不同. (1)    针对于特定项目的profile配置我们可以定义在该项目的pom.xml中. (2)     ...