JavaScript中this的9种应用场景及三种复合应用场景


Posted in Javascript onSeptember 12, 2015

【场景1】全局环境中的this指向全局对象

this.a = 10;
alert(a);//10
b = 20;
alert(this.b);//20
var c = 30;
alert(this.c);//30

【场景2】对象内部函数的this指向调用函数的当前对象

var a = 10;
var bar = {
 a: 20,
 test: function(){
  alert(this.a);
 }
}
bar.test();//20

【场景3】全局环境函数的this指向全局对象

var a = 10;
function foo(){
 alert(this.a);
}
foo();//10

【场景4】匿名函数中的this指向全局对象

var a = 10;
var foo = {
 a: 20,
 fn: (function(){
  alert(this.a);
 })()
}
foo.fn//10

【场景5】setInterval和setTimeout定时器中的this指向全局对象

var a = 10;
var oTimer1 = setInterval(function(){
 var a = 20;
 alert(this.a);//10
 clearInterval(oTimer1);
},100);

【场景6】eval中的this指向调用上下文中的this

(function(){
 eval("alert(this)");//[object Window]
})();
function Foo(){
 this.bar = function(){
  eval("alert(this)");//[object Object]
 }
}
var foo = new Foo();
foo.bar();

【场景7】构造函数中的this指向构造出的新对象

function Person(name,age){
 this.name = name;
 this.age = age;
 this.sayName = function(){
  alert(this.name);
 }
}
var p1 = new Person('lily','20');
p1.sayName();//'lily'

【场景8】new Function中的this指向全局对象

(function(){
 var f = new Function("alert(this)");
 f();//[object Window]
})();
function Foo(){
 this.bar = function(){
  var f = new Function("alert(this)");
  f();//[object Window]
 }
}
var foo = new Foo();
foo.bar();

【场景9】apply和call中的this指向参数中的对象

var a = 10;
var foo = {
 a: 20,
 fn: function(){
  alert(this.a);
 }
};
var bar ={
 a: 30
}
foo.fn.apply();//10(若参数为空,默认指向全局对象)
foo.fn.apply(foo);//20
foo.fn.apply(bar);//30

【复合场景1】

var someone = {
 name: "Bob",
 showName: function(){
  alert(this.name);
 }
};
var other = {
 name: "Tom",
 showName: someone.showName
}
other.showName();//Tom

//以上函数相当于

var other = {
 name: "Tom",
 showName: function(){
  alert(this.name);
 }
}
other.showName();
//Tom

【复合场景2】

var name = 2;
var a = {
 name: 3,
 fn: (function(){
  alert(this.name);
 })(),
 fn1:function(){
  alert(this.name);
 }
}
a.fn;//2[匿名函数中的this指向全局对象]
a.fn1();//3[对象内部函数的this指向调用函数的当前对象]

【复合场景3】

var name = "Bob"; 
var nameObj ={ 
 name : "Tom", 
 showName : function(){ 
 alert(this.name); 
}, 
 waitShowName : function(){
  var that = this;
  setTimeout(function(){
   that.showName();
  }, 1000);
 }
}; 
nameObj.waitShowName();//"Tom"[that=this改变this的指向,使this从指向全局变量变化到指向nameObj]

var name = "Bob"; 
var nameObj ={ 
 name : "Tom", 
 showName : function(){ 
  alert(this.name); 
 }, 
 waitShowName : function(){
  var that = this;//that指向nameObj
  setTimeout(function(){
   (function(){ 
    alert(this.name);
   })();
  }, 1000);
 }
}; 
nameObj.waitShowName();// 'Bob'[形成匿名函数,this指向全局变量]

本文给大家介绍了this中的9种应用场景,希望对大家有所帮助,本站每天都有新的内容更新,请广大网友持续关注本站,谢谢。

Javascript 相关文章推荐
javascript显示选择目录对话框的代码
Nov 10 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
JavaScript将数字转换成大写中文的方法
Mar 23 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
javascript设置和获取cookie的方法实例详解
Jan 05 Javascript
gulp解决跨域的配置文件问题
Jun 08 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
JS和Canvas实现图片的预览压缩和上传功能
Mar 30 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
VueCli3构建TS项目的方法步骤
Nov 07 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 Javascript
javascript判断网页是关闭还是刷新
Sep 12 #Javascript
js查看一个函数的执行时间实例代码
Sep 12 #Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
Sep 12 #Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 #Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 #Javascript
jQuery+css实现的蓝色水平二级导航菜单效果代码
Sep 11 #Javascript
js实现的后台左侧管理菜单代码
Sep 11 #Javascript
You might like
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
详谈PHP文件目录基础操作
2014/11/11 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
Javascript 定时器调用传递参数的方法
2009/11/12 Javascript
uploadify在Firefox下丢失session问题的解决方法
2013/08/07 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
jQuery使用hide方法隐藏指定元素class样式用法实例
2015/03/30 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
老生常谈js-react组件生命周期
2017/05/02 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
Vue异步组件处理路由组件加载状态的解决方案
2018/09/07 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
Element的el-tree控件后台数据结构的生成以及方法的抽取
2020/03/05 Javascript
js实现无缝轮播图效果
2020/03/09 Javascript
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
vue 动态添加class,三个以上的条件做判断方式
2020/11/02 Javascript
关于Python面向对象编程的知识点总结
2017/02/14 Python
高质量Python代码编写的5个优化技巧
2017/11/16 Python
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
Python3使用turtle绘制超立方体图形示例
2018/06/19 Python
如何使用python爬虫爬取要登陆的网站
2019/07/12 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
Python unittest装饰器实现原理及代码
2020/09/08 Python
Marc Jacobs官方网站:美国奢侈品牌
2017/08/29 全球购物
青年创业培训欢迎词
2014/01/10 职场文书
暑期社会实践先进个人主要事迹
2014/05/22 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
新颖的化妆品活动方案
2014/08/21 职场文书
企业爱岗敬业演讲稿
2014/09/04 职场文书
上市公司董事长岗位职责
2015/04/16 职场文书
2015年小学校长工作总结
2015/05/19 职场文书
2016秋季幼儿园开学寄语
2015/12/03 职场文书
2021年最新用于图像处理的Python库总结
2021/06/15 Python
Echarts如何重新渲染实例详解
2022/05/30 Javascript
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技