这篇文章主要介绍了 JS 函数 this 的用法, 实例分析了 javascript 中 this 的功能、定义及相关使用技巧, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
本文实例讲述了 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 程序设计有所帮助。
来源: