JavaScript中this的用法实例分析


Posted in Javascript onDecember 19, 2016

本文实例分析了JavaScript中this的用法。分享给大家供大家参考,具体如下:

一."this"公理

this关键字永远都指向函数(方法)的所有者;

function fn1(){
  this
};
fn1(); //this=>window
oDiv.onclick=fn1; //this=>oDiv
oDiv.onclick=function(){
  this //this=>oDiv
  fn1(); //this=>window
}
<div onclick="this.fn1();"></div> //这种行间脚本的写法现在非常罕见

这里的this指向div,fn1()里的this指向window

var it=
{
  info:["腾讯","搜狐","新浪","百度"],
  getinfo:function()
  {
    alert(this.info.join(","));
  }
};
it.getinfo();

输出:腾讯,搜狐,新浪,百度

二.函数赋值给变量时的"this"问题

var it=
{
  info:["腾讯","搜狐","新浪","百度"],
  getinfo:function()
  {
    alert(this.info.join(","));
  }
};
var data=it.getinfo;
data();

输出:报错,TypeError: this.info is undefined

代码相当于

var data=function(){
  alert(this.info.join(","));
};
data();

这里的this指向window,这里的data是被赋值,如果是var data=it.getinfo();那就是调用,结果还是腾讯,搜狐,新浪,百度。如果alert(this.it.info.join(","));结果还是腾讯,搜狐,新浪,百度。

var info=["QQ","sohu","sina","baidu"]
var it=
{
  info:["腾讯","搜狐","新浪","百度"],
  getinfo:function()
  {
    alert(this.info.join(","));
  }
};
var data=it.getinfo;
data();

输出:QQ,sohu,sina,baidu

三.作为对象方法调用时的"this"问题

function test()
{
  alert(this.x);
}
var o={};
o.x=1;
o.t=test;
o.t();

输出:1

四.作为构造函数调用时的"this"问题

var x=2;
function test()
{
  this.x=1;
}
test();
alert(x);

输出:1

var x=2;
function test()
{
  this.x=1;
}
var o=new test();
alert(o.x);
alert(x);

输出:1,2

五.闭包中的"this"指向问题

var it=
{
  info:["腾讯","搜狐","新浪","百度"],
  getinfo:function()
  {
  function abc(){
    alert(this.info.join(","));
  }
  abc();
  }
};
it.getinfo();

输出:报错,TypeError: this.info is undefined

闭包中的this不能指向it

解决方法

var it=
{
  info:["腾讯","搜狐","新浪","百度"],
  getinfo:function()
  {
  var _this=this;
  function abc(){
      alert(_this.info.join(","));
  }
  abc();
  }
};
it.getinfo();

优点:无论外部函数名字(it)怎么变,都能指向info

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 数据缓存data(name, value)详解及实现
Jan 04 Javascript
jQuery的运行机制和设计理念分析
Apr 05 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 Javascript
jQuery 滑动方法slideDown向下滑动元素
Jan 16 Javascript
js Calender控件使用详解
Jan 05 Javascript
jQuery内容过滤选择器用法分析
Feb 10 Javascript
AngularJS中的$watch(),$digest()和$apply()区分
Apr 04 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
vue-awesome-swiper 基于vue实现h5滑动翻页效果【推荐】
Nov 08 Javascript
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
uni-app微信小程序登录授权的实现
May 22 Javascript
JavaScript实现登录窗体
Jun 22 Javascript
JS填写银行卡号每隔4位数字加一个空格
Dec 19 #Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 #Javascript
快速入门Vue
Dec 19 #Javascript
javascript中call,apply,bind函数用法示例
Dec 19 #Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 #Javascript
15个非常实用的JavaScript代码片段
Dec 18 #Javascript
scroll事件实现监控滚动条并分页显示(zepto.js)
Dec 18 #Javascript
You might like
Wordpress 相册插件 NextGEN-Gallery 添加目录将中文转为拼音的解决办法
2010/12/29 PHP
php运行时动态创建函数的方法
2015/03/16 PHP
Thinkphp框架开发移动端接口(2)
2016/08/18 PHP
thinkPHP自动验证机制详解
2016/12/05 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
PHP抽象类与接口的区别详解
2019/03/21 PHP
动态调用CSS文件的JS代码
2010/07/29 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
2011/09/17 Javascript
jQuery版仿Path菜单效果
2011/12/15 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
jQuery Easyui使用(二)之可折叠面板动态加载无效果的解决方法
2016/08/17 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
详解jquery easyui之datagrid使用参考
2016/12/05 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
JS中的phototype详解
2017/02/04 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
2017/08/18 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
2017/09/12 Javascript
Vue2.0子同级组件之间数据交互方法
2018/02/28 Javascript
vue+element_ui上传文件,并传递额外参数操作
2020/12/05 Vue.js
Python统计列表中的重复项出现的次数的方法
2014/08/18 Python
Pandas 对Dataframe结构排序的实现方法
2018/04/10 Python
解决python爬虫中有中文的url问题
2018/05/11 Python
python使用KNN算法识别手写数字
2019/04/25 Python
Python基础知识点 初识Python.md
2019/05/14 Python
Foot Locker澳洲官网:美国运动服和鞋类零售商
2019/10/11 全球购物
Audible英国:有声读物,30天免费试用
2019/10/16 全球购物
远程学习的教学用品和家庭学习资源:Really Good Stuff
2020/04/27 全球购物
中级会计职业生涯规划范文
2014/01/16 职场文书
公民授权委托书
2014/10/15 职场文书
玩手机检讨书1000字
2014/10/20 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
同事打架检讨书
2015/05/06 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
初三化学教学反思
2016/02/22 职场文书
职业规划从高考志愿专业选择开始
2019/08/08 职场文书
小程序实现侧滑删除功能
2022/06/25 Javascript