你必须知道的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 相关文章推荐
求得div 下 img的src地址的js代码
Feb 28 Javascript
关于使用 jBox 对话框的提交不能弹出问题解决方法
Nov 07 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
jQuery中toggleClass()方法用法实例
Jan 05 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
angular基于ng-alain定义自己的select组件示例
Feb 23 Javascript
JQuery样式与属性设置方法分析
Dec 07 jQuery
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的伪随机数与真随机数详解
2015/05/27 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
PHP pthreads v3在centos7平台下的安装与配置操作方法
2020/02/21 PHP
Javascript 复制数组实现代码
2009/11/26 Javascript
JavaScript中提前声明变量或函数例子
2014/11/12 Javascript
javascript获取元素离文档各边距离的方法
2015/02/13 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
2016/01/28 Javascript
jquery 将当前时间转换成yyyymmdd格式的实现方法
2016/06/01 Javascript
ionic js 模型 $ionicModal 可以遮住用户主界面的内容框
2016/06/06 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
AngularJS基础 ng-init 指令简单示例
2016/08/02 Javascript
jsp 自动编译机制详细介绍
2016/12/01 Javascript
原生js开发的日历插件
2017/02/04 Javascript
nodejs服务搭建教程 nodejs访问本地站点文件
2017/04/07 NodeJs
jQuery EasyUI 组件加上“清除”功能实例详解
2017/04/11 jQuery
Angular X中使用ngrx的方法详解(附源码)
2017/07/10 Javascript
微信小程序获取循环元素id以及wx.login登录操作
2017/08/17 Javascript
微信小程序实现打开内置地图功能【附源码下载】
2017/12/07 Javascript
Vuex提升学习篇
2018/01/11 Javascript
vue axios 给生产环境和发布环境配置不同的接口地址(推荐)
2018/05/08 Javascript
通过nodejs 服务器读取HTML文件渲染到页面的方法
2018/05/17 NodeJs
BootStrap table实现表格行拖拽效果
2018/12/01 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
javascript中innerHTML 获取或替换html内容的实现代码
2020/03/17 Javascript
动态创建类实例代码
2009/10/07 Python
Python中print和return的作用及区别解析
2019/05/05 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
使用jupyter notebook将文件保存为Markdown,HTML等文件格式
2020/04/14 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
刑事辩护授权委托书
2014/09/13 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
2014年社区妇联工作总结
2014/12/02 职场文书
社区活动总结
2015/02/04 职场文书
寒假生活随笔
2015/08/15 职场文书
Python 用户输入和while循环的操作
2021/05/23 Python