你必须知道的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 相关文章推荐
表单元素与非表单元素刷新区别详细解析
Nov 06 Javascript
Extjs4中tree的拖拽功能(可以两棵树之间拖拽) 简单实例
Dec 08 Javascript
当jQuery1.7遇上focus方法的问题
Jan 26 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
jquery调整表格行tr上下顺序实例讲解
Jan 09 Javascript
JS遍历页面所有对象属性及实现方法
Aug 01 Javascript
Bootstrap 网格系统布局详解
Mar 19 Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 Javascript
chosen实现省市区三级联动
Aug 16 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
vue分页器组件编写方法详解
Jun 28 Javascript
JavaScript 原型与原型链详情
Nov 02 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 8小时时间差的解决方法小结
2009/12/22 PHP
PHP 数组排序方法总结 推荐收藏
2010/06/30 PHP
php数组去重复数据示例
2014/02/25 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
浅析php创建者模式
2014/11/25 PHP
php代码检查代理ip的有效性
2016/08/19 PHP
php7性能提升的原因详解
2019/10/13 PHP
PHP上传图片到数据库并显示的实例代码
2019/12/20 PHP
初窥JQuery-Jquery简介 入门了解篇
2010/11/25 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
jQuery学习笔记 操作jQuery对象 文档处理
2012/09/19 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
Javascript中的五种数据类型详解
2014/12/26 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
javascript解决IE6下hover问题的方法
2015/07/28 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
2015/11/26 Javascript
jQuery无刷新上传之uploadify3.1简单使用
2016/06/18 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
Element-ui中元素滚动时el-option超出元素区域的问题
2019/05/30 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
vue-router懒加载的3种方式汇总
2021/02/28 Vue.js
Python Tkinter简单布局实例教程
2014/09/03 Python
python实现的简单文本类游戏实例
2015/04/28 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
css3动画过渡实现鼠标跟随导航效果
2018/02/08 HTML / CSS
英国体育器材进口商店:UK Sport Imports
2017/03/14 全球购物
Tomcat的缺省是多少,怎么修改
2014/04/09 面试题
小学学雷锋活动总结
2014/04/25 职场文书
党员组织生活会发言材料
2014/10/17 职场文书
社会治安综合治理责任书
2015/01/29 职场文书
2015年植树节活动总结
2015/02/06 职场文书
员工规章制度范本
2015/08/07 职场文书
python实现简易名片管理系统
2021/04/11 Python
laravel ajax curd 搜索登录判断功能的实现
2021/04/17 PHP
深入理解margin塌陷和margin合并的解决方案
2021/06/26 HTML / CSS
Vue2项目中对百度地图的封装使用详解
2022/06/16 Vue.js