jQuery.proxy()

admin發表於2017-02-23
jQuery
此方法可以為一個函式指定上下文，也就是指定this的指向。

可以返回一個新的函式，程式碼沒有任何改變，但是上下文已經改變。

關於this的用法可以參閱javascript this用法詳解一章節。

語法結構一:

[JavaScript] 純文字檢視 複製程式碼
jQuery.proxy(function, context)

引數解析:

（1）.function:將要改變上下文語境的函式。

（2）.context:函式的上下文語境(this)會被設定成這個物件（context）。

jQuery1.4版本新增。

語法結構二:

[JavaScript] 純文字檢視 複製程式碼
jQuery.proxy(context, name)

引數解析:

（1）.context:函式的上下文語境(this)會被設定成這個物件（context）。

（2）.name:將要改變上下文語境的函式名(這個函式必須是前一個引數context物件的屬性)。

jQuery1.4版本新增。

語法結構三:

[JavaScript] 純文字檢視 複製程式碼
jQuery.proxy(function, context [, additionalArguments ])

引數解析:

（1）.function:將要改變上下文語境的函式。

（2）.context:函式的上下文語境(this)會被設定成這個物件（context）。

（3）.additionalArguments:可選，用來傳遞給function函式的額外引數。

jQuery1.6版本新增。

語法結構四:

[JavaScript] 純文字檢視 複製程式碼
jQuery.proxy(context, name [, additionalArguments ])

引數解析:

（1）.context:函式的上下文語境(this)會被設定成這個物件（context）。

（2）.name:將要改變上下文語境的函式名(這個函式必須是前一個引數context物件的屬性)。

（3）.additionalArguments:可選，用來傳遞給function函式的額外引數。

jQuery1.6版本新增。

程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
  var obj={
    webName:"螞蟻部落",
    url:"softwhy.com"
  }
  function func(){
    $("#show").text(this.webName);
  }
  var newFunc=$.proxy(func,obj);
  newFunc();
});
</script>
</head>
<body>
<div id="show"></div>
</body>
</html>

將func函式的上下文設定為obj物件，一定要記住改變上下文物件的是返回的新函式。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
  var obj={
    webName:"螞蟻部落",
    url:"softwhy.com",
    func:function(){
      $("#show").text(this.webName);
    }
  }
  var newFunc=$.proxy(obj,"func");
  newFunc();
});
</script>
</head>
<body>
<div id="show"></div>
</body>
</html>

和上一個程式碼例項的功能是一樣的，只是採用的語法格式不同。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script type="text/javascript">
$(function(){
  var obj={
    webName:"螞蟻部落",
    url:"softwhy.com",
    func:function(){
      $("#show").text(this.webName+arguments[0]);
    }
  }
  var newFunc=$.proxy(obj,"func","青島市南區");
  newFunc();
});
</script>
</head>
<body>
<div id="show"></div>
</body>
</html>

為返回的新函式傳遞了額外的引數。