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 相关文章推荐
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
Dec 23 Javascript
关于jquery css的使用介绍
Apr 18 Javascript
jquery选择器排除某个DOM元素的方法(实例演示)
Apr 25 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
jquery中实现时间戳与日期相互转换
Apr 12 Javascript
js中的闭包学习心得
Feb 06 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 Javascript
微信小程序制作扭蛋机代码实例
Sep 24 Javascript
小程序接口的promise化的实现方法
Dec 11 Javascript
vue中实现点击按钮滚动到页面对应位置的方法(使用c3平滑属性实现)
Dec 29 Javascript
JS 创建对象的模式实例小结
Apr 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 PDOStatement::nextRowset讲解
2019/02/01 PHP
云网广告中的代码,提示出错,大家找找
2006/11/21 Javascript
JavaScript中的Document文档对象
2008/01/16 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
javaScript面向对象继承方法经典实现
2013/08/20 Javascript
带左右箭头图片轮播的JS代码
2013/12/18 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
javascript实现动态导入js与css等静态资源文件的方法
2015/07/25 Javascript
js实现下一页页码效果
2017/03/07 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
用node开发并发布一个cli工具的方法步骤
2019/01/03 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
3分钟了解vue数据劫持的原理实现
2019/05/01 Javascript
小程序云开发如何实现图片上传及发表文字
2019/05/17 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
vue实现购物车的监听
2020/04/20 Javascript
jquery+ajax实现异步上传文件显示进度条
2020/08/17 jQuery
Python实现检测服务器是否可以ping通的2种方法
2015/01/01 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
python将list转为matrix的方法
2018/12/12 Python
Python格式化字符串f-string概览(小结)
2019/06/18 Python
澳大利亚人信任的清洁平台,您的私人管家:Jarvis
2020/12/25 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
武汉世纪畅想数字传播有限公司 .NET笔试题
2015/06/13 面试题
博士研究生自我鉴定范文
2013/12/04 职场文书
大学校园毕业自我鉴定
2014/01/15 职场文书
小学生秋游活动方案
2014/02/23 职场文书
金融事务专业毕业生求职信
2014/02/23 职场文书
党员承诺书怎么写
2014/05/20 职场文书
2014办公室年度工作总结
2014/12/09 职场文书
小学生表扬稿范文
2015/05/05 职场文书
小组口号霸气押韵
2015/12/24 职场文书
自定义函数实现单词排序并运用于PostgreSQL(实现代码)
2021/04/22 PostgreSQL
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python
彻底弄懂Python中的回调函数(callback)
2022/06/25 Python