JS函数this的用法实例分析


Posted in Javascript onFebruary 05, 2015

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

在js中写函数时,很多用到this. this究竟是什么,this是个关键字,是个指针,指向执行环境作用域,也称之为上下文。
先说下函数吧,个人理解是函数是在语言中重复调用的代码块.
在JS里,把函数赋值给对象的属性时,称之为方法
如:

var m={};
m.title='title';
m.show=function(){
alert(this.title)
}
m.show()

就是把函数作为对象m的方法来调用
这样的话,this指向的就是m这个对象.

直接调函数名的叫函数:

var a=1212;
function show(){
alert(a)//1212
}
show()// 1212

在全局环境里,可以把全局变量理解为window的属性,全局函数为window的方法
看下面的例子:

var m ={};
m.id='mmm';
m.show=function(){
  alert(this.id);
}
var a={};
a.id='aaa';
a.show=m.show;
a.show(); //aaa

a.show=m.show;  先理解这句话,因为函数是个对象,
m.show=function(){
  alert(this.id)
}

这表达式相当于a.show 与m.show同时引用指向

function(){
  alert(this.id)
}

其实相当于

a.show=function(){
  alert(this.id)
}

所以调用a.show()时,this指向的是a对象,
再看以下一个栗子

var m ={};
m.id='mmm'
m.show=function(){
  alert(this.id)
}
var a={}
a.id='aaa'
a.show=function(){
  m.show()
};
a.show(); //mmm

所以调用a.show()时,相当于调用了m.show()的方法,所以this.指向的是m对象。

再看以下一个例子,一开始还是不很懂

var color='red';
var app = {};
app.color="green";
app.paint=function(node){
node.style.color=this.color;
  alert(this.color);
}
function findNode(callback){
  var btn =document.querySelector('.btn');
  callback(btn);//传进来,
}
findNode(app.paint);
alert(this.color); //red 而不是green

函数传参时,是按值传参的,而不是引用

所以findNode(app.paint);传进来时,其实是

function(node){
  node.style.color=this.color;
  alert(this.color);
}

的引用,又因为findNode是全局定义的,所以this指向WINDOW OR UNDEFINED;

关于传参,按值传递过去的

function show(a){
  alert(a)
}

参数为基本数据类型时好理解

var b=10;
show(b)//alert(10);

至于对象

var c ={};
c.prop=true;
var showProp=function(obj){
obj.prop=false
}
showProp(c); //c.prop = false

有些人觉得是上面例子是按引用传参
其实上面还是按值传参,showProp(c)把c传进函数里时,c其实相当于一个引用, 函数里对obj.prop=false,相当于对引用的对象 改成{prop:false}

再看下面一例子

var c ={};
c.prop=true;
var showProp=function(obj){
  obj = new Object();
  obj.prop=false
  return obj;
}
showProp(c);
alert(c.prop); //true

这里明明把传入obj修改了,如果按照函数按引用传参,函数里面的修改肯定会反映到外部

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

Javascript 相关文章推荐
Jquery判断IE6等浏览器的代码
Apr 05 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
Aug 28 Javascript
解析JavaScript中delete操作符不能删除的对象
Dec 03 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
使用CamanJS在Web页面上处理图像的技巧
Aug 18 Javascript
JavaScript中的继承之类继承
May 01 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
Angular实现预加载延迟模块的示例
Oct 12 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
vue中$refs的用法及作用详解
Apr 24 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 #Javascript
js关于命名空间的函数实例
Feb 05 #Javascript
js实现数字每三位加逗号的方法
Feb 05 #Javascript
javascript实现字符串反转的方法
Feb 05 #Javascript
Javascript中拼接大量字符串的方法
Feb 05 #Javascript
jquery操作select方法汇总
Feb 05 #Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 #Javascript
You might like
环境会对咖啡种植有什么影响
2021/03/03 咖啡文化
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
IE FF OPERA都可用的弹出层实现代码
2009/09/29 Javascript
解决jquery异步按一定的时间间隔刷新问题
2012/12/10 Javascript
Javascript中匿名函数的多种调用方式总结
2013/12/06 Javascript
js利用数组length属性清空和截短数组的小例子
2014/01/15 Javascript
Javascript 绘制 sin 曲线过程附图
2014/08/21 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
使用JavaScript判断手机浏览器是横屏还是竖屏问题
2016/08/02 Javascript
Angular.JS实现无限级的联动菜单(使用demo)
2017/02/08 Javascript
js实现网页定位导航功能
2017/03/07 Javascript
js 获取今天以及过去日期
2017/04/11 Javascript
Angular4编程之表单响应功能示例
2017/12/13 Javascript
nodejs简单读写excel内容的方法示例
2018/03/16 NodeJs
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
如何在JavaScript中创建具有多个空格的字符串?
2020/02/23 Javascript
JavaScript鼠标拖拽事件详解
2020/04/03 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
jQuery实现简单全选框
2020/09/13 jQuery
python中int与str互转方法
2018/07/02 Python
python 单线程和异步协程工作方式解析
2019/09/28 Python
基于python检查SSL证书到期情况代码实例
2020/04/04 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
香港迪士尼乐园酒店预订:Hong Kong Disneyland Hotels
2017/05/02 全球购物
IMPORT的选项IGNORE有什么作用?缺省是什么设置?
2015/09/17 面试题
大学毕业生文采飞扬的自我鉴定
2013/12/03 职场文书
应付会计岗位职责
2013/12/12 职场文书
应用数学专业求职信
2014/03/14 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
家长会主持词开场白
2015/05/29 职场文书
经营场所使用证明
2015/06/19 职场文书
Nginx已编译的nginx-添加新模块
2021/04/01 Servers
SpringBoot2零基础到精通之数据库专项精讲
2022/03/22 Java/Android