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 相关文章推荐
深入解析contentWindow, contentDocument
Jul 04 Javascript
node.js中的fs.stat方法使用说明
Dec 16 Javascript
javaScript的函数对象的声明详解
Feb 06 Javascript
javascript实现行拖动的方法
May 27 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
Jun 13 Javascript
简单谈谈js的数据类型
Sep 25 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
微信小程序文字显示换行问题
Jul 28 Javascript
async/await让异步操作同步执行的方法详解
Nov 01 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
Aug 05 Javascript
JavaScript中条件语句的优化技巧总结
Dec 04 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
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
《猛禽小队》:DC宇宙的又一超级大烂片
2020/04/09 欧美动漫
关于PHP中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
php注册登录系统简化版
2020/12/28 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
javascript语句中的CDATA标签的意义
2007/05/09 Javascript
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
JS无限树状列表实现代码
2011/01/11 Javascript
初识JQuery 实例一(first)
2011/03/16 Javascript
JS实现的一个简单的Autocomplete自动完成例子
2014/04/16 Javascript
推荐5 个常用的JavaScript调试技巧
2015/01/08 Javascript
javascript实现tab响应式切换特效
2016/01/29 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
2016/08/01 Javascript
实例讲解javascript实现异步图片上传方法
2017/12/05 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
jQuery+ajax读取json数据并按照价格排序示例
2018/03/28 jQuery
一篇文章,教你学会Vue CLI 插件开发
2019/04/17 Javascript
基于jquery实现的tab选项卡功能示例【附源码下载】
2019/06/10 jQuery
vue中axios防止多次触发终止多次请求的示例代码(防抖)
2020/02/16 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
python Flask实现restful api service
2017/12/04 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
Python3.7中安装openCV库的方法
2018/07/11 Python
Django ModelForm组件使用方法详解
2019/07/23 Python
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
SKECHERS斯凯奇中国官网:来自美国的运动休闲品牌
2018/11/14 全球购物
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
应届生求职推荐信
2013/10/28 职场文书
商场中秋节广播稿
2014/01/17 职场文书
主持人婚宴答谢词
2014/01/28 职场文书
创先争优活动方案
2014/02/12 职场文书
开工典礼策划方案
2014/05/23 职场文书
催款函范本大全
2015/06/24 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
在js中修改html body的样式
2021/11/11 Javascript