1. การสืบทอดวัตถุใน js
มีสามวิธีในการสืบทอดใน js
1.js ต้นแบบ (ต้นแบบ) ดำเนินการสืบทอด
คัดลอกรหัสรหัสดังต่อไปนี้:
<SPAN style="BACKGROUND-COLOR: #ffffff"><SPAN style="FONT-SIZE: 18px"><html>
<ร่างกาย>
<script type="text/javascript">
ฟังก์ชั่น บุคคล(ชื่อ,อายุ){
นี้.ชื่อ=ชื่อ;
this.age=อายุ;
-
Person.prototype.sayHello=function(){
alert("ใช้ต้นแบบเพื่อรับชื่อ: "+this.name);
-
var per=คนใหม่("Ma Xiaoqian",21);
per.sayHello(); //Output: ใช้ต้นแบบเพื่อรับชื่อ: Ma Xiaoqian
ฟังก์ชั่น นักเรียน(){}
Student.prototype=คนใหม่("หง รูทอง",21);
var stu=นักเรียนใหม่();
Student.prototype.grade=5;
Student.prototype.intr=function(){
การแจ้งเตือน (this.grade);
-
stu.sayHello();//Output: ใช้ต้นแบบเพื่อรับชื่อ: Hong Rutong
stu.intr();//เอาต์พุต: 5
</สคริปต์>
</ร่างกาย>
</html></SPAN></SPAN>
2. ตัวสร้างดำเนินการสืบทอด
คัดลอกรหัสรหัสดังต่อไปนี้:
<SPAN style="FONT-SIZE: 18px"><html>
<ร่างกาย>
<script type="text/javascript">
ฟังก์ชั่นผู้ปกครอง (ชื่อ) {
นี้.ชื่อ=ชื่อ;
this.sayParent=ฟังก์ชัน(){
alert("ผู้ปกครอง:"+this.name);
-
-
ฟังก์ชั่น Child(ชื่อ,อายุ){
this.tempMethod=พาเรนต์;
this.tempMethod (ชื่อ);
this.age=อายุ;
นี้.sayChild=ฟังก์ชั่น(){
alert("เด็ก:"+this.name+"อายุ:"+this.age);
-
-
var parent=ผู้ปกครองใหม่("เจียง เจี้ยนเฉิน");
parent.sayParent(); //ผลลัพธ์: "ผู้ปกครอง: Jiang Jianchen"
var child=new Child("李明",24); //Output: "Child: อายุ:24"
เด็ก.sayChild();
</สคริปต์>
</ร่างกาย>
</html></SPAN>
3.เรียกประยุกต์ใช้สืบทอด
คัดลอกรหัสรหัสดังต่อไปนี้:
<SPAN style="FONT-SIZE: 18px"><html>
<ร่างกาย>
<script type="text/javascript">
ฟังก์ชั่น บุคคล(ชื่อ อายุ ความรัก){
นี้.ชื่อ=ชื่อ;
this.age=อายุ;
นี่.รัก=รัก;
this.say=function พูด(){
alert("ชื่อ:"+ชื่อ);
-
-
// วิธีการโทร
นักศึกษาทำหน้าที่(ชื่อ,อายุ){
Person.call(นี่ ชื่อ อายุ);
-
//ใช้วิธีการสมัคร
ครูสอนพิเศษ(ชื่อ,ความรัก){
Person.apply(นี่,[ชื่อ,ความรัก]);
//Person.apply(this,arguments); //มีผลเหมือนกับประโยคก่อนหน้า ข้อโต้แย้ง
-
//ความเหมือนและความแตกต่างระหว่างการโทรและapy:
//1 พารามิเตอร์ตัวแรกจะเหมือนกัน โดยอ้างอิงถึงวัตถุปัจจุบัน
//2 พารามิเตอร์ที่สองแตกต่างกัน: การเรียกเป็นรายการพารามิเตอร์ทีละรายการ ใช้เป็นอาร์เรย์ (สามารถใช้อาร์กิวเมนต์ได้)
var per=คนใหม่ ("Wufenglou",25,"Wei Yingping"); //ผลลัพธ์: "Wufenglou"
ต่อพูด();
var stu=นักเรียนใหม่("Cao Yu",18);//ผลลัพธ์: "Cao Yu"
สตู.เซย์();
var tea=ครูใหม่("Qin Jie",16);//ผลลัพธ์: "Qin Jie"
ชาพูด();
</สคริปต์>
</ร่างกาย>
</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]]]]])
พารามิเตอร์
นี้Obj
ไม่จำเป็น. วัตถุที่จะใช้เป็นวัตถุปัจจุบัน
arg1, arg2, , argN
ไม่จำเป็น. ลำดับของพารามิเตอร์วิธีการจะถูกส่งผ่าน
แสดงให้เห็น
วิธีการโทรสามารถใช้เพื่อเรียกวิธีการในนามของวัตถุอื่นได้ วิธีการโทรเปลี่ยนบริบทวัตถุของฟังก์ชันจากบริบทเริ่มต้นเป็นวัตถุใหม่ที่ระบุโดย thisObj
หากไม่ได้ระบุพารามิเตอร์ thisObj อ็อบเจ็กต์ Global จะถูกใช้เป็น thisObj </SPAN>
พูดง่ายๆ ก็คือ หน้าที่ของทั้งสองฟังก์ชันนี้คือการเปลี่ยนตัวชี้ภายในของวัตถุ กล่าวคือ เปลี่ยนเนื้อหาที่วัตถุนี้ชี้ไป บางครั้งสิ่งนี้มีประโยชน์ในการเขียนโปรแกรมเชิงวัตถุ js ลองใช้เป็นตัวอย่างเพื่อพูดถึงบทบาทสำคัญของทั้งสองฟังก์ชันใน js ชอบ:
คัดลอกรหัสรหัสดังต่อไปนี้:
<SPAN style="FONT-SIZE: 18px"> ฟังก์ชั่น Person(name,age){/ //กำหนดคลาส
this.name=name; //ชื่อ
this.age=age; //อายุ
this.sayhello=function(){การแจ้งเตือน(this.name)};
-
function Print(){/ //แสดงแอตทริบิวต์ของคลาส
this.funcName = "พิมพ์";
นี้.แสดง=ฟังก์ชั่น(){
var msg=[];
สำหรับ (คีย์ var ในนี้) {
ถ้า (typeof (นี้ [คีย์])! = "ฟังก์ชั่น") {
msg.push([key,///,this[key]].join(""));
-
-
alert(msg.join(" "));
-
-
ฟังก์ชั่น Student(ชื่อ อายุ เกรด โรงเรียน) //Student class
Person.apply(นี่คือข้อโต้แย้ง); // ข้อดีมากกว่าการโทร
Print.apply (นี่คือข้อโต้แย้ง);
this.grade=grade; //เกรด
this.school=school; //school
-
var p1=บุคคลใหม่("Bu Kaihua",80);
p1.สวัสดี();
var s1=new Student("ไป๋หยุนเฟย",40,9,"Yuelu Academy");
s1.show();
s1.สวัสดี();
alert(s1.funcName);</SPAN>
นอกจากนี้ Function.apply() ยังมีบทบาทสำคัญในการปรับปรุงประสิทธิภาพของโปรแกรม:
เริ่มจากฟังก์ชัน Math.max() กันก่อน โดยสามารถตามหลัง Math.max ด้วยพารามิเตอร์จำนวนเท่าใดก็ได้ และสุดท้ายจะส่งกลับค่าสูงสุดจากพารามิเตอร์ทั้งหมด
ตัวอย่างเช่น
คัดลอกรหัสรหัสดังต่อไปนี้:
<SPAN style="FONT-SIZE: 18px">แจ้งเตือน(Math.max(5,8)); //8
การแจ้งเตือน(Math.max(5,7,9,3,1,6)); //9
//แต่ในหลายกรณี เราจำเป็นต้องค้นหาองค์ประกอบที่ใหญ่ที่สุดในอาร์เรย์
วาร์ arr=[5,7,9,1];
//alert(Math.max(arr)); // สิ่งนี้ใช้ไม่ได้ น่าน
//เขียนแบบนี้.
ฟังก์ชั่น getMax (arr) {
var arrLen=arr.ความยาว;
สำหรับ(var i=0,ret=arr[0];i<arrLen;i++){
ret=Math.max(ret,arr[i]);
-
กลับมาอีกครั้ง;
-
alert(getMax(arr)); //9
//สลับไปใช้เขียนได้ประมาณนี้ครับ
ฟังก์ชั่น getMax2 (arr) {
กลับ Math.max.apply (null, arr);
-
alert(getMax2(arr)); //9
//โค้ดทั้งสองชิ้นบรรลุจุดประสงค์เดียวกัน แต่ getMax2 นั้นสวยงาม มีประสิทธิภาพ และกระชับมากกว่ามาก
//อีกตัวอย่างหนึ่งคือวิธีการพุชของอาร์เรย์
วาร์ arr1=[1,3,4];
วาร์ 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.ความยาว;
สำหรับ(var i=0;i<arrLen;i++){
arr1.push(arr2[i]);
-
//นับตั้งแต่เปิดตัว Apply สิ่งต่างๆ ก็กลายเป็นเรื่องง่าย
Array.prototype.push.apply(arr1,arr2); //ตอนนี้ arr1 คือผลลัพธ์ที่ต้องการ</SPAN>