你必须知道的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 相关文章推荐
greybox——不开新窗口看新的网页
Feb 20 Javascript
js的闭包的一个示例说明
Nov 18 Javascript
jQuery对表单的操作代码集合
Apr 06 Javascript
js编码、解码函数介绍及其使用示例
Sep 05 Javascript
JavaScript中定义函数的三种方法
Mar 12 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
Angularjs Promise实例详解
Mar 15 Javascript
浅谈微信小程序flex布局基础
Sep 10 Javascript
浅谈vue后台管理系统权限控制思考与实践
Dec 19 Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 Javascript
微信小程序学习笔记之本地数据缓存功能详解
Mar 29 Javascript
vue实现下拉菜单树
Oct 22 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删除文件夹及其文件夹下所有文件的函数代码
2013/01/23 PHP
PHP中__get()和__set()的用法实例详解
2013/06/04 PHP
Youku 视频绝对地址获取的方法详解
2013/06/26 PHP
php另类上传图片的方法(PHP用Socket上传图片)
2013/10/30 PHP
PHP的Yii框架中View视图的使用进阶
2016/03/29 PHP
PHP中overload与override的区别
2017/02/13 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
PHP清除缓存的几种方法总结
2017/09/12 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
jquery 查找新建元素代码
2010/07/06 Javascript
jQuery处理xml格式的返回数据(实例解析)
2013/11/28 Javascript
ExtJS4利根据登录后不同的角色分配不同的树形菜单
2014/05/02 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
2015/04/30 Javascript
ECMAScript6中Map/WeakMap详解
2015/06/12 Javascript
JavaScript编写推箱子游戏
2015/07/07 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
Bootstrap编写导航栏和登陆框
2016/05/30 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
vue-resourse将json数据输出实例
2017/03/08 Javascript
Vue Router的懒加载路径的解决方法
2018/06/21 Javascript
layui数据表格 table.render 报错的解决方法
2019/09/29 Javascript
小程序外卖订单界面的示例代码
2019/12/30 Javascript
javascript canvas时钟模拟器
2020/07/13 Javascript
JavaScript缓动动画函数的封装方法
2020/11/25 Javascript
[02:05]2014DOTA2西雅图国际邀请赛 BBC第二天小组赛总结
2014/07/11 DOTA
Python tempfile模块学习笔记(临时文件)
2014/05/25 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
python3+opencv3识别图片中的物体并截取的方法
2018/12/05 Python
Python3 Tkinter选择路径功能的实现方法
2019/06/14 Python
利用Python库Scapy解析pcap文件的方法
2019/07/23 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
Python创建临时文件和文件夹
2020/08/05 Python
python 爬取腾讯视频评论的实现步骤
2021/02/18 Python
《莫泊桑拜师》教学反思
2014/04/23 职场文书