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 相关文章推荐
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
基于Unit PNG Fix.js有时候在ie6下不正常的解决办法
Jun 26 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
Jquery修改页面标题title其它JS失效的解决方法
Oct 31 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
JS扩展类,克隆对象与混合类实例分析
Nov 26 Javascript
微信小程序中页面FOR循环和嵌套循环
Jun 21 Javascript
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 jQuery
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
js实现有趣的倒计时效果
Jan 19 Javascript
vue封装数字翻牌器
Apr 20 Vue.js
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 和 MySQL 基础教程(一)
2006/10/09 PHP
PHP+.htaccess实现全站静态HTML文件GZIP压缩传输(一)
2007/02/15 PHP
DOM XPATH获取img src值的query
2013/09/23 PHP
PHP 下载文件时自动添加bom头的方法实例
2014/01/10 PHP
PHP实现通过get方式识别用户发送邮件的方法
2015/07/16 PHP
golang、python、php、c++、c、java、Nodejs性能对比
2017/03/12 NodeJs
用javascript获取textarea中的光标位置
2008/05/06 Javascript
js null undefined 空区别说明
2010/06/13 Javascript
妙用Jquery的val()方法
2012/06/27 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
2014/03/27 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
JavaScript中原型和原型链详解
2015/02/11 Javascript
jQuery oLoader实现的加载图片和页面效果
2015/03/14 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
JS函数内部属性之arguments和this实例解析
2018/10/07 Javascript
vue实现多级菜单效果
2019/10/19 Javascript
vue项目中极验验证的使用代码示例
2019/12/03 Javascript
VUE中使用HTTP库Axios方法详解
2020/02/05 Javascript
[01:03:51]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第三场
2018/04/09 DOTA
Python中使用PIPE操作Linux管道
2015/02/04 Python
Python实现将doc转化pdf格式文档的方法
2018/01/19 Python
python requests post多层字典的方法
2018/12/27 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
Pytorch使用MNIST数据集实现CGAN和生成指定的数字方式
2020/01/10 Python
python如何对链表操作
2020/10/10 Python
大整数数相乘的问题
2012/07/22 面试题
个人四风问题对照检查材料
2014/10/01 职场文书
公司捐书倡议书
2015/04/27 职场文书
2015年乡镇流动人口工作总结
2015/05/12 职场文书
go语言使用Casbin实现角色的权限控制
2021/06/26 Golang
浅谈PostgreSQL表分区的三种方式
2021/06/29 PostgreSQL