بناء جملة JavaScript مرن ، وليس من غير المألوف أن يكون لديك خمس أو ستة طرق تنفيذ لنفس الوظيفة. غالبًا ما لا أفهم الفرق بين المكالمة والتقدم ، لذلك سأقوم بتسجيله اليوم لتجنب نسيانه مرة أخرى.
في JavaScript ، يمكن تنفيذ الأساليب بالطرق التالية:
1.func () هي الطريقة الأكثر مباشرة وشائعة للاتصال ، كما أنها تتوافق مع منطق التفكير للأشخاص العاديين ، ولكن في بعض الحالات هناك بعض أوجه القصور ، والتي سيتم شرحها أدناه.
2. (الدالة (arg) {}) (نافذة) ، فإن استدعاء طريقة مجهول ، أكثر فائدة عند إنشاء مساحة اسم.
3. Func.bind (STH) ().
4.func.call () ، هذه هي الطريقة الثانية للاتصال.
5.func.apply () ، شقيق الاتصال التوأم.
func ()
هذه هي الطريقة الأكثر شيوعًا للاتصال ويمكن رؤيتها في كل مكان بأي لغة. يمكن أن تمر FUNC (x ، y) في معلمات مختلفة. في بعض اللغات ، مثل PHP ، Java ، هذا النوع من الدعوة يكفي لحل جميع المشكلات. لكن JavaScript هي لغة وظيفية ، ومفهوم الإغلاق وكلمة رئيسية غريبة يحدد أوجه القصور في طريقة الاتصال هذه. يجب أن يتم تفسير ذلك على أنه نطاق شريحة الكود الحالية ، والتي ستتغير مع تنفيذ الكود إلى شظايا مختلفة.
نسخة الكود كما يلي:
var a = {} ؛
var func = function (x) {
console.log (هذا) ؛
} ؛
a.onclick = function () {
var x = 100 ؛
func (x) ؛
} ؛
A.Onclick () ؛
يمكنك التفكير في رابط في الصفحة. هذا لديه مشكلة. في هذا الوقت ، لا يمكن استخدام FUNC () كطريقة استدعاء مباشرة ، لذلك نحن بحاجة إلى ربط هذا خارج FUNC بأسلوب FUNC. لذلك هناك طريقة ، ومكالمة ، تطبيق.
ربط
الغرض من الربط بسيط للغاية ، حيث يعيد نفس الطريقة التي تربط هذا الكائن. يمكن أن يحقق الكود أعلاه الغرض من ربط هذا على كائن A عن طريق تعديل سطر واحد.
نسخة الكود كما يلي:
var a = {} ؛
var func = function (x) {
console.log (هذا) ؛
} ؛
a.onclick = function () {
var x = 100 ؛
func.bind (هذا) (x) ؛
} ؛
A.Onclick () ؛
وبهذه الطريقة ، لن يركض حدث Onclick مثل ذبابة مقطوعة الرأس.
اتصل وتطبيق
يجب التحدث عن الاتصال والتقديم معا لأنها متشابهة للغاية. كلها تدعم معلمات متعددة ، والمعلمة الأولى هي هذا الكائن الذي سيتم ربطه ، والمعلمة الثانية هي الفرق. في بعض الأحيان ، لا نريد تغيير هذا الكائن ، لكننا نريد ربطه بشكل مصطنع بكائنات أخرى. (لا يمكنك استخدام Bind ، ولكن يبدو أن BIND يبدو متأخراً ، وبالتالي فإن توافق المتصفح قد يكون ضعيفًا). خذ كستناء:
نسخة الكود كما يلي:
أ = {
Func: Function () {
this.x += 1 ؛
} ،
X: 0
} ؛
ب = {
ج: أ ،
X: 20
} ؛
لـ (var i = 0 ؛ i <10 ؛ i ++) {
bafunc () ؛
}
console.log (ax) ؛
console.log (bx) ؛
هناك X في الكائنات A و B أعلاه. تعديل الكود لتحقيق الغرض من تعديل BX
نسخة الكود كما يلي:
أ = {
Func: Function () {
this.x += 1 ؛
} ،
X: 0
} ؛
ب = {
ج: أ ،
X: 20
} ؛
لـ (var i = 0 ؛ i <10 ؛ i ++) {
Bafunc.call (ب)
}
console.log (ax) ؛
console.log (bx) ؛
هذا الكستناء ليس مستقبلاً جيدًا ، وهو نمط رمز مربك للغاية ، مع سيناريوهات قابلة للتطبيق ، ولكنها غير متوفرة في كل مكان.