js的原型繼承 -- prototype
先說下什么是prorotype？
eg: （prototype的繼承） //創建父類函數對象 function Personal(name, age) { this.name = name; //父類的私有屬性 this.age = age; this.house = ['北京', '上海'] } Personal.prototype.run = function() { //給父類原型動態添加方法 alert('原型方法：' + this.name + ' is running!'); } var per = new Personal('小白', 24) per.run() //打印 --> 原型方法：小白 is running! //創建子類函數對象 function Boy() {} Boy.prototype = new Personal('小黑', 19) //子類繼承父類的所有屬性和方法 Boy.prototype.source = 100 //給子類添加原型屬性 Boy.prototype.printSource = function() { //給子類添加方法 alert(this.name + '的原型方法printSouce打印成績為：' + this.source) //小黑的原型方法printSouce打印成績為：100 } Boy.prototype.run() //打印 --> 原型方法：小黑 is running! var boys = new Boy() boys.printSource() console.log(boys, '--boys---') //打印 -->19, 小黑, 100 (這里會沿著prototype向上查找到Personal的屬性)以下是關于prototype繼承需要注意的點：
1.如果父類中有引用類型的屬性：Array，Object等。子類繼承了這些屬性，并嘗試改變的話，會影響到父類的屬性。
//創建另外一個實例1： var boys1 = new Boy() boys1.house.push('深圳')//打印這兩個實例： console.log(boys, boys1)
可以看出來，當屬性為引用類型時，只要有一個實例的屬性做了操作，所有的實例都會受到影響。
2.該方式導致 Boy.prototype.constructor 被重寫，它指向的是 Personal 而非 Boy。因此你需要手動將 Boy.prototype.constructor 指回 Boy。
Boy.prototype = new Personal();Boy.prototype.constructor === Personal; // true// 重寫 Boy.prototype 中的 constructor 屬性，指向自己的構造函數 BoyBoy.prototype.constructor = Boy;
3.因為 Boy.prototype = new Personal(); 重寫了 Boy 的原型對象，所以 printSource 放在重寫原型對象之前會被覆蓋掉，因此給子類添加原型方法必須在替換原型之后（eg是沒有被覆蓋的）。
function Boy() {}Boy.prototype = new Personal();// 給子類添加原型方法必須在替換原型之后Boy.prototype.printSource = function() { console.log('printSource~');};4.創建 boys 實例時無法向父類的構造函數傳參，也就是無法初始化 source屬性。因此：只能創建實例之后再修改父類的屬性。
const boys = new Boy();// 只能創建實例之后再修改父類的屬性boys.source = 100;
apply()、call()方法的繼承
了解下apply()、call()方法
1.apply()、call()的用法：
obj.call(thisObj, arg1, arg2, ...);obj.apply(thisObj, [arg1, arg2, ...]);
obj是父級，thisObj是子級；第二個參數apply可以接收一個數組，而call只能是每項逐個接收。
2.apply和call 本來就是為了擴展函數的作用域而生的，換句話說就是為了改變this的指向存在的。
3.當一個object沒有某種方法，但是其他的有，我們可以借助call和apply來用其他對象的方法來做操作，也可以傳參數。
//eg:function Personal(name, sex) { this.name = name; this.sex = sex; this.say = function (){ alert('姓名：' + this.name + ';性別：' + this.sex) } } const per = new Personal('Allan', '男') per.say(); //apply()方法實現： function Girls(name, sex) { Personal.apply(this, [name, sex]); //Person.apply(this,arguments); //跟上句一樣的效果，arguments //Print.apply(this,arguments); //還可以實現繼承多個父類，但是原型 prototype只能繼承一個父類！?。∏杏? } const girls1 = new Girls('Lucy', '女') girls1.say(); //call()實現： function Boy(name, sex) { Personal.call(this, name, sex); } const boys = new Boy('Barry', '男'); boys.say() //總結：
以上所述是小編給大家介紹的js的繼承方法小結詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！
新聞熱點
疑難解答
