函数的作用域与this指向是js中很重要的一部分,理清这点东西需要个逻辑,看看我的逻辑怎么样...
下面是个提纲,可以直接挑你感兴趣的条目阅读。
• 函数的定义方式:直接定义(window下,内部定义),对象的方法,对象原型的方法;
• 函数的调用方式:直接调用,call/apply,with
• 对于直接定义的函数和对象的方法,作用域默认状态下是它的定义处的作用域链。
• 对于直接定义的函数,this指向window。
• 对于对象的方法,this指向实例化对象(对应于实例化对象默认返回this的情况)。
• 用call/apply改变方法的this指向
• 在函数或方法的定义时可以通过with改变其作用域链。
下面分开来具体说说:
函数的定义,如提纲中提到的可以分为两种:直接定义(window下,内部定义),对象的方法(或对象原型的方法)。从下面的示例代码中可以看到函数fn1与fn2以及对象的方法doFunction在函数使用name时name的值来自相应的域。
var name = 'window下的name<br/>'; var resultCon; function fn1() { resultCon.innerHTML += name; } function MyObj() { var name = 'MyObj下的name<br/>'; this.doFunction = function() { resultCon.innerHTML += name;
在使用name的值时将“name”用“this.name”来代替会出现什么情况呢,看下例:
var name = 'window下的name<br/>'; var resultCon; function fn1() { resultCon.innerHTML += this.name; } function MyObj() { var name = 'MyObj下的name<br/>'; this.doFunction = function() { resultCon.innerHTML += this.name;
从结果来看可以验证提纲中的第4和5条,也可以看到this和作用域是两套分离的链,遵循个自的变量查询逻辑,具体的查询逻辑在下面的性能分析中会提到,如果是新手建议先看一下“js的作用域链”方面的基础知识。
关于函数的调用方法,我用下面的方示例说明提纲中的第2、6条:
var name = 'window下的name<br/>'; var resultCon; function fn1() { resultCon.innerHTML += this.name; } function MyObj() { var name = 'MyObj下的name<br/>'; this.doFunction = function() { resultCon.innerHTML += this.name;
调用时call和apply的使用是为了改变被调用函数的this指向。with的使用是为了改变被调用函数中变量的查询域。我们把上例中的call和name前的this去掉再加上with来演示with的作用。
var name = 'window下的name<br/>'; var resultCon; function fn1(myScope) { with (myScope) { resultCon.innerHTML += name; } } function MyObj(myScope) { var name = 'MyObj下的name<br/>';
看到with的使用并不方便,需要在被调用函数中添加with,有人可能想能不能向下面那样调用来整体改变变量作用域而不去改变被调用函数呢?
with (myScope) { fn1(); fn2(); var obj = new MyObj(); obj.doFunction(); }
很遗憾,不可以!所以在一些成熟的框架中随处可见call和apply的使用,却很少用到with,在用JSHint检测js语法的时候with处都标了小红点,在一些js编码指导中也建议尽量少用with,因为with改变了变量的默认查询链,所以会给后期的维护人员一些困惑,还有性能方面的一些考虑,请慎用with。
以上这篇深入理解js函数的作用域与this指向就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持小牛知识库。
本文向大家介绍深入理解Javascript中this的作用域,包括了深入理解Javascript中this的作用域的使用技巧和注意事项,需要的朋友参考一下 大家在使用Javascript的时候经常被this这个家伙搞得晕头转向的。对大多数有OOP开发经验的开发人员来说this是当前作用域中引用普通元素的标识符,但是在Javascript中它却显得古灵精怪的,因为它不是固定不变的,而是随着它的执行环
本文向大家介绍深入理解js中this的用法,包括了深入理解js中this的用法的使用技巧和注意事项,需要的朋友参考一下 this是js的一个关键字,随着函数使用场合不同,this的值会发生变化。但是总有一个原则,那就是this指的是调用函数的那个对象。 1、纯粹函数调用。 其实这里的this就是全局变量。看下面的例子就能很好的理解其实this就是全局对象Global。其实这里的this就是全局变量
本文向大家介绍深入理解JS addLoadEvent函数,包括了深入理解JS addLoadEvent函数的使用技巧和注意事项,需要的朋友参考一下 首先是addLoadEvent函数的代码清单: 理解起来就是: 1.把现有的window.onload事件处理函数的值存入变量 oldonload; 2.如果在这个处理函数上还没有绑定任何函数,就像平常那样把新函数添加给它; 3.如果在这个处理函数上已
本文向大家介绍深入理解Javascript箭头函数中的this,包括了深入理解Javascript箭头函数中的this的使用技巧和注意事项,需要的朋友参考一下 首先我们先看一段代码,这是一个实现倒数功能的类「Countdown」及其实例化的过程: 运行这段代码时,将会出现异常「this._step is not a function」。 这是Javascript中颇受诟病的「this错乱」问题:s
本文向大家介绍JS回调函数深入理解,包括了JS回调函数深入理解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了JS回调函数。分享给大家供大家参考,具体如下: 一、前奏 在谈回调函数之前,先看下下面两段代码: 不妨猜测一下代码的结果。 如果你测试了,就会发现: 只写变量名 say 返回的将会是 say方法本身,以字符串的形式表现出来。 而在变量名后加()如say()返回的就会使say方
本文向大家介绍深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域,包括了深入理解JavaScript 中的匿名函数((function() {})();)与变量的作用域的使用技巧和注意事项,需要的朋友参考一下 匿名函数:没有实际名字的函数。 匿名函数的作用: 1、通过匿名函数可以实现闭包,关于闭包在后面的文章中会重点讲解。在这里简单介绍一下:闭包是可以