JS函数this的用法实例分析
更新时间：2015年02月05日 14:57:31 作者：magicfly9527
这篇文章主要介绍了JS函数this的用法,实例分析了javascript中this的功能、定义及相关使用技巧,需要的朋友可以参考下
本文实例讲述了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程序设计有所帮助。
相关文章
最近小编在项目中用到了一款带轮播组件，功能非常齐全，可以设置各种标题样式、动画效果、轮播时间、开始暂停等功能，下面小编通过本文给大家详细介绍下实现过程，需要的朋友参考下吧2016-11-11
Promise说起来是一个非常简单的概念，即使你没有机会去使用它，很有可能你也了解过它。Promise是一个非常有价值的构造器，能够帮助你避免使用镶套匿名方法，而使用更具有可读性的方式组装异步代码。这里我们将介绍6个最简单的特性，希望对大家有帮助2014-04-04![javascript中new Array()和var arr=[]用法区别](//img.jbzj.com/images/xgimg/bcimg2.png)
javascript中new Array()和var arr=[]用法区别
给大家分析一下在javascript中数组函数new Array()和var arr=[]用法区别，一起跟着学习一下吧。2017-12-12
这篇文章主要介绍了JS实现点击掉落特效,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-01-01
记录微信小程序中使用wxss加载图片并实现动画的方式，最终实现loading效果。本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2018-08-08
js有效数字 显示指定位数...2007-09-09
这篇文章主要为大家详细介绍了JS中FileReader类实现文件上传及时预览功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
这篇文章主要为大家详细介绍了javascript实现超级炫酷的3D烟花特效，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-01-01
在业务中,由于项目采用微前端架构,需要通过A应用的某个值的变化对B应用中的DOM进行改变（如弹出一个Modal）,第一个想到的可能是发布订阅模式,其实不如将问题缩小化,采用原生的能力去解决,本文介绍了两种方法来使用JS监听一个变量改变,需要的朋友可以参考下2023-11-11
iframe标签是一个内联框架,即用来在当前HTML页面中嵌入另一个文档的,且所有主流浏览器都支持iframe标签,这篇文章主要给大家介绍了关于JS如何对Iframe内外页面进行操作的相关资料,需要的朋友可以参考下2021-10-10
![javascript中new Array()和var arr=[]用法区别](http://img.jbzj.com/images/xgimg/bcimg2.png)
最新评论