通过一段代码简单说js中的this的使用


Posted in Javascript onJuly 23, 2013

今天有朋友说遇到如下代码,让我帮解释原因

var name = "The Window"; 
var object = { 
name : "My Object", 
getNameFunc : function(){ 
return function(){ 
return this.name; 
}; 
} 
};

alert(object.getNameFunc()());原因是js的this是动态决定的,和你调用方式有直接关系。

简单说如果你调用一个函数的时候使用“对象.函数名”的方式,那么this就是这个.(点)之前的对象,否则是window。
比如你在调用object.getNameFunc()的时候getNameFunc函数体中的this是刚声明的object。如果你写成

var func = object.getNameFunc; 
func();

这时候getNameFunc函数体中的this是window,虽然是同一函数调用方式的不同决定了this的不同。
同样的道理,object.getNameFunc()返回的是一个函数引用,加一个括号就是让函数执行。其实相当于如下代码
var func = object.getNameFunc(); 
alert( func() );

函数前没有“对象.”这种形式,所以执行函数时候this是window,结果就很明显了。

以后我会写一篇关于js this的文章,欢迎大家关注我的CSDN博客tt361。

Javascript 相关文章推荐
JQuery 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
js cookies实现简单统计访问次数
Nov 24 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
jQuery验证插件validate使用方法详解
Sep 13 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
JavaScript数据结构之数组的表示方法示例
Apr 12 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
vue填坑之webpack run build 静态资源找不到的解决方法
Sep 03 Javascript
cdn模式下vue的基本用法详解
Oct 07 Javascript
微信小程序使用websocket通讯的demo,含前后端代码,亲测可用
May 22 Javascript
Flutter实现仿微信底部菜单栏功能
Sep 18 Javascript
JS分页控件 可用于无刷新分页
Jul 23 #Javascript
JavaScript获取onclick、onchange等事件值的代码
Jul 22 #Javascript
offsetHeight在OnLoad中获取为0的现象
Jul 22 #Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 #Javascript
JS 实现图片直接下载示例代码
Jul 22 #Javascript
js操作iframe兼容各种主流浏览器示例代码
Jul 22 #Javascript
JavaScript的模块化:封装(闭包),继承(原型) 介绍
Jul 22 #Javascript
You might like
Smarty简单生成表单元素的方法示例
2016/05/23 PHP
php微信开发之谷歌测距
2018/06/14 PHP
PHP实现负载均衡session共享redis缓存操作示例
2018/08/22 PHP
基于Web标准的UI组件 — 树状菜单(2)
2006/09/18 Javascript
JavaScript方法和技巧大全
2006/12/27 Javascript
jquery CSS选择器笔记
2010/03/29 Javascript
网页右下角弹出窗体实现代码
2014/06/05 Javascript
如何正确使用Nodejs 的 c++ module 链接到 OpenSSL
2014/08/03 NodeJs
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
2015/04/01 Javascript
nodejs个人博客开发第五步 分配数据
2017/04/12 NodeJs
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
浅谈vuepress 踩坑记
2018/04/18 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
详解JavaScript实现动态的轮播图效果
2019/04/29 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
浅谈vue-router路由切换 组件重用挖下的坑
2019/11/01 Javascript
微信小程序云开发获取文件夹下所有文件(推荐)
2019/11/14 Javascript
基于JQuery和DWR实现异步数据传递
2020/10/16 jQuery
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
[57:59]EG vs Secret 2018国际邀请赛淘汰赛BO3 第一场 8.22
2018/08/23 DOTA
python根据经纬度计算距离示例
2014/02/16 Python
python实现通过shelve修改对象实例
2014/09/26 Python
python与C互相调用的方法详解
2017/07/14 Python
Python 获取div标签中的文字实例
2018/12/20 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
PyTorch中topk函数的用法详解
2020/01/02 Python
python实现删除列表中某个元素的3种方法
2020/01/15 Python
python3.6.8 + pycharm + PyQt5 环境搭建的图文教程
2020/06/11 Python
浅谈numpy中函数resize与reshape,ravel与flatten的区别
2020/06/18 Python
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
电气工程及其自动化学生实习自我鉴定
2013/09/19 职场文书
普罗米修斯教学反思
2014/02/06 职场文书
分公司任命书
2014/06/06 职场文书