你必须知道的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网页关键字高亮代码
Jul 30 Javascript
toggle()隐藏问题的解决方法
Feb 17 Javascript
跟我学习javascript的循环
Nov 18 Javascript
学习JavaScript设计模式之中介者模式
Jan 14 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
浅析为什么a="abc" 不等于 a=new String("abc")
Oct 25 Javascript
jquery ztree实现右键收藏功能
Nov 20 jQuery
webpack css加载和图片加载的方法示例
Sep 11 Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
Javascript Symbol原理及使用方法解析
Oct 22 Javascript
原生JavaScript实现简单五子棋游戏
Jun 28 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
详解WordPress中分类函数wp_list_categories的使用
2016/01/04 PHP
JavaScript设置FieldSet展开与收缩
2009/05/15 Javascript
Jquery 自定义动画概述及示例
2013/03/29 Javascript
jquery高级编程的最佳实践详解
2014/03/23 Javascript
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
2015/03/26 Javascript
js实现缓冲运动效果的方法
2015/04/10 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
2015/04/12 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
jquery实现限制textarea输入字数的方法
2017/09/06 jQuery
小试小程序云开发(小结)
2019/06/06 Javascript
关于angular浏览器兼容性问题的解决方案
2020/07/26 Javascript
pyside写ui界面入门示例
2014/01/22 Python
python基于xml parse实现解析cdatasection数据
2014/09/30 Python
Python 基础知识之字符串处理
2017/01/06 Python
Python中模块string.py详解
2017/03/12 Python
python opencv人脸检测提取及保存方法
2018/08/03 Python
python Django 创建应用过程图示详解
2019/07/29 Python
python画蝴蝶曲线图的实例
2019/11/21 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
Python插入Elasticsearch操作方法解析
2020/01/19 Python
详解python中groupby函数通俗易懂
2020/05/14 Python
Elasticsearch py客户端库安装及使用方法解析
2020/09/14 Python
使用python-cv2实现视频的分解与合成的示例代码
2020/10/26 Python
Django如何继承AbstractUser扩展字段
2020/11/27 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
韩国保养品、日本药妆购物网:小三美日
2018/12/30 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
刚毕业大学生自荐信范文
2014/02/20 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
居委会四风问题个人对照检查材料
2014/09/25 职场文书
单位工作证明书格式
2014/10/04 职场文书
2015年个人实习工作总结
2014/12/12 职场文书