你必须知道的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 11 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 Javascript
jquery实现侧边弹出的垂直导航
Dec 09 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
详解JS中的快速排序与冒泡
Jan 10 Javascript
js单页hash路由原理与应用实战详解
Aug 14 Javascript
js实现input密码框显示/隐藏功能
Sep 10 Javascript
小程序如何构建骨架屏
May 29 Javascript
解决vue单页面应用中动态修改title问题
Jun 09 Javascript
JavaScript 几种循环方式以及模块化的总结
Sep 03 Javascript
如何在面试中手写出javascript节流和防抖函数
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 修改上传文件大小限制实例详解
2016/10/23 PHP
关于COOKIE个数与大小的问题
2011/01/17 Javascript
JS判断字符串长度的5个方法(区分中文和英文)
2014/03/18 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
javascript实现保留两位小数的多种方法
2015/12/18 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
基于canvas粒子系统的构建详解
2017/08/31 Javascript
Windows下支持自动更新的Electron应用脚手架的方法
2018/12/24 Javascript
详解微信小程序开发聊天室—实时聊天,支持图片预览
2019/05/20 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
python将字符串转换成数组的方法
2015/04/29 Python
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Python读取Excel的方法实例分析
2015/07/11 Python
深入讲解Python中的迭代器和生成器
2015/10/26 Python
详解在Python程序中解析并修改XML内容的方法
2015/11/16 Python
python生成excel的实例代码
2017/11/08 Python
Python cookbook(数据结构与算法)通过公共键对字典列表排序算法示例
2018/03/15 Python
pandas筛选某列出现编码错误的解决方法
2018/11/07 Python
python 自动重连wifi windows的方法
2018/12/18 Python
Linux下通过python获取本机ip方法示例
2019/09/06 Python
Python根据服务获取端口号的方法
2019/09/25 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
Spartoo荷兰:鞋子、包包和服装
2018/07/12 全球购物
Subside Sports德国:足球球衣和球迷商品
2019/06/08 全球购物
Mountain Warehouse德国官网:英国户外零售商
2019/08/11 全球购物
德国专业木制品经销商:Holz-Direkt24
2019/12/26 全球购物
大学生村官事迹材料
2014/01/21 职场文书
个人授权委托书模板
2014/09/14 职场文书
安全生产月标语
2014/10/07 职场文书
作文评语怎么写
2014/12/25 职场文书
收银员岗位职责
2015/02/03 职场文书
2015年销售部工作总结范文
2015/04/27 职场文书
大卫科波菲尔读书笔记
2015/06/30 职场文书
Go Gin实现文件上传下载的示例代码
2021/04/02 Golang
Python绘制分类图的方法
2021/04/20 Python