JS函数不同调用模式下,this的指向问题

先看一段有意思的代码

var length = 10;
function fn() {
  console.log(this.length);
}
var obj = {
  length: 5,
  method: function(fn) {
    fn();
    arguments[0]();
  }
};
obj.method(fn,1);

浏览器环境

输出结果是10和2。

先说第一个:

执行过程大致如下:

obj.method这是个obj对象的方法,而传入的fn是个函数,fn()属于调用模式的”函数调用”,非严格模式下,this为global对象(浏览器中就是window)。

而在这段代码的最上方使用var定义了length,由于var是直接写在global作用域中的,所以此处的 var length 与 window.length是同一个东西。输出10也就不奇怪了。

那么来看第二个:

arguments这个是在函数内部才有的参数,很像array,而且typeof得到的也是object值,我们知道,js访问对象有 . 操作符 和 中括号操作符,此处使用的是第二种方法获取到obj.method的第一个参数,也就是fn.

由于arguments[0]()是输入调用方式中的“方法调用模式”,this指向对象本身,也就是arguments,所以会输出2。

Nodejs环境

这段代码在nodejs下面会输出

undefined

2

第二个输出2的原因跟浏览器下一致,就不说了,来看看第一个undefined

根本原因在于nodejs的global处理机制不同。

global贯穿与nodejs整合生命周期,而每个js文件是单独的模块,就算使用var定义在顶层,也只是这个module的全局变量。所以会输出undefined、

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索对象
, 函数
, 浏览器
, 代码
, this
模式
回调函数里的this指向、this调用构造函数、s函数 调用不同文件夹、php调用不同页面函数、调用不同周期函数,以便于您获取更多的相关知识。

时间: 2024-10-14 05:38:53

JS函数不同调用模式下,this的指向问题的相关文章

浅析JavaScript函数的调用模式_javascript技巧

我们说一个函数的调用模式是作为一个函数来调用,是要与其它三种调用模式做区分 函数其他的三种调用: 方法调用模式,构造器调用模式,apply/call调用模式.  方法的调用模式:  var obj={ fun1: function(){ //方法内容 this; //指的是window } } obj.fun1() //方法的调用 构造器的调用:  function Person(name, age, job){ this.name = name; this.age = age; this.jo

setinterval()与clearInterval()JS函数的调用方法_javascript技巧

本文实例讲述了setinterval()与clearInterval()JS函数的调用方法.分享给大家供大家参考.具体如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.

js函数简单调用举例说明

我们用一个按钮调用一下这个函数:将按钮的点击事件指向这个方法 <input type="button" value="click me" onclick="hanshu()"> 现在我在此方法中再写一个方法 我们在这个方法中将body的点击事件指向了一个新的方法,匿名方法.然后弹出click body function addclick() {    // 这样不能实现把body的单击事件指给新的方法, 因为body不能访问在函数体里

js函数般调用正则_javascript技巧

这为调用正则的 exec 方法提供了便捷.例如,在 Firefox中,regex("string") 等同于 regex.exec("string").曾经 ECMAScript 4 建议指出这个功能将会增加到 ES4 规范中,但后来的在 ES4-discuss mailing list 的讨论中,这个建议可能被废除. 然而,你可以通过增加 call 和 apply 方法到 RegExp.prototype 中类似的现实这些方法.既有助于功能设计,又可实现对函数和正

JS 在IE8兼容模式下设置属性不能显示

问题描述 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN"><head><title

jquery下组织javascript代码(js函数化)_基础知识

从神奇的"$"函数开始 "$"函数将在文档加载完成之后为一个指定的button 绑定事件,这些代码在单个网页中工作正常.但是如果我们还有其它的网页,我们将不得不重复这个过程. 复制代码 代码如下: <a href="javascript:;" id="sayHello">Say Hello</a> <script type="text/javascript"> //whe

iframe里面的页面调用父窗口,左右窗口js函数的方法

iframe里面的页面调用父窗口,左右窗口js函数的方法 实现iframe内部页面直接调用该iframe所属父窗口自定义函数的方法. 比如有A窗口,A内有个IFRAME B,B里面的装载的是C页面,这时C要直接调用A里面的一个自定义函数AFUN(); 那么只要在C页面中写如下JS函数就可以了: window.parent.AFUN(); 如果AFUN()有参数也可以直接传递合适的参数进去. 例如: 修改父窗口控件属性 window.parent.document.getElementById('

zk 怎么用java 调用前台的js函数

问题描述 zk 怎么用java 调用前台的js函数 单位的项目用的zk框架,今天经理要求在界面中加入echarts图表,我想问下,后台java里怎么把json数据传到前台的js 函数里 解决方案 http://quzhan87com.iteye.com/blog/1061964 看这篇文章能解决你的问题. 解决方案二: 前台用ajax调用后台的java,接收后台的数据 解决方案三: http://zhidao.baidu.com/link?url=o8q9FOoe6FC6inMGrb6BPTrC

jquery-JQuery 语句,easyui里面的,能不能给解释下什么意思? 函数如何调用的,谢谢了

问题描述 JQuery 语句,easyui里面的,能不能给解释下什么意思? 函数如何调用的,谢谢了 function saveUser(){ $('#fm').form('submit',{//当提交表单时候,会发生submit事件 url: url, onSubmit: function(){ return $(this).form('validate'); }, success: function(result){ var result = eval('('+result+')'); if