你必须知道的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 相关文章推荐
按Enter键触发事件的jquery方法实现代码
Feb 17 Javascript
原生js和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
jQuery+html5实现div弹出层并遮罩背景
Apr 15 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
FullCalendar日历插件应用之数据展现(一)
Dec 23 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 Javascript
JavaScript严格模式详解
Jan 16 Javascript
vue本地打开build后生成的dist文件夹index.html问题
Sep 04 Javascript
Vue watch响应数据实现方法解析
Jul 10 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 表单验证实现代码
2009/03/10 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
laravel 框架实现无限级分类的方法示例
2019/10/31 PHP
Javascript操纵Cookie实现购物车程序
2007/02/15 Javascript
JavaScript的面向对象方法以及差别
2008/03/31 Javascript
javascript 流畅动画实现原理
2009/09/08 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
关于图片按比例自适应缩放的js代码
2011/10/30 Javascript
js实现简单的星级选择器提交效果适用于评论等
2013/10/18 Javascript
js实现微信分享代码
2020/10/11 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
HTML页面定时跳转方法解析(2种任选)
2016/12/22 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
2017/01/22 Javascript
浅析vue component 组件使用
2017/03/06 Javascript
基于bootstrap页面渲染的问题解决方法
2018/08/09 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
2018/08/27 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
Python编写登陆接口的方法
2017/07/10 Python
简单了解什么是神经网络
2017/12/23 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
浅谈Python在pycharm中的调试(debug)
2018/11/29 Python
Python设计模式之代理模式实例详解
2019/01/19 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
keras 使用Lambda 快速新建层 添加多个参数操作
2020/06/10 Python
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
美国大尺码女装零售商:TORRID
2016/10/01 全球购物
骨干教师培训感言
2014/01/16 职场文书
手工社团活动方案
2014/02/17 职场文书
驳回起诉民事裁定书
2015/05/19 职场文书
卡特教练观后感
2015/06/08 职场文书
2019最新校园运动会广播稿!
2019/06/28 职场文书
感恩信:写给爸爸妈妈的一封感谢信
2019/09/12 职场文书
创业计划书之小型广告公司
2019/10/22 职场文书
《妈妈别哭,有我在》读后感3篇
2020/01/13 职场文书