JS的繼承和使用方法

js中對象繼承

1.js原型（prototype）實作繼承，所謂的原型鍊繼承

function Person(name,age){  
        this.name=name;  
        this.age=age;  
    }  
    Person.prototype.sayHello=function(){  
        alert("使用原型得到Name："+this.name);  
    }  
    var per=new Person("豔傑",21);  
    per.sayHello(); //輸出：使用原型得到Name:豔傑  


    function Student(){}  
        Student.prototype=new Person("陶濤",21);  
        // var stu=new Student();  
        Student.prototype.grade=5;  
        Student.prototype.intr=function(){  
            alert(this.grade);  
    }  
    var stu=new Student();  
        stu.sayHello();//輸出：使用原型得到Name:陶濤  
        stu.intr();//輸出：5  
           

這種原型繼承的方式存在缺點

缺點：

這種方法缺點比較明顯，看起來很不直覺，而且子類的方法不能優先于父類方法出現，通過new調用時，不能直接調用父類的構造函數而是要調用子類

2.構造函數實作繼承

function  Parent(name){  
            this.name=name;  
            this.sayParent=function(){  
                alert("Parent:"+this.name);  
            }  
        }  
    function  Child(name,age){  
        this.tempMethod=Parent;  
        this.tempMethod(name);  
        this.age=age;  
        this.sayChild=function(){  
            alert("Child:"+this.name+",age:"+this.age);  
        }  
    }  
    var parent=new Parent();  
        parent.sayParent("州林"); //輸出：“Parent:州林  
    var child=new Child(); 
        child.sayChild("二狗子",24);  //輸出：“Parent:二狗子”  
           

構造函數的繼承方法在通過new調用時，不能直接調用父類的構造函數而是要調用子類。

3.call , apply實作繼承

function  Person(name,age,love){  
        this.name=name;  
        this.age=age;  
        this.love=love;  
        this.say=function say(){  
            alert("姓名："+name+',年齡:'+age+',love:'+love);
        }  
    }  
    //call方式  
    function student(name,age,love){  
        Person.call(this,name,age,love);  
    }  
    //apply方式  
    function teacher(name,age,love){  
        Person.apply(this,[name,age,love]);  
        //Person.apply(this,arguments); //跟上句一樣的效果，arguments  
    }  

    var per=new Person("回首",25,"濤"); //輸出：“武鳳樓”  
        per.say();  
    var stu=new student("鄭志建",18,'我');//輸出：“曹玉”  
        stu.say();  
    var tea=new teacher("張寶",16,'小黑裙');//輸出：“秦傑”  
        tea.say();  


    //call與aplly的異同：  
    //1,第一個參數this都一樣,指目前對象  
    //2,第二個參數不一樣：call的是一個個的參數清單；apply的是一個數組（arguments也可以）  
将this綁定在Person構造函數上運作，但是會導緻沒有自己的原型對象，無法共享原型的方法和屬性。
           

4.class繼承 extends實作

ES6之後有的方法，比較直覺，也符合邏輯

function Student(name) {
   this.name = name;
}
Student.prototype.hello = function () {
   alert('Hello, ' + this.name + '!');
}

class Student {  //建立
   constructor(name) {
       this.name = name;
   }
   hello() {
       alert('Hello, ' + this.name + '!');
   }
}

var xiaoming = new Student('小明');
xiaoming.hello();

class PrimaryStudent extends Student {//繼承
   constructor(name, grade) {
       super(name); // 記得用super調用父類的構造方法!
       this.grade = grade;
   }

   myGrade() {
       alert('I am at grade ' + this.grade);
   }
}
var xiaohong = new PrimaryStudent('小張','三年級')

xiaohong.hello()
xiaohong.myGrade()