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 相关文章推荐
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
jQuery.deferred对象使用详解
Mar 18 Javascript
Bootstrap每天必学之警告框插件
Apr 26 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
jQuery实现table表格信息的展开和缩小功能示例
Jul 21 jQuery
vue 界面刷新数据被清除 localStorage的使用详解
Sep 16 Javascript
微信小程序实现动态列表项的顺序加载动画
Jul 25 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
Feb 10 Javascript
vue如何在项目中调用腾讯云的滑动验证码
Jul 15 Javascript
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
Jul 21 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
thinkPHP实现表单自动验证
2014/12/24 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
prototype与jquery下Ajax实现的差别
2009/09/13 Javascript
!DOCTYPE声明对JavaScript的影响分析
2010/04/12 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
2011/11/30 Javascript
详解JavaScript语法对{}处理的坑爹之处
2014/06/05 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
简介JavaScript中的unshift()方法的使用
2015/06/09 Javascript
基于javascript实现图片切换效果
2016/04/17 Javascript
JQuery之proxy实现绑定代理方法
2016/08/01 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
在vue中使用v-bind:class的选项卡方法
2018/09/27 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
python读取二进制mnist实例详解
2017/05/31 Python
python爬虫_微信公众号推送信息爬取的实例
2017/10/23 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
python机器人运动范围问题的解答
2019/04/29 Python
详解pandas DataFrame的查询方法(loc,iloc,at,iat,ix的用法和区别)
2019/08/02 Python
tensorflow自定义激活函数实例
2020/02/04 Python
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
德国的大型美妆个护电商:Flaconi
2020/06/26 全球购物
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
银行求职信个人范文
2013/12/16 职场文书
公司年会晚宴演讲稿
2014/01/06 职场文书
《哪吒闹海》教学反思
2014/02/28 职场文书
工作保证书范文
2014/04/29 职场文书
人事任命书格式
2014/06/05 职场文书
南京导游词
2015/02/03 职场文书
老员工辞职信范文
2015/05/12 职场文书
活动经费申请报告
2015/05/15 职场文书
防震减灾主题班会
2015/08/14 职场文书
《坐井观天》教学反思
2016/02/18 职场文书
解决Go gorm踩过的坑
2021/04/30 Golang