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 相关文章推荐
如何用javascript去掉字符串里的所有空格
Feb 08 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
document.addEventListener使用介绍
Mar 07 Javascript
后台获取ZTREE选中节点的方法
Feb 12 Javascript
深入分析jsonp协议原理
Sep 26 Javascript
AngularJS ng-style中使用filter
Sep 21 Javascript
Bootstrap栅格系统简单实现代码
Mar 06 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
Jun 20 Javascript
webpack多页面开发实践
Dec 18 Javascript
javaScript 连接打印机,打印小票的实例
Dec 29 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
当海贼王变成JOJO风
2020/03/02 日漫
攻克CakePHP系列一 连接MySQL数据库
2008/10/22 PHP
Wordpress php 分页代码
2009/10/21 PHP
php实现图片按比例截取的方法
2017/02/06 PHP
php实现文件与16进制相互转换的方法示例
2017/02/16 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
js判断浏览器类型的方法
2013/08/07 Javascript
JS网页播放声音实现代码兼容各种浏览器
2013/09/22 Javascript
node.js中的fs.fstatSync方法使用说明
2014/12/15 Javascript
JS+CSS实现可以凹陷显示选中单元格的方法
2015/03/02 Javascript
JavaScript实现的链表数据结构实例
2015/04/02 Javascript
jquery实现滑屏大图定时收缩为小banner图片的广告代码
2015/09/02 Javascript
Javascript中prototype的使用详解
2016/06/18 Javascript
浅谈Web页面向后台提交数据的方式和选择
2016/09/23 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
使用JavaScript开发跨平台的桌面应用详解
2017/07/27 Javascript
基于构造函数的五种继承方法小结
2017/07/27 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
JavaScript实现省市联动过程中bug的解决方法
2017/12/04 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
2018/08/25 Javascript
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
使用Python搭建虚拟环境的配置方法
2018/02/28 Python
Python 多维List创建的问题小结
2019/01/18 Python
Python中format()格式输出全解
2019/04/12 Python
用sqlalchemy构建Django连接池的实例
2019/08/29 Python
python 回溯法模板详解
2020/02/26 Python
python实现文件+参数发送request的实例代码
2021/01/05 Python
百联网上商城:i百联
2017/01/28 全球购物
贝嫂喜欢的婴儿品牌,个性化的婴儿礼物:My 1st Years
2017/11/19 全球购物
作为网站管理者应当如何防范XSS
2014/08/16 面试题
银行优秀员工事迹
2014/02/06 职场文书
高三语文复习计划
2015/01/19 职场文书
婚宴祝酒词大全
2015/08/10 职场文书
优秀党员先进事迹材料2016
2016/02/29 职场文书