JS函数this的用法实例分析

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

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

rush:js;"> var m={}; m.title='title'; m.show=function(){ alert(this.title) } m.show()

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

直接调函数名的叫函数

rush:js;"> var a=1212; function show(){ alert(a)//1212 } show()// 1212

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

rush:js;"> 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同时引用指向

rush:js;"> function(){ alert(this.id) }

其实相当于

rush:js;"> a.show=function(){ alert(this.id) }

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

rush:js;"> 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对象。

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

rush:js;"> 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);传进来时,其实是

rush:js;"> function(node){ node.style.color=this.color; alert(this.color); }

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

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

rush:js;"> function show(a){ alert(a) }

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

rush:js;"> var b=10; show(b)//alert(10);

至于对象

rush:js;"> 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}

再看下面一例子

rush:js;"> 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程序设计有所帮助。

相关文章

前言 做过web项目开发的人对layer弹层组件肯定不陌生,作为l...
前言 前端表单校验是过滤无效数据、假数据、有毒数据的第一步...
前言 图片上传是web项目常见的需求,我基于之前的博客的代码...
前言 导出Excel文件这个功能,通常都是在后端实现返回前端一...
前言 众所周知,js是单线程的,从上往下,从左往右依次执行,...
前言 项目开发中,我们可能会碰到这样的需求:select标签,禁...