Penjelasan terperinci tentang penggunaan dan perbezaan ini, hubungi dan gunakan dalam JavaScript

Dalam pembelajaran JavaScript saya sebelum ini, ini, panggilan dan gunakan sentiasa mengelirukan saya, tetapi ia digunakan secara meluas. Jadi saya menghabiskan masa seharian untuk memahami JavaScript ini, hubungi dan gunakan.

Terdapat juga banyak buku yang saya rujuk sepanjang perjalanan, terutamanya "Corak Reka Bentuk JavaScript dan Amalan Pembangunan", ditambah dengan "Pengaturcaraan Lanjutan JavaScript" dan "JavaScript yang Anda Tidak Tahu". Ketiga-tiga buku ini telah banyak membantu saya dalam memahami perkara ini, memanggil, dan memohon.

Mula-mula, mari kita bincangkan perkara ini.

Dalam huraian ini dalam "Corak Reka Bentuk JavaScript dan Amalan Pembangunan", saya rasa ada ayat yang menyentuh intipati perkara ini. Iaitu:

Ini dalam JavaScript sentiasa menunjuk ke objek
Dalam aplikasi praktikal, penunjuk ini boleh dibahagikan kepada empat jenis berikut:

1. Sebagaimana Kaedah objek memanggil

2. sebagai fungsi biasa memanggil

3. Panggilan Pembina

4. memohon dan memanggil Memanggil

1. Memanggil kaedah sebagai objek

Penjelasan: Apabila memanggil kaedah sebagai objek, ini menunjuk kepada objek. Contoh:

2 Dipanggil sebagai fungsi biasa

/**
 * 1.作为对象的方法调用
 *
 * 作为对象方法调用时，this指向该对象。
 */

var obj = {
 a: 1,
 getA: function() {
  console.log(this === obj);
  console.log(this.a);
 }
};

obj.getA(); // true , 1

Nota: Apabila dipanggil sebagai fungsi biasa, ini sentiasa. menunjuk ke objek Global (tetingkap dalam pelayar). Contoh:

3 Panggilan Pembina

/**
 * 2.作为普通函数调用
 *
 * 不作为对象属性调用时,this必须指向一个对象。那就是全局对象。
 */

window.name = 'globalName';

var getName = function() {
 console.log(this.name);
};

getName(); // 'globalName'

var myObject = {
 name: "ObjectName",
 getName: function() {
  console.log(this.name)
 }
};

myObject.getName(); // 'ObjectName'

// 这里实质上是把function() {console.log(this.name)}
// 这句话赋值给了theName。thisName在全局对象中调用，自然读取的是全局对象的name值
var theName = myObject.getName;

theName(); // 'globalName'

Penjelasan: Apabila dipanggil sebagai pembina, ini menunjukkan kepada yang dikembalikan. objek. Contoh:

Tetapi jika mengembalikan objek lain dinyatakan secara manual dalam pembina, maka ini tidak akan berfungsi.

Jika jenis data yang dikembalikan adalah jenis data lain, tiada masalah.

/**
 * 3.作为构造器调用
 * 
 * 作为构造器调用时，this指向返回的这个对象。
 */

var myClass = function() {
 this.name = "Lxxyx";
};

var obj = new myClass();

console.log(obj.name); // Lxxyx
console.log(obj) // myClass {name: "Lxxyx"}

4. Hubungi dan Mohon

var myClass = function() {
 this.name = "Lxxyx";
 // 加入return时，则返回的是别的对象。this不起作用。
 return {
  name:"ReturnOthers"
 }
};

var obj = new myClass();
console.log(obj.name); // ReturnOthers

Panggil dan Mohon mempunyai tujuan yang sama. Kesemuanya digunakan untuk menentukan penunjuk ini dalam badan fungsi.

Perbezaan antara Panggilan dan Mohon

Panggilan: Parameter pertama ialah penunjuk kepada ini, dan parameter yang akan dihantar ke fungsi mesti dimasukkan satu demi satu . Gunakan: Parameter pertama ialah penunjuk kepada ini, parameter kedua ialah tatasusunan dan semua parameter dihantar serentak.

Jika parameter pertama adalah batal, ini menunjukkan kepada panggilan itu sendiri.

1. Tukar ini untuk menunjuk kepada

Penjelasan: Ini adalah penggunaan panggilan dan permohonan yang paling biasa. Digunakan untuk menukar penunjuk ini dalam badan fungsi.

Contoh:

2 Pinjam kaedah daripada objek lain

var name = "GlobalName"

var func = function() {
 console.log(this.name)
};

func(); // "GlobalName"

var obj = {
 name: "Lxxyx",
 getName: function() {
  console.log(this.name)
 }
};

obj.getName.apply(window) // "GlobalName" 将this指向window
func.apply(obj) // "Lxxyx" 将this指向obj

Di sini, kita mulakan dengan fungsi tanpa nama yang dilaksanakan serta-merta:

Fungsi mempunyai atribut argumen dan argumen ialah tatasusunan seperti tatasusunan.

Tetapi hujah tidak boleh memanggil kaedah tatasusunan secara terus, jadi kami perlu menggunakan panggilan atau memohon untuk memanggil kaedah prototaip objek Tatasusunan.

(function(a, b) {
 console.log(arguments) // 1,2
 // 调用Array的原型方法
 Array.prototype.push.call(arguments, 3);
 console.log(arguments) // 1,2,3
})(1,2)

Prinsipnya juga mudah difahami Sebagai contoh, apa yang anda panggil ialah kaedah tolak, dan kaedah tolak adalah dalam enjin v8 Google 🎜>

Ia hanya berkaitan dengan ini, jadi selagi ia adalah objek seperti tatasusunan, anda boleh memanggil kaedah berkaitan untuk memprosesnya.

Bahagian kandungan ini agak rumit, dan saya juga tidak begitu mahir. Oleh itu, saya mengesyorkan pelajar yang berkelayakan untuk membeli buku yang berkaitan, atau menunggu artikel blog susulan saya.

Tera

function ArrayPush() {
 var n = TO_UINT32(this.length); // 被push对象的长度
 var m = % _ArgumentsLength(); // push的参数个数
 for (var i = 0; i < m; i++) {
  this[i + n] = % _Arguments(i); // 复制元素
 }
 this.length = n + m; //修正length属性
 return this.length;
}

Dengan mempelajari bahagian ini, saya telah mendalami pemahaman saya tentang JavaScript. Manifestasi yang paling intuitif ialah apabila melihat kod sumber beberapa rangka kerja yang sangat baik, anda tidak lagi keliru dengan ini, memanggil, memohon dan mengikat. Masih sangat gembira~

Dalam tempoh masa yang akan datang, saya akan meneroka secara mendalam CSS yang saya pelajari dan gunakan setiap hari. Lagipun, selepas belajar JavaScript, HTML dan CSS tidak boleh ketinggalan.

【Tutorial berkaitan yang disyorkan】1

Tutorial video JavaScript

2

Manual dalam talian JavaScript

3 tutorial bootstrap