Rumah >hujung hadapan web >tutorial js >Kesukaran teknikal Javascript: sambungan antara kemahiran apply, call dan this_javascript

Kesukaran teknikal Javascript: sambungan antara kemahiran apply, call dan this_javascript

WBOY
WBOYasal
2016-05-16 15:27:451031semak imbas

1.guna definisi

gunakan: Panggil fungsi, gantikan nilai fungsi ini dengan objek yang ditentukan, dan gantikan parameter fungsi dengan tatasusunan yang ditentukan.

Sintaks: apply([thisObj[,argArray]])

Obj ini

Pilihan. Objek untuk digunakan sebagai objek ini.

argArray

Pilihan. Satu set hujah untuk dihantar ke fungsi.

2.takrif panggilan

panggilan: Panggil kaedah objek dan gantikan objek semasa dengan objek lain.

Sintaks: panggil([thisObj[, arg1[, arg2[, [, argN]]]]])

Obj ini

Pilihan. Objek yang akan digunakan sebagai objek semasa.

arg1, arg2, , argN

Pilihan. Senarai parameter yang akan dihantar ke kaedah.

3. Perbezaan antara keduanya

Parameter panggilan kedua boleh daripada sebarang jenis, manakala parameter kedua permohonan mestilah tatasusunan atau argumen.

Takrifan juga berbeza.

4. Contoh analisis

(1)Contoh rasmi:

function callMe(arg1, arg2){
  var s = "";
  s += "this value: " + this;
  s += "<br />";
  for (i in callMe.arguments) {
    s += "arguments: " + callMe.arguments[i];
    s += "<br />";
  }
  return s;
}
document.write("Original function: <br/>");
document.write(callMe(1, 2));
document.write("<br/>");
document.write("Function called with apply: <br/>");
document.write(callMe.apply(3, [ 4, 5 ]));
document.write(callMe.call(3, 4, 5 ));
// Output: // Original function: // this value: [object Window] // arguments: 1 // arguments: 2 // Function called with apply: // this value: 3 // arguments: 4 // arguments: 5 

Penggunaan pertama berlaku: Definisi: Panggil fungsi dan gantikan nilai fungsi ini dengan objek yang ditentukan Panggil fungsi callMe, dan gunakan objek yang ditentukan 3 untuk menggantikan ini dalam fungsi callMe. ini di sini diubah daripada [Tetingkap objek] sebelumnya menjadi 3. Yang pertama menggunakan panggilan: Definisi: Panggil kaedah objek dan gantikan objek semasa dengan objek lain. Panggil kaedah objek callMe dan gantikan objek dalam callMe dengan objek lain 3. Daripada analisis keputusan ini, dapat dilihat bahawa kedua-duanya menggunakan objek dalam objek yang ditentukan atau nilai yang ditentukan untuk menukar ini dalam objek. Ia juga boleh dikatakan bahawa objek (ini) dalam fungsi "hijack" objek (ini) dalam fungsi lain untuk dilaksanakan. Malah, ini menimbulkan persoalan: Apakah sebenarnya ini? Mengapa begitu penting untuk melalui begitu banyak masalah untuk mengubah hala tujunya lagi dan lagi? Portal: Kesukaran Teknikal JavaScript (Bahagian 3) - Penjelasan terperinci tentang ini, baru, guna dan panggil (kandungan di sini bagus, pasti cukup untuk anda minum seperiuk) (2) Contoh:

function zqz(a,b){
  return alert(a+b);
}
function zqz_1(a,b){
  zqz.apply(zqz_1,[a,b])
}
zqz_1(1,2)  //->3 

Analisis: Mengikut definisi: panggil fungsi dan gantikan nilai fungsi ini dengan objek yang ditentukan,

Di sini fungsi zqz dipanggil dan nilai fungsi zqz ini digantikan dengan objek yang ditentukan zqz_1.

Sila ambil perhatian bahawa nama fungsi dalam js sebenarnya adalah objek, kerana nama fungsi adalah rujukan kepada objek Fungsi!

function add(a, b)
{
 alert(a + b);
}
function sub(a, b)
{
 alert(a - b);
}
add.call(sub, 3, 1); // 4 

Analisis: Mengikut definisi: Panggil kaedah objek dan gantikan objek semasa dengan objek lain.

Berikut ialah kaedah untuk memanggil objek tambah dan menggantikan sub objek semasa dengan objek tambah;

Contoh lain:

function zqz(a,b){
  this.name=a;
  this.age=b;
  alert(this.name+" "+this.age);
}
function zqz_1(a,b){
  zqz.apply(this,[a,b])   //我们亦可以这么写  zqz.apply(this,arguments) 
}
zqz_1("Nic",12)  //Nic 12 

Analisis: Mengikut definisi: panggil fungsi dan gantikan nilai fungsi ini dengan objek yang ditentukan,

Fungsi zqz dipanggil di sini, dan fungsi ini zqz digantikan dengan objek yang ditentukan ini.

Contoh lain:

<input type="text" id="myText"  value="input text">
function Obj(){
  this.value="对象!";
}
var value="global 变量";
function Fun1(){
  alert(this.value);
}
Fun1();  //global 变量
Fun1.call(window); //global 变量
Fun1.call(document.getElementById('myText')); //input text
Fun1.call(new Obj());  //对象!
Fun1(); //global 变量 

分析:定义:调用一个对象的方法,用另一个对象替换当前对象。

调用Fun1对象的方法,用window对象替换当前Fun1中的对象。

调用Fun1对象的方法,用input中对象替换当前Fun1中的对象。

调用Fun1对象的方法,用新new出来的obj中的对象替换当前Fun1中的对象。

最后再总结一下:

如果在javascript语言里没有通过new(包括对象字面量定义)、call和apply改变函数的this指针,函数的this指针都是指向window的。

ps:apply的其他巧妙用法:

大家会不会觉得既然apply和call的用法差不多,那么为什么还同时存在这两种方法呢?完全可以丢掉一个呀。后来才发现一篇文章中讲到apply因为它所传参数为数组这一特点还有许多其他的妙用。

a) Math.max 可以实现得到数组中最大的一项:

因为Math.max 参数里面不支持Math.max([param1,param2]) 也就是数组,但是它支持Math.max(param1,param2,param3…),所以可以根据apply的特点来解决 var max=Math.max.apply(null,array),这样轻易的可以得到一个数组中最大的一项。(apply会将一个数组转换为一个参数接一个参数的传递给方法)

这块在调用的时候第一个参数给了一个null,这个是因为没有对象去调用这个方法,只需要用这个方法帮助运算,得到返回的结果就行,所以直接传递了一个null过去。

b) Math.min  可以实现得到数组中最小的一项:

同样和 max是一个思想 var min=Math.min.apply(null,array)。

c) Array.prototype.push 可以实现两个数组合并:

同样push方法没有提供push一个数组,但是它提供了push(param1,param,…paramN) 所以同样也可以通过apply来转换一下这个数组,即:

var arr1=new Array("1","2","3");
var arr2=new Array("4","5","6");
Array.prototype.push.apply(arr1,arr2); 

也可以这样理解,arr1调用了push方法,参数是通过apply将数组装换为参数列表的集合。

d) 小结:通常在什么情况下,可以使用apply类似Math.min等之类的特殊用法:

一般在目标函数只需要n个参数列表,而不接收一个数组的形式([param1[,param2[,…[,paramN]]]]),可以通过apply的方式巧妙地解决这个问题。

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn