你必须知道的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 相关文章推荐
用JavaScript调用WebService的示例
Apr 07 Javascript
面向对象的Javascript之一(初识Javascript)
Jan 20 Javascript
ASP.NET jQuery 实例8 (动态添加内容到DropDownList)
Feb 03 Javascript
js返回上一页并刷新代码整理
Dec 21 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
用Move.js配合创建CSS3动画的入门指引
Jul 22 Javascript
jQuery获取checkbox选中的值
Jan 28 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
javascript中new Array()和var arr=[]用法区别
Dec 01 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
Mar 21 Javascript
浅谈vuex的基本用法和mapaction传值问题
Nov 08 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 深入理解strtotime函数的使用详解
2013/05/23 PHP
YII Framework框架教程之缓存用法详解
2016/03/14 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
PHP实现十进制、二进制、八进制和十六进制转换相关函数用法分析
2017/04/25 PHP
Laravel 将数据表的数据导出,并生成seeds种子文件的方法
2019/10/09 PHP
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
模拟电子签章盖章效果的jQuery插件源码
2013/06/24 Javascript
js带按钮的提示框可供选择示例代码
2013/09/17 Javascript
JavaScript数组随机排列实现随机洗牌功能
2015/03/19 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
js实现表格筛选功能
2017/01/18 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
JavaScript中的FileReader图片预览上传功能实现代码
2017/07/24 Javascript
JavaScript实现滑动导航栏效果
2017/08/30 Javascript
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
Vue使用NPM方式搭建项目
2018/10/25 Javascript
JS FormData对象使用方法实例详解
2020/02/12 Javascript
JavaScript如何判断对象有某属性
2020/07/03 Javascript
vue项目实现设置根据路由高亮对应的菜单项操作
2020/08/06 Javascript
python实现电子词典
2020/04/23 Python
Python加pyGame实现的简单拼图游戏实例
2015/05/15 Python
itchat接口使用示例
2017/10/23 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
使用Matplotlib 绘制精美的数学图形例子
2019/12/13 Python
Python常用类型转换实现代码实例
2020/07/28 Python
玩具反斗城美国官网:Toys"R"Us
2016/09/17 全球购物
澳大利亚手袋、珠宝和在线时尚精品店:The Way
2019/12/21 全球购物
电工技术比武方案
2014/05/11 职场文书
幼儿园中班区域活动总结
2014/07/09 职场文书
党代会心得体会
2014/09/04 职场文书
出售房屋委托书范本
2014/09/24 职场文书
个人贷款收入证明
2014/10/26 职场文书
朋友离别感言
2015/08/04 职场文书
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers