JavaScript中的繼承超全實現方式
1）物件冒充
紅色裡面三行程式碼最關鍵。相同方法會覆蓋
2）call方法方式《任何方法都有call()這個方法》
call 方法是Function物件中的方法，因此我們定義的每個函式都擁有該方法。可以通過函式名來呼叫call方法，call方法的第一個引數會被傳遞給函式中的this，從第二個引數開始，逐一賦給函式中的引數。
//使用call方式實現物件的繼承
function Parent(username){
this.username=username;
this.sayHello=function()
{
alert(this.username);
}
}
function Child(username,password){
Parent.call(this,username);
this.password=password;
this.sayWorld=function(){
alert(this.password);
}
}
var parent =new Parent("HFJEW");
var child= new Child("lisf","1233");
parent.sayHello();
child.sayHello();
child.sayWorld();
3）applay方法方式！call()方法的作用和 apply() 方法類似，區別就是call()方法接受的是引數列表，而apply()方法接受的是一個引數陣列，即第二引數是一個數組
可複製例子：
function Parent(username) {
this.username = username;
this.sayHello = function () {
console.log(`f-hello-${this.username}`);
alert(this.username);
}
}
//掛載在原型鏈的
//Parent.prototype.getMe = function () {
// console.log(`getme-parent-method`)
//}
function Child(username, password) {
Parent.apply(this, new Array(username))
this.password = password;
this.sayWorld = function () {
console.log(`c-world-${this.password}`)
alert(this.password);
}
}
//Child.prototype=new Parent()實現原型鏈的繼承的
var pare = new Parent("ZHASFNSF");
var child = new Child("dfsfd", "3424");
pare.sayHello(); // 這個列印的結果 f-hello-ZHASFNSF
child.sayHello();// 這個列印的結果 f-hello-dfsfd， 這裡說明child繼承了sayHello函式和username屬性，這裡的this.username = 'dfsfd'
child.sayWorld(); // 這個列印的結果c-world-3424
如果方法掛載在原型鏈上的話需要用到原型鏈的方法繼承。即如果給Parent物件增加一個這樣的方法：
Parent.prototype.getMe = function () {
console.log(`getme-parent-method`)
}；
到new出來child裡呼叫即：child.getMe()會報錯
如果想解決這個報錯就得使用下面方法5.混合方式了
4）通過原型鏈的方式實現物件繼承，其中最關鍵一句就是child1.prototype = new Parent1(),這一句就是實現了繼承的功能
5）混合方式《推薦》，這裡是原型鏈方式和call（）方法一起實現繼承,即屬性就使用apply()繼承，方法就使用原型鏈繼承。
建立物件，用原型擴充套件方法，繼承等的練習。實現測三角形面積和矩形面積和邊為多少。下面是例項：
<head>
<title></title>
</head>
<body>
<script>
//父物件
function Shape(height,width){
this.height=height;
this.width=width;
}
Shape.prototype.getArea=function(){
var height=this.height;
var width=this.width;
if(this.edg==3){
area= height * width / 2;
alert(area);
}else if(this.edg==4){
area= height * width ;
alert(area);
}else{
return false;
}
}
《！。。。。。。。。。！》
//子物件
function Trige(height,width){
Shape.call(this,height,width); //繼承父物件屬性
this.edg=3;
}
Trige.prototype= new Shape(); //繼承父物件方法
/*Trige.prototype.getArea=function(height,width){
var height=this.height;
var width=this.width;
area= height * width / 2;
alert(area);
}*/
Trige.prototype.getEdge=function(){
alert(this.edg);
}
function Fourige(height,width){
Shape.call(this,height,width);
this.edg=4;
}
Fourige.prototype= new Shape();
/*Fourige.prototype.getArea=function(height,width){
var height=this.height;
var width=this.width;
area= height * width;
alert(area);
}*/
Fourige.prototype.getEdge=function(){
alert(this.edg);
}
var tri= new Trige("2","4");
var four= new Fourige(4,8);
tri.getEdge();
tri.getArea();
four.getEdge();
four.getArea();
</script>
</body>
</html>
其他的方法
7）es6方法實現
class Human{
// 建構函式
constructor(props) {
this.name = props.name || '王二小'
}
eat () {
alert(this.name+'吃飯。。。')
}
}
class Man extends Human {
//建構函式
constructor(props) {
//呼叫實現父類的建構函式
super(props);
this.type = props.type || '工程師'
}
work () {
alert(this.name+'在工作')
}
}
var newMan = new Man({
name: '劉大山'
})
newMan.eat()
newMan.work()