javascript中this的用法实践分析


Posted in Javascript onJuly 29, 2019

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

实践一:this在点击等事件中的指向

html结构:

<button id='btn'>click me</button>

javascript结构:

var btn = document.getElementById('btn');
btn.onclick = function(event) {
 console.log(this.innerHTML); // click me
 // 还有另一种做法如下,用事件对象
 var evt = event || window.event;
 var target = evt.target || evt.srcElement;
 console.log(target.innerHTML); // click me
}

实践二:this在对象字面量json中的指向,指向自身对象

var p = {
 "name":"Tom",
 "say":function(){
  console.log(this.name + ' say something!');
 }
}
p.say(); // Tom say something!

实践三:this在全局作用域中的使用

var a = 1;
console.log(this); // window
console.log(this.a); // 1
function test(){
 console.log(this); // window
 this.haha = 'i am haha';
};
test(); // 函数一执行,haha 作用域变成全局的
console.log(haha); // i am haha

实践四:this在定时器中的指向,定时器是window对象的一个方法,定时器中的this指向window对象,setTimeout()setInterval() 是一样的

var div = document.getElementById('div');
div.onclick = function() {
 var that = this; // 用that 来存储当前的div这个dom元素
 setTimeout(function(){
  console.log(this + ' i am this'); // [object Window] i am this
  console.log(that + ' i am that'); // [object HTMLDivElement] i am that
 }, 100);
}

实践五:this在对象中的指向,指向当前实例对象

function Person(){
 this.name = 'jack';
};
Person.prototype = {
 buy:function() {
  console.log(this.name + ' go buy!');
 }
}
var p = new Person();
console.log(p.name); // jack;
p.buy(); // jack go buy!

实践六:this在闭包中的应用1

var age = 20;
var person = {


"age" : 10,


"getAgeFunc" : function(){



return function(){




return this.age; // this 指向 window



};


}

};
console.log(person.getAgeFunc()()); // 20
/* 
  分析这段代码:person调用getAgeFunc() 在内存中返回一个函数,这个函数是全局的,然后加个() 执行。那么,返回20
*/

实践七:this在闭包中的应用2

var age = 20;
var person = {
"age" : 10,

"getAgeFunc" : function(){
    var that = this;


return function(){



return that.age; // that 指向 person


};

}
};
console.log(person.getAgeFunc()()); // 10
/*
  分析这段代码:person调用getAgeFunc() 用that代替当前对象,当执行返回的闭包函数时,age是person对象的一个属性那么,返回10
*/

实践八:用call和apply改变this的指向 ,以后会详细分析 call和apply以及闭包的概念

var person = {
 "name":"Tom",
 "say":function(x,y) {
   console.log(this.name + ' say ' + x + ' ' + y);
 }
}
var student = {
 "name":"Lucy"
}
person.say.call(student,'hello','world'); // Lucy say hello world
person.say.apply(student,['hello','javascript']); // Lucy say hello javascript

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

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

Javascript 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
JavaScript 盒模型 尺寸深入理解
Dec 31 Javascript
javascript使用定时函数实现跳转到某个页面
Dec 25 Javascript
JavaScript中的ajax功能的概念和示例详解
Oct 17 Javascript
原生js实现选项卡功能
Mar 08 Javascript
JavaScript实现两个select下拉框选项左移右移
Mar 09 Javascript
jQuery表单验证之密码确认
May 22 jQuery
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
浅谈JS函数节流防抖
Oct 18 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
在vue项目中使用codemirror插件实现代码编辑器功能
Aug 27 Javascript
浅谈vue中$bus的使用和涉及到的问题
Jul 28 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 #Javascript
jquery.pager.js分页实现详解
Jul 29 #jQuery
javascript面向对象创建对象的方式小结
Jul 29 #Javascript
jquery.pager.js实现分页效果
Jul 29 #jQuery
vue-router跳转时打开新页面的两种方法
Jul 29 #Javascript
JS实现移动端点击按钮复制文本内容
Jul 28 #Javascript
微信小程序文字显示换行问题
Jul 28 #Javascript
You might like
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
PHP实现取得HTTP请求的原文
2014/08/18 PHP
JQuery优缺点分析说明
2010/06/09 Javascript
基于jquery的跨域调用文件
2010/11/19 Javascript
说明你的Javascript技术很烂的五个原因
2011/04/26 Javascript
DIV+CSS+JS不间断横向滚动实现代码
2013/03/19 Javascript
分享9点个人认为比较重要的javascript 编程技巧
2015/04/27 Javascript
js兼容火狐显示上传图片预览效果的方法
2015/05/21 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
详解JavaScript中的Unescape()和String() 函数
2015/11/09 Javascript
JavaScript jQuery 中定义数组与操作及jquery数组操作
2015/12/18 Javascript
JavaScript实现瀑布流以及加载效果
2017/02/11 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
vue-music关于Player播放器组件详解
2017/11/28 Javascript
JavaScript事件委托原理与用法实例分析
2018/06/07 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
2019/07/16 jQuery
JS实现的碰撞检测与周期移动完整示例
2019/09/02 Javascript
JS图片懒加载的优点及实现原理
2020/01/10 Javascript
[03:55]显微镜下的DOTA2特别篇——430灰烬之灵神级操作
2014/06/24 DOTA
[46:28]EG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
理解Python垃圾回收机制
2016/02/12 Python
python使用插值法画出平滑曲线
2018/12/15 Python
python语言线程标准库threading.local解读总结
2019/11/10 Python
Python如何对齐字符串
2020/07/30 Python
Giuseppe Zanotti美国官方网站:将鞋履视为高级时装般精心制作
2018/02/06 全球购物
机械设计毕业生自荐信
2014/02/02 职场文书
村抢险救灾方案
2014/05/09 职场文书
产品售后服务承诺书
2014/05/21 职场文书
数控专业毕业生求职信
2014/06/12 职场文书
综治维稳工作汇报
2014/10/27 职场文书
五星红旗迎风飘扬观后感
2015/06/17 职场文书
初婚未育证明样本
2015/06/18 职场文书
个人工作决心书
2015/09/22 职场文书
护士工作心得体会
2016/01/25 职场文书
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers