你必须知道的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无限树状列表实现代码
Jan 11 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
Jan 27 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
不使用浏览器运行javascript代码的方法
Jul 24 Javascript
jQuery操作select下拉框的text值和value值的方法
May 31 Javascript
js网页右下角提示框实例
Oct 14 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
谷歌showModalDialog()方法不兼容出现对话窗口的解决办法
Feb 15 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
Oct 17 Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 Javascript
Vue组件化通讯的实例代码
Jun 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
MySQL数据库转移,access,sql server 转 MySQL 的图文教程
2007/09/02 PHP
PHP中使用imagick生成PSD文件缩略图教程
2015/01/26 PHP
PHP读取、解析eml文件及生成网页的方法示例
2017/09/04 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
jQuery 渐变下拉菜单
2009/12/15 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
基于jQuery实现搜索关键字自动匹配功能
2020/03/26 Javascript
DOM操作和jQuery实现选项移动操作的简单实例
2016/06/07 Javascript
20行JS代码实现网页刮刮乐效果
2017/06/23 Javascript
bootstrap fileinput实现文件上传功能
2017/08/23 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
Python和C/C++交互的几种方法总结
2017/05/11 Python
python3库numpy数组属性的查看方法
2018/04/17 Python
Linux下多个Python版本安装教程
2018/08/15 Python
python+mysql实现学生信息查询系统
2019/02/21 Python
Python常用爬虫代码总结方便查询
2019/02/25 Python
python print出共轭复数的方法详解
2019/06/25 Python
python实现的读取网页并分词功能示例
2019/10/29 Python
Python tkinter和exe打包的方法
2020/02/05 Python
Python实现栈的方法详解【基于数组和单链表两种方法】
2020/02/22 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
Python叠加矩形框图层2种方法及效果
2020/06/18 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
2013/01/09 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
关于期中考试的反思
2014/02/02 职场文书
生日宴会主持词
2014/03/20 职场文书
大学生创业计划书
2014/08/14 职场文书
出国签证在职证明范本
2014/11/24 职场文书
小学一年级学生评语大全
2014/12/25 职场文书
创业计划书之农家乐
2019/10/09 职场文书
JavaScript 定时器详情
2021/11/11 Javascript
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
Go 中的空白标识符下划线
2022/03/25 Golang