你必须知道的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 相关文章推荐
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
JQuery实现鼠标滚轮滑动到页面节点
Jul 28 Javascript
基于jQuery实现动态数字展示效果
Aug 12 Javascript
JavaScript实现瀑布流图片效果
Jun 30 Javascript
使用jQuery实现页面定时弹出广告效果
Aug 24 jQuery
thinkjs 文件上传功能实例代码
Nov 08 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
vue 列表页跳转详情页获取id以及详情页通过id获取数据
Mar 27 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 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
php中chdir()函数用法实例
2014/11/13 PHP
PHP中Restful api 错误提示返回值实现思路
2016/04/12 PHP
详解PHP原生DOM对象操作XML的方法
2016/10/17 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
JavaScript 动态改变图片大小
2009/06/11 Javascript
javascript获取当前鼠标坐标的方法
2015/01/10 Javascript
浅谈JavaScript事件的属性列表
2015/03/01 Javascript
js绘制圆形和矩形的方法
2015/08/05 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
Bootstrap中CSS的使用方法
2016/02/17 Javascript
Javascript继承机制详解
2017/05/30 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
vue+element-ui+ajax实现一个表格的实例
2018/03/09 Javascript
纯JS实现可用于页码更换的飞页特效示例
2018/05/21 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
微信小程序与公众号实现数据互通的方法
2019/07/25 Javascript
[01:01:18]DOTA2上海特级锦标赛主赛事日 - 2 败者组第二轮#2COL VS LGD
2016/03/03 DOTA
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python数据结构链表之单向链表(实例讲解)
2017/07/25 Python
python中使用正则表达式的连接符示例代码
2017/10/10 Python
遗传算法之Python实现代码
2017/10/10 Python
selenium python浏览器多窗口处理代码示例
2018/01/15 Python
通过Py2exe将自己的python程序打包成.exe/.app的方法
2018/05/26 Python
Python Pandas批量读取csv文件到dataframe的方法
2018/10/08 Python
微信小程序python用户认证的实现
2019/07/29 Python
Scrapy实现模拟登录的示例代码
2021/02/21 Python
Waterford英国官方网站:世界上最受欢迎的优质水晶品牌
2019/08/17 全球购物
自我鉴定写作要点
2014/01/17 职场文书
优秀本科生求职推荐信
2014/02/24 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
领导干部贪图享乐整改措施
2014/09/21 职场文书
爱国主义教育主题班会
2015/08/13 职场文书
MySQL锁机制
2021/04/05 MySQL
教你用python控制安卓手机
2021/05/13 Python