1. وراثة الكائن في JS
هناك ثلاث طرق للوراثة في Js
1.js النموذج الأولي (النموذج الأولي) ينفذ الميراث
انسخ رمز الكود كما يلي:
<نمط SPAN = "BACKGROUND-COLOR: #ffffff"><نمط SPAN = "FONT-SIZE: 18px"><html>
<الجسم>
<نوع البرنامج النصي = "نص/جافا سكريبت">
وظيفة الشخص (الاسم والعمر) {
this.name=name;
this.age=age;
}
Person.prototype.sayHello=function(){
تنبيه ("استخدم النموذج الأولي للحصول على الاسم:"+this.name);
}
var per=new Person("Ma Xiaoqian",21);
per.sayHello(); // الإخراج: استخدم النموذج الأولي للحصول على الاسم: Ma Xiaoqian
وظيفة الطالب (){}
Student.prototype=new Person("Hong Rutong",21);
var stu=new Student();
Student.prototype.grade=5;
Student.prototype.intr=function(){
تنبيه(this.grade);
}
stu.sayHello();// الإخراج: استخدم النموذج الأولي للحصول على الاسم: Hong Rutong
stu.intr();//الإخراج: 5
</script>
</الجسم>
</html></SPAN></SPAN>
2. المنشئ ينفذ الميراث
انسخ رمز الكود كما يلي:
<نمط SPAN = "FONT-SIZE: 18px"><html>
<الجسم>
<نوع البرنامج النصي = "نص/جافا سكريبت">
وظيفة الأصل (الاسم) {
this.name=name;
this.sayParent=function(){
تنبيه("الوالد:"+this.name);
}
}
وظيفة الطفل (الاسم والعمر) {
this.tempMethod=Parent;
this.tempMethod(name);
this.age=age;
this.sayChild=function(){
تنبيه ("الطفل:"+this.name+"age:"+this.age);
}
}
varparent=new Parent("Jiang Jianchen");
Parent.sayParent(); // الإخراج: "الوالد: جيانغ جيانتشن"
var Child=new Child("李明",24); //الإخراج: "الطفل: العمر: 24";
Child.sayChild();
</script>
</الجسم>
</html></SPAN>
3.الاتصال، تطبيق لتنفيذ الميراث
انسخ رمز الكود كما يلي:
<نمط SPAN = "FONT-SIZE: 18px"><html>
<الجسم>
<نوع البرنامج النصي = "نص/جافا سكريبت">
وظيفة الشخص (الاسم والعمر والحب) {
this.name=name;
this.age=age;
this.love=love;
this.say=وظيفة قل(){
تنبيه("الاسم:"+اسم);
}
}
// طريقة الاتصال
وظيفة الطالب (الاسم والعمر) {
Person.call(this,name,age);
}
// طريقة التطبيق
وظيفة المعلم (الاسم، الحب) {
Person.apply(this,[name,love]);
//Person.apply(this,arguments); // نفس تأثير الجملة السابقة، الحجج
}
// أوجه التشابه والاختلاف بين المكالمة والتطبيق:
//1، المعلمة الأولى هي نفسها، وتشير إلى الكائن الحالي
//2، المعلمة الثانية مختلفة: الاستدعاء عبارة عن قائمة معلمات واحدة تلو الأخرى؛ التطبيق عبارة عن مصفوفة (يمكن أيضًا استخدام الوسائط)
var per=new Person("Wufenglou",25,"Wei Yingping"); //الإخراج: "Wufenglou"
لكل.say();
var stu=new Student("Cao Yu",18);//الإخراج: "Cao Yu"
stu.say();
var Tea=new teacher("Qin Jie",16);//الإخراج: "Qin Jie"
الشاي.say();
</script>
</الجسم>
</html></SPAN>
2. استخدام الاتصال والتقديم (مقدمة تفصيلية)
يمكن لكل من الاستدعاء والتطبيق في js تنفيذ الوراثة. الاختلاف الوحيد في المعلمة هو أن طريقة كتابة التطبيق المقابلة لـ func.call(func1,var1,var2,var3) هي: func.apply(func1,[var1,var2,var3]) .
شرح الاستدعاء في دليل JS:
انسخ رمز الكود كما يلي:
<SPAN style="FONT-SIZE: 18px">طريقة الاتصال
استدعاء أسلوب على كائن لاستبدال الكائن الحالي بكائن آخر.
استدعاء([thisObj[,arg1[, arg2[, [,.argN]]]]]])
المعلمة
thisObj
خياري. الكائن الذي سيتم استخدامه ككائن حالي.
arg1، arg2،، argN
خياري. سيتم تمرير سلسلة من معلمات الطريقة.
يوضح
يمكن استخدام أسلوب الاستدعاء لاستدعاء أسلوب نيابة عن كائن آخر. يقوم أسلوب الاستدعاء بتغيير سياق الكائن للدالة من السياق الأولي إلى الكائن الجديد المحدد بواسطة thisObj.
إذا لم يتم توفير المعلمة thisObj، فسيتم استخدام الكائن العمومي كـ thisObj. </سبان>
بكل بساطة، وظيفة هاتين الوظيفتين هي في الواقع تغيير المؤشر الداخلي للكائن، أي تغيير المحتوى الذي يشير إليه هذا الكائن. يكون هذا مفيدًا أحيانًا في برمجة js الموجهة للكائنات. لنأخذ التطبيق كمثال للحديث عن الدور المهم لهاتين الوظيفتين في JS. يحب:
انسخ رمز الكود كما يلي:
<SPAN style = "FONT-SIZE: 18px"> وظيفة الشخص (الاسم، العمر) {// تحديد فئة
this.name=name;
this.age=age;
this.sayhello=function(){alert(this.name)};
}
وظيفة الطباعة () {// عرض سمات الفئة
this.funcName="Print";
this.show=function(){
فار msg=[];
ل(مفتاح فار في هذا){
إذا (نوع (هذا [المفتاح])! = "وظيفة") {
msg.push([key,://,this[key]].join(""));
}
}
تنبيه(msg.join(" "));
};
}
وظيفة الطالب (الاسم، العمر، الصف، المدرسة) {//فئة الطالب
Person.apply(this,arguments); // المزايا التي تتفوق على المكالمة
Print.apply(this,arguments);
this.grade=grade;
this.school=school;
}
var p1=new Person("Bu Kaihua",80);
p1.sayhello();
var s1=new Student("Bai Yunfei",40,9,Yuelu Academy");
s1.show();
s1.sayhello();
تنبيه (s1.funcName)؛</SPAN>
بالإضافة إلى ذلك، تلعب وظيفة Function.apply() دورًا بارزًا في تحسين أداء البرنامج:
لنبدأ بالدالة Math.max(). يمكن أن يتبع Math.max أي عدد من المعلمات، وفي النهاية يُرجع الحد الأقصى للقيمة بين جميع المعلمات.
على سبيل المثال
انسخ رمز الكود كما يلي:
<SPAN style="FONT-SIZE: 18px">alert(Math.max(5,8)); //8
تنبيه(Math.max(5,7,9,3,1,6)); //9
// لكن في كثير من الحالات، نحتاج إلى العثور على العنصر الأكبر في المصفوفة.
var arr=[5,7,9,1];
//alert(Math.max(arr)); // هذا لا يعمل. نان
//اكتبها هكذا
الدالة getMax(arr){
var arrLen=arr.length;
for(var i=0,ret=arr[0];i<arrLen;i++){
ret=Math.max(ret,arr[i]);
}
عودة متقاعد؛
}
تنبيه (getMax (arr))؛ //9
// قم بالتبديل للتطبيق، يمكنك الكتابة بهذه الطريقة
الدالة getMax2(arr){
return Math.max.apply(null,arr);
}
تنبيه (getMax2 (arr))؛
// قطعتا التعليمات البرمجية تحققان نفس الغرض، لكن getMax2 أنيق وفعال وأكثر إيجازًا.
// مثال آخر هو طريقة الدفع للمصفوفة.
فار arr1=[1,3,4];
var arr2=[3,4,5];
// إذا أردنا توسيع arr2، فقم بإلحاق arr1 واحدًا تلو الآخر، وأخيرًا دع arr1=[1,3,4,3,4,5]
من الواضح أن //arr1.push(arr2) لا يعمل. لأن القيام بذلك سيحصل على [1,3,4,[3,4,5]]
// يمكننا فقط استخدام حلقة للدفع واحدة تلو الأخرى (بالطبع يمكنك أيضًا استخدام arr1.concat(arr2)، لكن طريقة concat لا تغير arr1 نفسها)
var arrLen=arr2.length;
for(var i=0;i<arrLen;i++){
arr1.push(arr2[i]);
}
// منذ تقديم التطبيق، أصبحت الأمور بسيطة للغاية
Array.prototype.push.apply(arr1,arr2); // الآن arr1 هي النتيجة المرجوة</SPAN>