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 相关文章推荐
js左侧多级菜单动态的解决方案
Feb 01 Javascript
js的压缩及jquery压缩探讨(提高页面加载性能/保护劳动成果)
Jan 29 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
仿谷歌主页js动画效果实现代码
Jul 14 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
探索Vue.js component内容实现
Nov 03 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
bootstrap daterangepicker汉化以及扩展功能
Jun 15 Javascript
微信小程序url与token设置详解
Sep 26 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
bootstrap treeview 树形菜单带复选框及级联选择功能
Jun 08 Javascript
详解如何在Vue项目中发送jsonp请求
Oct 25 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
实用函数5
2007/11/08 PHP
通过具体程序来理解PHP里面的抽象类
2010/01/28 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
PHP合并两个或多个数组的方法
2019/01/20 PHP
vmware linux系统安装最新的php7图解
2019/04/14 PHP
thinkphp框架使用JWTtoken的方法详解
2019/10/10 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
javascript 原型链维护和继承详解
2014/11/26 Javascript
jQuery 遍历函数详解
2015/07/05 Javascript
Javascript缓存API
2016/06/14 Javascript
函数四种调用模式以及其中的this指向
2017/01/16 Javascript
轻松理解Javascript变量的相关问题
2017/01/20 Javascript
AngularJS实现表单元素值绑定操作示例
2017/10/11 Javascript
Vue中mintui的field实现blur和focus事件的方法
2018/08/25 Javascript
layui 地区三级联动 form select 渲染的实例
2019/09/27 Javascript
vue实现文字加密功能
2019/09/27 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
JavaScript 变量,数据类型基础实例详解【变量、字符串、数组、对象等】
2020/01/04 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
使用python遍历指定城市的一周气温
2017/03/31 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
python高阶爬虫实战分析
2018/07/29 Python
Python实现将数据写入netCDF4中的方法示例
2018/08/30 Python
python3 读取Excel表格中的数据
2018/10/16 Python
python实现ip代理池功能示例
2019/07/05 Python
python实现控制台输出彩色字体
2020/04/05 Python
python3中TQDM库安装及使用详解
2020/11/18 Python
美国潜水装备、水肺潜水和浮潜设备商店:Leisure Pro
2018/08/08 全球购物
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
2016年清明节寄语
2015/12/04 职场文书
2019客服个人年终工作总结范文
2019/07/08 职场文书
导游词之天津盘山
2019/11/01 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
python 定义函数 返回值只取其中一个的实现
2021/05/21 Python
python井字棋游戏实现人机对战
2022/04/28 Python
Android中View.post和Handler.post的关系
2022/06/05 Java/Android