你必须知道的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 相关文章推荐
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
javascript获取本机操作系统类型的方法
Aug 13 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
Dec 05 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
Feb 27 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
AngularJS全局警告框实现方法示例
May 18 Javascript
js判断用户是输入的地址请求的路径(实例讲解)
Jul 18 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
nginx+vue.js实现前后端分离的示例代码
Feb 12 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
Vue+Spring Boot简单用户登录(附Demo)
Nov 12 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的面试题集
2006/11/19 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
理解JavaScript中的对象 推荐
2011/01/09 Javascript
javascript放大镜效果的简单实现
2013/12/09 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
jQuery结合ajax实现动态加载文本内容
2015/05/19 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
jquery.multiselect多选下拉框实现代码
2016/11/11 Javascript
利用Vue.js+Node.js+MongoDB实现一个博客系统(附源码)
2017/04/24 Javascript
Vue中封装input组件的实例详解
2017/10/17 Javascript
JS获取指定月份的天数两种实现方法
2018/06/22 Javascript
Vue.js 父子组件通信的十种方式
2018/10/30 Javascript
通过jQuery学习js类型判断的技巧
2019/05/27 jQuery
解决vue-cli webpack打包开启Gzip 报错问题
2019/07/24 Javascript
JS 获取文件后缀,判断文件类型(比如是否为图片格式)
2020/05/09 Javascript
Javascript call及apply应用场景及实例
2020/08/26 Javascript
[05:05]给小松五分钟系列 第二期介绍为什么打DOTA2
2014/07/02 DOTA
[00:06]Yes,it worked!小卡尔成功穿越时空加入战场!
2019/07/20 DOTA
Python脚本实现Web漏洞扫描工具
2016/10/25 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
python3基于TCP实现CS架构文件传输
2018/07/28 Python
漂亮的Django Markdown富文本app插件的实现
2019/01/02 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
python爬虫搭配起Bilibili唧唧的流程分析
2020/12/01 Python
详解基于Facecognition+Opencv快速搭建人脸识别及跟踪应用
2021/01/21 Python
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
2020/08/19 HTML / CSS
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
探矿工程师自荐信
2014/01/24 职场文书
征婚广告词
2014/03/17 职场文书
代理人委托书
2014/09/16 职场文书
学习保证书100字
2015/02/26 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript