你必须知道的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 相关文章推荐
jQuery插件的写法分享
Jun 12 Javascript
SwfUpload在IE10上不出现上传按钮的解决方法
Jun 25 Javascript
JS实现侧悬浮浮动实例代码
Nov 29 Javascript
jquery通过select列表选择框对表格数据进行过滤示例
May 07 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
CSS+jQuery实现简单的折叠菜单
Dec 20 Javascript
VUE饿了么树形控件添加增删改功能的示例代码
Oct 17 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
微信小程序如何获取openid及用户信息
Jan 26 Javascript
iconfont的三种使用方式详解
Aug 05 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
Apr 15 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 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面试题集锦
2012/03/08 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
php中current、next与reset函数用法实例
2014/11/17 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
laravel利用中间件防止未登录用户直接访问后台的方法
2019/09/30 PHP
IE6下JS动态设置图片src地址问题
2010/01/08 Javascript
基于JQuery 的消息提示框效果代码
2011/07/31 Javascript
javascript学习(二)javascript常见问题总结
2013/01/02 Javascript
location对象的属性和方法应用(解析URL)
2013/04/12 Javascript
js字符串转换成xml对象并使用技巧解读
2013/04/18 Javascript
超赞的动手创建JavaScript框架的详细教程
2015/06/30 Javascript
JS实现的简单鼠标跟随DiV层效果完整实例
2015/10/31 Javascript
整理AngularJS框架使用过程当中的一些性能优化要点
2016/03/05 Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
2016/09/09 Javascript
15个非常实用的JavaScript代码片段
2016/12/18 Javascript
Bootstrap源码解读标签、徽章、缩略图和警示框(8)
2016/12/26 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
JS实现的ajax和同源策略(实例讲解)
2017/12/01 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
微信小程序下拉框组件使用方法详解
2018/12/28 Javascript
Python虚拟环境项目实例
2017/11/20 Python
Pycharm配置远程调试的方法步骤
2018/12/17 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
Python Selenium实现无可视化界面过程解析
2020/08/25 Python
基于Python组装jmx并调用JMeter实现压力测试
2020/11/03 Python
CSS3制作皮卡丘动画壁纸的示例
2020/11/02 HTML / CSS
高二化学教学反思
2014/01/30 职场文书
医药销售求职信范文
2014/02/01 职场文书
爱的教育读书笔记
2015/06/26 职场文书
2015秋季开学典礼演讲稿
2015/07/16 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
写作指导:怎么书写竞聘演讲稿?
2019/07/04 职场文书
python 使用Tensorflow训练BP神经网络实现鸢尾花分类
2021/05/12 Python