你必须知道的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刷新框架中的其他页面 && JS刷新窗口方法汇总
Jul 08 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
javascript实现九宫格相加数值相等
May 28 Javascript
Javascript闭包与函数柯里化浅析
Jun 22 Javascript
微信小程序 数据遍历的实现
Apr 05 Javascript
JQuery模拟实现网页中自定义鼠标右键菜单功能
Nov 14 jQuery
如何使用electron-builder及electron-updater给项目配置自动更新
Dec 24 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 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-cgi.exe - FastCGI 进程超过了配置的请求超时时限)的问题
2013/07/03 PHP
PHP载入图像imagecreatefrom_gif_jpeg_png系列函数用法分析
2016/11/14 PHP
jquery复选框CHECKBOX全选、反选
2008/08/30 Javascript
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
浏览器加载、渲染和解析过程黑箱简析
2012/11/29 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
2013/09/06 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
js前端实现多图图片上传预览的两个方法(推荐)
2016/11/18 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
2017/07/07 Javascript
webpack构建react多页面应用详解
2017/09/15 Javascript
angularjs中判断ng-repeat是否迭代完的实例
2018/09/12 Javascript
在 Angular-cli 中使用 simple-mock 实现前端开发 API Mock 接口数据模拟功能的方法
2018/11/28 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
python进阶教程之模块(module)介绍
2014/08/30 Python
python装饰器初探(推荐)
2016/07/21 Python
Python+树莓派+YOLO打造一款人工智能照相机
2018/01/02 Python
Python 数据处理库 pandas 入门教程基本操作
2018/04/19 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
浅析Python3 pip换源问题
2020/01/06 Python
python 判断txt每行内容中是否包含子串并重新写入保存的实例
2020/03/12 Python
TensorFlow2.1.0最新版本安装详细教程
2020/04/08 Python
django rest framework serializers序列化实例
2020/05/13 Python
全网最细 Python 格式化输出用法讲解(推荐)
2021/01/18 Python
土木工程个人自荐信范文
2013/11/30 职场文书
管道维修工岗位职责
2013/12/27 职场文书
思想汇报格式
2014/01/05 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
英雄儿女观后感
2015/06/09 职场文书
《社戏》教学反思
2016/02/22 职场文书
如何制定销售人员薪酬制度?
2019/07/09 职场文书
pytorch model.cuda()花费时间很长的解决
2021/06/01 Python
比较几种Redis集群方案
2021/06/21 Redis
python非标准时间的转换
2021/07/25 Python
经典《舰娘》游改全新动画预告 预定11月开播
2022/04/01 日漫