函数的作用域与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. PHP基础入门(二)【PHP函数基础】

    PHP基础入门(二)--函数基础 了解 PHP基础入门详解(一) 后,给大家分享一下PHP的函数基础. 这部分主要讲的就是: 函数的声明与使用.PHP中变量的作用域.静态变量.函数的参数传递.变量函数 ...

  2. Skylin CityBuilder 6.6.1 提示授权过期解决(License Manager中显示未过期)

    最近工作中使用到Skyline 系列软件,授权一切正常,启动CityBuilder时提示授权过期 运行License Manger之后查看授权状态 ' 一切正常,并没有出现授权过期等情况. 如何解决: ...

  3. JS获取DOM元素

    1.childNodes:获取节点,不同浏览器表现不同: IE:只获取元素节点: 非IE:获取元素节点与文本节点: 解决方案:if(childNode.nodeName=="#text&qu ...

  4. 我两年的web开发生涯

    我两年的web开发生涯 与以前的文章分享给大家自己的知识和观点不同,这篇文章更多的是写给自己的总结. 现在是 2017年10月18. 从 2015年9月 开始接触前端开发,至今两年零一个月. 从 20 ...

  5. Maven启动Java Web工程,8081和8086端口号被占用

    Maven启动Java Web工程, <!-- 配置tomcat插件 --> <build> <plugins> <plugin> <groupI ...

  6. JS中JSON对象的定义和取值

    1.JSON(JavaScript Object Notation)一种简单的数据格式,比xml更轻巧.JSON是JavaScript原生格式,这意味着在JavaScript中处理JSON数据不需要任 ...

  7. Vue使用Echarts以及Echarts配置分享

    一.本篇文章将给大家分享如何在vue中使用echart以及echart各项配置,这些配置都是工作中比较常见以及常用到的,所以给大家分享下,希望对大家有用. 二.vue中使用echart. 1.首先下载 ...

  8. C语言之阶乘

    #include<stdio.h>#include<stdlib.h>#include<time.h>int main(){ int num,i,result=1; ...

  9. 在LwIP 协议栈移植 Snap 7

    本文欢迎引用,转载. 引用,转载请标明出处! 调试完毕源码将上传到GitHub 为了嵌入式系统与STEP 7 PLC 通过S7 协议通讯,尝试移植 Snap 7 到STM32F407 cpu 上. 今 ...

  10. MyBatis物理分页的代码实现

    一.分页 MyBatis有两种分页方法:内存分页,也就是假分页,本质是查出所有的数据然后根据游标的方式,截取需要的记录,如果数据量大,执行效率低,可能造成内存溢出.物理分页,就是数据库本身提供了分页方 ...