js函数的作用域与this指向
函数的作用域与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指向的更多相关文章
- 函数的作用域与this指向 --- 性能篇
紧接上一篇博文:js函数的作用域与this指向 先来说说this的作用于链,this后的属性或者方法在使用时是先从本实例中查找,如果找到就先返回,如果没找到就接着向上从原型链中查找,如果有多重继承关系 ...
- js函数与作用域,了解函数基本概念
通过js基础语法了解到js的值包含数字,字符串和布尔值;js运算符分为算数,赋值,比较和逻辑运算符;js的流程控制包含条件判断if,switch选择;循环for while:下面js的函数及作用域,学 ...
- 深入理解JS函数中this指针的指向
函数在执行时,会在函数体内部自动生成一个this指针.谁直接调用产生这个this指针的函数,this就指向谁. 怎么理解指向呢,我认为指向就是等于.例如直接在js中输入下面的等式: console.l ...
- JS核心系列:浅谈函数的作用域
一.作用域(scope) 所谓作用域就是:变量在声明它们的函数体以及这个函数体嵌套的任意函数体内都是有定义的. function scope(){ var foo = "global&quo ...
- js对象系列【二】深入理解js函数,详解作用域与作用域链。
这次说一下对象具体的一个实例:函数,以及其对应的作用域与作用域链.简单的东西大家查下API就行了,这里我更多的是分享自己的理解与技巧.对于作用域和作用域链,相信绝大多数朋友看了我的分享都能基本理解,少 ...
- js总结(二):函数、作用域和this
function Container( properties ) { var objthis = this; for ( var i in properties ) { (function(){ // ...
- 【js】 vue 2.5.1 源码学习(六) initProxy initLifeCycle 渲染函数的作用域代理
大体思路 (五) 1. initProxy 渲染函数的作用域代理 ==> es6 如果支持proxy (hasProxy) 就用proxy 不支持就用 defineProperty() prox ...
- 在iframe里调用parent.func()引出的js函数运行在它们被定义的作用域里,而不是它们被执行的作用域里
有个document里定义了一个函数func(),同时在document里嵌入了一个iframe,在这个iframe里调用父窗口的方法:parent.func(),本来我以为这个函数的运行环境是在这个 ...
- JS 函数作用域及变量提升那些事!
虽然看了多次js函数作用域及变量提升的理论知识,但小编也是一知半解~ 这几天做了几道js小题,对这部分进行了从新的理解,还是有所收获的~ 主要参考书籍: <你不知道的JavaScript(上卷) ...
随机推荐
- Log4j 2翻译 Garbage-free Steady State Logging(稳定的以不会生成垃圾的状态来记录日志)
本人菜鸟,在学习Log4j 2 的时候做的一些笔记---对"官方网站"的翻译,部分内容自己也不懂,希望大家指点 Garbage collection pauses are a co ...
- linux-head
linux-head 用来查看文件的内容的命令 命令参数 -n num:显示指定文件的前num行 -c num:显示指定文件的前num个字符 命令:head b.txt : 如果不加参数就默认 ...
- 一个简单的MVC框架的实现
1.Action接口 package com.togogo.webtoservice; import javax.servlet.http.HttpServletRequest; import jav ...
- 开源API测试工具 Hitchhiker v0.4更新 - 没有做不到,只有想不到
Hitchhiker 是一款开源的 Restful Api 测试工具,支持Schedule, 数据对比,压力测试,支持上传脚本定制请求,可以轻松部署到本地,和你的team成员一起管理Api. 详细介绍 ...
- openstack学习心得:keystone 常用命令(M版)
查看用户列表 openstack user list 查看用户具体信息 usage: openstack user show [-h] [-f {html,json,json,shell,table, ...
- C# 自定义样式实现菜单和工具栏的分割线
在做WinForm界面布局时,菜单和工具栏必不可少!但是MenuStrip和ToolStrip不能够对边框的样式直接设置,如果想实现菜单和工具栏之间的分割线就不容易实现:今天查阅了一下msdn找到了一 ...
- 聊下 git 多账户问题
git 多账户问题 标签(空格分隔):git github gitlab git多账户 背景 git 多账号配置 ssh 多密钥对配置 背景 在使用 git 的时候我们都会面临多账户问题,比较常见的就 ...
- 前端面试题系列(1):doctype作用 标准模式与兼容模式
1.doctype作用 <!DOCTYPE>声明位于HTML文档的第一行.处于<HTML>标签之前.告知浏览器的解析器用什么文档标准解析这个文档.DOCYTYPE不存在或格式不 ...
- 【原创】使用workstation安装Xenserver 6.5+cloudstack 4.10----本地存储模式
1. 背景: 近期由于项目和个人学习得需求,开始接触到Cloudstack,虽然云计算概念在大学刚毕业的时候就已经略有耳闻,但是由于工作原因,也一直没有了解,下班后想自己折腾下cloudstack,便 ...
- java队列——queue详细分析
Queue: 基本上,一个队列就是一个先入先出(FIFO)的数据结构 Queue接口与List.Set同一级别,都是继承了Collection接口.LinkedList实现了Deque接 口. Q ...