函数的作用域与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. Eddy's picture(最小生成树)

    Eddy's picture Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Tota ...

  2. SpringAop源码情操陶冶-AspectJAwareAdvisorAutoProxyCreator

    本文将对SpringAop中如何为AspectJ切面类创建自动代理的过程作下简单的分析,阅读本文前需要对AOP的Spring相关解析有所了解,具体可见Spring源码情操陶冶-AOP之ConfigBe ...

  3. 从Matlab文件中读取mxArray类型变量-部分代码分析

    这是我做的笔记,看到这个代码时觉得处理有点妙,做笔记记录之. 部分源代码: .... int main(int argc,char** argv) { char name[_FILE_NAME_LEN ...

  4. 如何让只支持IE浏览器的jsp转为可以支持chrome

    如果你的项目只能使用IE浏览器打开,你想让其支持chrome的话,可以试一下下面的代码哦: function showLayerDialog(url,paramFuction){ top.layer. ...

  5. oracle数据库热备中的备份和恢复及例子

    手工热备(开库状态) 备份控制文件: alter database backup controlfile to '/u01/oradata/prod/con.bak1'; 备份数据文件(这里用到pl/ ...

  6. Python学习--字典

    在Python中通过名字来引用值的数据结构称为映射(mapping).字典是Python中唯一内建(Python解释器本身支持,不需要import)的映射类型.字典中的值没有特殊的顺序,都存储在一个特 ...

  7. 关于thinkphp控制器引用model里的方法的一点收获

    有时候真的是很绕,为了这一点点收获,我几乎花了一天的时间.当我弄明白了的那一刻,我.........好吧,写到这里,我发现不能换行.好吧,就这样吧,开始说正题:要想在controler从model引用 ...

  8. Python模块:paramiko

    paramiko是一个用于做远程控制的模块,使用该模块可以对远程服务器进行命令或文件操作,值得一说的是,fabric和ansible内部的远程管理就是使用的paramiko来现实. 1.下载安装 Wi ...

  9. C#内部关于绑定事件Event的线程安全

    private EventHandler _FieldsChanged;public event EventHandler FieldsChanged{    add    {        Even ...

  10. 10个鲜为人知的C#关键字

    在正式开始之前,我需要先声明:这些关键字对于偏向底层的程序员更加耳熟能详,对这些关键字不了解并不影响你作为一个合格的程序员. 这意味着这些关键字会让你在编写程序时得到更好的代码质量和可读性,enjoy ...