首先我们来声明一个js对象person:

var person = {talk() {console.log("I am talking...");}
};
复制代码

然后调用person对象的talk方法:

person.talk();
复制代码

结果如下:

没有任何问题,然后我们将person对象的talk方法赋值给一个全局变量talk,并调用这个全局的talk方法:

var talk = person.talk;
talk();
复制代码

结果如下:

和之前的执行结果相同。

现在我们来给person对象新增属性name和方法sayName,修改之后的person对象如下:

var person = {name: 'xiaoming',talk() {console.log("I am talking...");},sayName() {console.log("My name is " + this.name);}
}
复制代码

调用person对象的sayName方法:

person.sayName();
复制代码

结果如下:

没有任何问题,输出的name是person对象的name属性,然后我们将person对象的sayName方法赋值给一个全局变sayName,并调用这个全局的sayName方法:

var sayName = person.sayName;
sayName();
复制代码

结果如下:

我们发现此时没有找到name,输出undefined,这是由于我们调用sayName方法时,是在全局作用域下调用的该方法,对比一下:

//调用person对象的sayName方法:
person.sayName();
调用全局的sayName函数,浏览器环境下相当于调用:
window.sayName();
复制代码

而此时顶级对象window下并没有name属性,所以输出undefined

这里多提几句,之前关于this的分析全是基于浏览器运行环境下的,如果在node下声明函数,this指向的是global对象,而在该node模块中声明的全局变量属于该模块,不属于global对象,如果想要将全局变量绑定到global,那么需要在不使用var或者let等关键词,就可以挂载到global上了。

我们再拓展一下,如果在定时器中使用this是指向什么作用域呢?、 在person对象中新增一个方法sayNameLater,修改之后的person对象如下:

var person = {name: 'xiaoming',talk() {console.log("I am talking...");},sayName() {console.log("My name is " + this.name);},sayNameLater() {setTimeout(function() {console.log("My name is " + this.name);},1000);}
}
复制代码

调用person对象的sayNameLater方法:

person.sayNameLater();
复制代码

结果如下:

我们发现此时没有找到name,输出undefined,这是由于我们在使用定时器时,函数中的this会指向window对象(浏览器环境下),如果我们此时声明全局变量name并赋值:

var name = "xiaohong";
复制代码

再调用person对象的sayNameLater方法:

person.sayNameLater();
复制代码

结果如下:

使用定时器时,函数中的this会指向window对象,即使我们使用对象方法而不是函数,this依然会指向window对象。现在person对象不变,全局变量name不变,在定时器中调用person对象的sayName方法:

var name = "xiaohong";
var person = {name: 'xiaoming',talk() {console.log("I am talking...");},sayName() {console.log("My name is " + this.name);},sayNameLater() {setTimeout(function() {console.log("My name is " + this.name);},1000);}
}
setTimeout(person.sayName, 1000);
复制代码

结果如下:

可以看到使用的仍然是全局变量name,这是由于计时器在解析第一个参数的时候使用eval执行,相当于我们最开始说的,将函数的方法赋值给一个变量,并执行该变量方法,所以作用域依然是全局。

杂七杂八的前端基础01——函数作用域相关推荐

  1. Web前端基础---JavaScript函数事件及其绑定DOM模型BOM模型

    Day03 JavaScript JavaScript是一种属于网络的高级脚本语言,被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用 户提供更流畅美观的浏览效果.通常JavaScri ...

  2. 前端基础01:HTML

    一.初识HTML 什么是HTML HTML:Hyper Text Markup Language (超文本标记语言) 超文本:文字.图片.音频.视频.动画等. HTML5:提供了一些新的元素和一些有趣 ...

  3. 前端基础01 html标签总结

    一.html是什么 A.HTML是超文本标记语言 B.文本:txt文本 只能用于存放文字或者是字符 C.超文本:不仅可以用于来描述文字 还可以用于来描述图像 音频 视频 超链接 D.标记:类似java ...

  4. JavaScript基础08-day10【函数的返回值、实参、立即执行函数、方法、全局作用域、函数作用域、提前声明、this、工厂方法创建对象、构造函数】

    学习地址: 谷粒学院--尚硅谷 哔哩哔哩网站--尚硅谷最新版JavaScript基础全套教程完整版(140集实战教学,JS从入门到精通) JavaScript基础.高级学习笔记汇总表[尚硅谷最新版Ja ...

  5. 前端基础进阶(七):函数与函数式编程

    纵观JavaScript中所有必须需要掌握的重点知识中,函数是我们在初学的时候最容易忽视的一个知识点.在学习的过程中,可能会有很多人.很多文章告诉你面向对象很重要,原型很重要,可是却很少有人告诉你,面 ...

  6. 前端基础:html基础(css基础和JavaScript基础)/01/B/S网络结构,html文件结构,html标签格式,lt;bodygt;中的一些常用标记

    前端基础:html基础(css基础和JavaScript基础)/01/B/S网络结构,html文件结构,html标签格式,<body>中的一些常用标记 html:超文本标记语言(非编程语言 ...

  7. Python基础知识——函数的基本使用、函数的参数、名称空间与作用域、函数对象与闭包、 装饰器、迭代器、生成器与yield、函数递归、面向过程与函数式(map、reduce、filter)

    文章目录 1 函数的基本使用 一 引入 二 定义函数 三 调用函数与函数返回值 2 函数的参数 一 形参与实参介绍 二 形参与实参的具体使用 2.1 位置参数 2.2 关键字参数 2.3 默认参数 2 ...

  8. 前端JS: 通过代码-看函数作用域this对象

    函数中的this对象,指向的是调用该函数的对象:谁调用它,它的作用域中的this就指向谁: 每一个具体的问题,都值得思考这个细节点: 1.以下输出结果是: var obj={name:'test',o ...

  9. JS基础篇--函数声明与定义,作用域,函数声明与表达式的区别

    Scoping & Hoisting 例: var a = 1;function foo() {if (!a) {var a = 2;}alert(a); };foo(); 上面这段代码在运行 ...

最新文章

  1. Centos7 安装 telnet 服务
  2. sqlite3的编译和使用
  3. SP_attach_db 添加数据库文件
  4. 漫谈广告竞价模式(六)
  5. 关于代码调用SSP获取UserProfile出错的解决方案
  6. mysql80连接不上本地服务器_干货教程:如何在服务器上安装Mysql8.0
  7. 如何在 FineUIMvc 中引用第三方 JavaScript 库
  8. Mybatis详细教程
  9. 修改mediapipe中绘制pose的三维坐标函数,将PLT格式转成CV2格式,实时显示
  10. 安卓10不支持qmc解码_如何开启 安卓10 隐藏的桌面模式并或者显示器拓展支持
  11. 91p3.space/index.php,writeup_for_SCTF2016
  12. Python 玩转数据 8 - Pandas Indexing and Slicing
  13. 系统完全优化 全面剖析XP
  14. 华北电力大学计算机学硕和专硕,华北电力大学非全日制研究生还分为学硕与专硕?...
  15. 设计公司怎样合理税收筹划,可以享受哪些税收政策?
  16. 照片模糊怎么变清晰?
  17. 深度:进入洗牌期的老年鞋市场对中国老年消费品行业的发展启示—足力健地位能否持续,奥康/红蜻蜓能否逆袭?
  18. 基于TIG的云原生系统监控方案
  19. 计算机基础--作业5,计算机基础第5次作业-第五章-Powerpoint知识题 (精选可编辑)...
  20. “道”与“术”之关系

热门文章

  1. (开发)ESLint - 代码规范
  2. 记 fastjson泛型转对象 第一次可以正常转,第二次就变成JSONArray 问题
  3. CVE-2013-2551漏洞成因与利用分析(ISCC2014 PWN6)
  4. 验证视图状态 MAC 失败。如果此应用程序由网络场或群集承载,请确保 配置指定了相同的 validationKey 和验证算法。不能在群集中使用 AutoGenerate...
  5. object标签与embad掉钱_使用object或embed标签来播放SWF文件
  6. 我要回家软件_这个中秋节,我也要回家
  7. dbvisualizer查询mysql中文乱码_使用PLSQL Developer和DbVisualizer查询oracle数据库时出现乱码...
  8. 的函数原型_相信我,跟着这个文章学习JS原型,你一定能看得懂
  9. 树结构有什么好处_什么啊?面试官还在问HashMap了,老知识点了啊
  10. 冒泡链表排序java_链表排序(冒泡、选择、插入、快排、归并、希尔、堆排序)...