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 相关文章推荐
禁止你的左键复制实用技巧
Jan 04 Javascript
JavaScript中instanceof运算符的用法总结
Nov 19 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
详解js图片轮播效果实现原理
Dec 17 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
js编写的treeview使用方法
Nov 11 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
JS仿京东移动端手指拨动切换轮播图效果
Apr 10 Javascript
webpack 2的react开发配置实例代码
Jul 28 Javascript
详解vue mixins和extends的巧妙用法
Dec 20 Javascript
bootstrap-closable-tab可实现关闭的tab标签页插件
Aug 09 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 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
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
php上传文件问题汇总
2015/01/30 PHP
PHP Streams(流)详细介绍及使用
2015/05/12 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
Yii 2.0中场景的使用教程
2017/06/02 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
javascript实现yield的方法
2013/11/06 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
js对象继承之原型链继承实例
2015/01/10 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
2015/04/01 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
2015/06/12 Javascript
使用Script元素发送JSONP请求的方法
2016/06/12 Javascript
Angular ui.bootstrap.pagination分页
2017/01/20 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
浅谈Vue响应式(数组变异方法)
2018/05/07 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
2018/11/30 Javascript
jQuery创建折叠式菜单
2019/06/15 jQuery
简单了解微信小程序的目录结构
2019/07/01 Javascript
使用VScode 插件debugger for chrome 调试react源码的方法
2019/09/13 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
python list语法学习(带例子)
2013/11/01 Python
python编码最佳实践之总结
2016/02/14 Python
简单了解Django模板的使用
2017/12/20 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
python多进程控制学习小结
2018/10/31 Python
python实现智能语音天气预报
2019/12/02 Python
Python json读写方式和字典相互转化
2020/04/18 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
Solid & Striped官网:美国泳装品牌
2019/06/19 全球购物
生产部主管岗位职责
2014/01/06 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
审美与表现自我评价
2015/03/09 职场文书
社区服务理念口号
2015/12/25 职场文书
Python爬虫 简单介绍一下Xpath及使用
2022/04/26 Python