你必须知道的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 相关文章推荐
常见效果实现之返回顶部(结合淡入、淡出、减速滚动)
Jan 04 Javascript
jQuery toggleClass应用实例(附效果图)
Apr 06 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
Bootstrap carousel轮转图的使用实例详解
May 17 Javascript
vue学习笔记之指令v-text && v-html && v-bind详解
May 12 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
Vue之mixin全局的用法详解
Aug 22 Javascript
基于vue和react的spa进行按需加载的实现方法
Sep 29 Javascript
vue--vuex详解
Apr 15 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
Jan 22 Javascript
Vue实现跑马灯效果
May 25 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下MAIL的另一解决方案
2006/10/09 PHP
Parse正式发布开源PHP SDK
2014/08/11 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
简单的自定义php模板引擎
2016/08/26 PHP
php arsort 数组降序排序详细介绍
2016/11/17 PHP
PHP水印类,支持添加图片、文字、填充颜色区域的实现
2017/02/04 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
跨域表单提交状态的变相判断代码
2009/11/12 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
js onmousewheel事件多次触发问题解决方法
2014/10/17 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
简单理解vue中track-by属性
2016/10/26 Javascript
如何实现json数据可视化详解
2016/11/24 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
解决vue+webpack打包路径的问题
2018/03/06 Javascript
解决layui中的form表单与button的点击事件冲突问题
2018/08/15 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
浅谈vue中组件绑定事件时是否加.native
2019/11/09 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
Python实现将文本生成二维码的方法示例
2017/07/18 Python
python从入门到精通 windows安装python图文教程
2019/05/18 Python
Django CBV类的用法详解
2019/07/26 Python
python图片验证码识别最新模块muggle_ocr的示例代码
2020/07/03 Python
Python3.9新特性详解
2020/10/10 Python
一年级数学教学反思
2014/02/01 职场文书
物流管理专业自荐信
2014/06/23 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
浅谈Python魔法方法
2021/06/28 Java/Android
「地球外少年少女」BD发售宣传CM公开
2022/03/21 日漫
vue打包时去掉所有的console.log
2022/04/10 Vue.js