你必须知道的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 相关文章推荐
关于动态生成dom绑定事件失效的原因及解决方法
Aug 06 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
ie下js不执行的几种可能
Feb 28 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
Vue与Node.js通过socket.io通信的示例代码
Jul 25 Javascript
Vue-Router基础学习笔记(小结)
Oct 15 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
JS删除String里某个字符的方法
Jan 06 Javascript
JS端基于download.js实现图片、视频时直接下载而不是打开预览
May 09 Javascript
keep-Alive搭配vue-router实现缓存页面效果的示例代码
Jun 24 Javascript
详解Vue中$props、$attrs和$listeners的使用方法
Feb 18 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
有关JSON以及JSON在PHP中的应用
2010/04/09 PHP
PHP连接和操作MySQL数据库基础教程
2014/09/29 PHP
php简单实现发送带附件的邮件
2015/06/10 PHP
yii2-GridView在开发中常用的功能及技巧总结
2017/01/07 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
PHP simplexml_load_file()函数讲解
2019/02/03 PHP
JavaScript中的Screen屏幕对象
2008/01/16 Javascript
javascript 精粹笔记
2010/05/09 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
JS仿百度搜索自动提示框匹配查询功能
2013/11/21 Javascript
node.js中的fs.truncateSync方法使用说明
2014/12/15 Javascript
jQuery遮罩层实现方法实例详解(附遮罩层插件)
2015/12/08 Javascript
AngularJS入门教程之表单校验用法示例
2016/11/02 Javascript
Vue.js学习示例分享
2017/02/05 Javascript
NodeJS收发GET和POST请求的示例代码
2017/08/25 NodeJs
JS动态插入脚本和插入引用外部链接脚本的方法
2018/05/21 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
js实现双色球效果
2020/08/02 Javascript
vue项目如何监听localStorage或sessionStorage的变化
2021/01/04 Vue.js
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
[02:00]DOTA2英雄COSPLAY闹市街头巡游助威2015国际邀请赛
2015/08/02 DOTA
[42:32]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第二场 11.27
2020/12/01 DOTA
Python操作MongoDB数据库PyMongo库使用方法
2015/04/27 Python
Ruby元编程基础学习笔记整理
2016/07/02 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
分享vim python缩进等一些配置
2018/07/02 Python
python对数组进行排序,并输出排序后对应的索引值方式
2020/02/28 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
CSS3动画animation实现云彩向左滚动
2014/05/09 HTML / CSS
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
18-35岁旅游团的全球领导者:Contiki
2017/02/08 全球购物
时尚圣经:The Fashion Bible
2019/03/03 全球购物
心碎乌托邦的创业计划书范文
2013/12/26 职场文书
共产党员承诺书
2014/03/25 职场文书
张丽莉事迹观后感
2015/06/16 职场文书
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python