你必须知道的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学习5 jQuery事件模型
Feb 07 Javascript
Underscore.js 的模板功能介绍与应用
Dec 24 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
Vue.js教程之计算属性
Nov 11 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
vue项目中添加单元测试的方法
Jul 21 Javascript
webuploader分片上传的实现代码(前后端分离)
Sep 10 Javascript
在Create React App中使用CSS Modules的方法示例
Jan 15 Javascript
微信小程序实现的picker多级联动功能示例
May 23 Javascript
浅谈react路由传参的几种方式
Mar 23 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 操作文件的一些FAQ总结
2009/02/12 PHP
php代码审计比较有意思的例子
2014/05/07 PHP
Discuz论坛密码与密保加密规则
2016/12/19 PHP
PHP给源代码加密的几种方法汇总(推荐)
2018/02/06 PHP
javascript add event remove event
2008/04/07 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
JS实现静止元素自动移动示例
2014/04/14 Javascript
jquery事件绑定解绑机制源码解析
2016/09/19 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
angular中使用Socket.io实例代码
2017/06/03 Javascript
认识jQuery的Promise的具体使用方法
2017/10/10 jQuery
详解vue 数组和对象渲染问题
2018/09/21 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
[38:21]2018DOTA2亚洲邀请赛3月30日 小组赛A组 LGD VS Newbee
2018/03/31 DOTA
Python数据结构与算法之图的最短路径(Dijkstra算法)完整实例
2017/12/12 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
终端命令查看TensorFlow版本号及路径的方法
2018/06/13 Python
python使用turtle库与random库绘制雪花
2018/06/22 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
python之线程通过信号pyqtSignal刷新ui的方法
2019/01/11 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
对PyQt5中树结构的实现方法详解
2019/06/17 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
Django实现whoosh搜索引擎使用jieba分词
2020/04/08 Python
虚拟机下载python是否需要联网
2020/07/27 Python
利用Opencv实现图片的油画特效实例
2021/02/28 Python
Python  Asyncio模块实现的生产消费者模型的方法
2021/03/01 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
一个J2EE项目团队的主要人员组成是什么
2012/06/04 面试题
会计辞职信范文
2014/01/15 职场文书
公务员四风问题对照检查材料整改措施
2014/09/26 职场文书
报到证办理个人委托书
2014/10/06 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
民间借贷纠纷起诉书
2015/08/03 职场文书
Web前端:CSS最强总结 附详细代码
2021/03/31 HTML / CSS
ubuntu开机后ROS程序自启动问题
2022/12/24 Servers