你必须知道的Javascript知识点之"this指针"的应用


Posted in Javascript onApril 23, 2013

很多人都知道this指针,这篇文章的主要目的是为了培训我们公司的新人。
默认的this指针指向
规则1
this指针默认指向方法调用时为其指定的对象,如:obj.fun(),fun方法体中的this指针指向obj。

var user = { name: '段光伟' };
user.getName = function(){ return this.name; };
user.getName();  //返回‘段光伟'

var user = { name: '段光伟' };
 user.getName = function(){ return this.name; };
 user.getName();  //返回‘段光伟' window.name = '李妞妞';
 window.getName = user.getName
 window.getName();  //返回‘李妞妞'
 getName();  //返回‘李妞妞'

规则2
如果在方法调用时没有为方法指定对象则this指针默认指向window,如:fun(),fun方法体中的this指针指向window。
var fun = function(){
   return this;
 }
 fun();  //返回window对象

规则3没有在方法体中的代码可以看作执行在一个匿名方法,根据规则2可以推论出其this指针指向window。

 this  //window对象
改变this指针的默认指向
使用apply

var user = { name: '段光伟' };
 user.hi= function(message){ return this.name+':'+message; };
 window.name = '李妞妞'
 user.hi('你好');  //输出‘段光伟:你好'
 user.hi.apply(window, ['你好']);  //输出‘李妞妞:你好'

使用call
var user = { name: '段光伟' };
 user.hi= function(message){ return this.name+':'+message; };
 window.name = '李妞妞'
 user.hi('你好');  //输出‘段光伟:你好'
 user.hi.call(window, '你好');  //输出‘李妞妞:你好'

构造函数中的this指向
构造函数中的this指针默认指向执行正在构造的对象。
var User = function(name){
    this.name = name;
 };
 User.prototype.hi = function(){
    return this.name;
 };
 var user = new User('段光伟');
 user.hi();  //输出‘段光伟'

最后的小测试
猜猜最后的输出时什么?
var User = function(name){
     this.name = name;
  };
  User.prototype.hi = function(){
     return this.name;
  };
  var user = new User('段光伟');
  user.hi();  //输出‘段光伟' var hi = user.hi;
 hi();  //猜猜这里的输出

Javascript 相关文章推荐
javascript removeChild 使用注意事项
Apr 11 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
关于js拖拽上传 [一个拖拽上传修改头像的流程]
Jul 13 Javascript
js无法获取到html标签的属性的解决方法
Jul 26 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
详解vue父子模版嵌套案例
Mar 04 Javascript
react-native-tab-navigator组件的基本使用示例代码
Sep 07 Javascript
个人小程序接入支付解决方案
May 23 Javascript
对layui数据表格动态cols(字段)动态变化详解
Oct 25 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
javascript实现支付宝滑块验证码效果
Jul 24 Javascript
jquery清空textarea等输入框实现代码
Apr 22 #Javascript
js计算精度问题小结
Apr 22 #Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 #Javascript
用js实现小球的自由移动代码
Apr 22 #Javascript
jquery打开直接跳到网页最下面、最低端实现代码
Apr 22 #Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 #Javascript
js播放wav文件(源码)
Apr 22 #Javascript
You might like
如何在smarty中增加类似foreach的功能自动加载数据
2013/06/26 PHP
php求正负数数组中连续元素最大值示例
2014/04/11 PHP
PHP代码实现爬虫记录――超管用
2015/07/31 PHP
visual studio code 调试php方法(图文详解)
2017/09/15 PHP
给moz-firefox下添加IE方法和属性
2007/04/10 Javascript
js读写(删除)Cookie实例详解
2013/04/17 Javascript
使用js在页面中绘制表格核心代码
2013/09/16 Javascript
jQuery实现的动态伸缩导航菜单实例
2015/05/07 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
详解Vue2 无限级分类(添加,删除,修改)
2017/03/07 Javascript
VUE axios发送跨域请求需要注意的问题
2017/07/06 Javascript
Vue-Router模式和钩子的用法
2018/02/28 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
vue.js 中使用(...)运算符报错的解决方法
2018/08/09 Javascript
vue实现带复选框的树形菜单
2019/05/27 Javascript
JavaScript实现单图片上传并预览功能
2019/09/30 Javascript
vue+ts下对axios的封装实现
2020/02/18 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
python使用os模块的os.walk遍历文件夹示例
2014/01/27 Python
基于Python实现一个简单的银行转账操作
2016/03/06 Python
Python定时器实例代码
2017/11/01 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
python的staticmethod与classmethod实现实例代码
2018/02/11 Python
Python实现利用163邮箱远程关电脑脚本
2018/02/22 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
Python tkinter和exe打包的方法
2020/02/05 Python
Python Websocket服务端通信的使用示例
2020/02/25 Python
使用pyplot.matshow()函数添加绘图标题
2020/06/16 Python
如何用PyPy让你的Python代码运行得更快
2020/12/02 Python
python编程的核心知识点总结
2021/02/08 Python
浅析几个CSS3常用功能的写法
2014/06/05 HTML / CSS
奥地利网上现代灯具和灯饰店:Lampenwelt.at
2018/01/29 全球购物
财务会计专业毕业生自荐信
2013/10/19 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
黄河绝恋观后感
2015/06/08 职场文书
TV动画「神渣☆爱豆」公开第一弹主视觉图
2022/03/21 日漫