DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JS函數this的用法實例教程分析
JS函數this的用法實例教程分析
編輯:關於JavaScript     

本文實例講述了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程序設計有所幫助。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved