js使用prototype,call/apply實現繼承
阿新 • • 發佈:2019-02-19
1、原型方式
- 可以動態的給所需物件設定屬性和方法 ;
- 子類繼承父類,可以使用和享有父親的所有屬性和方法。
<html> <body> <script type="text/javascript"> function Person(name,age){ // 父類 this.name=name; //父類的私有屬性 this.age=age; } Person.prototype.sayHello=function(){ //用處1,動態的給父類Person增加sayHello方法 alert("使用原型得到Name:"+this.name); } var per=new Person("馬小倩",21); per.sayHello(); //輸出:使用原型得到Name:馬小倩 --------------------------------------------- function Student(){} //當做子類 Student.prototype=new Person("洪如彤",21); //用處2:子類Student繼承父類Person的所有方法和屬性 var stu=new Student(); //然後建立子烈的例項 Student.prototype.grade=5; //再給子類動態新增grade屬性 Student.prototype.intr=function(){ //再給子類動態新增intr方法 alert(this.grade); } stu.sayHello();//使用原型得到Name:洪如彤 。使用從父類繼承的sayHello()方法 stu.intr();//5 。使用給子類動態新增的intr方法 </script> </body> </html>
2、call和apply:
先看下語法
obj.call(thisObj, arg1, arg2, ...);
obj.apply(thisObj, [arg1, arg2, ...]);
解釋:把obj的this繫結到thisObj上,這時候thisObj具備了(或者說繼承了)obj的屬性和方法,然後在thisObj的執行環境裡面執行obj的屬性和方法,繫結後會立即執行函式。
- apply和call 本來就是為了擴充套件函式的作用域而生的,換句話說就是為了改變this的指向存在的
- 當一個object沒有某種方法,但是其他的有,我們可以藉助call和apply來用其他物件的方法來做操作,也可以傳引數
<body> <script type="text/javascript"> function Person(name,age,love){ //原父類方法和私有屬性以及方法 this.name=name; this.age=age; this.love=love; this.say=function say(){ alert("姓名:"+name); } } //call方式 function student(name,age){ // 可以理解為在student的執行環境裡執行person的屬性和方法 Person.call(this,name,age); } //apply方式 function teacher(name,love){ //可以理解為在student的執行環境裡執行person的屬性和方法 Person.apply(this,[name,love]); //Person.apply(this,arguments); //跟上句一樣的效果,arguments // Print.apply(this,arguments); //還可以實現繼承多個父類,但是原型 prototype只能繼承一個父類!!!切記 } var per=new Person("武鳳樓",25,"魏熒屏"); //輸出:“武鳳樓” per.say(); var stu=new student("曹玉",18);//輸出:“曹玉” stu.say(); var tea=new teacher("秦傑",16);//輸出:“秦傑” tea.say(); </script> </body>
總結:
1)call和apply可以實現多繼承,一個子類可以繼承多個父類,但是prototype只能有有一個父類;
2)call和apply,可以膚淺理解為在子執行環境中執行父類的方法和屬性;
3)prototype可以動態的給物件增加屬性和方法;