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(上卷) ...
随机推荐
- Android 开发笔记___SD卡基本操作__图片读取写入
package com.example.alimjan.hello_world.Utils; import android.graphics.Bitmap; import android.graphi ...
- 统一addEventListener与attachEvent中this指向问题
1.this指向问题 使用addEventListener注册的事件,事件处理函数中 this指向目标元素: 使用attachEvent注册的事件,事件处理函数中 this指向window对象 要想将 ...
- 取得 iframe 容器的 URL
检测所在窗口是否为最外层的窗口,若不是则跳脱包含它的框架 if( window !== window.top ) { window.top.location = location; } top ...
- ⑦bootstrap按钮 图片 辅助使用基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Node.js初探之POST方式传输
小知识:POST比GET传输的数据量大很多 POST发数据--"分段" 实例: 准备一个form.html文件: <!DOCTYPE html> <html> ...
- iOS开发针对对Masonry下的FPS优化讨论
今天博客的内容就系统的讨论一下Masonry对FSP的影响,以及如何更好的使用Masonry.如果你对iOS开发足够熟悉的话,那么对Masonry框架应该不陌生.简单的说,Masonry的诞生让Aut ...
- python进阶------进程线程(一)
Python中的进程线程 一.进程线程的概念 1.1进程: 进程就是一个程序在一个数据集上的一次动态执行过程.进程一般由程序.数据集.进程控制块三部分组成.我们编写的程序用来描述进程要完成哪些功能以及 ...
- SpringMVC---Method
GET 平时网页的一些基本的URL都是GET请求的,用于执行查询操作. 但是由于GET中URL是有长度的限制的,而GET会把所有的参数都放在URL中 因此就会有下面的问题: 1 数据都明文暴露,用户可 ...
- You may rarely look at it. But you'll always feel it
You may rarely look at it. But you'll always feel it
- c语言的typedef
一.typedef作用简介 1.作用:给已经存在的类型起一个新的名称 2.使用场合: 1> 基本数据类型 2> 指针 3> 结构体 4> 枚举 5> 指向函数的指针 * ...