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之九 一些瑕疵说明
Jun 21 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
JS父页面与子页面相互传值方法
Mar 05 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
Apr 30 Javascript
AngularJS表格详解及示例代码
Aug 17 Javascript
Sortable.js拖拽排序使用方法解析
Nov 04 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
vue增删改查的简单操作
Jul 15 Javascript
Vue.js更改调试地址端口号的实例
Sep 19 Javascript
原生JS 实现的input输入时表格过滤操作示例
Aug 03 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 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
php minixml详解
2008/07/19 PHP
php写的简易聊天室代码
2011/06/04 PHP
php中分页及SqlHelper类用法实例
2017/01/12 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
PHP SESSION跨页面传递失败解决方案
2020/12/11 PHP
JavaScript中json对象和string对象之间相互转化
2012/12/26 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
js如何获取object类型里的键值
2014/02/18 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
js自定义弹框插件的封装
2020/08/24 Javascript
vue引用js文件的多种方式(推荐)
2018/05/17 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
element-ui 关于获取select 的label值方法
2018/08/24 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
2019/02/28 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
2020/03/03 Javascript
[56:01]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 Effect vs EG
2018/03/31 DOTA
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
python爬虫数据保存到mongoDB的实例方法
2020/07/28 Python
简述网络文件系统NFS,并说明其作用
2016/10/19 面试题
电子商务专业学生的自我鉴定
2013/11/28 职场文书
公司门卫的岗位职责
2014/02/19 职场文书
请假条格式范文
2014/04/10 职场文书
医药销售自荐书
2014/05/29 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
新学期小学班主任工作计划
2019/06/21 职场文书
研究生毕业登记表的自我鉴定范文
2019/07/15 职场文书
创业计划书之餐饮馄饨店
2019/07/18 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
详解Python自动化之文件自动化处理
2021/06/21 Python
Python自动化测试PO模型封装过程详解
2021/06/22 Python