أخذ أمثلة ، وشرح الأساليب ، والتطبيق ، وربط الأساليب في JavaScript للرجوع إليها. المحتوى المحدد كما يلي
<! doctype html> <html> <head> <meta charset = "utf-8"> </title> </title> <script type = "text/javaScript"> function man (الاسم ، الجنس ، العمر) {this.name = name ؛ this.Sex = الجنس ؛ this.age = العمر ؛ هذا. San "،" male "، 26) ؛ var woman = new woman (" xiaohong "،" female "، 18) ؛ Man.Say ('Tsinghua University' ، 'Excavator') ؛ Man.Say.Call (امرأة ، النادي "،" موسيقى البوب ") ؛ </script> </head> <body> </body> </html>لماذا؟ ماذا تفعل ، تطبيق ، ربط تفعل؟ لماذا تعلم هذا؟
يتم استخدامه بشكل عام لتحديد هذه البيئة ، وعادة ما تحدث هذه المشاكل قبل التعلم.
var a = {user: "Dream Chasing" ، fn: function () {console.log (this.user) ؛ }} var b = a.fn ؛ b () ؛ // غير محددما الخطأ في المستخدم في الكائن A ولكن غير محدد؟ لا بأس إذا قمنا بتنفيذ A.FN () مباشرة.
var a = {user: "Chasing Dreams" ، fn: function () {console.log (this.user) ؛ }} a.fn () ؛ // مطاردة الأحلامالسبب في أن هذا يمكن طباعته هنا هو أن هذا هنا يشير إلى الوظيفة A ، فلماذا لا يشير أعلاه إلى؟ إذا احتجنا إلى فهم مشكلة الإشارة هذه ، فيرجى الاطلاع على الفهم الشامل لهذا الإشارة في JS ، وليس هناك حاجة لحفظ هذه المقالة.
على الرغم من أن هذه الطريقة يمكن أن تحقق هدفنا ، في بعض الأحيان يتعين علينا حفظ هذا الكائن لمتغير آخر ، حتى نتمكن من استخدام الطريقة التالية.
1. الاتصال ()
var a = {user: "catching dreams" ، fn: function () {console.log (this.user) ؛ // catching dreams}} var b = a.fn ؛ b.call (a) ؛عن طريق إضافة المعلمة الأولى التي تتمثل في إضافة B إلى B ، ببساطة ضع هذه النقطة على هذا الكائن.
بالإضافة إلى المعلمة الأولى ، يمكن أن تضيف طريقة الاتصال أيضًا معلمات متعددة ، على النحو التالي:
var a = {user: "catching dreams" ، fn: function (e ، ee) {console.log (this.user) ؛ // Catching Dreams Console.log (E+EE) ؛ // 3}} var b = a.fn ؛ b.call (a ، 1،2) ؛2. تطبيق ()
تشبه طريقة التطبيق إلى حد ما طريقة الاتصال ، ويمكنها أيضًا تغيير الإشارة إلى هذا
var a = {user: "catching dreams" ، fn: function () {console.log (this.user) ؛ // catching dreams}} var b = a.fn ؛ b.apply (a) ؛وبالمثل ، يمكن أن يكون للتطبيق أيضًا معلمات متعددة ، ولكن الفرق هو أن المعلمة الثانية يجب أن تكون صفيفًا ، على النحو التالي:
var a = {user: "catching dreams" ، fn: function (e ، ee) {console.log (this.user) ؛ // Catching Dreams Console.log (E+EE) ؛ // 11}} var b = a.fn ؛ b.apply (a ، [10،1]) ؛أو
var a = {user: "catching dreams" ، fn: function (e ، ee) {console.log (this.user) ؛ // Catching Dreams Console.log (E+EE) ؛ // 520}} var b = a.fn ؛ var arr = [500،20] ؛ var a = {user: "Dream Chasing" ، fn: function () {console.log (this) ؛ // window {خارج: الكائن ، الكروم: كائن ، وثيقة: المستند ، أ: كائن ، الكلام senthesis: pleasesynthesis ...}}} var b = a.fn ؛ b.apply (null) ؛3. bind ()
تختلف طريقة الربط إلى حد ما عن الأساليب وتطبيقها ، ولكن يمكن استخدامها لتغيير اتجاه هذا.
دعنا نتحدث عن خلافاتهم أولاً.
var a = {user: "Dream Chasing" ، fn: function () {console.log (this.user) ؛ }} var b = a.fn ؛ b.bind (a) ؛وجدنا أن الرمز لم يتم طباعته. نعم ، هذا هو الفرق بين الارتباط والاتصال وتطبيق الأساليب. في الواقع ، تُرجع طريقة ربط وظيفة تعديل.
var a = {user: "Dream Chasing" ، fn: function () {console.log (this.user) ؛ }} var b = a.fn ؛ var c = b.bind (a) ؛ console.log (c) ؛ // function () {[الكود الأصلي]}لذلك دعونا ننفذ الوظيفة C لمعرفة ما إذا كان بإمكاننا طباعة المستخدم في الكائن أ
var a = {user: "catching dreams" ، fn: function () {console.log (this.user) ؛ // catching dreams}} var b = a.fn ؛ var c = b.bind (a) ؛ c () ؛حسنًا ، يمكن أن يكون لـ BIND أيضًا معلمات متعددة ، ويمكن إضافة المعلمات مرة أخرى عند التنفيذ ، ولكن تجدر الإشارة إلى أن المعلمات يتم تنفيذها بترتيب المعلمات الرسمية.
var a = {user: "catching dreams" ، fn: function (e ، d ، f) {console.log (this.user) ؛ // Catching Dreams Console.log (E ، D ، F) ؛ // 10 1 2}} var b = a.fn ؛ var c = b.bind (a ، 10) ؛ c (1،2) ؛ملخص: اتصل وتطبيق كل من تغيير هذا في السياق وتنفيذ هذه الوظيفة على الفور. تتيح طريقة الربط استدعاء الوظيفة المقابلة كلما أرادت ، وإضافة معلمات عند تنفيذها. هذا هو الفرق واختيار استخدامه وفقًا لموقفك الفعلي.
ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.