你必须知道的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延时重复执行函数 lLoopRun.js
Jun 29 Javascript
JavaScript 拾碎[三] 使用className属性
Oct 16 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
JavaScript通过RegExp实现客户端验证处理程序
May 07 Javascript
JavaScript中的console.profile()函数详细介绍
Dec 29 Javascript
js实现照片墙功能实例
Feb 05 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
Aug 29 Javascript
jQuery 添加样式属性的优先级别方法(推荐)
Jun 08 jQuery
node错误处理与日志记录的实现
Dec 24 Javascript
vue组件开发之slider组件使用详解
Aug 21 Javascript
Vue3中的Refs和Ref详情
Nov 11 Vue.js
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
DOTA2 探索永无止境 玩家自创强悍插眼攻略
2020/04/20 DOTA
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
PHP制作万年历
2015/01/07 PHP
PHP中散列密码的安全性分析
2019/07/26 PHP
JS 时间显示效果代码
2009/08/23 Javascript
Javascript中各种trim的实现详细解析
2013/12/10 Javascript
JQuery显示隐藏页面元素的方法总结
2015/04/16 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
JS获取checkbox的个数简单实例
2016/08/19 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
vue 动态修改a标签的样式的方法
2018/01/18 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
简单了解vue中的v-if和v-show的区别
2019/10/08 Javascript
javascript中的相等操作符(==与===区别)
2019/12/21 Javascript
Ant Design Pro 之 ProTable使用操作
2020/10/31 Javascript
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
Python使用Pycrypto库进行RSA加密的方法详解
2016/06/06 Python
用django设置session过期时间的方法解析
2019/08/05 Python
python实现XML解析的方法解析
2019/11/16 Python
python 项目目录结构设置
2020/02/14 Python
python实现按键精灵找色点击功能教程,使用pywin32和Pillow库
2020/06/04 Python
python缩进长度是否统一
2020/08/02 Python
深入了解Python 方法之类方法 & 静态方法
2020/08/17 Python
python基于opencv实现人脸识别
2021/01/04 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
美国性感女装网站:bebe
2017/03/04 全球购物
秋季运动会活动方案
2014/02/05 职场文书
电子商务专业应届毕业生求职信
2014/06/21 职场文书
预备党员群众路线教育实践活动思想汇报2014
2014/10/25 职场文书
五年级学生期末评语
2014/12/26 职场文书
担保书范文
2015/01/20 职场文书
避暑山庄导游词
2015/02/04 职场文书
幼儿园小班教师个人工作总结
2015/02/06 职场文书
2015年超市工作总结范文
2015/05/26 职场文书
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript